Obsługa prezentacji wymiarów 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 umożliwić wyświetlanie wymiarów towarów w zależności od wybranej jednostki miary w szablonach Szafir, Bursztyn, Opal, Agat, Topaz.
Szafir
W pierwszej kolejności dokonaj zmian w pliku product-presentation-data.html. W narzędziu wyszukiwania wyszukaj frazę if unit.Id == unitId. Powinieneś znaleźć kilka wyników, jednak interesuje Cię tylko ten pierwszy. Tuż pod nim wklej poniższy fragment. {% assign unitDimensions = unit.Dimensions-%}
Następnie wyszukaj frazę if unit.Default == true or unit.Id == null. Linia w kodzie, który znalazłeś powinna być około 10 linii pod tą, którą przed chwilą zmieniałeś. Tuż pod nią wklej poniższy kod. {% assign unitDimensions = unit.Dimensions-%}
Następnie należy wyszukać frazę data-ratio. Znajdziesz prawdopodobnie dwa wyniki, jednak również interesuje Cię ten pierwszy. Pod linią, którą znajdziesz i która będzie rozpoczęta słowem <option powinieneś znaleźć linię {% endfor -%} a pod nią . Pod linią należy wpisać poniższy kod. <input class="dimensions-lq" type="hidden" {% for unit in product.Units -%} {% assign dimensionsByUnitIndex = unit.Dimensions -%} data-unit{{unit.Id}}="{{dimensionsByUnitIndex.Height}}|{{dimensionsByUnitIndex.Length}}|{{dimensionsByUnitIndex.Width}}" {% endfor -%}>
Potem w tym samym pliku wyszukaj frazę if activeProduct.Attributes[limitIndex]. Nad znalezionym wynikiem powinieneś widzieć {% if tableView -%} a powyżej oraz {% endif -%}. Nad linią {% endif -%} i poniżej linii {% endfor -%} wklej poniższy kod.
`{% if activeProduct.Attributes.size < 4-%}
{{ translations.Height }}
{{unitDimensions.Height }} cm
{{ translations.Length }}
{{unitDimensions.Length}} cm
{{ translations.Width }}
{{unitDimensions.Width}} cm
{% endif -%}Teraz wyzukaj frazę ***downloads-ui***. Nad znalezioną linią powinieneś znaleźć poniższy kawałek kodu.
`
{% if product.Attachments[0] -%}
Nad tagiem zamykającym wklej poniższy kod.
`
{{ translations.Height }}
{{unitDimensions.Height }} cm
{{ translations.Length }}
{{unitDimensions.Length}} cm
{{ translations.Width }}
{{unitDimensions.Width}} cm
Teraz przejdź do pliku ***init-ui1.js***. Należy wyszukać frazę ***function loadChildsProps()*** . Pod pierwszą linijką (która będzie się zaczynać od słów *var childs*) należy wkleić poniższy kod.if($('.child-lq.active-lq').index() != -1){
var childIndex = $('.child-lq.active-lq').data('child-index');
} else {
var childIndex = 0;
}
var childUnit = window.childs[childIndex].unit;
if($('.dimensions-lq').index() != -1) {
changeDimensions(childUnit);
}Następnie wyszukaj frazę ***changePrices(child, index);***. Nad znalezioną linią wklej poniższy kod.var childUnit = $('.child-lq.active-lq select').val();
if($('.dimensions-lq').index() != -1) {
changeDimensions(childUnit);
}W ostatnim kroku należy zaimplementować funkcję odpowiadającą za zmianę wymiarów w zależności od wybranej jednostki. W dowolnym miejscu w pliku (może być powyżej funkcji *function changePrices(child, index)*, która znajduje się kilka linii poniżej) należy wkleić poniższy kod.function changeDimensions(childUnit){
// dimensions
var selectedUnitDimensions = $('.dimensions-lq').attr('data-unit'+childUnit)
if(selectedUnitDimensions != '||' ){
var selectedUnitDimensionsArr = selectedUnitDimensions.split('|');
var height = selectedUnitDimensionsArr[0];
var length = selectedUnitDimensionsArr[1];
var width = selectedUnitDimensionsArr[2];
if(height != 0){
$('.height-value-lq').text(height + ' cm');
$('.dimensions-height-lq').removeClass('hidden-lq');
} else {
$('.dimensions-height-lq').addClass('hidden-lq');
}
if(length != 0){
$('.length-value-lq').text(length + ' cm');
$('.dimensions-length-lq').removeClass('hidden-lq');
} else {
$('.dimensions-length-lq').addClass('hidden-lq');
}
if(width != 0){
$('.width-value-lq').text(width + ' cm');
$('.dimensions-width-lq').removeClass('hidden-lq');
} else {
$('.dimensions-width-lq').addClass('hidden-lq');
}
}
}`
Bursztyn
Pierwszym zmienianym plikiem będzie plik productdetails.html. Po kilku pierwszych linijkach kodu powinieneś zauważyć kod wyglądający w ten sposób. {% for u in _pd.Units -%}
{% if u.Default -%}
{% assign defaultUnitRatio = u.Ratio -%}
{% assign defaultUnitName = u.Name -%}
{% endif -%}
{% endfor -%}
Kod ten należy usunąć a wstawić poniższy. {% assign unitsCount = _pd.Units | Size -%}
{% if unitsCount > 1 -%}
{% for u in _pd.Units -%}
{% if u.Default or u.Id == null -%}
{% assign defaultUnitRatio = u.Ratio -%}
{% assign defaultUnitName = u.Name -%}
{% assign dimensions = u.Dimensions -%}
{% endif -%}
{% endfor -%}
{% else -%}
{% assign dimensions = _pd.Units[0].Dimensions -%}
{% endif -%}
Następnie wyszukaj frazę if attr. Pod znalezioną linią powinieneś widzień linię {% endfor -%}. Pod tą linią należy wkleić poniższy kod.
`{% for unit in _pd.Units -%} {% assign dimensionsByIndex = _pd.Units[forloop.index0].Dimensions -%} data-unit{{unit.Id}}="{{dimensionsByIndex.Height}}|{{dimensionsByIndex.Length}}|{{dimensionsByIndex.Width}}" {% endfor -%}>
{% if dimensions.Height == 0 and dimensions.Width == 0 and dimensions.Length == 0 -%} {% assign noDimensions = true -%} {% endif -%}
{{translations.Height}}
{{dimensions.Height}} cm
{{translations.Length}}
{{dimensions.Length}} cm
{{translations.Width}}
{{dimensions.Width}} cm
Teraz przejdź do pliku ***js/details.js***. Wyszukaj frazę ***if (prevPrice***. Nad znalezioną linią wklej poniższy kod.var unitId = $('option:selected', this)[0].value;
var selectedDimension = $('.dimensions-lq').attr('data-unit'+unitId)
if(selectedDimension != '||' && selectedDimension != '0|0|0' ){
($('.dimensions').removeClass('hidden'))
var selectedDimensionArr = selectedDimension.split('|');
var height = selectedDimensionArr[0];
var length = selectedDimensionArr[1];
var width = selectedDimensionArr[2];`
Pierwszym modyfikowanym plikiem w szablonie Agat będzie product-page.html. Po kilku pierwszych linijkach kodu, przed należy wstawić poniższy fragment. {% assign unitsCount = productD.Units | Size -%}
{% if unitsCount > 1 -%}
{% for u in productD.Units -%}
{% if u.Default or u.Id == null -%}
{% assign dimensions = u.Dimensions -%}
{% endif -%}
{% endfor -%}
{% else -%}
{% assign dimensions = productD.Units[0].Dimensions -%}
{% endif -%}
Następnie wyszukaj frazę if productD.UPC. Pod znalezioną linią powinieneś znaleźć linię zaczynającą się od < li a pod nią {% endif -%}. Pod tym fragmentem wklej poniższy kod.
`
{{ translations.Height }}{{ dimensions.Height }} cm
{{ translations.Length }}{{ dimensions.Length }} cm
{{ translations.Width }}{{ dimensions.Width }} cm
Kolejnym zmienianym plikiem będzie partials/product/product-popup.html. Wyszukaj frazę ***{{ unit.Id }}***. Prawdopodobnie znajdziesz dwa wyniki, ale interesuje Cię ten drugi. Pod wyszukaną linią powinieneś widzieć linię ***{% endfor -%}***. Pod nią należy wkleić poniższy kod.{% for unit in product.Units -%} {% assign dimensionsByIndex = unit.Dimensions -%} data-unit{{unit.Id}}="{{dimensionsByIndex.Height}}|{{dimensionsByIndex.Length}}|{{dimensionsByIndex.Width}}" {% endfor -%}>W ostatnim kroku przejdź do katalogu ***js/init.js***. Wyszukaj frazę ***$(e.currentTarget).hasClass(’attributeId’)***. Nad nią należy wkleić poniższy kod.var unitId = $(e.currentTarget).next().val();
// dimensions
var selectedUnitDimensions = $('.dimensions').attr('data-unit'+unitId)
if(selectedUnitDimensions != '||' ){
var selectedUnitDimensionsArr = selectedUnitDimensions.split('|');
var height = selectedUnitDimensionsArr[0];
var length = selectedUnitDimensionsArr[1];
var width = selectedUnitDimensionsArr[2];`
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 html.js. Należy wyszukać frazę productDetails-js. Nad znalezioną linią wklej poniższy kod. {% for unit in product.Units -%}
{% if unit.Default or unit.Id == null -%}
{% assign defaultUnitDimensions = unit.Dimensions -%}
{% endif -%}
{% endfor -%}
Następnie wyszukaj frazę if product.UPC. Pod znalezioną linią powinieneś znaleźć linię zaczynającą się od < li a pod nią {% endif -%}. Pod tym fragmentem wklej poniższy kod.
`
{{ translations.Height }} {{defaultUnitDimensions.Height }} cm
{{ translations.Length }}{{defaultUnitDimensions.Length}} cm
{{ translations.Width }}{{defaultUnitDimensions.Width}} cm
{% for unit in product.Units -%} {% assign dimensionsByUnitIndex = unit.Dimensions -%} data-unit{{unit.Id}}="{{dimensionsByUnitIndex.Height}}|{{dimensionsByUnitIndex.Length}}|{{dimensionsByUnitIndex.Width}}" {% endfor -%}>Następnie wuszukaj frazę ***else if ($(’#supplyId’).attr(’data-clip’)***. Nad znalezioną linią wklej poniższy kod.// dimensions
var unitId = $(e.currentTarget).next().val();
var selectedUnitDimensions = $('.dimensions-lq').attr('data-unit'+unitId);
if(selectedUnitDimensions != '||' ){
var selectedUnitDimensionsArr = selectedUnitDimensions.split('|');
var height = selectedUnitDimensionsArr[0];
var length = selectedUnitDimensionsArr[1];
var width = selectedUnitDimensionsArr[2];
if(height != 0){
$('.height-value').text(height + ' cm');
$('.dimensions-height').removeClass('hidden');
} else {
$('.dimensions-height').addClass('hidden');
}
if(length != 0){
$('.length-value').text(length + ' cm');
$('.dimensions-length').removeClass('hidden');
} else {
$('.dimensions-length').addClass('hidden');
}
if(width != 0){
$('.width-value').text(width + ' cm');
$('.dimensions-width').removeClass('hidden');
} else {
$('.dimensions-width').addClass('hidden');
}
}`
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.