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' -%}

{% 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 -%}

{% if config.B2B -%}

<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;
  }
}

.to-download-table-ui{

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>

<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' -%}

{% if customer.CompanyErpId <= 0 -%}

{% else %}

<div class="column-ui">{{ translations.FileName }}</div>

<div class="column-ui">{{ translations.Downloads }}</div>

</div>

<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>

<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>

{% include 'customer-profile/pagination.html' -%}

</div>

{% endif -%}

</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');
                        });
                    }

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

$.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&lt;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);
});

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

Lista plików w Strefie klienta w szablonie Szafir

Lista plików w strefie klienta w szablonie Szafir

Czy ten artykuł był pomocny?

Społeczność Comarch

Oferta e-Commerce

Przydatne linki

Kontakt