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:


<div class="sets-ui sets-lq">
		<h2>{{ translations.BuyInSet }}</h2>

  		{% for set in product.SetsExt -%}
		  	{% assign setPrice = '' -%}
		  	{% assign setPreviousPrice = '' -%}
			<div class="form-container-ui clear-after-ui add-to-cart-form-container-lq">
				<div class="form-lq add-set-to-cart-ui clear-after-ui need-product-id-lq add-to-cart-lq add-set-to-cart-lq">
				  	<div class="items-column-ui {% if customer.HidePrices -%} hidden-prices-ui {% endif -%}">
						<div class="set-name-ui">{{ set.SetName }}</div>
						<div class="product-presentation-slider-ui set-slider-lq">
							{% 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 -%}
									<div class="set-product-lq set-product-ui {% if index > 1 -%} set-product-hidden-lq {% endif -%}" data-set-element-id="{{setElement.SetElementId}}" data-set-product-id="{{setProduct.SetProductId}}" data-set-product-value="{{setProduct.Value}}" data-set-product-previous-value="{{setProduct.PreviousValue}}" data-id="{{setProduct.Id}}" data-name="{{setProduct.NameNoHtml | H}}" data-price="{{setProduct.Price}}" data-price-full="{{setProduct.Price | ToPrice}} {{ customer.CurrencyExt|H }}" data-quantity="{{setProduct.Quantity | Normalize}}">
										<a href="{{ setProduct.Url }}">
											<figure>
												{{ setProduct | Img:'medium' }}
												<div class="flags-ui">
													{% if setProduct.FreeProduct -%}
														<span class="free-ui">{{ translations.Free }}!</span>
													{% endif %}
													{% if setProduct.Quantity != 1 -%}
														{% assign quantity = setProduct.Quantity -%}
														{% unless config.Products.DecimalUnits -%}
															{% assign quantity = setProduct.Quantity | Normalize -%}
														{% endunless -%}
														<span>{{ quantity }}{{ setProduct.Unit }}</span>
													{% endif -%}
												</div>
											</figure>
										</a>
										<div class="name-ui">{{ setProduct.NameNoHtml }}</div>
										{% if setProduct.AttributesPolyvalent -%}
											{% for attribute in setProduct.AttributesPolyvalent -%}
												<div class="set-attribute-ui clear-after-ui attributes-lq">
													<span class="set-attribute-name-ui">{{ attribute.Name }}</span>
													<span class="set-attribute-value-ui select-background-ui">
														<select aria-label="attributePolyvalent" name="attributePolyvalent" data-id="{{attribute.Id}}">
															{% for value in attribute.Values -%}
																<option value="{{ value.ValueId }}" {% if value.ValueId == attribute.Values[0].ValueId -%} selected="selected" {% endif -%}>{{ value.Value | H }}</option>
															{% endfor -%}
														</select>
													</span>
													<i class="ti-angle-down select-arrow-ui"></i>
												</div>
											{% endfor -%}
										{% endif -%}
										{% if setProduct.AttributesEditable -%}
											{% for attribute in setProduct.AttributesEditable -%}
												<div class="set-attribute-ui">
													<span class="set-attribute-name-ui">{{ attribute.Name }} <span class="required-ui">*</span></span>
													{% case attribute.Format -%}
														{% when 1 -%}
															<input class="set-attribute-value-ui" aria-label="attributeEditable" type="text" name="attributeEditable" value="" maxlength="50" required data-id="{{attribute.Id}}" />
														{% when 2 -%}
															<input class="set-attribute-value-ui" aria-label="attributeEditable" type="number" name="attributeEditable" value="" max="999999999999999" required data-id="{{attribute.Id}}" />
														{% when 3 -%}
															<span class="set-attribute-value-ui select-background-ui">
																<select aria-label="attributeEditable" name="attributeEditable" data-id="{{attribute.Id}}">
																	{% for val in attribute.Values %}
																		<option {% if val.ValueId == attribute.Values[0].ValueId -%} selected="selected" {% endif -%} value="{{ val.ValueId }}">{{ val.Value }}</option>
																	{% endfor -%}
																</select>
															</span>
															<i class="ti-angle-down select-arrow-ui"></i>
														{% when 4 -%}
															<input class="set-attribute-value-ui" aria-label="attributeEditable" type="date" name="attributeEditable" value="" required data-id="{{attribute.Id}}" />
													{% endcase -%}
													<div class="error-ui validation-info-lq validation-required-lq hidden-lq">
														{{ translations.FillAttributeValue }}
													</div>
												</div>
											{% endfor -%}
										{% endif -%}
										{% if setProduct.Supplies.Key != null -%}
											<div class="container-lq" data-template="product/set-product-supplies.html">
												{% include 'product/set-product-supplies.html' with setProduct -%}
											</div>
										{% endif -%}
										{% assign setElementProductsSize = setElement.Products | Size -%}
										{% if setElementProductsSize > 1 -%}
											<button class="open-set-element-products-popup-lq">{{ translations.Change }}</button>
										{% endif -%}
									</div>
								{% endfor -%}
							{% endfor -%}
						</div>
						{% for setElement in set.Elements -%}
							<div class="message-popup-background-ui hidden-lq hide-lq container-to-hide-lq" data-set-element-products-popup="{{setElement.SetElementId}}">
								<div class="message-popup-ui" style="overflow: auto;">
									<button aria-label="hide-container" class="btn-pure-ui close-ui hide-container-lq">
										<i class="ti-close"></i>
									</button>
									{% for setProduct in setElement.Products -%}
										<div class="change-set-element-product-ui change-set-element-product-lq" data-set-product-id="{{setProduct.SetProductId}}">
											<figure>
												{{ setProduct | Img:'medium' }}
												<div class="flags-ui">
													{% if setProduct.FreeProduct -%}
														<span class="free-ui">{{ translations.Free }}!</span>
													{% endif %}
													{% if setProduct.Quantity != 1 -%}
														{% assign quantity = setProduct.Quantity -%}
														{% unless config.Products.DecimalUnits -%}
															{% assign quantity = setProduct.Quantity | Normalize -%}
														{% endunless -%}
														<span>{{ quantity }}{{ setProduct.Unit }}</span>
													{% endif -%}
												</div>
											</figure>
											<div class="name-ui">{{ setProduct.NameNoHtml }}</div>
										</div>
									{% endfor -%}
								</div>
							</div>
						{% endfor -%}
				  	</div>
				  	{% unless customer.HidePrices -%}
					  	<div class="prices-column-ui">
							<div class="prices-ui">
								<div class="old-price-ui old-price-lq {% if settings.previousPriceAsSuggestedRetailPrice == 'yes' %} suggested-retail-price-ui {% endif -%} {% if setPreviousPrice <= setPrice or setPreviousPrice == 0 -%} hidden-lq {% endif -%}">
									<span class="value-lq">{{ setPreviousPrice | Round: config.DecimalPlacesPrice | ToPrice }}</span> {{ customer.CurrencyExt }} {% if settings.previousPriceAsSuggestedRetailPrice == 'yes' %}<i class="ti-info-alt" title="{{translations.SuggestedRetailPrice}}"></i>{% endif -%}
								</div>
								{% if customer.Cart.SubtotalPrices -%}
									<div class="brutto-netto-ui {% if setPreviousPrice <= setPrice or setPreviousPrice == 0 -%} hidden-lq {% endif -%}">{{ translations.Netto | Downcase }}</div>
								{% else -%}
									<div class="brutto-netto-ui {% if setPreviousPrice <= setPrice or setPreviousPrice == 0 -%} hidden-lq {% endif -%}">{{ translations.Brutto | Downcase }}</div>
								{% endif -%}
								<div class="saved-money-ui saved-money-lq {% if setPreviousPrice <= setPrice or setPreviousPrice == 0 -%} hidden-lq {% endif -%}">
									<span class="value-lq">{{ setPrice | Minus: setPreviousPrice | Round: config.DecimalPlacesPrice | ToPrice }}</span> {{ customer.CurrencyExt }}
								</div>
								{% if customer.Cart.SubtotalPrices -%}
									<div class="brutto-netto-ui {% if setPreviousPrice <= setPrice or setPreviousPrice == 0 -%} hidden-lq {% endif -%}">{{ translations.Netto | Downcase }}</div>
								{% else -%}
									<div class="brutto-netto-ui {% if setPreviousPrice <= setPrice or setPreviousPrice == 0 -%} hidden-lq {% endif -%}">{{ translations.Brutto | Downcase }}</div>
								{% endif -%}
								{% if customer.Cart.SubtotalPrices -%}
									<div class="netto-ui netto-lq"><span class="value-lq">{{ setPrice | Round: config.DecimalPlacesPrice | ToPrice }}</span> {{ customer.CurrencyExt }}</div>
									<div class="brutto-netto-ui {% if setPreviousPrice > 0 -%} with-old-price-ui {% endif -%}">{{ translations.Netto | Downcase }}</div>
							  	{% else -%}
									<div class="brutto-ui brutto-lq"><span class="value-lq">{{ setPrice | Round: config.DecimalPlacesPrice | ToPrice }}</span> {{ customer.CurrencyExt }}</div>
									<div class="brutto-netto-ui {% if setPreviousPrice > 0 -%} with-old-price-ui {% endif -%}">{{ translations.Brutto | Downcase }}</div>
							  	{% endif -%}
						  	</div>
							{% if setPrice > 0 -%}
								<button aria-label="add-to-cart-button" class="{% if customer.Cart.EditedOrderId or customer.Cart.Inquiry -%} editing-order-ui {% endif -%} add-to-cart-ui add-to-cart-button-lq {% comment -%}{% if customer.Carts[1] -%} choose-cart-lq {% else -%} add-to-cart-update-client-area-lq one-cart-ui {% endif -%}{% endcomment -%} add-to-cart-update-client-area-lq parent-container-reload-lq" {% if newQuery and settings.afterAddingToCart != 1 -%}data-url="{{ dataUrl }}"{% endif -%} {% if settings.afterAddingToCart == 1 -%}data-redirect-url="{{ redirectUrl }}"{% endif -%} {% if customer.Carts[1] -%} data-current-cart-id="{{ currentCartId }}" {% endif -%} data-set-id="{{ set.SetId }}">
									{% if customer.Cart.EditedOrderId -%}
										<i class="ti-bag"></i>
									{% elseif customer.Cart.Inquiry -%}
										<i class="ti-bar-chart-alt"></i>
									{% else -%}
										<i class="ti-shopping-cart"></i>
									{% endif -%}
									<span class="add-to-cart-label-ui add-to-cart-label-lq">
										<span class="lower-text-ui">
											{% capture mid -%}</span><span class="bigger-text-ui">{% endcapture -%}
											{% capture end -%} <span class="cart-name-lq"> {{ currentCartName }}</span>{% 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 -%}
										</span>
									</span>
								</button>
							{% endif -%}
						</div>
					{% endunless -%}
				</div>
		  	</div>
	  	{% endfor -%}
	</div>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

