Lista plików w Strefie klienta w szablonie Szafir

Lista plików w strefie klienta w szablonie Szafir

W tym artykule dowiesz się jak dodać listę plików w strefie klienta w swoim szablonie.

Wskazówka
W tym artykule trzeba będzie wprowadzać zmiany w plikach js i css. Z tego artykułu dowiesz się jak je minifikować

Uwaga
Zapis nazwa_folderu/nazwa_pliku.rozszerzenie oznacza, że aby znaleźć dany plik należy udać się do folderu o nazwie podanej przed ukośnikiem. Przykładowo: order/thx.html oznacza plik thx.html w folderze order

Pierwszym krokiem będzie dodanie kodu w pliku customer-profile/pagination.html. W tym celu za pomocą narzędzia wyszukiwania znajdź frazę {% endif -%}, a linijkę wyżej wklej następujący kod:
{% elseif page.QueryString contains 'to-download-erp' -%}
{% assign buttonClass = 'to-download-button-lq' -%}
{% assign inputClass = 'to-download-input-lq' -%}
{% assign urlType = 'to-download-erp=true' -%}

Następnie proszę otworzyć plik customer-profile/menu.html, następnie wyszukać w nim za pomocą narzędzia wyszukiwania frazę <li class=”load-erp-data-lq i zastąpić znalezioną linijkę następującą:
<li class="load-erp-data-lq {% unless page.QueryString contains 'tab=invoices' or page.QueryString contains 'tab=executed-complaints' or page.QueryString contains 'tab=active-complaints' or page.QueryString contains 'tab=sor' or page.QueryString contains 'tab=wm' or page.QueryString contains 'tab=to-download' or page.QueryString == '?tab=discounts' -%} active-lq {% endunless -%}" data-template="customer-profile/orders/orders.html">
Również w tym samym pliku proszę  wyszukać frazę {% if settings.discountsPresentationInCustomerProfileInPromotionsTab == 'yes’ %} a bezpośrednio nad nią wkleić następujący kod:
{% if config.B2B -%}
<li class="load-erp-data-lq {% if page.QueryString contains 'tab=to-download' -%} active-lq {% endif -%}" data-template="customer-profile/to-download/to-download.html">
<i class="ti-download"></i> {{ translations.Downloads }}
</li>
{% endif -%}

Następnym krokiem będzie dodanie odpowiednich styli. W tym celu przejdź do pliku scss/globals/_globals2.scss, a na samym końcu tego pliku wklej:
.to-download-table-ui{
a{
color: $primaryColorFont;
}
.column-ui{
width: 50%;
vertical-align: middle;
}
}

Teraz należy przejść do folderu customer-profile, w nim utworzyć folder o nazwie to-download. W nowo utworzonym folderze proszę utworzyć plik to-download.html, a w nim umieścić następujący kod:
<nav class="customer-profile-header-menu-ui">
<ul>
<li><a href="{{ page.BaseHref }}{{ config.DefinedPages.Home }}"><i class="ti-angle-left"></i> <span class="no-on-mobile-ui">{{ translations.BackToShopping }}</span></a></li>
<li class="active-ui only-text-ui">{{ translations.Downloads }}</li>
</ul>
</nav>
{% include 'customer-profile/menu.html' -%}
<div class="with-column-ui">
<div class="container-ui">
{% if customer.CompanyErpId <= 0 -%}
{{ translations.AccessDenied }}
{% else %}
<div class="erp-data-ui erp-data-lq">
<div class="to-download-table-ui to-download-table-lq table-lq" data-sp="CDN.eshop_GetCustomerFiles">
<div class="column-name-ui">
<div class="column-ui">{{ translations.FileName }}</div>
<div class="column-ui">{{ translations.Downloads }}</div>
</div>
<div class="row-ui" rv-each-o="List">
<a rv-href="o.UrlValue" rv-if="o.IsUrl" target="_blank">
<div class="column-ui">
<i class="file-to-download-icon-lq icon-ui" rv-data-extension="o.Extension"></i> { o.Name }
</div>
<div class="column-ui"><i class="ti-download"></i> {{ translations.DownloadFile }}</div>
</a>
<div class="download-file-from-to-download-lq" rv-data-id="o.ID" rv-data-extension="o.Extension" rv-unless="o.IsUrl">
<div class="column-ui">
<i class="file-to-download-icon-lq icon-ui" rv-data-extension="o.Extension"></i> { o.Name }
</div>
<div class="column-ui"><i class="ti-download"></i> {{ translations.DownloadFile }}</div>
</div>
</div>
</div>
{% include 'customer-profile/pagination.html' -%}
</div>
{% endif -%}
</div>
</div>

Kolejnym krokiem jest dodanie kodu JavaScript. W tym celu przejdź do pliku js/init-ui2.js, przy pomocy narzędzia wyszukiwania znajdź frazę function getData(). Należy usunąć cały kod począwszy od znalezionej linii, aż do klamerki (włącznie) znajdującej się dwie linijki pod frazą div.find(’.pager-lq’).css(’display’, 'inline-flex’);.

W miejsce usuniętego kodu proszę wkleić:
$.fn.erpData = function () {
return this.each(function () {
var div = $(this);
var table = div.children('.table-lq');
if(!table.hasClass('to-download-table-lq')){
var dateTo = $('.get-erp-data-lq[name=dateTo]');
}

var spin = $('.ng-spinner-lq');
var sp = table.data('sp');
var ds = { List: null, Pager: null, PageNo: 1 };
rivets.bind(div, ds);

function getDateStr(d) {
return new Date((d - d.getTimezoneOffset() * 60000)).toISOString().slice(0, -14);
}

function getDateEl(el) {
try {
var val = el.val();
if (val == '') return null;
var d = new Date(val);
el.val(getDateStr(d));
return getDateStr(d).replace(/-/g, '');
} catch (ex) {
el.val('');
return null;
}
}

function getData() {
spin.css('visibility', 'visible');
if($('[type=date]').val() == ''){
var date = new Date().toISOString().slice(0, -14);
$('[type=date]').val(date);
}

if(!table.hasClass('to-download-table-lq')){
var dt = getDateEl(dateTo);
var parameters = { DateTo: dt, LanguageId: __lngId, PageNo: ds.PageNo }
} else {
var parameters = { LanguageId: __lngId, PageNo: ds.PageNo }
}

$.post(null, { __action: 'sync/exec', __csrf: __CSRF, worker: 'erpData', message: JSON.stringify({ command: sp, parameters: parameters }) }, function (d) {
spin.css('visibility', 'hidden');
if (!d.action.Result) {
return;
}

var r = d.action.Object[0];
ds[r.Name] = r.Result;
ds.Pager = Array.apply(null, Array(r.PageCount)).map(function (_, i) { return { No: i + 1, Selected: ds.PageNo == i + 1 }; });

if(r.PageCount > 1){
ds.FewPages = true;
}

var elements = r.Result;
var elementsQuantity = elements.length;

for(var i=0; i<elementsQuantity; i++){
if(elements[i].DaysAfterDueDate > 0 && (elements[i].ToPay > 0 || elements[i].ToReturn < 0)){
elements[i].DaysAfterExists = true;
}
if(elements[i].ToPay > 0){
elements[i].ToPayExists = true;
$('.no-to-pay-lq').remove();
$('.to-pay-column-lq').removeClass('hidden-lq');
}
if(elements[i].ToReturn > 0){
elements[i].ToReturnExists = true;
$('.no-to-pay-lq').remove();
$('.to-pay-column-lq').removeClass('hidden-lq');
}
if(elements[i].DeliveryStatus == 0){
elements[i].DeliveryStatus0 = true;
}
if(elements[i].DeliveryStatus == 1){
elements[i].DeliveryStatus1 = true;
}
if(elements[i].DeliveryStatus == 2){
elements[i].DeliveryStatus2 = true;
}
if(elements[i].DeliveryStatus == 3){
elements[i].DeliveryStatus3 = true;
}
if(elements[i].DeliveryStatus == 4){
elements[i].DeliveryStatus4 = true;
}
if(elements[i].PaymentStatus == 0){
elements[i].PaymentStatus0 = true;
}
if(elements[i].PaymentStatus == 1){
elements[i].PaymentStatus1 = true;
}
if(elements[i].PaymentStatus == 2){
elements[i].PaymentStatus2 = true;
}
if(elements[i].DeliveryStatus == 0 || elements[i].DeliveryStatus == 1 || elements[i].DeliveryStatus == 2 || elements[i].DeliveryStatus == 3 || elements[i].DeliveryStatus == 4 || elements[i].PaymentStatus == 0 || elements[i].PaymentStatus == 1 || elements[i].PaymentStatus == 2){
elements[i].StatusExists = true;
}
if(elements[i].DeliveryStatus == 0 || elements[i].DeliveryStatus == 1 || elements[i].DeliveryStatus == 2 || elements[i].DeliveryStatus == 3 || elements[i].DeliveryStatus == 4){
elements[i].DeliveryStatusExists = true;
}
if(elements[i].PaymentStatus == 0 || elements[i].PaymentStatus == 1 || elements[i].PaymentStatus == 2){
elements[i].PaymentStatusExists = true;
}
if(elements[i].DeliveryStatusExists && elements[i].PaymentStatusExists){
elements[i].DeliveryAndPaymentStatusExists = true;
}
}

div.find('.page-count-lq').text(r.PageCount);
if(ds.PageNo == r.PageCount){
$('.pager-lq .next-lq').attr('disabled', true).removeClass('btn-gray-ui');
} else {
$('.pager-lq .next-lq').attr('disabled', false).addClass('btn-gray-ui');
}
if(ds.PageNo == 1){
$('.pager-lq .prev-lq').attr('disabled', true).removeClass('btn-gray-ui');
} else {
$('.pager-lq .prev-lq').attr('disabled', false).addClass('btn-gray-ui');
}

$('.pager-lq [type=number]').val(ds.PageNo);

if(table.hasClass('to-download-table-lq')){
$('.file-to-download-icon-lq').each(function(){
var extension = $(this).data('extension');
if(extension == 'jfif' || extension == 'jpe' || extension == 'jpeg' || extension == 'jpg'){
var icon = 'ti-image';
} else if(extension == 'csv' || extension == 'txt'){
var icon = 'ti-receipt';
} else if(extension == 'doc' || extension == 'docx' || extension == 'odt'){
var icon = 'ti-write';
} else if(extension == 'xls' || extension == 'xlsx' || extension == 'ods'){
var icon = 'ti-bar-chart';
} else if(extension == 'zip' || extension == 'rar' || extension == '7zip'){
var icon = 'ti-archive';
} else if(extension == 'pdf'){
var icon = 'ti-agenda';
} else {
var icon = 'ti-file';
}
$(this).addClass(icon);
});
}

table.show();
div.find('.pager-lq').css('display', 'inline-flex');
});
}

W tym samym pliku proszę wyszukać frazę function rivetsPropertyCheck(bindedObj, property), a bezpośrednio nad nią dodać kod:
function downloadFileFromToDownload(e) {
var id = $(e.currentTarget).data('id');
var extension = $(e.currentTarget).data('extension');
var fileDownloaded = false;
if(window.downloadedFiles){
for(i=0; i<window.downloadedFiles.length; i++){
if(window.downloadedFiles[i].id == id){
fileDownloaded = true;
var blob = window.downloadedFiles[i].blob;
}
}
}
if(fileDownloaded){
var a = document.getElementById('file-'+id);
var url = window.URL.createObjectURL(blob);
a.href = url;
a.click();
window.URL.revokeObjectURL(url);
} else {
var fileData = {
__csrf:__CSRF,
__action:'sync/exec',
worker:'erpData',
message:JSON.stringify({command:'CDN.eShop_GetCustomerBinaryFile', parameters:{'Id':id}})
};
$.post(null,fileData, function(d){
var file = d.action.Object[0][0];
var name = file.FileName+'.'+extension;
var binaryString = file.FileData;
var fileBytes = base64ToArrayBuffer(binaryString);
var blob = new Blob([fileBytes], {type: "octet/stream"});
var url = window.URL.createObjectURL(blob);
var a = document.createElement("a");
document.body.appendChild(a);
a.setAttribute("id", "file-"+id);
a.style = "display: none";
a.href = url;
a.download = name;
a.click();
window.URL.revokeObjectURL(url);
if(window.downloadedFiles){
window.downloadedFiles.push({id:id, blob:blob});
} else {
window.downloadedFiles = [{id:id, blob:blob}];
}
});
}
}

$('body').on('click', '.download-file-from-to-download-lq', function(e) {
downloadFileFromToDownload(e);
});

Następnie proszę dodać tłumaczenia. W sekcji Wygląd sklepu/ Ustawienia/ Tłumaczenia po kliknięciu w przycisk Dodaj należy wpisać Id tłumaczenia oraz Tekst, który będzie się wyświetlał w e-Sklepie. Zmiany należy zatwierdzić przyciskiem Dodaj.

  • Id: FileName — Tekst: Nazwa pliku
  • Id: DownloadFile — Tekst: Pobierz plik

 

 

Czy ten artykuł był pomocny?