Obsługa prezentacji wagi netto oraz wagi brutto towaru dla wskazanej jednostki miary

W tym artykule dowiesz się jak zmodyfikować szablon, aby umożliwić przeliczanie i wyświetlanie wagi netto oraz wagi brutto towaru w zależności od wybranej jednostki.

Szafir

Na początku zmodyfikuj plik product/product-presentation-data.html. Należy znaleźć narzędziem wyszukiwania divy o klasie child-lq i dopisać atrybuty data z informacjami o wadze netto i brutto produktu w tagu otwierającym div (będą dwa takie divy). W pierwszym należy dopisać:

data-weight="{{ supplyProduct.Weight }}" data-netweight="{{ supplyProduct.NetWeight}}"


Cała linijka może wyglądać następująco:

<div class="attribute-button-ui last-lvl-ui {% if supply.ValueId == key -%} active-lq {% endif -%} table-row-ui child-lq child-reload-lq parent-container-reload-lq expandable-mechanism-container-lq {% if supplyProduct.AskForPrice -%} ask-for-price-child-lq {% endif -%} {% if supplyProduct.AttributesEditable[0] or supplyProduct.AttributesPolyvalent[0] -%} higher-mobile-ui {% endif -%} {% if supplyProduct.SubtotalPreviousPrice != null and supplyProduct.SubtotalPreviousPrice > supplyProduct.SubtotalPrice -%} previous-with-units-ui {% endif -%}" data-url="{{ url }}?keys={{ dataKeys }}{% if unitId != null -%}&unit={{ unitId }}{% endif -%}" data-child-index="{{ forloop.index0 }}" data-supply-id="{{ supply.SupplyId }}" data-img="http:{{ page.BaseHref }}img/large/{{ supplyProduct.ImageId }}/.jpg" data-code="{{ supplyProduct.Code }}" data-weight="{{ supplyProduct.Weight }}" data-netweight="{{ supplyProduct.NetWeight}}">


W kolejnym divie należy dopisać

data-weight="{{ product.Weight }}" data-netweight="{{ product.NetWeight}}"


Cała linijka może wyglądać następująco:

<div class="attribute-button-ui last-lvl-ui child-lq table-row-ui attributes-list-ui expandable-mechanism-container-lq" data-child-index="{{ forloop.index0 }}" data-weight="{{ product.Weight }}" >data-netweight="{{ product.NetWeight}}">


Następnie w tym samym pliku należy wyszukać po frazie translations.Weight element listy, który zawiera informacje o wadze produktu ( znajdziesz trzy takie elementy ). Będą one wyglądać w ten sposób:

{% if activeProduct.Weight != '' and activeProduct.Weight > 0 and attributesQuantity > 2 -%}
<li>
<div class="name-ui">{{ translations.Weight }}</div>
<div class="value-ui">{{ activeProduct.Weight | Normalize }}{{ translations.Kg }}</div>
</li>
{% endif -%}


Ten kod należy usunąć a następnie dodać poniższy (w obu znalezionych miejscach).


{% if activeProduct.Weight != '' and activeProduct.Weight > 0 -%}
<li>
<div class="name-ui">{{ translations.Weight }}</div>
<div class="value-ui weight-value-lq">{{ activeProduct.Weight | Normalize | DividedBy: product.BasicUnitRatio | Times: unitRatio | Round: 2 }}{{ translations.Kg }}</div>
</li>
{% endif -%}
{% if activeProduct.NetWeight != '' and activeProduct.NetWeight > 0 -%}
<li>
<div class="name-ui">{{ translations.NetWeight }}</div>
<div class="value-ui netweight-value-lq">{{ activeProduct.NetWeight | Normalize | DividedBy: product.BasicUnitRatio | Times: unitRatio | Round: 2 }}{{ translations.Kg }}</div>
</li>
{% endif -%}


W tym samym pliku trzeba wyszukać frazę data-unit-ratio-info=”{{unitRatioInfo}}”. Powinieneś znaleźć dwie linie w kodzie. W każdej z nich należy dodać jeszcze jeden atrybut data oraz klasę unit-ratio-lq:

class = "unit-ratio-lq" data-basic-unit-ratio="{{product.BasicUnitRatio}}"


