Obsługa akcji Product/DeliveryCostGet

Spis treści

W tym artykule dowiesz się jak zmodyfikować swój szablon, aby obsłużyć akcję Product/DeliveryCostGet, w zamian za pole o nazwie DeliveryCost na obiekcie ze szczegółami towarów.

Dla kogo przeznaczona jest poniższa instrukcja i kiedy warto z niej skorzystać?

Akcja Product/DeliveryCostGet informuje o minimalnych kosztach dostawy dla wybranego towaru. W standardowych szablonach Comarch informacja ta prezentowana jest na szczegółach towaru.

Jeżeli chcesz prezentować informacje na temat minimalnych kosztów dostawy dla swoich towarów to zaktualizuj swój szablon do najnowszej wersji (zalecane) lub skorzystaj z poniższej instrukcji i dokonaj jego samodzielnej modyfikacji.

Topaz

W zależności od wybranego widoku szczegółów towaru instrukcja będzie się lekko różnić. Wspólnym dla wszystkich widoków jest:

Krok 1. W panelu administracyjnym przejdź do sekcji Wygląd sklepu/ Ustawienia/ Edytuj ustawienia zaawansowane/ Edytuj HML.

Obiekt product-details-1

Krok 2.W pliku elements/productDetails/product-details-1/html.js znajdź warunek {% if product.DeliveryCost != null and product.DeliveryCost > 0 -%} i usuń go wraz z całą jego zawartością a w jego miejsce wklej poniższy kod:


<div class="delivery-cost-container hidden">
    <span class="stock-label">{{ translations.Crt_Delivery }}: </span>
    <a aria-label="shippingUrl" href="{{config.DefinedPages.Shipping.Url}}">{{ translations.Sea_From | Downcase }} <span class="delivery-cost"></span> {{ currency }}</a>
</div>
<span class="line hidden">|</span>
<script>
    Number.prototype.format = function (n, x, s, c) {
        var re = '\\d(?=(\\d{' + (x || 3) + '})+' + (n > 0 ? '\\D' : '$') + ')',
        num = this.toFixed(Math.max(0, ~ ~n));
        return (c ? num.replace('.', c) : num).replace(new RegExp(re, 'g'), '$&' + (s || ','));
    }; 
    Number.prototype.toPrice = function () {
        return this.format(__decPlaces, 3, __decThoSep, __decSep);
    }
    $.get('', {__action:'Product/DeliveryCostGet', id: '{{product.Id}}' },function(res){
        if(res.action.Object.Cost > 0){
            $('.delivery-cost-container').removeClass('hidden');
            $('.delivery-cost-container').next().removeClass('hidden');
            $('.delivery-cost').text(res.action.Object.Cost.toPrice());
        }
    });
</script>

<span class="stock-label">{{ translations.Crt_Delivery }}: </span>

<a aria-label="shippingUrl" href="{{config.DefinedPages.Shipping.Url}}">{{ translations.Sea_From | Downcase }} <span class="delivery-cost"></span> {{ currency }}</a>

</div>

Number.prototype.format = function (n, x, s, c) {

var re = '\\d(?=(\\d{' + (x || 3) + '})+' + (n > 0 ? '\\D' : '$') + ')',

num = this.toFixed(Math.max(0, ~ ~n));

return (c ? num.replace('.', c) : num).replace(new RegExp(re, 'g'), '$&' + (s || ','));

};

Number.prototype.toPrice = function () {

return this.format(__decPlaces, 3, __decThoSep, __decSep);

}

$.get('', {__action:'Product/DeliveryCostGet', id: '{{product.Id}}' },function(res){

if(res.action.Object.Cost > 0){

$('.delivery-cost-container').removeClass('hidden');

$('.delivery-cost-container').next().removeClass('hidden');

$('.delivery-cost').text(res.action.Object.Cost.toPrice());

}

});

</script>

Obiekt product-details-2

Krok 2.W pliku elements/productDetails/product-details-2/html.js znajdź warunek {% if product.DeliveryCost != null and product.DeliveryCost > 0 -%} i usuń go wraz z całą jego zawartością a w jego miejsce wklej poniższy kod:


<div class="delivery-cost-container hidden">
    <span class="stock-label">{{ translations.Crt_Delivery }}: </span>
    <a aria-label="shippingUrl" href="{{config.DefinedPages.Shipping.Url}}">{{ translations.Sea_From | Downcase }} <span class="delivery-cost"></span> {{ currency }}</a>
