Baza wiedzy LINKSPOT › Wygląd sklepu

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

Wygląd sklepu · Opublikowano 2025-06-23

Wskazówka

Od 1 czerwca 2025 roku zakończyliśmy aktualizację oraz wydawanie nowych wersji szablonów Bursztyn, Agat i Opal, a tym samym ich wsparcie, aby skupić się na nowoczesnych rozwiązaniach, które jeszcze lepiej odpowiadają na potrzeby dynamicznie rozwijającego się rynku e-commerce.

Zachęcamy Was do przejścia na nasze nowe, udoskonalone szablony. Dla sklepów B2C polecamy szablony Topaz, One Page Shop oraz Dla Gastronomii, natomiast dla platform B2B idealnym wyborem będą Rubin i Szafir.

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

  • {{ translations.Weight }}
    {{ activeProduct.Weight | Normalize }}{{ translations.Kg }}

    • {% endif -%}`

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

    `{% if activeProduct.Weight != '' and activeProduct.Weight > 0 -%}

  • {{ translations.Weight }}
    {{ activeProduct.Weight | Normalize | DividedBy: product.BasicUnitRatio | Times: unitRatio | Round: 2 }}{{ translations.Kg }}

    • {% endif -%}
    {% if activeProduct.NetWeight != '' and activeProduct.NetWeight > 0 -%}

  • {{ translations.NetWeight }}
    {{ activeProduct.NetWeight | Normalize | DividedBy: product.BasicUnitRatio | Times: unitRatio | Round: 2 }}{{ translations.Kg }}

    • {% 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}}" </code >

    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($(’.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(){ … }) :

    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:

    `

    `

    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;

    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:

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

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

  • {{ translations.Pro_Weight }} {{ productD.Weight }}{{ translations.Com_kg }}

    • {% endif -%}`

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

    `{% if productD.Weight != '' and productD.Weight != 0 -%}

  • {{ translations.Pro_Weight }} {{ productD.Weight | Normalize }} {{ translations.Com_kg }}

    • {% endif -%}
    {% if productD.NetWeight != '' and productD.NetWeight != 0 -%}

  • {{ translations.NetWeight }} {{ productD.NetWeight | Normalize }} {{ translations.Com_kg }}

    • {% 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 ((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('

  • ’ + weightTrans + ' ’ + weight + ’ kg
    • ’);
    }
    }

    //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('

  • ’ + netweightTrans + ' ’ + netWeight + ’ kg
    • ’);
    }
    }

    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

    Wskazówka

    Poniższa instrukcja jest uniwersalna dla obu wariantów widoku szczegółów towaru w szablonie Topaz. Jeśli chcesz dodać obsługę wag w pierwszym wariancie, należy zmodyfikować pliki src/assets/elements/productDetails/product-details1/html.js oraz src/assets/elements/productDetails/product-details1/js.js. Natomiast jeżeli chcesz dodać obsługę wag w drugim wariancie, należy zmodyfikować plikisrc/assets/elements/productDetails/product-details2/html.js oraz src/assets/elements/productDetails/product-details2/js.js

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

  • {{ translations.Pro_Weight }} {{ product.Weight }} {{ translations.Com_kg }}

    • {% endif -%}`

    Tuż pod nim wklej poniższy kod:

    `{% if product.NetWeight != '' and product.NetWeight != 0 -%}

  • {{ translations.NetWeight }} {{ product.NetWeight }} {{ translations.Com_kg }}

    • {% 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.

    Lista tłumaczeń:

    Czy ten artykuł był pomocny?

    ( 1 )

    ( 0 )

    Wyślij opinie

    Inne w kategorii

    ＋ Mam problem z tym tematem Otwórz w portalu bazy wiedzy »