Kolejnym krokiem będzie modyfikacja kodu w pliku js/init-ui1.js.

Narzędziem wyszukiwania wyszukaj function saveChildsProps() . W funkcji saveChildProps() znajdziesz zainicjowane zmienne, których wartości pobierane są z atrubutów data. Pod nimi możemy dodać zmienne dotyczące wag.

var weight = $(this).data('weight');
var netweight = $(this).data('netweight');


A następnie:

if(typeof weight == 'string' && weight.indexOf(__decSep) !== -1){
weight = weight.replace(__decSep,'.');
weight = Number(weight);
}

if(typeof netweight == 'string' && netweight.indexOf(__decSep) !== -1){
netweight = netweight.replace(__decSep,'.');
netweight = Number(netweight);
}


W tej samej funkcji znajdziesz obiekt child. Należy do jego pól dopisać wagi:

var child = {
...
...
...
weight: weight,
netweight: netweight
};


 Zaraz potem znajdziesz funkcję function loadChildsProps(). Pod linią:

var childs = $('.child-lq');


należy dopisać poniższy kod:

var attributes = $('.product-attributes-lq');

if(attributes.length > 0) {
changeWeights(childIndex);
}


Ostatnim krokiem będzie stworzenie funkcji przeliczającej wagi. W tym samym pliku należy wkleić poniższy kod (np. pod funkcją function changePrices(){ … }) :

function changeWeights(index){
var basicUnitRatio = $('.unit-ratio-lq').data('basic-unit-ratio');
if(typeof(basicUnitRatio) == 'string' && basicUnitRatio.includes(',')){
basicUnitRatio = Number(basicUnitRatio.replace(',','.'));
}
if(window.childs[index]!=undefined){
var weight = window.childs[index].weight;
if(window.childs[index].ratio!=undefined){
weight = (weight * window.childs[index].ratio / basicUnitRatio).toFixed(2);
}
$('.weight-value-lq').text(weight.toString().replace('.',',') + 'kg');

var netweight = window.childs[index].netweight;
if(window.childs[index].ratio!=undefined){
netweight = (netweight * window.childs[index].ratio / basicUnitRatio).toFixed(2);
}
$('.netweight-value-lq').text(netweight.toString().replace('.',',') + 'kg');
}
}


Bursztyn i Opal

W powyższych szablonach należy najpierw zmodyfikować plik productdetails.html. W pierwszej kolejności wyszukaj sekcję (section) o klasie technical-info. Należy w niej dopisać atrybuty data, zawierające informacje o wagach produktu.

data-weight = "{{_pd.Weight | ToString | Replace: config.DecimalSeparator, '.'}}" data-netweight = "{{_pd.NetWeight | ToString | Replace: config.DecimalSeparator, '.'}}"

Cała linijka może wówczas wyglądać następująco:

<section class="technical-info col-sm-6" data-weight = "{{_pd.Weight | ToString | Replace: config.DecimalSeparator, '.'}}" data-netweight = "{{_pd.NetWeight  | ToString | Replace: config.DecimalSeparator, '.'}}">

Zaraz pod tym znajdziesz element listy zawierający informacje o wadze:

{% if _pd.Weight <> 0 and _pd.Weight <> "" %}<dt>{{translations.Com_Weight}}</dt><dd class="weight">{{_pd.Weight|Normalize}} {{translations.Com_UoMKg}}</dd>{% endif %}

Ten fragment należy usunąć a wkleić poniższy zawierający informacje o wadze netto i brutto:

<div class="weight-div {% if _pd.Weight == 0 or _pd.Weight == '' -%} hidden {% endif -%}">
<dt>{{translations.Com_Weight}}</dt><dd class="weight"><span class="weight-value">{{_pd.Weight|Normalize}}</span> {{translations.Com_UoMKg}}</dd>
</div>
<div class="net-weight-div {% if _pd.NetWeight == 0 or _pd.NetWeight == '' -%} hidden {% endif -%}">
<dt>{{translations.NetWeight}}</dt><dd class="net-weight"><span class="net-weight-value">{{_pd.NetWeight|Normalize}}</span> {{translations.Com_UoMKg}}</dd>
</div>


