Obsługa prezentacji wymiarów towaru dla wskazanej jednostki miary

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ą </select>. Pod linią </select> 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 </ul> oraz {% endif -%}. Nad linią {% endif -%} i poniżej linii {% endfor -%} wklej poniższy kod.
{% 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.
</ul>
</div>

{% if product.Attachments[0] -%}
Nad tagiem zamykającym </ul> wklej poniższy kod.
<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.
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.
<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.
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];

} 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.
{% 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.
{% 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.
<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.
//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];

} 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.
{% 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.
<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.
<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.
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.
{% 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.
<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.
// 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ść