<h2>{{ translations.BuyInSet }}</h2>

{% for set in product.SetsExt -%}

{% assign setPrice = '' -%}

{% assign setPreviousPrice = '' -%}

<div class="set-name-ui">{{ set.SetName }}</div>

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

{% if setProduct.PreviousValue -%}

{% if setPreviousPrice == '' -%}

{% assign setPreviousPrice = setProduct.PreviousValue -%}

{% else -%}

{% assign setPreviousPrice = setPreviousPrice | Plus: setProduct.PreviousValue -%}

{% endif -%}

<div class="set-product-lq set-product-ui {% if index > 1 -%} set-product-hidden-lq {% endif -%}" data-set-element-id="{{setElement.SetElementId}}" data-set-product-id="{{setProduct.SetProductId}}" data-set-product-value="{{setProduct.Value}}" data-set-product-previous-value="{{setProduct.PreviousValue}}" data-id="{{setProduct.Id}}" data-name="{{setProduct.NameNoHtml | H}}" data-price="{{setProduct.Price}}" data-price-full="{{setProduct.Price | ToPrice}} {{ customer.CurrencyExt|H }}" data-quantity="{{setProduct.Quantity | Normalize}}">

{% if setProduct.FreeProduct -%}

<span class="free-ui">{{ translations.Free }}!</span>