Teraz przejdź do pliku js/ details.js. W pierwszych liniach kodu znajdziesz zainicjowane zmienne. Należy do nich dopisać również:

var technInfo = $('.technical-info');


Następnie wyszukaj frazę jednostka pomocnicza. Pod znalezionym komentarzem znajdziesz funkcję obsługującą zmianę elementu o id unitId. Pod linią zawierającą frazę prevPriceNode.data należy umieścić następujący kod:

//weight
var weight = technInfo.data('weight') / basicUnitRt * selectedRatio;
var netWeight = technInfo.data('netweight') / basicUnitRt * selectedRatio;

weightNode.text(weight);
netWeightNode.text(netWeight);


W ostatnim kroku narzędziem wyszukiwania znajdź funkcję function SetProduct(s,stock). Po kilku linijkach, przed instrukcją warunkową if (stock) umieść następujący kod:

basicUnitRt = cnt.data('basicunitrt');
selectedRt = cnt.data('selectedrt');
var selectedUnit = cnt.data('selectedunit');


// weight
technInfo.data('weight', s.Weight)
if(ifUnits){
det.find('.technical-info .weight-value').text(s.Weight * priceUnitRt / basicUnitRt);
} else{
det.find('.technical-info .weight-value').text(s.Weight);
}

if(s.NetWeight && s.NetWeight > 0){
$('.net-weight-div').removeClass('hidden');
} else {
$('.net-weight-div').addClass('hidden');
}


Należy także usunąć z kodu w tym samym pliku linijkę

det.find('.technical-info .weight').text(s.Weight+' kg');


Agat

W pliku partials/product/product-popup.html należy znaleźć input o id supplyId (pierwszy znaleziony) i wkleić atrybuty data:

data-weight = "{{product.Weight | ToString | Replace: config.DecimalSeparator, '.'}}" data-netweight = "{{product.NetWeight | ToString | Replace: config.DecimalSeparator, '.'}}"


Cała linijka może wyglądać następująco:

<input aria-label="supplyId" name="supplyId" type="hidden" id="supplyId" data-clip="1" data-parent-id="{{ product.Id }}" data-weight = "{{product.Weight | ToString | Replace: config.DecimalSeparator, '.'}}" data-netweight = "{{product.NetWeight | ToString | Replace: config.DecimalSeparator, '.'}}"/>


Następnie w tym samym pliku wyszukaj frazę {% if product.Units[1] -%} . Pod nią znajdziesz div o klasie input-group. Pod tagiem otwierającym div wklej następujący kod:

<input aria-label="initialWeight" type="hidden" name="initial-weight" value="{{ product.Weight }}"/>
<input aria-label="initialNetWeight" type="hidden" name="initial-netweight" value="{{ product.NetWeight }}"/>


Przejdź do pliku product-page.html. Należy wyszukać w nim div o klasie product-attributes. Wewnątrz niego znajdziesz input o nazwie „translations”. Wklej do niego poniższy kod.

data-netweight="{{ translations.NetWeight }}"

Cała linijka może wyglądać następująco:

<input aria-label="translations" type="hidden" name="translations" data-vat="{{ translations.Pps_VAT }}" data-weight="{{ translations.Pro_Weight }}" data-netweight="{{ translations.NetWeight }}" data-symbol="{{ translations.Pro_ProductSymbol }}" data-upc="{{ translations.Pro_UPC }}">


Następnie, kilka linii poniżej w liście ul znajdź fragment:

{% if productD.Weight != '' -%}
<li><span>{{ translations.Pro_Weight }}</span> <span class="weight-value">{{ productD.Weight }}{{ translations.Com_kg }}</span></li>
{% endif -%}


Należy go usunąć.
Zamiast niego wklej poniższy fragment:

{% if productD.Weight != '' and productD.Weight != 0 -%}
<li><span>{{ translations.Pro_Weight }}</span> <span class="weight-value">{{ productD.Weight | Normalize }} {{ translations.Com_kg }}</span></li>
{% endif -%}
{% if productD.NetWeight != '' and productD.NetWeight != 0 -%}
<li><span>{{ translations.NetWeight }}</span> <span class="net-weight-value">{{ productD.NetWeight | Normalize }} {{ translations.Com_kg }}</span></li>
{% endif -%}


