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ć:
|
0 1 2 |
data-weight="{{ supplyProduct.Weight }}" data-netweight="{{ supplyProduct.NetWeight}}" |
Cała linijka może wyglądać następująco:
|
0 1 2 |
<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ć
|
0 1 2 |
data-weight="{{ product.Weight }}" data-netweight="{{ product.NetWeight}}" |
Cała linijka może wyglądać następująco:
|
0 1 2 |
<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:
|
0 1 2 3 4 5 6 7 |
{% 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).
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 |
{% 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:
|
0 1 2 |
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.
|
0 1 2 3 |
var weight = $(this).data('weight'); var netweight = $(this).data('netweight'); |
A następnie:
|
0 1 2 3 4 5 6 7 8 9 10 |
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:
|
0 1 2 3 4 5 6 7 8 |
var child = { ... ... ... weight: weight, netweight: netweight }; |
Zaraz potem znajdziesz funkcję function loadChildsProps(). Pod linią:
|
0 1 2 |
var childs = $('.child-lq'); |
należy dopisać poniższy kod:
|
0 1 2 3 4 5 6 7 8 9 10 11 12 |
var attributes = $('.product-attributes-lq'); if($('.child-lq.active-lq').index() != -1){ var childIndex = $('.child-lq.active-lq').data('child-index'); } else { var childIndex = 0; } 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(){ … }) :
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
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.
|
0 1 2 |
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:
|
0 1 2 |
<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:
|
0 1 2 |
{% 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:
|
0 1 2 3 4 5 6 7 |
<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ż:
|
0 1 2 |
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:
|
0 1 2 3 4 5 6 7 8 9 10 |
//weight var weight = technInfo.data('weight') / basicUnitRt * selectedRatio; var netWeight = technInfo.data('netweight') / basicUnitRt * selectedRatio; var weightNode = technInfo.find('.weight-value'); var netWeightNode = technInfo.find('.net-weight-value'); 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:
|
0 1 2 3 4 |
basicUnitRt = cnt.data('basicunitrt'); selectedRt = cnt.data('selectedrt'); var selectedUnit = cnt.data('selectedunit'); |
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
// 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.Weight && s.Weight > 0){ $('.weight-div').removeClass('hidden'); } else { $('.weight-div').addClass('hidden'); } //net-weight technInfo.data('netweight', s.NetWeight); if(ifUnits){ det.find('.technical-info .net-weight-value').text(s.NetWeight * priceUnitRt / basicUnitRt); } else{ det.find('.technical-info .net-weight-value').text(s.NetWeight); } 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ę
|
0 1 2 |
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:
|
0 1 2 |
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:
|
0 1 2 |
<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:
|
0 1 2 3 |
<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.
|
0 1 2 |
data-netweight="{{ translations.NetWeight }}" |
Cała linijka może wyglądać następująco:
|
0 1 2 |
<input aria-label="translations" type="hidden" name="translations" data-vat="{{ translations.Pps_VAT }}" data-weight="{{ translations.Pro_Weight }}" <span style="color: #99cc00;">data-netweight="{{ translations.NetWeight }}"</span> data-symbol="{{ translations.Pro_ProductSymbol }}" data-upc="{{ translations.Pro_UPC }}"> |
Następnie, kilka linii poniżej w liście ul znajdź fragment:
|
0 1 2 3 4 |
{% 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:
|
0 1 2 3 4 5 6 7 |
{% 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:
|
0 1 2 |
if (spLast && spLast.Product) { |
, a kilka linijek poniżej:
|
0 1 2 |
det.find('#supplyId').attr('data-weight', spLast.Product.Weight); |
Pod tą linijką należy dopisać obsługę wagi netto, czyli fragment:
|
0 1 2 |
det.find('#supplyId').attr('data-netweight', spLast.Product.NetWeight); |
Kilkadziesiąt linii dalej znajdziesz warunek:
|
0 1 2 |
if (s && s.Product) { |
Pod kodem
|
0 1 2 |
det.find('#supplyId').attr('data-weight', s.Product.Weight); |
doklej
|
0 1 2 |
det.find('#supplyId').attr('data-netweight', s.Product.NetWeight); |
W tym samym pliku znajdź funkcję changeValues: function(e) {. Wewnątrz instrukcji warunkowej:
|
0 1 2 |
if ($(e.currentTarget).hasClass('unitId')) { |
pod koniec dopisz poniższy kod
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
//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
|
0 1 2 3 4 5 |
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'); |
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
//weight if ((weight == '' || weight == 0) && ul.find('.weight-value').index() >= 0) { $('.weight-value').parent().remove(); } else if (weight != '' && weight != 0) { if (ul.find('.weight-value').index() >= 0) { $('.weight-value').text(Number(weight.toFixed(2)) + ' kg'); } else { ul.append('<li><span>' + weightTrans + '</span> <span class="weight-value">' + weight + ' kg</span></li>'); } } //net-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:
|
0 1 2 3 4 5 6 7 8 9 10 |
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:
|
0 1 2 |
data-weight="{{ product.Weight }}" data-netweight="{{ product.NetWeight }}" |
Następnie około 35 linijek poniżej znajdziesz instrukcję warunkową
|
0 1 2 |
{% 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:
|
0 1 2 3 |
<input type="hidden" name="initial-weight" value="{{ product.Weight }}"/> <input type="hidden" name="<strong>initial-netweight</strong>" 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:
|
0 1 2 |
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
|
0 1 2 3 |
{% if product.Weight != '' and product.Weight != 0 -%} <li><span>{{ translations.Pro_Weight }}</span> <span class="weight-value">{{ product.Weight }} {{ translations.Com_kg }}</span></li><br>{% endif -%} |
Tuż pod nim wklej poniższy kod:
|
0 1 2 3 4 |
{% 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:
|
0 1 2 |
form.find('#supplyId').attr('data-netweight', spLast.Product.NetWeight); |
Następnie wyszukaj frazę s.Product.Weight. Pod znalezioną linią wklej poniższy kod:
|
0 1 2 |
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:
|
0 1 2 3 4 5 6 7 8 9 10 11 |
// 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:
|
0 1 2 |
var netweight = $('#supplyId').attr('data-netweight'); |
|
0 1 2 |
var netweightTrans = translations.data('netweight'); |
Około 50 linii dalej znajdziesz linię wyglądającą następująco:
|
0 1 2 |
if (symbol == '' && ul.find('.symbol-value').index() >= 0) { |
Nad nią należy wkleić poniższy kod:
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
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