</div>
<script>
    Number.prototype.format = function (n, x, s, c) {
        var re = '\\d(?=(\\d{' + (x || 3) + '})+' + (n > 0 ? '\\D' : '$') + ')',
        num = this.toFixed(Math.max(0, ~ ~n));
        return (c ? num.replace('.', c) : num).replace(new RegExp(re, 'g'), '$&' + (s || ','));
    }; 
    Number.prototype.toPrice = function () {
        return this.format(__decPlaces, 3, __decThoSep, __decSep);
    }
    $.get('', {__action:'Product/DeliveryCostGet', id: '{{product.Id}}' },function(res){
        if(res.action.Object.Cost > 0){
            $('.delivery-cost-container').removeClass('hidden');
            $('.delivery-cost').text(res.action.Object.Cost.toPrice());
        }
    });
</script>

<span class="stock-label">{{ translations.Crt_Delivery }}: </span>

<a aria-label="shippingUrl" href="{{config.DefinedPages.Shipping.Url}}">{{ translations.Sea_From | Downcase }} <span class="delivery-cost"></span> {{ currency }}</a>

</div>

Number.prototype.format = function (n, x, s, c) {

var re = '\\d(?=(\\d{' + (x || 3) + '})+' + (n > 0 ? '\\D' : '$') + ')',

num = this.toFixed(Math.max(0, ~ ~n));

return (c ? num.replace('.', c) : num).replace(new RegExp(re, 'g'), '$&' + (s || ','));

};

Number.prototype.toPrice = function () {

return this.format(__decPlaces, 3, __decThoSep, __decSep);

}

$.get('', {__action:'Product/DeliveryCostGet', id: '{{product.Id}}' },function(res){

if(res.action.Object.Cost > 0){

$('.delivery-cost-container').removeClass('hidden');

$('.delivery-cost').text(res.action.Object.Cost.toPrice());

}

});

</script>

Obiekt product-details-3

Krok 2.W pliku elements/productDetails/product-details-3/html.js znajdź warunek {% if product.DeliveryCost != null and product.DeliveryCost > 0 -%} i usuń go wraz z całą jego zawartością a w jego miejsce wklej poniższy kod:


<div class="productDetails-info--table__cell delivery-container hidden">
    <svg class="svgIcon productDetails-info--img__mobile productDetails-desktopHide">
        <use xlink:href="css/img/icons-sprite.svg#truck-light"></use>
    </svg>   
    <span class="productDetails-desktopHide"></span>
    <span class="productDetails-info--name">{{translations.Crt_Delivery}}</span>
    <a class="productDetails-info--value productDetails-info--value__extraColor" aria-label="shipping" href="{{config.DefinedPages.Shipping.Url}}">{{ translations.Sea_From | Downcase }} <span class="delivery-cost"></span> {{ currency }}</a>
</div>
<script>
    Number.prototype.format = function (n, x, s, c) {
        var re = '\\d(?=(\\d{' + (x || 3) + '})+' + (n > 0 ? '\\D' : '$') + ')',
        num = this.toFixed(Math.max(0, ~ ~n));
        return (c ? num.replace('.', c) : num).replace(new RegExp(re, 'g'), '$&' + (s || ','));
    }; 
    Number.prototype.toPrice = function () {
        return this.format(__decPlaces, 3, __decThoSep, __decSep);
    }
    $.get('', {__action:'Product/DeliveryCostGet', id: '{{product.Id}}' },function(res){
        if(res.action.Object.Cost > 0){
            $('.delivery-container').removeClass('hidden');
            $('.delivery-cost').text(res.action.Object.Cost.toPrice());
        }
    });
</script>

</svg>

<span class="productDetails-info--name">{{translations.Crt_Delivery}}</span>

<a class="productDetails-info--value productDetails-info--value__extraColor" aria-label="shipping" href="{{config.DefinedPages.Shipping.Url}}">{{ translations.Sea_From | Downcase }} <span class="delivery-cost"></span> {{ currency }}</a>

</div>

Number.prototype.format = function (n, x, s, c) {

var re = '\\d(?=(\\d{' + (x || 3) + '})+' + (n > 0 ? '\\D' : '$') + ')',

num = this.toFixed(Math.max(0, ~ ~n));

return (c ? num.replace('.', c) : num).replace(new RegExp(re, 'g'), '$&' + (s || ','));

};

Number.prototype.toPrice = function () {

return this.format(__decPlaces, 3, __decThoSep, __decSep);

}