Teraz przejdź do pliku js/init.js.
Znajdziesz w nim warunek:

if (spLast && spLast.Product) {

, a kilka linijek poniżej:

det.find('#supplyId').attr('data-weight', spLast.Product.Weight);


Pod tą linijką należy dopisać obsługę wagi netto, czyli fragment:

det.find('#supplyId').attr('data-netweight', spLast.Product.NetWeight);


Kilkadziesiąt linii dalej znajdziesz warunek:

if (s && s.Product) {

Pod kodem

det.find('#supplyId').attr('data-weight', s.Product.Weight);


doklej

det.find('#supplyId').attr('data-netweight', s.Product.NetWeight);


W tym samym pliku znajdź funkcję changeValues: function(e) {. Wewnątrz instrukcji warunkowej:

if ($(e.currentTarget).hasClass('unitId')) {

pod koniec dopisz poniższy kod

//recalulate weight
if($('#supplyId').attr('data-weight')){
var calcWeight = Number(($('#supplyId').data('weight') / basicRatio * ratio).toFixed(2));
} else {
var calcWeight = (Number($(e.currentTarget).parent().find('input[name="initial-weight"]').val().replace(',','.')) / basicRatio * ratio).toFixed(2);
}
$('.weight-value').text(calcWeight + ' kg');

//recalulate netweight
if($('#supplyId').attr('data-netweight')){
var calcNetWeight = Number(($('#supplyId').data('netweight') / basicRatio * ratio).toFixed(2));
} else {
var calcNetWeight = (Number($(e.currentTarget).parent().find('input[name="initial-netweight"]').val().replace(',','.')) / basicRatio * ratio).toFixed(2);
}
$('.net-weight-value').text(calcNetWeight + ' kg');


Następnie wyszukaj komentarz reload product attributes i wklej poniższy kod pod zainicjowanymi zmiennymi

var basicRatio = Number($('input[name="basic-unit-ratio"]').val().replace(',', '.'));
var weight = $('#supplyId').attr('data-weight') / basicRatio * ratio;
var netWeight = $('#supplyId').attr('data-netweight') / basicRatio * ratio;
var netweightTrans = translations.data('netweight');


//weight

if ((netWeight == '' || netWeight == 0) && ul.find('.net-weight-value').index() >= 0) {
$('.net-weight-value').parent().remove();
} else if (netWeight != '' && netWeight != 0) {
if (ul.find('.net-weight-value').index() >= 0) {
$('.net-weight-value').text(Number(netWeight.toFixed(2)) + ' kg');
} else {
ul.append('<li><span>' + netweightTrans + '</span> <span class="net-weight-value">' + netWeight + ' kg</span></li>');
}
}


Na koniec należy usunąć z kodu w pliku poniższy fragment:


if(weight == '' && ul.find('.weight-value').index() >= 0{
$('.weight-value').parent().remove();
} else if (weight != '') {
if(ul.find('.weight-value').index()>=0 {
$('.weight-value').text(weight + 'kg');
} else {
ul.append('<li><span>' + weightTrans + '</span> <span class="weight-value">' + weight + 'kg</span></li>');
}
}

Topaz

Na początku zmodyfikuj plik src/assets/elements/productDetails/product-details(1 lub 2)/html.js. Wyszukaj input o id supplyId i wklej do niego atrybuty data:

data-weight="{{ product.Weight }}" data-netweight="{{ product.NetWeight }}"

Następnie około 35 linijek poniżej znajdziesz instrukcję warunkową

{% if product.Units[1] -%}

a pod nią div o klasie input-group. Będą się tam znajdować inputy o nazwie initial-…. Należy dopisać jeszcze dwa takie elementy widoczne poniżej:

<input type="hidden" name="initial-weight" value="{{ product.Weight }}"/>
<input type="hidden" name="initial-netweight" value="{{ product.NetWeight }}"/>

Następnie wyszukaj div o klasie product-attributes. Tuż pod tagiem otwierającym znajdziesz input o nazwie translations. Należy dokleić do niego atrybut data:

data-netweight = "{{ translations.NetWeight }}

Kilka linii poniżej znajdziesz tag otwierający listę ul a w niej kawałek kodu wyglądający tak jak poniżej

{% if product.Weight != '' and product.Weight != 0 -%}
<li><span>{{ translations.Pro_Weight }}</span> <span class="weight-value">{{ product.Weight }} {{ translations.Com_kg }}</span></li>
{% endif -%}


Tuż pod nim wklej poniższy kod:

{% if product.NetWeight != '' and product.NetWeight != 0 -%}
<li><span>{{ translations.NetWeight }}</span> <span class="net-weight-value">{{ product.NetWeight }} {{ translations.Com_kg }}</span></li>
{% endif -%}


Kolejnym krokiem jest modyfikacja pliku js.js (w tym samym katalogu).

Narzędziem wyszukiwania wyszukaj frazę spLast.Product.Weight. Pod linijką, która ją zawiera wklej poniższy kod:

form.find('#supplyId').attr('data-netweight', spLast.Product.NetWeight);

Następnie wyszukaj frazę s.Product.Weight. Pod znalezioną linią wklej poniższy kod:

form.find('#supplyId').attr('data-netweight', s.Product.NetWeight);

Podobnie wyszukaj frazę $(’.quantity-field’).trigger(’change’);

Pod znalezioną linijką znajdziesz klamrę zamykającą } . Tuż pod nią wklej poniższy kod:

// weights
if($('#supplyId').index>0){
var weight = (Number($('#supplyId').attr('data-weight').replace(',', '.')) / basicRatio * ratio).toFixed(2);
var netweight = (Number($('#supplyId').attr('data-netweight').replace(',', '.')) / basicRatio * ratio).toFixed(2);
} else {
var weight = (Number($(e.currentTarget).parent().find('input[name="initial-weight"]').val().replace(',','.')) / basicRatio * ratio).toFixed(2);
var netweight = (Number($(e.currentTarget).parent().find('input[name="initial-netweight"]').val().replace(',','.')) / basicRatio * ratio).toFixed(2);
}
$('.weight-value').text(weight + 'kg');
$('.net-weight-value').text(netweight + 'kg');


Wyszukaj frazę reload product attributes. Powinieneś znaleźć taki komentarz. Pod nim wklej poniższe linijki:

var netweight = $('#supplyId').attr('data-netweight');
var netweightTrans = translations.data('netweight');

Około 50 linii dalej znajdziesz linię wyglądającą następująco:

if (symbol == '' && ul.find('.symbol-value').index() >= 0) {

Nad nią należy wkleić poniższy kod:

if ((netweight == '' || netweight == 0) && ul.find('.net-weight-value').index() >= 0) {
$('.net-weight-value').parent().remove();
} else if (netweight != '' && netweight != 0) {
if (ul.find('.net-weight-value').index() >= 0) {
$('.net-weight-value').text(netweight + 'kg');
} else {
ul.append('<li><span>' + netweightTrans + '</span> <span class="net-weight-value">' + netweight + 'kg</span></li>');
}
}
// reload weights
if ($('.unitId.active').index() >= 0) {
var ratio = Number($('.unitId.active').next().attr('data-ratio').replace(',', '.'));
} else {
var ratio = Number($('input[name="basic-ratio"]').val().replace(',', '.'));
}
if ($('#supplyId').attr('data-weight') != '') {
var weight = (Number($('#supplyId').attr('data-weight').replace(',', '.')) / basicratio * ratio).toFixed(2);
$('.weight-value').text(weight + 'kg');
}

if ($('#supplyId').attr('data-netweight') != '') {
var netweight = (Number($('#supplyId').attr('data-netweight').replace(',', '.')) / basicratio * ratio).toFixed(2);
$('.net-weight-value').text(netweight + 'kg');


Dodatkowo będziesz musiał dodać tłumaczenia do panelu administracyjnego. W tym celu należy wejść w zakładkę Wygląd sklepu/ Ustawienia/ Tłumaczenia i kliknąć w przycisk Dodaj. Należy wpisać Id tłumaczenia oraz Tekst, który będzie się wyświetlał na stronie. Zmiany należy zatwierdzić przyciskiem Dodaj.

• Id: NetWeight , Tekst: Waga netto