{% endif %}

{% if setProduct.Quantity != 1 -%}

{% assign quantity = setProduct.Quantity -%}

{% unless config.Products.DecimalUnits -%}

{% assign quantity = setProduct.Quantity | Normalize -%}

{% endunless -%}

<span>{{ quantity }}{{ setProduct.Unit }}</span>

{% endif -%}

</div>

</figure>

</a>

<div class="name-ui">{{ setProduct.NameNoHtml }}</div>

{% if setProduct.AttributesPolyvalent -%}

{% for attribute in setProduct.AttributesPolyvalent -%}

<span class="set-attribute-name-ui">{{ attribute.Name }}</span>

{% for value in attribute.Values -%}

<option value="{{ value.ValueId }}" {% if value.ValueId == attribute.Values[0].ValueId -%} selected="selected" {% endif -%}>{{ value.Value | H }}</option>

{% endfor -%}

</select>

</span>

</div>

{% endfor -%}

{% endif -%}

{% if setProduct.AttributesEditable -%}

{% for attribute in setProduct.AttributesEditable -%}

<span class="set-attribute-name-ui">{{ attribute.Name }} <span class="required-ui">*</span></span>

{% case attribute.Format -%}

{% when 1 -%}

{% when 2 -%}

{% when 3 -%}

{% for val in attribute.Values %}

<option {% if val.ValueId == attribute.Values[0].ValueId -%} selected="selected" {% endif -%} value="{{ val.ValueId }}">{{ val.Value }}</option>

{% endfor -%}

</select>

</span>

{% when 4 -%}

{% endcase -%}

</div>

{% endfor -%}

{% endif -%}

{% if setProduct.Supplies.Key != null -%}

{% include 'product/set-product-supplies.html' with setProduct -%}

</div>

{% endif -%}