$.get('', {__action:'Product/DeliveryCostGet', id: '{{product.Id}}' },function(res){

if(res.action.Object.Cost > 0){

$('.delivery-container').removeClass('hidden');

$('.delivery-cost').text(res.action.Object.Cost.toPrice());

}

});

</script>

Agat

Krok 1. W panelu administracyjnym przejdź do sekcji Wygląd sklepu/ Ustawienia/ Edytuj ustawienia zaawansowane/ Edytuj HML.

Krok 2.W pliku partials/product/product-popup.html znajdź klasę info-container i usuń kontener z tą klasą wraz z całą jego zawartością a w jego miejsce wklej poniższy kod:


<div class="info-container {% if product.StockLevel == null -%} two-items {% endif -%}">
    {% if product.StockLevel.Control -%}
        {% if product.StockLevel.Type != 4 and product.StockLevel.Text == '' -%}
	    {% assign noText = true -%}
	{% endif -%}
	<div class="stock-container ">
	    <span class="stock-label">{{ translations.Com_StockLvl }}</span> <span class="text {% if product.StockLevel.Type == 2 or noText -%}hidden{% endif -%}"> <span class="text-span {% if product.StockLevel.Type == 4  -%} hidden {% endif -%}">{{ product.StockLevel.Text }}</span> <span class="value-span {% if product.StockLevel.Type != 4  -%} hidden {% endif -%}">{{ stockValue[0] }}</span> <span class="unit-span {% if product.StockLevel.Type != 4  -%} hidden {% endif -%}">{{ product.SaleUnit }}</span></span> <img class="{% if product.StockLevel.Type == 3 or product.StockLevel.Type == 4 or product.StockLevel.ImageUrl == '' -%}hidden{% endif -%}" alt="{{ product.StockLevel.Text }}" src="{{ product.StockLevel.ImageUrl }}">
	</div>
    {% endif -%}
    <div class="availability-container">
        <input aria-label="status" type="hidden" name="status" value="{{ product.Availability.Status }}"/>
	<span class="availability-label">{{ translations.Com_Availability }}</span> <span class="value {% if product.Availability.Text == '' or product.Availability.Type == 2 -%}hidden{% endif -%}">{{ product.Availability.Text }}</span> <span class="date {% if product.Availability.Date == null -%} hidden {% endif -%}">({{ product.Availability.Date | Date:'d' }})</span> <img class="{% if product.Availability.ImageUrl == '' or product.Availability.Type == 3 -%}hidden{% endif -%}" alt="{{ product.Availability.Text }}" src="{{ product.Availability.ImageUrl }}">
    </div>
    <div class="delivery-cost-container hidden">
        <span class="stock-label">{{ translations.Com_DeliveryFrom }}</span> <a aria-label="shippingUrl" href="{{config.DefinedPages.Shipping.Url}}"><span class="delivery-cost"></span> {{ currency }}</a>
    </div>
</div>
<script>
    Number.prototype.format = function (n, x, s, c) {
        var re = '\\d(?=(\\d{' + (x || 3) + '})+' + (n > 0 ? '\\D' : '$') + ')',
	num = this.toFixed(Math.max(0, ~ ~n));
	return (c ? num.replace('.', c) : num).replace(new RegExp(re, 'g'), '$&' + (s || ','));
    };
    Number.prototype.toPrice = function () {
	return this.format(__decPlaces, 3, ' ', __decSep);
    }
    $.get('', {__action:'Product/DeliveryCostGet', id: '{{product.Id}}' },function(res){
        if(res.action.Object.Cost > 0){
	    $('.delivery-cost-container').removeClass('hidden');
	    $('.delivery-cost').text(res.action.Object.Cost.toPrice());
	}
    });
</script>

{% if product.StockLevel.Control -%}

{% if product.StockLevel.Type != 4 and product.StockLevel.Text == '' -%}

{% assign noText = true -%}

{% endif -%}

<span class="stock-label">{{ translations.Com_StockLvl }}</span> <span class="text {% if product.StockLevel.Type == 2 or noText -%}hidden{% endif -%}"> <span class="text-span {% if product.StockLevel.Type == 4 -%} hidden {% endif -%}">{{ product.StockLevel.Text }}</span> <span class="value-span {% if product.StockLevel.Type != 4 -%} hidden {% endif -%}">{{ stockValue[0] }}</span> <span class="unit-span {% if product.StockLevel.Type != 4 -%} hidden {% endif -%}">{{ product.SaleUnit }}</span></span> <img class="{% if product.StockLevel.Type == 3 or product.StockLevel.Type == 4 or product.StockLevel.ImageUrl == '' -%}hidden{% endif -%}" alt="{{ product.StockLevel.Text }}" src="{{ product.StockLevel.ImageUrl }}">

