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.
0 1 2 |
{% 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.
0 1 2 |
{% 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ą </select>. Pod linią </select> należy wpisać poniższy kod.
0 1 2 |
<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 </ul> oraz {% endif -%}. Nad linią {% endif -%} i poniżej linii {% endfor -%} wklej poniższy kod.
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
{% if activeProduct.Attributes.size < 4-%} <li class="dimensions-height {% if unitDimensions == null or unitDimensions.Height == 0 -%} hidden-lq {% endif -%}"> <div class="name-ui">{{ translations.Height }}</div> <div class="value-ui">{{unitDimensions.Height }} cm</div> </li> <li class="dimensions-length {% if unitDimensions == null or unitDimensions.Length == 0 -%} hidden-lq {% endif -%}"> <div class="name-ui">{{ translations.Length }}</div> <div class="value-ui">{{unitDimensions.Length}} cm</div> </li> <li class="dimensions-width {% if unitDimensions == null or unitDimensions.Width == 0 -%} hidden-lq {% endif -%}"> <div class="name-ui">{{ translations.Width }}</div> <div class="value-ui">{{unitDimensions.Width}} cm</div> </li> {% endif -%} |
Teraz wyzukaj frazę downloads-ui. Nad znalezioną linią powinieneś znaleźć poniższy kawałek kodu.
0 1 2 3 4 5 |
</ul> </div> {% if product.Attachments[0] -%} |
Nad tagiem zamykającym </ul> wklej poniższy kod.
0 1 2 3 4 5 6 7 8 9 10 11 12 13 |
<li class="dimensions-height-lq {% if unitDimensions == null or unitDimensions.Height == 0 -%} hidden-lq {% endif -%}"> <div class="name-ui">{{ translations.Height }}</div> <div class="value-ui height-value-lq">{{unitDimensions.Height }} cm</div> </li> <li class="dimensions-length-lq {% if unitDimensions == null or unitDimensions.Length == 0 -%} hidden-lq {% endif -%}"> <div class="name-ui">{{ translations.Length }}</div> <div class="value-ui length-value-lq">{{unitDimensions.Length}} cm</div> </li> <li class="dimensions-width-lq {% if unitDimensions == null or unitDimensions.Width == 0 -%} hidden-lq {% endif -%}"> <div class="name-ui">{{ translations.Width }}</div> <div class="value-ui width-value-lq">{{unitDimensions.Width}} cm</div> </li> |
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.
0 1 2 3 4 5 6 7 8 9 10 |
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.
0 1 2 3 4 5 |
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.
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 29 |
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.
0 1 2 3 4 5 6 7 |
{% 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.
0 1 2 3 4 5 6 7 8 9 10 11 12 13 |
{% 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.
0 1 2 3 4 5 6 7 8 9 10 11 12 |
<input class="dimensions-lq" type="hidden" {% 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 -%} <div class="dimensions {% if dimensions == null or noDimensions -%} hidden {% endif -%} "> <div class="dimensions-height {% if dimensions.Height == 0 -%} hidden {% endif -%}"><dt>{{translations.Height}}</dt><dd class=" dimensions-height-value">{{dimensions.Height}} cm</dd></div> <div class="dimensions-length {% if dimensions.Length == 0 -%} hidden {% endif -%}"><dt>{{translations.Length}}</dt><dd class=" dimensions-length-value">{{dimensions.Length}} cm</dd></div> <div class="dimensions-width {% if dimensions.Width == 0 -%} hidden {% endif -%}"><dt>{{translations.Width}}</dt><dd class=" dimensions-width-value">{{dimensions.Width}} cm</dd></div> </div> |
Teraz przejdź do pliku js/details.js. Wyszukaj frazę if (prevPrice. Nad znalezioną linią wklej 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 25 26 27 28 29 30 31 32 |
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]; if(height != 0){ $('.dimensions-height-value').text(height + ' cm'); $('.dimensions-height').removeClass('hidden'); } else { $('.dimensions-height').addClass('hidden'); } if(length != 0){ $('.dimensions-length-value').text(length + ' cm'); $('.dimensions-length').removeClass('hidden'); } else { $('.dimensions-length').addClass('hidden'); } if(width != 0){ $('.dimensions-width-value').text(width + ' cm'); $('.dimensions-width').removeClass('hidden'); } else { $('.dimensions-width').addClass('hidden'); } } else{ ($('.dimensions').addClass('hidden')) } |
Opal
Pierwszym zmienianym plikiem będzie plik productdetails.html. Po kilku pierwszych linijkach kodu powinieneś zauważyć kod wyglądający w ten sposób.
0 1 2 3 4 5 6 |
{% assign unitsCount = _pd.Units | Size -%} {% if unitsCount > 1 -%} {% assign defaultUnitRatio = _pd.Units[0].Ratio -%} {% assign defaultUnitName = _pd.Units[0].Name -%} {% endif -%} |
Kod ten należy usunąć a wstawić poniższy.
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
{% assign unitsCount = _pd.Units | Size -%} {% if unitsCount > 1 -%} {% assign defaultUnitRatio = _pd.Units[0].Ratio -%} {% assign defaultUnitName = _pd.Units[0].Name -%} {% assign defaultUnitId = _pd.Units[0].Id-%} {% for unit in product.Units -%} {% if unit.Default or unit.Id == null -%} {% assign dimensions = unit.Dimensions -%} {% assign defaultUnitId = unit.Id-%} {% 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.
0 1 2 3 4 5 6 7 8 9 10 11 12 |
<input class="dimensions-lq" type="hidden" {% 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 -%} <div class="dimensions {% if dimensions == null or noDimensions -%} hidden {% endif -%} "> <div class="dimensions-height {% if dimensions.Height == 0 -%} hidden {% endif -%}"><dt>{{translations.Height}}</dt><dd class=" dimensions-height-value">{{dimensions.Height}} cm</dd></div> <div class="dimensions-length {% if dimensions.Length == 0 -%} hidden {% endif -%}"><dt>{{translations.Length}}</dt><dd class=" dimensions-length-value">{{dimensions.Length}} cm</dd></div> <div class="dimensions-width {% if dimensions.Width == 0 -%} hidden {% endif -%}"><dt>{{translations.Width}}</dt><dd class=" dimensions-width-value">{{dimensions.Width}} cm</dd></div> </div> |
Teraz przejdź do pliku js/details.js. Wyszukaj frazę if (prevPrice. Nad znalezioną linią wklej 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 25 26 27 28 29 30 31 32 33 |
//wymiary 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]; if(height != 0){ $('.dimensions-height-value').text(height + ' cm'); $('.dimensions-height').removeClass('hidden'); } else { $('.dimensions-height').addClass('hidden'); } if(length != 0){ $('.dimensions-length-value').text(length + ' cm'); $('.dimensions-length').removeClass('hidden'); } else { $('.dimensions-length').addClass('hidden'); } if(width != 0){ $('.dimensions-width-value').text(width + ' cm'); $('.dimensions-width').removeClass('hidden'); } else { $('.dimensions-width').addClass('hidden'); } } else{ ($('.dimensions').addClass('hidden')) } |
Agat
Pierwszym modyfikowanym plikiem w szablonie Agat będzie product-page.html. Po kilku pierwszych linijkach kodu, przed <section class=”product-details”> należy wstawić poniższy fragment.
0 1 2 3 4 5 6 7 8 9 10 11 |
{% 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.
0 1 2 3 4 |
<li class="dimensions-height {% if dimensions == null or dimensions.Height == 0 -%} hidden {% endif -%}"><span>{{ translations.Height }}</span> <span class="dimensions-height-value" >{{ dimensions.Height }} cm</span></li> <li class="dimensions-length {% if dimensions == null or dimensions.Length == 0 -%} hidden {% endif -%}"><span>{{ translations.Length }}</span> <span class="dimensions-length-value" >{{ dimensions.Length }} cm</span></li> <li class="dimensions-width {% if dimensions == null or dimensions.Width == 0 -%} hidden {% endif -%}"><span>{{ translations.Width }}</span> <span class="dimensions-width-value" >{{ dimensions.Width }} cm</span></li> |
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.
0 1 2 3 4 5 6 |
<input class="dimensions" type="hidden" {% 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.
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 29 |
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]; if(height != 0){ $('.dimensions-height-value').text(height + ' cm'); $('.dimensions-height').removeClass('hidden'); } else { $('.dimensions-height').addClass('hidden'); } if(length != 0){ $('.dimensions-length-value').text(length + ' cm'); $('.dimensions-length').removeClass('hidden'); } else { $('.dimensions-length').addClass('hidden'); } if(width != 0){ $('.dimensions-width-value').text(width + ' cm'); $('.dimensions-width').removeClass('hidden'); } else { $('.dimensions-width').addClass('hidden'); } } |
Topaz
Na początku zmodyfikuj plik html.js. Należy wyszukać frazę productDetails-js. Nad znalezioną linią wklej poniższy kod.
0 1 2 3 4 5 6 |
{% 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.
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<li class="dimensions-height {% if defaultUnitDimensions == null or defaultUnitDimensions.Height == 0 -%} hidden {% endif -%}"> <span>{{ translations.Height }}</span> <span class="height-value">{{defaultUnitDimensions.Height }} cm</span> </li> <li class="dimensions-length {% if defaultUnitDimensions == null or defaultUnitDimensions.Length == 0 -%} hidden {% endif -%}"> <span>{{ translations.Length }}</span> <span class="length-value">{{defaultUnitDimensions.Length}} cm</span> </li> <li class="dimensions-width {% if defaultUnitDimensions == null or defaultUnitDimensions.Width == 0 -%} hidden {% endif -%}"> <span>{{ translations.Width }}</span> <span class="width-value">{{defaultUnitDimensions.Width}} cm</span> </li> <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 -%}> |
Następnie wuszukaj frazę else if ($(’#supplyId’).attr(’data-clip’). Nad znalezioną linią wklej 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 25 26 27 28 |
// 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.
- Id: Height ,Tekst: Wysokość
- Id: Length ,Tekst: Długość
- Id: Width ,Tekst: Szerokość