{% assign setElementProductsSize = setElement.Products | Size -%}

{% if setElementProductsSize > 1 -%}

<button class="open-set-element-products-popup-lq">{{ translations.Change }}</button>

{% endif -%}

</div>

{% endfor -%}

</div>

{% for setElement in set.Elements -%}

</button>

{% for setProduct in setElement.Products -%}

{% if setProduct.FreeProduct -%}

<span class="free-ui">{{ translations.Free }}!</span>

{% endif %}

{% if setProduct.Quantity != 1 -%}

{% assign quantity = setProduct.Quantity -%}

{% unless config.Products.DecimalUnits -%}

{% assign quantity = setProduct.Quantity | Normalize -%}

{% endunless -%}

<span>{{ quantity }}{{ setProduct.Unit }}</span>

{% endif -%}

</div>

</figure>

<div class="name-ui">{{ setProduct.NameNoHtml }}</div>

</div>

{% endfor -%}

</div>

{% endfor -%}

</div>

{% unless customer.HidePrices -%}

<span class="value-lq">{{ setPreviousPrice | Round: config.DecimalPlacesPrice | ToPrice }}</span> {{ customer.CurrencyExt }} {% if settings.previousPriceAsSuggestedRetailPrice == 'yes' %}<i class="ti-info-alt" title="{{translations.SuggestedRetailPrice}}"></i>{% endif -%}

</div>

{% if customer.Cart.SubtotalPrices -%}

<div class="brutto-netto-ui {% if setPreviousPrice <= setPrice or setPreviousPrice == 0 -%} hidden-lq {% endif -%}">{{ translations.Netto | Downcase }}</div>

{% else -%}

<div class="brutto-netto-ui {% if setPreviousPrice <= setPrice or setPreviousPrice == 0 -%} hidden-lq {% endif -%}">{{ translations.Brutto | Downcase }}</div>

{% endif -%}

<span class="value-lq">{{ setPrice | Minus: setPreviousPrice | Round: config.DecimalPlacesPrice | ToPrice }}</span> {{ customer.CurrencyExt }}

</div>

{% if customer.Cart.SubtotalPrices -%}

<div class="brutto-netto-ui {% if setPreviousPrice <= setPrice or setPreviousPrice == 0 -%} hidden-lq {% endif -%}">{{ translations.Netto | Downcase }}</div>

{% else -%}

<div class="brutto-netto-ui {% if setPreviousPrice <= setPrice or setPreviousPrice == 0 -%} hidden-lq {% endif -%}">{{ translations.Brutto | Downcase }}</div>

{% endif -%}

{% if customer.Cart.SubtotalPrices -%}

<div class="netto-ui netto-lq"><span class="value-lq">{{ setPrice | Round: config.DecimalPlacesPrice | ToPrice }}</span> {{ customer.CurrencyExt }}</div>

<div class="brutto-netto-ui {% if setPreviousPrice > 0 -%} with-old-price-ui {% endif -%}">{{ translations.Netto | Downcase }}</div>

{% else -%}

<div class="brutto-ui brutto-lq"><span class="value-lq">{{ setPrice | Round: config.DecimalPlacesPrice | ToPrice }}</span> {{ customer.CurrencyExt }}</div>

<div class="brutto-netto-ui {% if setPreviousPrice > 0 -%} with-old-price-ui {% endif -%}">{{ translations.Brutto | Downcase }}</div>

{% endif -%}

</div>

{% if setPrice > 0 -%}

{% if customer.Cart.EditedOrderId -%}

{% elseif customer.Cart.Inquiry -%}

{% else -%}

{% endif -%}

{% capture mid -%}</span><span class="bigger-text-ui">{% endcapture -%}

{% capture end -%} <span class="cart-name-lq"> {{ currentCartName }}</span>{% endcapture -%}

{% assign cartsAmount = customer.Carts | Size -%}

{% if customer.Cart.EditedOrderId or cartsAmount > 1 -%}

{% if customer.Cart.EditedOrderId -%}

{% assign end = end | Prepend:mid -%}

{% elseif customer.Cart.Inquiry -%}

{% else -%}

{% endif -%}

{% elseif customer.Cart.Inquiry -%}

{% else -%}

{% endif -%}

</span>

</button>

{% endif -%}

</div>

{% endunless -%}

</div>

{% endfor -%}

</div>

Następnie w pliku js/init.js znajdź frazę:


if(form.hasClass('add-set-to-cart-lq')){

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

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

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

$('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) {

$('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) {)

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

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

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

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

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

&: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;

}

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

.set-product-hidden-lq{

display: none;

}

Obsługa nowych zestawów

Obsługa nowych zestawów

Szafir

Czy ten artykuł był pomocny?

Społeczność Comarch

Oferta e-Commerce

Przydatne linki

Kontakt