Obsługa nowych zestawów

Obsługa nowych zestawów

Z tego artykułu dowiesz się jak dodać w szablonie obsługę nowych zestawów.

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