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

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

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

{% if activeProduct.Attributes.size < 4-%}

<div class="name-ui">{{ translations.Height }}</div>

<div class="value-ui">{{unitDimensions.Height }} cm</div>

</li>

<div class="name-ui">{{ translations.Length }}</div>

<div class="value-ui">{{unitDimensions.Length}} cm</div>

</li>

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

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

<div class="name-ui">{{ translations.Height }}</div>

<div class="value-ui height-value-lq">{{unitDimensions.Height }} cm</div>

</li>

<div class="name-ui">{{ translations.Length }}</div>

<div class="value-ui length-value-lq">{{unitDimensions.Length}} cm</div>

</li>

<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);
    }

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);
    }

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');
        }
    }
}

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

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

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

<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-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];
            
            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'))
        }

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.


{% assign unitsCount = _pd.Units | Size -%}
    {% if unitsCount > 1 -%}
        {% assign defaultUnitRatio = _pd.Units[0].Ratio -%}
        {% assign defaultUnitName = _pd.Units[0].Name -%}
    {% endif -%}

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

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

<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-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];
                
                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'))
            }

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


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

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

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

<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');
                }
            }

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

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

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

<span>{{ translations.Height }}</span>

<span class="height-value">{{defaultUnitDimensions.Height }} cm</span>

</li>

<span>{{ translations.Length }}</span>

<span class="length-value">{{defaultUnitDimensions.Length}} cm</span>

</li>

<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');
            }
        }

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

Lista tłumaczeń:

Id: Height ,Tekst: Wysokość
Id: Length ,Tekst: Długość
Id: Width ,Tekst: Szerokość

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

Szafir

Bursztyn

Opal

Agat

Topaz

Czy ten artykuł był pomocny?

Społeczność Comarch

Oferta e-Commerce

Przydatne linki

Kontakt