Obsługa nowych zestawów
Z tego artykułu dowiesz się jak dodać w szablonie obsługę nowych zestawów.
Wskazówka
W tym artykule dowiesz się jak wprowadzać zmiany w plikach js i scss. Dodatkowe informacje o kompilacji i minifikacji znajdziesz w centrum pomocy.
Szafir
W pliku product/product-presentation-data.html znajdź frazę {% if product.Sets != null and product.Sets != empty -%}. Powinna występować 3 razy. W każdym z nich zmień Sets na SetsExt. Następnie będąc przy ostatnim wystąpieniu tej frazy (która jest warunkiem) podmień calą zawartość tego warunku poniższym kodem:
## {{ translations.BuyInSet }}
{% for set in product.SetsExt -%}
{% assign setPrice = '' -%}
{% assign setPreviousPrice = '' -%}
{{ set.SetName }}
{% for setElement in set.Elements -%}
{% for setProduct in setElement.Products -%}
{% assign index = forloop.index -%}
{% if index == 1 -%}
{% if setProduct.Value -%}
{% if setPrice == '' -%}
{% assign setPrice = setProduct.Value -%}
{% else -%}
{% assign setPrice = setPrice | Plus: setProduct.Value -%}
{% endif -%}
{% endif -%}
{% if setProduct.PreviousValue -%}
{% if setPreviousPrice == '' -%}
{% assign setPreviousPrice = setProduct.PreviousValue -%}
{% else -%}
{% assign setPreviousPrice = setPreviousPrice | Plus: setProduct.PreviousValue -%}
{% endif -%}
{% endif -%}
{% endif -%}
{{ setProduct | Img:'medium' }}
{% if setProduct.FreeProduct -%}
{{ translations.Free }}!
{% endif %}
{% if setProduct.Quantity != 1 -%}
{% assign quantity = setProduct.Quantity -%}
{% unless config.Products.DecimalUnits -%}
{% assign quantity = setProduct.Quantity | Normalize -%}
{% endunless -%}
{{ quantity }}{{ setProduct.Unit }}
{% endif -%}
{{ setProduct.NameNoHtml }}
{% if setProduct.AttributesPolyvalent -%}
{% for attribute in setProduct.AttributesPolyvalent -%}
{{ attribute.Name }}
{% for value in attribute.Values -%}
{{ value.Value | H }}
{% endfor -%}
{% endfor -%}
{% endif -%}
{% if setProduct.AttributesEditable -%}
{% for attribute in setProduct.AttributesEditable -%}
{{ attribute.Name }} *
{% case attribute.Format -%}
{% when 1 -%}
{% when 2 -%}
{% when 3 -%}
{% for val in attribute.Values %}
{{ val.Value }}
{% endfor -%}
{% when 4 -%}
{% endcase -%}
{{ translations.FillAttributeValue }}
{% endfor -%}
{% endif -%}
{% if setProduct.Supplies.Key != null -%}
{% include 'product/set-product-supplies.html' with setProduct -%}
{% endif -%}
{% assign setElementProductsSize = setElement.Products | Size -%}
{% if setElementProductsSize > 1 -%}
{{ translations.Change }}
{% endif -%}
{% endfor -%}
{% endfor -%}
{% for setElement in set.Elements -%}
{% for setProduct in setElement.Products -%}
{{ setProduct | Img:'medium' }}
{% if setProduct.FreeProduct -%}
{{ translations.Free }}!
{% endif %}
{% if setProduct.Quantity != 1 -%}
{% assign quantity = setProduct.Quantity -%}
{% unless config.Products.DecimalUnits -%}
{% assign quantity = setProduct.Quantity | Normalize -%}
{% endunless -%}
{{ quantity }}{{ setProduct.Unit }}
{% endif -%}
{{ setProduct.NameNoHtml }}
{% endfor -%}
{% endfor -%}
{% unless customer.HidePrices -%}
{{ setPreviousPrice | Round: config.DecimalPlacesPrice | ToPrice }} {{ customer.CurrencyExt }} {% if settings.previousPriceAsSuggestedRetailPrice == 'yes' %}{% endif -%}
{% if customer.Cart.SubtotalPrices -%}
{{ translations.Netto | Downcase }}
{% else -%}
{{ translations.Brutto | Downcase }}
{% endif -%}
{{ setPrice | Minus: setPreviousPrice | Round: config.DecimalPlacesPrice | ToPrice }} {{ customer.CurrencyExt }}
{% if customer.Cart.SubtotalPrices -%}
{{ translations.Netto | Downcase }}
{% else -%}
{{ translations.Brutto | Downcase }}
{% endif -%}
{% if customer.Cart.SubtotalPrices -%}
{{ setPrice | Round: config.DecimalPlacesPrice | ToPrice }} {{ customer.CurrencyExt }}
{{ translations.Netto | Downcase }}
{% else -%}
{{ setPrice | Round: config.DecimalPlacesPrice | ToPrice }} {{ customer.CurrencyExt }}
{{ translations.Brutto | Downcase }}
{% endif -%}
{% if setPrice > 0 -%}
{% if customer.Cart.EditedOrderId -%}
{% elseif customer.Cart.Inquiry -%}
{% else -%}
{% endif -%}
{% capture mid -%}{% endcapture -%}
{% capture end -%} {{ currentCartName }}{% endcapture -%}
{% assign cartsAmount = customer.Carts | Size -%}
{% if customer.Cart.EditedOrderId or cartsAmount > 1 -%}
{% if customer.Cart.EditedOrderId -%}
{% assign end = end | Prepend:mid -%}
{{ translations.AddToOrderSplitted | Format: end }}
{% elseif customer.Cart.Inquiry -%}
{{ translations.AddToInquirySplitted | Format: mid }}
{% else -%}
{{ translations.AddToCartSplittedWithName | Format: mid,end }}
{% endif -%}
{% elseif customer.Cart.Inquiry -%}
{{ translations.AddToInquirySplitted | Format: mid }}
{% else -%}
{{ translations.AddToCartSplitted | Format: mid }}
{% endif -%}
{% endif -%}
{% endunless -%}
{% endfor -%}
Następnie w pliku js/init.js znajdź frazę:
if(form.hasClass('add-set-to-cart-lq')){
Jest to jeden z warunków w funkcji post. Podmień calą jego zawartość poniższym kodem:
var set = {setId:Number($(e.currentTarget).data('set-id')), quantity:1, products:[]};
var setProducts = form.find('.set-product-lq');
var setProductsForDataLayer = [];
var setProductsForFBPixel = [];
var totalValue = 0;
setProducts.each(function () {
var setProduct = {
setElementId: Number($(this).data('set-element-id')),
setProductId: Number($(this).data('set-product-id'))
};
if($(this).find('[name=attributePolyvalent]').length > 0){
var attributesPolyvalent = [];
$(this).find('[name=attributePolyvalent]').each(function(){
var attribute = {
id: Number($(this).data('id')),
valueId: Number($(this).val())
};
attributesPolyvalent.push(attribute);
});
setProduct.attributesPolyvalent = attributesPolyvalent;
}
if($(this).find('[name=attributeEditable]').length > 0){
var attributesEditable = [];
$(this).find('[name=attributeEditable]').each(function(){
var attribute = {
id: Number($(this).data('id')),
value: $(this).val()
};
attributesEditable.push(attribute);
});
setProduct.attributesEditable = attributesEditable;
}
set.products.push(setProduct);
var setProductDL = {
id: $(this).data('id').toString(),
name: $(this).data('name'),
price: $(this).data('price-full'),
quantity: $(this).data('quantity')
};
var setProductFBP = {
id: $(this).data('id').toString(),
content_name: $(this).data('name'),
value: Number($(this).data('price').toString().replace(',','.')),
quantity: $(this).data('quantity')
};
totalValue = totalValue + (Number($(this).data('price').toString().replace(',','.')) * Number($(this).data('quantity').toString().replace(',','.')));
setProductsForDataLayer.push(setProductDL);
setProductsForFBPixel.push(setProductFBP);
});
var data = [
{name: "__csrf", value: __CSRF},
{name: "__action", value: 'Cart/SetExtAdd'},
{name: "set", value: JSON.stringify(set)}
];
if(window.app.getCookie('lastCartId') == undefined || window.app.getCookie('lastCartId') == -1){
data.push({name: "__collection", value: 'customer.Cart.Id'});
}
var dataLayerProds = {
"products": setProductsForDataLayer
};
if(typeof fbq !== 'undefined') {
fbq('track', 'AddToCart',
{
value: totalValue,
currency: __curr,
content_type: 'product',
contents: setProductsForFBPixel
}
);
}
Teraz w tym samym pliku (js/init.js) znajdź frazę List of events i linijkę wyżej wklej poniższy kod:
openSetElementProductsPopup: function(setElementId) {
$('[data-set-element-products-popup='+setElementId+']').removeClass('hidden-lq');
app.loadImages();
$('body').addClass('modal-opened-ui');
},
changeSetElementProduct: function(e) {
var setElementId = $(e.currentTarget).parents('[data-set-element-products-popup]').data('set-element-products-popup');
var setProductId = $(e.currentTarget).data('set-product-id');
var form = $(e.currentTarget).parents('.form-lq');
if($(window).width() > 1279) {
form.find('.set-slider-lq').slick('slickUnfilter');
}
form.find('[data-set-element-id='+setElementId+']').addClass('set-product-hidden-lq');
form.find('[data-set-element-id='+setElementId+'][data-set-product-id='+setProductId+']').removeClass('set-product-hidden-lq');
if($(window).width() > 1279) {
form.find('.set-slider-lq').slick('slickFilter',':not(:has(.set-product-hidden-lq))');
}
app.loadImages();
var oldPrice = 0;
var newPrice = 0;
form.find('.set-product-lq:not(.set-product-hidden-lq)').each(function(){
oldPrice = Number((Number(oldPrice) + Number($(this).data('set-product-previous-value').replace(',','.'))).toFixed(__decimalPlacesPrice));
newPrice = Number((Number(newPrice) + Number($(this).data('set-product-value').replace(',','.'))).toFixed(__decimalPlacesPrice));
});
var savedMoney = Number((newPrice - oldPrice).toFixed(__decimalPlacesPrice));
form.find('.old-price-lq .value-lq').html(oldPrice.toPrice());
form.find('.saved-money-lq .value-lq').html(savedMoney.toPrice());
form.find('.brutto-lq .value-lq').html(newPrice.toPrice());
form.find('.netto-lq .value-lq').html(newPrice.toPrice());
$('body').removeClass('modal-opened-ui');
},
Dalej w tym samym pliku (js/init.js) kilka linijek niżej (w funkcji events) dodaj analogicznie do pozostałych wywołań poniższy kod:
$('body').on('click', '.open-set-element-products-popup-lq', function(e) {
app.openSetElementProductsPopup($(e.currentTarget).parents('[data-set-element-id]').data('set-element-id'));
});
$('body').on('click', '.change-set-element-product-lq', function(e) {
app.changeSetElementProduct(e);
});
Przejdź do pliku js/init-ui2.js i znajdź frazę:
$('body').on('click', '.hide-lq', function(e) {
Na końcu wyżej wymienionej funkcji oraz następnej, która jest pod nią:
($('body').on('click', '.hide-container-lq', function(e) {)
wklej poniższy kod:
if($(e.currentTarget).parents('.sets-lq').length > 0){
$('body').removeClass('modal-opened-ui');
}
Pozostając w tym samym pliku (js/init-ui2.js) znajdź linijkę:
UIFeatures.initSlider('.set-slider-lq', {infinite: false, dots: false, slidesToShow: 4, responsive: [{breakpoint: 1279, settings: "unslick"}]});
i zamień ją na poniższy kod:
if(!$('.set-slider-lq').hasClass('slick-initialized')){
UIFeatures.initSlider('.set-slider-lq', {infinite: false, dots: false, slidesToShow: 4, responsive: [{breakpoint: 1279, settings: "unslick"}]});
if($(window).width() > 1279) {
$('.set-slider-lq').slick('slickFilter',':not(:has(.set-product-hidden-lq))');
}
}
Teraz w pliku scss/globals/_globals1.scss na samym końcu dodaj poniższy kod:
.change-set-element-product-ui{
display: inline-block;
cursor: pointer;
figure{
padding: 0;
width: 200px;
height: 200px;
}
}
Następnie w pliku scss/globals/_globals-m.scss znajdź klase .set-product-ui{ i podmień jej zawartość poniższym kodem:
&:before{
font-family: 'themify';
content: "\e61a";
color: $labelsColor;
font-size: 20px;
margin: 25px;
display: block;
}
&:first-child:before, &.set-product-hidden-lq:before{
content: none;
}
a{
width: 70px;
display: inline-block;
vertical-align: middle;
}
.name-ui{
display: inline-block;
width: calc(100% - 90px);
margin: 0 0 0 15px;
vertical-align: middle;
text-align: left;
line-height: 1.2;
font-size: 14px;
}
Pozostając w tym samym pliku (scss/globals/_globals-m.scss) zaraz pod pierwszą linijką wklej poniższy kod:
.set-product-hidden-lq{
display: none;
}