</div>

{% endif -%}

<span class="availability-label">{{ translations.Com_Availability }}</span> <span class="value {% if product.Availability.Text == '' or product.Availability.Type == 2 -%}hidden{% endif -%}">{{ product.Availability.Text }}</span> <span class="date {% if product.Availability.Date == null -%} hidden {% endif -%}">({{ product.Availability.Date | Date:'d' }})</span> <img class="{% if product.Availability.ImageUrl == '' or product.Availability.Type == 3 -%}hidden{% endif -%}" alt="{{ product.Availability.Text }}" src="{{ product.Availability.ImageUrl }}">

</div>

<span class="stock-label">{{ translations.Com_DeliveryFrom }}</span> <a aria-label="shippingUrl" href="{{config.DefinedPages.Shipping.Url}}"><span class="delivery-cost"></span> {{ currency }}</a>

</div>

Number.prototype.format = function (n, x, s, c) {

var re = '\\d(?=(\\d{' + (x || 3) + '})+' + (n > 0 ? '\\D' : '$') + ')',

num = this.toFixed(Math.max(0, ~ ~n));

return (c ? num.replace('.', c) : num).replace(new RegExp(re, 'g'), '$&' + (s || ','));

};

Number.prototype.toPrice = function () {

return this.format(__decPlaces, 3, ' ', __decSep);

}

$.get('', {__action:'Product/DeliveryCostGet', id: '{{product.Id}}' },function(res){

if(res.action.Object.Cost > 0){

$('.delivery-cost-container').removeClass('hidden');

$('.delivery-cost').text(res.action.Object.Cost.toPrice());

}

});

</script>

Bursztyn i Opal

Krok 1. W panelu administracyjnym przejdź do sekcji Wygląd sklepu/ Ustawienia/ Edytuj ustawienia zaawansowane/ Edytuj HML.

Krok 2.W pliku productdetails.html znajdź warunek {% if _pd.DeliveryCost > 0 -%} i usuń go wraz z całą jego zawartością a w jego miejsce wklej poniższy kod:


<p class="delivery hidden">{{translations.Com_DeliveryFrom}}: <span><span class="delivery-cost"></span> {{currency}}</span></p>
<script>
    Number.prototype.format = function(n, x, s, c) {
       var re = '\\d(?=(\\d{' + (x || 3) + '})+' + (n > 0 ? '\\D' : '$') + ')',
       num = this.toFixed(Math.max(0, ~~n));
       return (c ? num.replace('.', c) : num).replace(new RegExp(re, 'g'), '$&' + (s || ','));
    };
    Number.prototype.toPrice = function () {
       var decimalPlaces = __decimalPlacesPrice || 2;
       return this.format(decimalPlaces, 3, __decThoSep, __decSep);
    }
    $.get('', {__action:'Product/DeliveryCostGet', id: '{{_pd.Id}}' },function(res){
       if(res.action.Object.Cost > 0){
           $('.delivery').removeClass('hidden');
           $('.delivery-cost').text(res.action.Object.Cost.toPrice());
       }
    });
</script>

<p class="delivery hidden">{{translations.Com_DeliveryFrom}}: <span><span class="delivery-cost"></span> {{currency}}</span></p>

Number.prototype.format = function(n, x, s, c) {

var re = '\\d(?=(\\d{' + (x || 3) + '})+' + (n > 0 ? '\\D' : '$') + ')',

num = this.toFixed(Math.max(0, ~~n));

return (c ? num.replace('.', c) : num).replace(new RegExp(re, 'g'), '$&' + (s || ','));

};

Number.prototype.toPrice = function () {

var decimalPlaces = __decimalPlacesPrice || 2;

return this.format(decimalPlaces, 3, __decThoSep, __decSep);

}

$.get('', {__action:'Product/DeliveryCostGet', id: '{{_pd.Id}}' },function(res){

if(res.action.Object.Cost > 0){

$('.delivery').removeClass('hidden');

$('.delivery-cost').text(res.action.Object.Cost.toPrice());

}

});

</script>

Wskazówka

Po wprowadzeniu zmian pamiętaj o ich zapisaniu oraz publikacji.

Obsługa akcji Product/DeliveryCostGet