Obsługa atrybutów na liście towarów

Obsługa atrybutów na liście towarów

W tym artykule dowiesz się jak zmodyfikować swój szablon, aby z poziomu listy towarów dało się dodawać do koszyka towary z atrybutami.

Wskazówka
W tym artykule trzeba będzie wprowadzać zmiany w plikach js oraz scss. Z tego artykułu dowiesz się jak je kompilować i minifikować.

Szafir

W folderze products dodaj plik add-variants-to-cart-from-products-list.html i wklej do niego poniższy kod:

{% include 'common/date-format.html' -%}

{% assign product = product-presentation.Product -%}
{% assign url = page.Url -%}

{% comment -%}{% endcomment -%}
{% assign suppliesSize = product.Supplies.Supplies | Size -%}
{% if product.Supplies != null and suppliesSize != 0 -%}
	{% comment -%}{% endcomment -%}
	{% if page.QueryString contains 'keys' -%}
		{% assign queries = page.QueryString | Split:'&' -%}
		{% for query in queries -%}
			{% if query contains 'keys' -%}
				{% assign queryString = query | Split:'=' -%}
				{% assign joinedKeys = queryString[1] | Replace: '%2c', ',' -%}
				{% assign keys = joinedKeys | Split:',' -%}
			{% endif -%}
		{% endfor -%}
	{% else -%}
		{% if product.Supplies.Key != null -%}
			{% assign joinedKeys = product.Supplies.Key | Replace: '%2c', ',' -%}
			{% assign keys = joinedKeys | Split:',' -%}
		{% else -%}
			{% assign noParentSupply = product.Supplies.Supplies[0] -%}
			{% assign size = product.Supplies.AttributeNames | Size -%}
			{% for attribute in product.Supplies.AttributeNames -%}
				{% if forloop.index != 1 -%}
					{% assign noParentSupply = noParentSupply.Supplies[0] -%}
				{% endif -%}
				{% if forloop.index == size -%}
					{% assign joinedKeys = noParentSupply.Key | Replace: '%2c', ',' -%}
					{% assign keys = joinedKeys | Split:',' -%}
					{% assign noParentKey = true -%}
				{% endif -%}
		  {% endfor -%}
		{% endif -%}
	{% endif -%}

	{% comment -%}{% endcomment -%}
	{% assign supplies = product.Supplies.Supplies -%}
	{% for key in keys -%}
  	{% for supply in supplies -%}
  		{% if supply.ValueId == key -%}
				{% assign supplies = supply.Supplies -%}
				{% if supply.Key and product.Clip == true -%}
					{% assign supplyProduct = supply.Product -%}
				{% endif -%}
			{% endif -%}
		{% endfor -%}
  {% endfor -%}
{% endif -%}

{% comment -%}{% endcomment -%}
{% if product.Clip or product.Batch -%}
	{% if product.Supplies != null and suppliesSize != 0 -%}
		{% assign suppliesAsNotSupplies = false -%}
	{% endif -%}
{% endif -%}
{% if suppliesAsNotSupplies == false and product.Clip -%}
	{% assign activeProduct = supplyProduct -%}
{% else -%}
	{% assign activeProduct = product -%}
{% endif -%}

{% comment -%}{% endcomment -%}
{% if page.QueryString contains 'unit' -%}
	{% assign queries = page.QueryString | Split:'&' -%}
	{% for query in queries -%}
		{% if query contains 'unit' -%}
			{% assign queryString = query | Split:'=' -%}
			{% assign queriesSize = queryString | Size -%}
			{% if queriesSize > 1 -%}
				{% assign unitId = queryString[1] -%}
			{% else -%}
				{% assign unitId = null -%}
			{% endif -%}
			{% for unit in product.Units -%}
				{% if unit.Id == unitId -%}
					{% assign unitDimensions = unit.Dimensions-%}
					{% assign unitRatio = unit.Ratio -%}
					{% assign unitName = unit.Name -%}
					{% assign defaultUnit = unit.Default -%}
				{% endif -%}
		  	{% endfor -%}
		{% endif -%}
	{% endfor -%}
{% else -%}
	{% for unit in product.Units -%}
		{% if unit.Default == true or unit.Id == null -%}
			{% assign unitDimensions = unit.Dimensions-%}
			{% assign unitId = unit.Id -%}
			{% assign unitRatio = unit.Ratio -%}
			{% assign unitName = unit.Name -%}
			{% assign defaultUnit = unit.Default -%}
		{% endif -%}
  	{% endfor -%}
{% endif -%}

{% comment -%}{% endcomment -%}
{% assign noProductOnControlledStock = false -%}
{% if activeProduct.StockLevel.QuantityControl == true and activeProduct.StockLevel.Value == 0 -%}
	{% assign noProductOnControlledStock = true -%}
{% else -%}
	{% assign noProductOnControlledStock = false -%}
{% endif -%}

{% comment -%}{% endcomment -%}
{% if usr.Authenticated == false and settings.notAuthStock == 'no' -%}
	{% assign showStock = false -%}
{% else -%}
	{% assign showStock = true -%}
{% endif -%}

{% comment -%}{% endcomment -%}
{% if customer.Carts[1] or customer.Cart.EditedOrderId -%}
	{% assign inquiryExists = false -%}
	{% assign lastCartId = -1 -%}
	{% for cart in customer.Carts -%}
		{% if cart.Current -%}
			{% assign currentCartId = cart.Id -%}
			{% assign currentCartName = cart.Name -%}
		{% endif -%}
		{% if cart.Inquiry -%}
			{% assign inquiryExists = true -%}
			{% assign inquiryId = cart.Id -%}
		{% else -%}
			{% assign lastCartId = cart.Id -%}
		{% endif -%}
	{% endfor -%}
{% endif -%}

{% comment -%}{% endcomment -%}
{% if product.Archival == false -%}
	{% if suppliesAsNotSupplies == false or activeProduct.AttributesPolyvalent[0] -%}
		{% if activeProduct.AttributesPolyvalent[0] -%}
			{% if activeProduct.AskForPrice == false -%}
				{% assign tableView = true -%}
			{% else -%}
				{% assign tableView = false -%}
			{% endif -%}
		{% else -%}
			{% assign tableView = true -%}
		{% endif -%}
	{% else -%}
		{% assign tableView = false -%}
	{% endif -%}
{% else -%}
	{% assign tableView = false -%}
{% endif -%}

{% if product.Batch -%}
	
{% elseif product.Clip -%}
	
{% else -%}
	
{% endif -%}

 

 

{{translations.ChooseProductVariant}} {{product.Name}}

 

{% if activeProduct.Availability.Text != ” and product.Archival == false -%} {% include 'common/date-format.html’ -%}

{{ translations.Availability }}: {{ activeProduct.Availability.Text }} {% if activeProduct.Availability.Date != null -%}(){% endif -%}

{% endif -%} {% if product.Archival == false -%} {% unless noProductOnControlledStock and activeProduct.AskForPrice -%}

{% if tableView == false -%} {% unless customer.HidePrices == false and activeProduct.AskForPrice == true -%}

{% include 'product/amount-stepper.html’ with activeProduct -%} {% if product.Units[1] -%} {% if settings.showUnitRateOnProductDetailsPage == 'yes’ %} {% if settings.showUnitRateOnProductDetailsPageUnit == 'default’ %} {% if defaultUnit == false and unitId != null -%}

1 {{unitName}} = {{unitRatio|DividedBy: product.BasicUnitRatio | Round: 4}} {{product.SaleUnit}}

{% endif -%} {% else -%} {% if product.BasicUnit != unitName -%}

1 {{unitName}} = {{unitRatio | Round: 4}} {{product.BasicUnit}}

{% endif -%} {% endif -%} {% endif -%} {% else -%} {{ product.SaleUnit }} {% endif -%}

{% endunless -%} {% endif -%} {% if activeProduct.Availability.Status == 3 -%} {% assign notifyMe = true -%} {% else -%} {% assign notifyMe = false -%} {% endif -%} {% if notifyMe == false -%} {% if product.Clip or product.Batch -%} {% assign supplies = product.Supplies.Supplies -%} {% for attribute in product.Supplies.AttributeNames -%} {% assign lvl = forloop.index -%} {% assign levelsQuantity = product.Supplies.AttributeNames | Size -%} {% if lvl != levelsQuantity -%}

 

{{ attribute.Name }}

 

{% assign key = keys[forloop.index0] -%} {% for supply in supplies -%} {% if supply.Key -%} {% assign dataKeys = supply.Key -%} {% else -%} {% assign childs = supply.Supplies -%} {% assign size = keys | Size -%} {% assign end = size | Minus: lvl -%} {% for lvl in (1..end) -%} {% for child in childs -%} {% if child.ValueId == childs[0].ValueId -%} {% unless child.Key -%} {% assign childs = child.Supplies -%} {% else -%} {% assign dataKeys = child.Key -%} {% endunless -%} {% break -%} {% endif -%} {% endfor -%} {% endfor -%} {% endif -%} {% if supply.ValueId == key -%} {% assign supplies = supply.Supplies -%} {% if supply.Key == joinedKeys -%} {% for keyVal in keys -%} {% endfor -%} {% endif -%} {% endif -%} {% endfor -%}

 

{% else -%}

 

 

{{ attribute.Name }}

{% if config.ENTERPRISE -%}

{% unless customer.Cart.SubtotalPrices and settings.onlySubtotalPrice == 'yes’ -%}{{ translations.TotalPrice }}{% endunless -%}

 

{{ translations.SubtotalPrice }}

{% else -%} {% if customer.Cart.SubtotalPrices -%}

{{ translations.SubtotalPrice }}

{% else -%}

{{ translations.TotalPrice }}

{% endif -%} {% endif -%} {% if product.StockLevel != null and showStock -%}

{{ translations.Stock }}

{% endif -%}

{{ translations.Quantity }}

 

{{ translations.Unit }}

 

{% assign key = keys[forloop.index0] -%} {% for supply in supplies -%} {% if supply.Key -%} {% assign dataKeys = supply.Key -%} {% else -%} {% assign childs = supply.Supplies -%} {% assign size = keys | Size -%} {% assign end = size | Minus: lvl -%} {% for lvl in (1..end) -%} {% for child in childs -%} {% if child.ValueId == childs[0].ValueId -%} {% unless child.Key -%} {% assign childs = child.Supplies -%} {% else -%} {% assign dataKeys = child.Key -%} {% endunless -%} {% break -%} {% endif -%} {% endfor -%} {% endfor -%} {% endif -%} {% if product.Clip -%} {% assign supplyProduct = supply.Product -%} {% elseif product.Batch -%} {% assign supplyProduct = product -%} {% endif -%} {% assign supplyStockLevel = supply.StockLevel -%}

{{ supply.Value }}

{% if config.ENTERPRISE -%}

{% unless customer.Cart.SubtotalPrices and settings.onlySubtotalPrice == 'yes’ -%} {% if supplyProduct.TotalPrice != null -%} {% if settings.showUnitRateOnProductDetailsPage == 'yes’ and product.Units[1] %} {% for unit in product.Units -%} {% if settings.showUnitRateOnProductDetailsPageUnit == 'default’ %} {% if unit.Id != unitId -%}

{{ supplyProduct.TotalPrice | DividedBy: product.BasicUnitRatio | Times: unitRatio | Round: config.DecimalPlacesPrice | ToPrice: config.DecimalPlacesPrice }}/{{unitName}}

{% endif -%} {% else -%} {% if unit.Name != product.BasicUnit -%}

{{ supplyProduct.TotalPrice | DividedBy: product.BasicUnitRatio | Round: config.DecimalPlacesPrice | ToPrice: config.DecimalPlacesPrice }}/{{product.BasicUnit}}

{% endif -%} {% endif -%} {% endfor -%} {% endif -%} {{ translations.Brutto | Downcase }} {{ supplyProduct.TotalPrice | DividedBy: product.BasicUnitRatio | Times: unitRatio | Round: config.DecimalPlacesPrice | ToPrice }} {{ currency }} {% else -%} {{ translations.AskForPrice }} {% endif -%} {% endunless -%} {% if supplyProduct.TotalPreviousPrice != null and supplyProduct.TotalPreviousPrice > supplyProduct.TotalPrice -%}

 

{{ supplyProduct.TotalPreviousPrice | DividedBy: product.BasicUnitRatio | Times: unitRatio | Round: config.DecimalPlacesPrice | ToPrice }} {{ currency }} {% if settings.previousPriceAsSuggestedRetailPrice == 'yes’ %} {% endif -%}

{% endif -%}

 

{% if supplyProduct.SubtotalPrice != null -%} {% if settings.showUnitRateOnProductDetailsPage == 'yes’ and product.Units[1] %} {% for unit in product.Units -%} {% if settings.showUnitRateOnProductDetailsPageUnit == 'default’ %} {% if unit.Id != unitId -%}

{{ supplyProduct.SubtotalPrice | DividedBy: product.BasicUnitRatio | Times: unitRatio | Round: config.DecimalPlacesPrice | ToPrice: config.DecimalPlacesPrice }}/{{unitName}}

{% endif -%} {% else -%} {% if unit.Name != product.BasicUnit -%}

{{ supplyProduct.SubtotalPrice | DividedBy: product.BasicUnitRatio | Round: config.DecimalPlacesPrice | ToPrice: config.DecimalPlacesPrice }}/{{product.BasicUnit}}

{% endif -%} {% endif -%} {% endfor -%} {% endif -%} {{ translations.Netto | Downcase }} {{ supplyProduct.SubtotalPrice | DividedBy: product.BasicUnitRatio | Times: unitRatio | Round: config.DecimalPlacesPrice | ToPrice }} {{ currency }} {% else -%} {{ translations.AskForPrice }} {% endif -%} {% if supplyProduct.SubtotalPreviousPrice != null and supplyProduct.SubtotalPreviousPrice > supplyProduct.SubtotalPrice -%}

 

{{ supplyProduct.SubtotalPreviousPrice | DividedBy: product.BasicUnitRatio | Times: unitRatio | Round: config.DecimalPlacesPrice | ToPrice }} {{ currency }} {% if settings.previousPriceAsSuggestedRetailPrice == 'yes’ %} {% endif -%}

{% endif -%}

{% else -%} {% if customer.Cart.SubtotalPrices -%}

{% if supplyProduct.Price != null -%} {% if settings.showUnitRateOnProductDetailsPage == 'yes’ and product.Units[1] %} {% for unit in product.Units -%} {% if settings.showUnitRateOnProductDetailsPageUnit == 'default’ %} {% if unit.Id != unitId -%}

{{ supplyProduct.Price | DividedBy: product.BasicUnitRatio | Times: unitRatio | Round: config.DecimalPlacesPrice | ToPrice: config.DecimalPlacesPrice }}/{{unitName}}

{% endif -%} {% else -%} {% if unit.Name != product.BasicUnit -%}

{{ supplyProduct.Price | DividedBy: product.BasicUnitRatio | Round: config.DecimalPlacesPrice | ToPrice: config.DecimalPlacesPrice }}/{{product.BasicUnit}}

{% endif -%} {% endif -%} {% endfor -%} {% endif -%} {{ translations.Netto | Downcase }} {{ supplyProduct.Price | DividedBy: product.BasicUnitRatio | Times: unitRatio | Round: config.DecimalPlacesPrice | ToPrice }} {{ currency }} {% else -%} {{ translations.AskForPrice }} {% endif -%} {% if supplyProduct.PreviousPrice != null and supplyProduct.PreviousPrice > supplyProduct.Price -%}

 

{{ supplyProduct.PreviousPrice | DividedBy: product.BasicUnitRatio | Times: unitRatio | Round: config.DecimalPlacesPrice | ToPrice }} {{ currency }} {% if settings.previousPriceAsSuggestedRetailPrice == 'yes’ %} {% endif -%}

{% endif -%}

{% else -%}

{% if supplyProduct.Price != null -%} {% if settings.showUnitRateOnProductDetailsPage == 'yes’ and product.Units[1] %} {% for unit in product.Units -%} {% if settings.showUnitRateOnProductDetailsPageUnit == 'default’ %} {% if unit.Id != unitId -%}

{{ supplyProduct.Price | DividedBy: product.BasicUnitRatio | Times: unitRatio | Round: config.DecimalPlacesPrice | ToPrice: config.DecimalPlacesPrice }}/{{unitName}}

{% endif -%} {% else -%} {% if unit.Name != product.BasicUnit -%}

{{ supplyProduct.Price | DividedBy: product.BasicUnitRatio | Round: config.DecimalPlacesPrice | ToPrice: config.DecimalPlacesPrice }}/{{product.BasicUnit}}

{% endif -%} {% endif -%} {% endfor -%} {% endif -%} {{ translations.Brutto | Downcase }} {{ supplyProduct.Price | DividedBy: product.BasicUnitRatio | Times: unitRatio | Round: config.DecimalPlacesPrice | ToPrice }} {{ currency }} {% else -%} {{ translations.AskForPrice }} {% endif -%} {% if supplyProduct.PreviousPrice != null and supplyProduct.PreviousPrice > supplyProduct.Price -%}

 

{{ supplyProduct.PreviousPrice | DividedBy: product.BasicUnitRatio | Times: unitRatio | Round: config.DecimalPlacesPrice | ToPrice }} {{ currency }} {% if settings.previousPriceAsSuggestedRetailPrice == 'yes’ %} {% endif -%}

{% endif -%}

{% endif -%} {% endif -%} {% if product.StockLevel != null and showStock -%}

 

{{ translations.InStock }}:

{% if supplyStockLevel.ImageUrl != null -%} {% if supplyStockLevel.Type == 1 or supplyStockLevel.Type == 2 -%} {{ supplyStockLevel.Text }} {% endif -%} {% elseif supplyStockLevel.Text != null and supplyStockLevel.Type == 3 -%} {{ supplyStockLevel.Text }} {% else -%} {{ supplyStockLevel.Value | Normalize }} {% endif -%}

{% endif -%}

{% if supplyProduct.StockLevel.QuantityControl == true and supplyProduct.StockLevel.Value == 0 -%} {% assign noSupplyProductOnControlledStock = true -%} {% else -%} {% assign noSupplyProductOnControlledStock = false -%} {% endif -%} {% if noSupplyProductOnControlledStock -%}

{% comment -%}{% endcomment -%}

{% elseif supplyProduct.AskForPrice == false and supplyProduct.Availability.Status != 3 -%} {% if product.Clip -%} {% include 'product/amount-stepper.html’ with supplyProduct -%} {% elseif product.Batch -%} {% include 'product/amount-stepper.html’ with supplyStockLevel -%} {% endif -%} {% endif -%}

{% assign unitRatioInfo = false -%} {% if product.Units[1] and settings.showUnitRateOnProductDetailsPage == 'yes’ and settings.showUnitRateOnProductDetailsPageUnit == 'basic’ and unitName != product.BasicUnit -%} {% assign unitRatioInfo = true -%} {% endif -%}

{% if config.ENTERPRISE and supplyProduct.TotalPrice == null and supplyProduct.SubtotalPrice == null -%} {% elseif supplyProduct.Price == null -%} {% endif -%} {% if product.Units[1] -%} {% if settings.showUnitRateOnProductDetailsPage == 'yes’ -%} {% for unit in product.Units -%} {% if settings.showUnitRateOnProductDetailsPageUnit == 'default’ %} {% if unit.Id != unitId -%}

1 {{unit.Name}} = {{unit.Ratio | DividedBy: unitRatio | Round: 4}} {{unitName}}

{% endif -%} {% else -%} {% if unit.Name != product.BasicUnit -%}

1 {{unit.Name}} = {{unit.Ratio | Round: 4}} {{product.BasicUnit}}

{% endif -%} {% endif -%} {% endfor -%} {% endif -%} {% else -%} {{ product.SaleUnit }} {% endif -%} {% if config.ENTERPRISE and supplyProduct.TotalPrice == null and supplyProduct.SubtotalPrice == null -%}

{% elseif supplyProduct.Price == null -%} {% endif -%}

 

{% if supplyProduct.AttributesEditable[0] or supplyProduct.AttributesPolyvalent[0] -%} {% endif -%}

{% if supplyProduct.AttributesEditable[0] or supplyProduct.AttributesPolyvalent[0] -%}

 

 

{{translations.MoreAttributes}}

{% if supplyProduct.AttributesEditable[0] -%} {% for attrEditable in supplyProduct.AttributesEditable -%}

{% case attrEditable.Format -%} {% when 1 -%}

{% when 2 -%}

{% when 3 -%} {% when 4 -%}

{% endcase -%}

{{ translations.FillAttributeValue }}

 

{% endfor -%} {% endif -%} {% if supplyProduct.AttributesPolyvalent[0] -%} {% for attrPolyvalent in supplyProduct.AttributesPolyvalent -%}

{{ translations.FillAttributeValue }}

 

{% endfor -%} {% endif -%}

 

{% endif -%} {% if supply.ValueId == key -%} {% assign supplies = supply.Supplies -%} {% endif -%} {% assign dataKeys = dataKeys | Split:’,’ -%} {% for keyVal in dataKeys -%} {% endfor -%}

{% endfor -%}

{% endif -%} {% endfor -%} {% endif -%} {% endif -%} {% unless product.Clip or product.Batch -%} {% if activeProduct.Availability.Status == 3 -%} {% assign notifyMe = true -%} {% else -%} {% assign notifyMe = false -%} {% endif -%} {% if activeProduct.AttributesPolyvalent[0] and product.AskForPrice == false and product.Archival == false and notifyMe == false -%} {% for attribute in activeProduct.AttributesPolyvalent -%}

{% assign lvl = forloop.index -%} {% assign levelsQuantity = activeProduct.AttributesPolyvalent | Size -%} {% if lvl != levelsQuantity -%}

{{ attribute.Name }}

{% for value in attribute.Values -%} {% endfor -%} {% else -%}

 

 

{{ attribute.Name }}

{% if config.ENTERPRISE -%}

{% unless customer.Cart.SubtotalPrices and settings.onlySubtotalPrice == 'yes’ -%}{{ translations.TotalPrice }}{% endunless -%}

 

{{ translations.SubtotalPrice }}

{% else -%} {% if customer.Cart.SubtotalPrices -%}

{{ translations.SubtotalPrice }}

{% else -%}

{{ translations.TotalPrice }}

{% endif -%} {% endif -%} {% if product.StockLevel != null and showStock -%}

{{ translations.Stock }}

{% endif -%}

{{ translations.Quantity }}

 

{{ translations.Unit }}

 

{% if config.ENTERPRISE -%} {% unless customer.Cart.SubtotalPrices and settings.onlySubtotalPrice == 'yes’ -%} {% if settings.showUnitRateOnProductDetailsPage == 'yes’ and product.Units[1] -%} {% assign unitRatioInfoExists = true -%} {% endif -%} {% endunless -%} {% if activeProduct.TotalPreviousPrice != null and activeProduct.TotalPreviousPrice > activeProduct.TotalPrice -%} {% assign previousPriceExists = true -%} {% endif -%} {% else -%} {% if customer.Cart.SubtotalPrices -%} {% if settings.showUnitRateOnProductDetailsPage == 'yes’ and product.Units[1] -%} {% assign unitRatioInfoExists = true -%} {% endif -%} {% if activeProduct.PreviousPrice != null and activeProduct.PreviousPrice > activeProduct.Price -%} {% assign previousPriceExists = true -%} {% endif -%} {% else -%} {% if settings.showUnitRateOnProductDetailsPage == 'yes’ and product.Units[1] -%} {% assign unitRatioInfoExists = true -%} {% endif -%} {% if activeProduct.PreviousPrice != null and activeProduct.PreviousPrice > activeProduct.Price -%} {% assign previousPriceExists = true -%} {% endif -%} {% endif -%} {% endif -%} {% for value in attribute.Values -%}

{{ value.Value }}

{% if config.ENTERPRISE -%}

{% unless customer.Cart.SubtotalPrices and settings.onlySubtotalPrice == 'yes’ -%} {% if settings.showUnitRateOnProductDetailsPage == 'yes’ and product.Units[1] -%} {% for unit in product.Units -%} {% if settings.showUnitRateOnProductDetailsPageUnit == 'default’ %} {% if unit.Id != unitId -%}

{{ activeProduct.TotalPrice | DividedBy: product.BasicUnitRatio | Times: unitRatio | Round: config.DecimalPlacesPrice | ToPrice: config.DecimalPlacesPrice }}/{{unitName}}

{% endif -%} {% else -%} {% if unit.Name != product.BasicUnit -%}

{{ activeProduct.TotalPrice | DividedBy: product.BasicUnitRatio | Round: config.DecimalPlacesPrice | ToPrice: config.DecimalPlacesPrice }}/{{product.BasicUnit}}

{% endif -%} {% endif -%} {% endfor -%} {% endif -%} {{ translations.Brutto | Downcase }} {{ activeProduct.TotalPrice | DividedBy: product.BasicUnitRatio | Times: unitRatio | Round: config.DecimalPlacesPrice | ToPrice }} {{ currency }} {% endunless -%} {% if activeProduct.TotalPreviousPrice != null and activeProduct.TotalPreviousPrice > activeProduct.TotalPrice -%}

 

{{ activeProduct.TotalPreviousPrice | DividedBy: product.BasicUnitRatio | Times: unitRatio | Round: config.DecimalPlacesPrice | ToPrice }} {{ currency }} {% if settings.previousPriceAsSuggestedRetailPrice == 'yes’ %} {% endif -%}

{% endif -%}

 

{% if settings.showUnitRateOnProductDetailsPage == 'yes’ and product.Units[1] -%} {% for unit in product.Units -%} {% if settings.showUnitRateOnProductDetailsPageUnit == 'default’ %} {% if unit.Id != unitId -%}

{{ activeProduct.SubtotalPrice | DividedBy: product.BasicUnitRatio | Times: unitRatio | Round: config.DecimalPlacesPrice | ToPrice: config.DecimalPlacesPrice }}/{{unitName}}

{% endif -%} {% else -%} {% if unit.Name != product.BasicUnit -%}

{{ activeProduct.SubtotalPrice | DividedBy: product.BasicUnitRatio | Round: config.DecimalPlacesPrice | ToPrice: config.DecimalPlacesPrice }}/{{product.BasicUnit}}

{% endif -%} {% endif -%} {% endfor -%} {% endif -%} {{ translations.Netto | Downcase }} {{ activeProduct.SubtotalPrice | DividedBy: product.BasicUnitRatio | Times: unitRatio | Round: config.DecimalPlacesPrice | ToPrice }} {{ currency }} {% if activeProduct.SubtotalPreviousPrice != null and activeProduct.SubtotalPreviousPrice > activeProduct.SubtotalPrice -%}

 

{{ activeProduct.SubtotalPreviousPrice | DividedBy: product.BasicUnitRatio | Times: unitRatio | Round: config.DecimalPlacesPrice | ToPrice }} {{ currency }} {% if settings.previousPriceAsSuggestedRetailPrice == 'yes’ %} {% endif -%}

{% endif -%}

{% else -%} {% if customer.Cart.SubtotalPrices -%}

{% if settings.showUnitRateOnProductDetailsPage == 'yes’ and product.Units[1] -%} {% for unit in product.Units -%} {% if settings.showUnitRateOnProductDetailsPageUnit == 'default’ %} {% if unit.Id != unitId -%}

{{ activeProduct.Price | DividedBy: product.BasicUnitRatio | Times: unitRatio | Round: config.DecimalPlacesPrice | ToPrice: config.DecimalPlacesPrice }}/{{unitName}}

{% endif -%} {% else -%} {% if unit.Name != product.BasicUnit -%}

{{ activeProduct.Price | DividedBy: product.BasicUnitRatio | Round: config.DecimalPlacesPrice | ToPrice: config.DecimalPlacesPrice }}/{{product.BasicUnit}}

{% endif -%} {% endif -%} {% endfor -%} {% endif -%} {{ translations.Netto | Downcase }} {{ activeProduct.Price | DividedBy: product.BasicUnitRatio | Times: unitRatio | Round: config.DecimalPlacesPrice | ToPrice }} {{ currency }} {% if activeProduct.PreviousPrice != null and activeProduct.PreviousPrice > activeProduct.Price -%}

 

{{ activeProduct.PreviousPrice | DividedBy: product.BasicUnitRatio | Times: unitRatio | Round: config.DecimalPlacesPrice | ToPrice }} {{ currency }} {% if settings.previousPriceAsSuggestedRetailPrice == 'yes’ %} {% endif -%}

{% endif -%}

{% else -%}

{% if settings.showUnitRateOnProductDetailsPage == 'yes’ and product.Units[1] -%} {% for unit in product.Units -%} {% if settings.showUnitRateOnProductDetailsPageUnit == 'default’ %} {% if unit.Id != unitId -%}

{{ activeProduct.Price | DividedBy: product.BasicUnitRatio | Times: unitRatio | Round: config.DecimalPlacesPrice | ToPrice: config.DecimalPlacesPrice }}/{{unitName}}

{% endif -%} {% else -%} {% if unit.Name != product.BasicUnit -%}

{{ activeProduct.Price | DividedBy: product.BasicUnitRatio | Round: config.DecimalPlacesPrice | ToPrice: config.DecimalPlacesPrice }}/{{product.BasicUnit}}

{% endif -%} {% endif -%} {% endfor -%} {% endif -%} {{ translations.Brutto | Downcase }} {{ activeProduct.Price | DividedBy: product.BasicUnitRatio | Times: unitRatio | Round: config.DecimalPlacesPrice | ToPrice }} {{ currency }} {% if activeProduct.PreviousPrice != null and activeProduct.PreviousPrice > activeProduct.Price -%}

 

{{ activeProduct.PreviousPrice | DividedBy: product.BasicUnitRatio | Times: unitRatio | Round: config.DecimalPlacesPrice | ToPrice }} {{ currency }} {% if settings.previousPriceAsSuggestedRetailPrice == 'yes’ %} {% endif -%}

{% endif -%}

{% endif -%} {% endif -%} {% if product.StockLevel != null and showStock -%}

 

{{ translations.InStock }}:

{% if activeProduct.StockLevel.ImageUrl != null -%} {% if activeProduct.StockLevel.Type == 1 or activeProduct.StockLevel.Type == 2 -%} {{ activeProduct.StockLevel.Text }} {% endif -%} {% elseif activeProduct.StockLevel.Text != null and activeProduct.StockLevel.Type == 3 -%} {{ activeProduct.StockLevel.Text }} {% else -%} {{ activeProduct.StockLevel.Value | Normalize }} {% endif -%}

{% endif -%} {% assign attributeIndex = forloop.index0 -%}

{% include 'product/amount-stepper.html’ with activeProduct -%}

{% assign unitRatioInfo = false -%} {% if product.Units[1] and settings.showUnitRateOnProductDetailsPage == 'yes’ and settings.showUnitRateOnProductDetailsPageUnit == 'basic’ and unitName != product.BasicUnit -%} {% assign unitRatioInfo = true -%} {% endif -%}

{% if product.Units[1] -%} {% if settings.showUnitRateOnProductDetailsPage == 'yes’ -%} {% for unit in product.Units -%} {% if settings.showUnitRateOnProductDetailsPageUnit == 'default’ %} {% if unit.Id != unitId -%}

1 {{unit.Name}} = {{unit.Ratio | DividedBy: unitRatio | Round: 4}} {{unitName}}

{% endif -%} {% else -%} {% if unit.Name != product.BasicUnit -%}

1 {{unit.Name}} = {{unit.Ratio | Round: 4}} {{product.BasicUnit}}

{% endif -%} {% endif -%} {% endfor -%} {% endif -%} {% else -%} {{ product.SaleUnit }} {% endif -%}

 

{% if activeProduct.AttributesEditable[0] -%} {% endif -%}

{% if activeProduct.AttributesEditable[0] -%}

 

 

{{translations.MoreAttributes}}

{% for attrEditable in activeProduct.AttributesEditable -%}

{% case attrEditable.Format -%} {% when 1 -%}

{% when 2 -%}

{% when 3 -%} {% when 4 -%}

{% endcase -%}

{{ translations.FillAttributeValue }}

 

{% endfor -%}

 

{% endif -%}

{% endfor -%}

{% endif -%}

{% endfor -%} {% endif -%} {% if product.Batch == null or product.Batch == false -%} {% if activeProduct.AttributesEditable != empty and activeProduct.AttributesPolyvalent == empty -%} {% for attribute in activeProduct.AttributesEditable -%}

{% case attribute.Format -%} {% when 1 -%} {% when 2 -%} {% when 3 -%} {% when 4 -%} {% endcase -%}

{{ translations.FillAttributeValue }}

 

{% endfor -%} {% endif -%} {% endif -%} {% endunless -%} {% if activeProduct.Price != null and activeProduct.Availability.Status != 3 and activeProduct.AskForPrice == false -%} {% if settings.afterAddingToCart == 1 -%} {% capture redirectUrl -%}{{ page.BaseHref }}{{ config.DefinedPages.Order.Url }}{% endcapture -%} {% endif -%} {% unless joinedKeys == product.Supplies.Key and unitId == null -%} {% assign newQuery = true -%} {% capture dataUrl -%}{{ url }}?{% endcapture -%} {% if joinedKeys != product.Supplies.Key -%} {% capture dataUrl -%}{{ dataUrl }}keys={{ joinedKeys }}{% endcapture -%} {% endif -%} {% assign lastSign = dataUrl | Last -%} {% if unitId != null -%} {% if lastSign == ’?’ -%} {% capture dataUrl -%}{{ dataUrl }}unit={{ unitId }}{% endcapture -%} {% else -%} {% capture dataUrl -%}{{ dataUrl }}&unit={{ unitId }}{% endcapture -%} {% endif -%} {% endif -%} {% endunless -%} {% if tableView -%}

{% endif -%} {% if usr.Authenticated -%} {% unless tableView or config.B2B == false -%} {% endunless -%} {% endif -%} {% if canBuy -%} {% if usr.Authenticated -%} {% unless tableView or config.B2B == false -%} {% endunless -%} {% endif -%} {% if settings.redirectCustomer == 'yes’ and product.MoreInfoUrl != ” -%} {{ translations.SeeMore }} {% else -%} {% endif -%} {% endif -%} {% if tableView -%}

{% endif -%} {% endif -%}

 

{% endunless -%} {% if usr.Authenticated -%}

 

 

{{ translations.AddedToWishList }}

 

 

{{ translations.AfterAddingToWishlistInfo }}

 

{% assign day = '1.00:00:00′ | ToTimeSpan -%}

{{ translations.SelectDate }}

 

 

 

{% endif -%} {% if noProductOnControlledStock and tableView == false -%} {% assign noSimpleProductOnControlledStock = true -%} {% endif -%} {% if activeProduct.Availability.Status == 3 or noSimpleProductOnControlledStock -%} {% if usr.Authenticated -%} {% endif -%} {% if tableView -%}

{% endif -%}

{% comment -%}{% endcomment -%}

{% if tableView -%}

{% endif -%} {% endif -%} {% if activeProduct.AskForPrice == true -%} {% if usr.Authenticated -%} {% unless activeProduct.Availability.Status == 3 or noSimpleProductOnControlledStock -%} {% endunless -%} {% endif -%} {% if tableView -%}

{% endif -%}

{% comment -%}{% endcomment -%}

{% if tableView -%}

{% endif -%} {% if usr.Authenticated -%} {% unless activeProduct.Availability.Status == 3 or noSimpleProductOnControlledStock -%} {% endunless -%} {% endif -%} {% endif -%} {% endif -%}

 

 

 

Następnie w pliku products/products-list-item.html wyszukaj frazę data-product-id. Linijkę z tą frazą trzeba zastąpić poniższym kodem:

Teraz w tym samym pliku (products/products-list-item.html) wyszukaj frazę product-code-lq. Linijkę z tą frazą trzeba zastąpić poniższym kodem:


            {% if settings.attributesQuantityOnQuickView > 0 or settings.showAllAttributesOnQuickView == 'true' -%}
                {% assign showAttributesOnQuickView = true -%}
            {% endif -%}
            {% assign attributesSize = product.AttributesList.Attributes | Size -%}
            {% if config.Products.ShowCode -%}{{product.Code}}{% endif -%}    
            {% if page.PageId == config.DefinedPages.ProductList.Id and settings.showAttributesOnProductsPage == "yes" and showAttributesOnQuickView and attributesSize > 0 -%}
                
                    {% assign attributeIndex = 1 -%}
                    {% if config.Products.ShowCode -%}{{product.Code}} | {% endif -%}  
                    {% for attribute in product.AttributesList.Attributes -%}
                        
                            {% assign valuesSize = attribute.Values | Size -%}
                            {% assign valueIndex = 1 -%}
                            {% for value in attribute.Values -%}
                                {{value.Value}}{% if valueIndex != valuesSize -%}, {% elseif attributeIndex != attributesSize -%} | {% endif -%}
                                {% assign valueIndex = valueIndex | Plus:1 -%}
                            {% endfor %}
                            {% assign attributeIndex = attributeIndex | Plus:1 -%}
                          
                    {% endfor %}
                
            {% endif -%}
        

Pozostając dalej w tym samym pliku (products/products-list-item.html) wyszukaj frazę expandable-lq. Linijkę, która jest poniżej trzeba zastąpić poniższym kodem:

{% if settings.attributesQuantityOnListView > 0 or settings.showAllAttributesOnListView == 'true' -%}
                        {% assign showAttributesOnListView = true -%}
                    {% endif -%}
{{ productDesc }}

{% if page.PageId == config.DefinedPages.ProductList.Id and settings.showAttributesOnProductsPage == „yes” and showAttributesOnListView -%}

{% assign attributesSize = product.AttributesList.Attributes | Size -%} {% assign attributeIndex = 1 -%} {% for attribute in product.AttributesList.Attributes -%} {% assign valuesSize = attribute.Values | Size -%} {% assign valueIndex = 1 -%}

 

{{attribute.Name}}

 

{% for value in attribute.Values -%} {{value.Value}}{% if valueIndex != valuesSize -%}, {% endif -%} {% assign valueIndex = valueIndex | Plus:1 -%} {% endfor %}

 

{% assign attributeIndex = attributeIndex | Plus:1 -%} {% endfor %}

{% endif -%}

Nadal w tym samym pliku (products/products-list-item.html) wyszukaj frazę choose-variant-ui. Linijkę z tą frazą trzeba zastąpić poniższym kodem:

Ostatnią zmianą w tym samym pliku (products/products-list-item.html) będzie dodanie poniższego kodu prawie na samym końcu pliku (linijkę nad ostatnim zamykającym divem):

{% assign attributesSize = product.AttributesList.Attributes | Size -%}
    {% if settings.attributesQuantityOnGridView > 0 or settings.showAllAttributesOnGridView == 'true' -%}
        {% assign showAttributesOnGridView = true -%}
    {% endif -%}
    {% if page.PageId == config.DefinedPages.ProductList.Id and settings.showAttributesOnProductsPage == "yes" and attributesSize > 0 and showAttributesOnGridView -%}

{% assign attributeIndex = 1 -%} {% for attribute in product.AttributesList.Attributes -%} {% assign valuesSize = attribute.Values | Size -%} {% assign valueIndex = 1 -%}

 

{{attribute.Name}}

 

{% for value in attribute.Values -%} {{value.Value}}{% if valueIndex != valuesSize -%}, {% endif -%} {% assign valueIndex = valueIndex | Plus:1 -%} {% endfor %}

 

{% assign attributeIndex = attributeIndex | Plus:1 -%} {% endfor %}

{% endif -%}

Następnie w pliku js/init-ui1.js wyszukaj frazę childs[childIndex]. Linijkę z tą frazą oraz warunek, który będzie pod nią zastąp poniższym kodem:

if(window.childs[childIndex]){
        var childUnit = window.childs[childIndex].unit;
        if($('.dimensions-lq').index() != -1) {
            changeDimensions(childUnit);
        }
    }

Pozostając w pliku js/init-ui1.js wyszukaj frazę $('[data-product-id]’).data(’product-id’). Linijkę z tą frazą zastąp poniższym kodem:

    if($(e.currentTarget).data('id') != undefined){
        var productId = $(e.currentTarget).data('id');
    } else {
        var productId = $('[data-product-id]').data('product-id');
    }

Teraz w tym samym pliku (js/init-ui1.js) wyszukaj frazę productsAddedToCart. Linijkę nad tą frazą zastąp poniższym kodem:

if($('.child-lq').index() != -1 || $('.choose-variant-lq').index() != -1){

Na samym końcu pliku js/init-ui2.js wklej poniższy kod:

function chooseVariantOnProductsList(e) {
    var url = $(e.currentTarget).data('url');
    $.get(url, {__template: 'products/add-variants-to-cart-from-products-list.html'}, function (result) {
        $('.add-variants-to-cart-from-products-list-popup-background-lq').remove();
        $('body').append(result.template);
        saveChildsProps();
    });
};

$('body').on('click', '.choose-variant-lq', function (e) {
    chooseVariantOnProductsList(e);
});

$('body').on('click', '.change-variant-on-products-list-lq', function (e) {
    chooseVariantOnProductsList(e);
});

$('body').on('click', '.remove-lq', function (e) {
    if($(e.currentTarget).parents('.container-to-remove-lq').length > 0){
        $(e.currentTarget).parents('.container-to-remove-lq').remove();
    } else {
        $(e.currentTarget).remove();
    }
});

$('body').on('click', '.stop-propagation-lq', function (e) {
    e.stopPropagation();
});

W pliku scss/globals/_globals-m.scss znajdź frazę expandable-ui i podmień ją wraz z jej zawartością na poniższy kod:

.expandable-ui{
      display: flex !important;
      flex-direction: column;
      .product-desc-ui{
        width: 100%;
        order: 2;
        margin: 0;
        &.with-attributes-ui{
          width: 100%;
        }
      }
      .attributes-ui, .product-attributes-listed-in-list-view-ui{
        margin: 40px 0 10px;
        width: auto;
        .f-left-ui{
          width: 120px;
        }
        .f-right-ui{
          width: calc(100% - 140px);
        }
      }
      .attributes-ui{
        margin-top: 10px;
      }
    }

Następnie na końcu tego samego pliku (scss/globals/_globals-m.scss) dodaj poniższy kod:

.add-variants-to-cart-from-products-list-popup-background-ui{
    .message-popup-ui{
      margin: 0;
      max-width: none;
      overflow: auto;
      padding: 0;
      .product-added-to-cart-ui{
        padding: 20px 60px 20px 20px;
        & + .info-ui{
          padding: 0;
        }
      }
    }
    .availability-ui{
      padding: 20px 20px 0;
    }
    .add-to-cart-ui{
      width: 100%;
      margin: 0;
    }
    .attribute-name-ui{
      &:not(.table-row-ui){
        color: $labelsColor;
        font-size: 12px;
        font-weight: 400;
        width: 100%;
        display: block;
        padding: 0 20px;
        line-height: 1;
        margin-bottom: 20px;
      }
      &.table-row-ui{
        margin: 20px 0;
        .table-cell-ui:not(.name-column-ui){
          display: none;
        }
        > div.name-column-ui{
          color: $labelsColor;
          font-size: 12px;
          font-weight: 400;
          width: 100%;
          display: block;
          padding: 0 20px;
          line-height: 1;
        }
      }
    }
    .attribute-button-ui{
      &.not-last-lvl-lq{
        margin: 0 -5px 0 20px;
      }
      &.last-lvl-ui{
        position: relative;
        background-color: $addToCartContainerBg;
        
        &:after{
          display: block;
          clear: both;
          content: '';
        }
        &.higher-mobile-ui{
          height: 140px;
        }
        &.previous-with-units-mobile-ui {
          height: 180px;
          .brutto-price-column-ui{
            top: 60px;
          }
          .unit-column-ui{
            top: 100px;
          }
        }
      }
      &.previous-with-units-ui {
        padding: 10px 0;
      }
      .expandable-lq.expanded-lq{
        position: fixed !important;
        left: 0 !important;
        top: 0;
        bottom: 0;
        height: auto !important;
        width: 100% !important;
        background: $formsBgColor;
        z-index: 102;
        .more-attributes-ui{
          padding: 20px;
          font-size: 14px;
          .ti-close{
            float: right;
            font-size: 20px;
          }
          label:not(.checkbox-ui):not(.radio-ui){
            font-size: 12px;
          }
          .attribute-editable-ui{
            width: 100%;
            margin: 0;
            input, select, .select-arrow-ui.no-error-ui{
              margin-bottom: 0;
            }
          }
        }
      }
    }
    .attributes-lq > .attribute-button-ui{
      margin: 0 0 20px 20px;
    }
    .name-column-ui{
      vertical-align: top;
      line-height: 1.2;
      font-size: 14px;
      padding: 20px;
      width: calc(100% - 225px);
    }
    .stock-column-ui{
      position: absolute;
      left: 20px;
      top: 48px;
      padding: 0;
      width: calc(100% - 280px);
      font-size: 12px;
      line-height: 1.3;
      .mobile-ui{
        color: $labelsColor;
      }
    }
    .quantity-column-ui{
      float: right;
      width: 120px;
      height: 109px;
      padding: 20px;
      margin-right: 0;
      position: relative;
      .change-quantity-ui{
        width: 40px;
        height: 35px;
        position: absolute;
        bottom: 20px;
      }
      .increment-ui{
        right: 20px;
        border-left: 1px solid $lightBorderColor;
      }
      [name="quantity"]{
        width: 80px;
        height: 35px;
      }
    }
    .netto-price-column-ui, .brutto-price-column-ui{
      position: absolute;
      right: 120px;
      line-height: 1;
      padding: 0;
      width: 125px;
      text-align: right;
      &.many-units-ui, &.no-stock-ui, &.many-units-ui.no-stock-ui{
        width: 125px;
      }
      .mobile-ui{
        color: $labelsColor;
        font-size: 10px;
      }
    }
    .netto-price-column-ui{
      font-size: 16px;
      top: 20px;
      .netto-ui{
        font-size: 16px;
        font-weight: 400;
      }
      .netto-mobile-ui{
        color: $nettoPrice;
      }
    }
    .brutto-price-column-ui{
      font-size: 14px;
      top: 45px;
    }
    &
    .unit-column-ui{
      position: absolute;
      right: 120px;
      padding: 0;
      line-height: 1;
      font-size: 12px;
      text-align: right;
      top: 69px;
      width: 125px;
      .select-background-ui{
        margin-right: 0;
      }
      .select-arrow-ui{
        margin-left: -25px;
        margin-right: 10px;
      }
    }
    .options-column-ui{
      position: absolute;
      top: 95px;
      padding: 0;
      left: 20px;
      width: auto;
      .change-arrow-title-lq{
        transform: none !important;
      }
      .ti-angle-down, .ti-angle-up{
        display: none;
      }
      .mobile-ui{
        font-size: 12px;
      }
    }
    .previous-price-ui {
      position:static !important;
    }
    .moblie-previous-ui {
      top: 58px !important;
    }
    .unit-previous-ui {
      top: 96px !important;
    }
    .change-mobile-paddings-ui{
      &.quantity-ui{
        padding: 20px;
      }
      &.attribute-editable-ui{
        padding: 0 20px 20px;
      }
    }
  }

Teraz w pliku scss/partials/_product-list.scss podmień całą jego zawartość na poniższy kod:

Wskazówka
W tym pliku było dużo zmian i dlatego podajemy go w całości. Przed zastąpieniem swojego kodu upewnij się, że nie nadpiszesz zmian wprowadzanych wcześniej przez siebie.
.product-list-ui {
  position: relative;
  .add-to-cart-ui {
    margin-top: 0;
  }
  .choose-cart-form-ui {
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 5;
    line-height: 1.5em;
  }
  .product-link-ui {
    box-shadow: 0 3px 12px 0 transparent;
    transition: box-shadow $short-animations-time;
    &:hover {
      box-shadow: 0 3px 12px 0 $gridAndListHoverShadowColor;
    }
  }

  .suggested-price-products-list-ui {
    position:absolute;
    right:20px;
    padding:10px 20px;
    top:25%;
    .suggested-ui {
      font-size: 16px;
    }

    .suggested-price-ui {
      font-size: 20px
    }

    .suggested-previous-ui {
      text-decoration: line-through;
    }
  }

  .stepper-and-adding-ui:not(.has-attributes-link) {
    opacity: 0.999;
    z-index: 2;
  }
}

.products-navigation-ui {
  margin: 10px 0;
  padding-bottom: 10px;
  border-bottom: 1px solid $lightBorderColor;
  .breadcrumbs-ui li {
    margin:0;
  }
  .sorting-views-container-ui {
    font-size: 1.3rem;
    .sorting-views-container-ui button {
      padding-top: 10px;
    }
  }
  .change-view-ui {
    padding-top: 10px;
    background: $viewButtonsBg;
    box-shadow: 0 0 1px #a5a5a5;
    margin-right: 10px;
    transition: border $short-animations-time;
    &:not(.btn-active-lq) {
      border:1px solid transparent;
    }
  }
}

.products-header-ui {
  display:none;
  z-index: 10;
  top:0;
  border: 1px solid $tableBorderColor;
  position:absolute;
  left: 0;
  right: 0;
  >* {
    display:block;
    float: left;
    height: $tableHeaderHeight;
    line-height: $tableHeaderHeight;
    padding-top: 0;
    padding-bottom: 0;
  }
  .stepper-and-adding-ui{
    padding:0;
    > div {
      width:100%;
    }
  }
  .add-to-cart-ui {
    padding: 0;
    float: left;
    width: 100%;
  }
  .choose-cart-form-ui {
    width: 100%;
  }
  .change-cart-arrows-ui {
    line-height: 1.5em;
    height: $tableHeaderHeight;
    width: $tableHeaderHeight;
    float: right;
  }
}

.product-item-ui, .products-header-ui {
  .price-ui {
    font-size:inherit;
  }
}

.product-item-ui {
  position:relative;
  display:block;
  color: $primaryColorFont;
  transition: box-shadow $short-animations-time, background $short-animations-time;
  .product-name-ui {
    color: $iconColors;
    margin-bottom:0;
    font-size: inherit;
  }
  .unit-name-ui {
    font-size:inherit;
  }
  .product-code-ui {
    color: $primaryColorFont;
  }
  .image-container-ui {
    display: -ms-inline-flexbox;
    display:inline-flex;
    width: $imageWidthOnList;
  }
  .price-ui, .old-price-ui {
    margin:0;
  }
  .price-ui {
    font-size: larger;
  }
  .old-price-ui {
    font-size: smaller;
    margin-bottom: 3px;
  }
  .stock-level-ui img {
    z-index:1;
    position:relative;
  }
  .stock-text-ui {
    display: block;
    line-height: 1em;
  }
  .stock-label-ui {
    margin-right:10px;
    font-size:small;
  }
  .stepper-and-adding-ui {
    padding:0;
    .add-to-cart-form-container-ui {
      display: inline-block;
    }
  }
  .btn-ui, button {
    position:relative;
    z-index:2;
  }
}

.choose-variant-icon-ui {
  font-size:2rem;
  padding-right: 15px;
}

/* quick shopping view */
.quick-shopping-view-lq {
  .message-bar-ui {
    padding-top: $tableHeaderHeight;
    position: relative;
    .close-ui {
      top: $tableHeaderHeight;
      color: $messageBarFont;
    }
    &[class*='hidden-lq'] {
      display: block !important;
      height: 0;
      padding-bottom: 0;
      z-index: -1;
      visibility: hidden;
    }
  }

  .message-bar-title-ui {
    font-weight: 500;
    font-size: 1.2em;
  }

  .product-name-ui {
    margin-bottom: 0;
    font-size: 16px;
    font-weight: 500;
  }

  .product-validation-message-ui {
    margin-top: 0;
  }

  .pagination-page-ui {
    width: 100%;
    font-size: 0.9rem;
    padding-top: $tableHeaderHeight;
    &::after {
      display: block;
      clear: both;
      float: none;
      content: '';
    }
  }

  .products-header-ui, .product-item-ui {
    > *:not(.image-container-ui):not(.product-link-ui):not(.name-and-code-ui) {
      vertical-align: middle;
      width: 20%;
    }
    .name-and-code-ui {
      width: 40%;
      vertical-align: middle;
      &.without-stock {
        width: 60%;
      }
    }
  }

  &.prices-hidden-ui {
    &::after {
      display: block;
      clear: both;
      float: none;
      content: '';
    }
    .products-header-ui, .product-item-ui {
      > *:not(.product-link-ui) {
        float: left;
        width: 50% !important;
      }
    }
  }

  .products-header-ui {
    display: block;
  }

  .product-item-ui {
    display: -ms-flexbox;
    display:flex;
    align-items:center;
    &::after {
      display: block;
      clear: both;
      float: none;
      content: '';
    }
    > * {
      float: left;
      align-self:center;
    }
    .choose-variant-ui{
      position: relative;
      z-index: 2;
    }
  }

  .element-attached-lq.products-header-ui > *:not(.image-container-ui) {
    display: block;
    display: -ms-flexbox;
    display: flex;
    align-items:center;
    float: left;
    height: 60px;
    &.price-column-ui{
      display: inline-block;
    }
  }

  .image-container-ui, .product-desc-ui, .price-label-ui {
    display: none;
  }

  .product-code-ui{
    font-size: 14px;
    max-width: 100%;
    .code-ui.show-attributes-on-products-page-ui{
      display: none;
    }
    .product-attributes-listed-ui{
      display: block;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      .code-ui{
        display: inline-block;
      }
      &:not(.show-all-attributes-on-quick-view-ui) .last-quick-view-attribute-ui{
        & ~ span{
          display: none;
        }
        span{
          display: none;
        }
      }
    }
  }

  .product-code-ui, .product-flags-ui {
    display: inline-block;
    float: left;
  }

  .product-flags-ui {
    padding-left: 10px;
  }

  .product-item-ui {
    .add-to-cart-ui, .change-cart-arrows-ui, .choose-cart-form-ui {
      display: none;
    }
  }

  .stock-label-ui {
    display: none;
  }

  .price-column-ui {
    text-align: right;
    padding-right: 10%;
  }

  .expandable-mechanism-container-ui, .final-price-column-ui, .product-attributes-listed-in-grid-view-ui{
    display: none;
  }
}

/* list and grid views - common styles */
.list-view-lq , .grid-view-lq {
  .product-item-ui{
    &::after {
      content:'';
      display:block;
      clear:both;
    }
    .product-name-ui{
      font-size: 18px;
      font-weight: 500;
    }
    .product-code-ui{
      font-size: 14px;
      .product-attributes-listed-ui{
        display: none;
      }
    }
  }

  .stock-label-ui, .price-label-ui{
    color: $productsListLabels;
  }

  .product-flags-ui {
    position: absolute;
    left: 5px;
    top: 5px;
    width: $imageWidthOnList;
  }

  .name-and-code-ui {
    width: calc(100% - #{$priceColumnWidthOnList});
    float: left;
  }

  .product-code-ui {
    margin:12px 0px 20px 0;
    display: block;
    font-weight: 500;
  }

  .price-column-ui {
    width: $priceColumnWidthOnList;
    float: right;
    font-size: 1.3rem;
    padding-top: 15px;
    padding-right: 15px;
    text-align: right;
  }

  .unit-name-ui {
    width:140px;
  }

  .stock-level-ui {
    position:absolute;
    bottom:0;
    right:515px;
    bottom: 15px;
    > * {
      vertical-align:middle;
    }
  }

  &.prices-hidden-ui .stock-level-ui {
    right:0;
    bottom: 0;
    padding:15px;
  }

  .product-desc-ui {
    line-height:1.5em;
    max-height: calc(#{$linesOfDescription} * 1.5em);
    overflow: hidden;
  }

  .stepper-and-adding-ui .error-ui {
    top: -20px;
    bottom:auto;
  }
}


/* list view */
.list-view-lq {
  .product-item-ui {
    border: 1px solid $lightBorderColor;
    margin-bottom: 10px;
    padding-left: calc(#{$imageWidthOnList} + 40px);
    min-height: 150px;
  }
  .name-and-code-ui {
    padding-top: 20px;
    width: calc(100% - 20px);
  }
  .product-name-ui{
    color: $primaryColorFont;
  }
  .product-code-ui{
    color: $productsListLabels;
    height: 24px;
  }
  .image-container-ui {
    position: absolute;
    top: 20px;
    left: 20px;
    height: 110px;
    width: $imageWidthOnList;
    i, .no-image-ui{
      font-size: 100px;
    }
  }
  .product-flags-ui{
    top: -22px;
    left: -21px;
  }
  .expand-data-ui{
    padding: 0;
  }
  .product-desc-ui, .product-attributes-listed-in-grid-view-ui{
    display: none;
  }
  .expandable-ui{
    .product-desc-ui{
      display: inline-block;
      width: calc(100% - 380px);
      max-height: none;
      margin: 50px 50px 20px 0;
      vertical-align: top;
      color: $productsListLabels;
      &.with-attributes-ui{
        width: calc(100% - 760px);
      }
    }
    .product-attributes-listed-in-list-view-ui{
      display: inline-block;
      width: 326px;
      vertical-align: top;
      margin: 50px 50px 20px 0;
      .clear-after-ui{
        margin-bottom: 10px;
      }
      .f-left-ui{
        width: 125px;
        color: $productsListLabels;
      }
      .f-right-ui{
        width: 161px;
      }
      &:not(.show-all-attributes-on-list-view-ui) .clear-after-ui.last-list-view-attribute-ui ~ .clear-after-ui{
        display: none;
      }
    }
    .attributes-ui{
      display: inline-block;
      width: 325px;
      vertical-align: top;
      margin: 50px 0 20px;
      .clear-after-ui{
        margin-bottom: 10px;
      }
      .f-left-ui{
        width: 125px;
        color: $productsListLabels;
      }
      .f-right-ui{
        width: 158px;
      }
      img{
        vertical-align: middle;
        max-height: 25px;
      }
    }
  }
  .stepper-and-adding-ui{
    position:absolute;
    top: 20px;
    right: 20px;
    height: 110px;
  }
  .add-to-cart-ui{
    padding: 5px 10px;
    min-height: auto;
    margin-top: 76px;
    i{
      font-size: 20px;
      margin-right: 5px;
    }
    .lower-text-ui{
      display: inline-block;
      font-size: 14px;
    }
    .bigger-text-ui{
      display: inline-block;
      margin-left: 5px;
      text-transform: lowercase;
    }
  }
  .editing-order-ui{
    .lower-text-ui, .bigger-text-ui{
      font-size: 12px;
    }
  }
  .choose-variant-ui{
    position: absolute;
    right: 0;
    width: 158px;
    bottom: 0;
    padding: 5px 0;
    z-index: 2;
    span{
      font-size: 12px;
    }
  }
  .choose-variant-icon-ui{
    font-size: 24px;
    padding-right: 10px;
  }
  .btn-ui{
    position: absolute;
    right: 0;
    bottom: 0;
    width: 158px;
    font-size: 14px;
    text-align: center;
  }
  .final-price-column-ui{
    display: inline-block;
    position: absolute;
    width: 125px;
    right: 220px;
    top: 65px;
    .price-ui{
      margin-top: 10px;
      color: $primaryColorFont;
      font-weight: 700;
    }
  }
  .amount-stepper-ui{
    position: absolute;
    right: 190px;
    display: inline-block;
    width: 160px;
    bottom: 0;
  }
  .unit-name-ui{
    color: $productsListLabels;
    font-size: smaller;
    position: absolute;
    bottom: 40px;
    right: 222px;
  }
  .price-column-ui{
    display: inline-block;
    position: absolute;
    width: 125px;
    right: 600px;
    top: 100px;
    font-size: 1rem;
    padding: 0;
    text-align: left;
    .price-ui{
      font-size: larger;
      font-weight: 700;
    }
    .price-label-ui{
      position: absolute;
      top: -34px;
      left: 0;
    }
    .old-price-ui{
      position: absolute;
      top: -17px;
    }
  }
  .stock-level-ui{
    display: none;
  }
  @media only screen and (min-width: 1280px) and (max-width: 1599px) {
    .product-item-ui{
      padding-left: 200px;
      .product-code-ui{
        margin-top: 0;
      }
    }
    .image-container-ui{
      width: 160px;
    }
    .price-column-ui{
      right: 565px;
    }
    .final-price-column-ui{
      right: 210px;
    }
    .amount-stepper-ui{
      right: 175px;
    }
    .unit-name-ui{
      right: 208px;
    }
    .expandable-mechanism-container-ui{
      margin: 70px 0px 20px -180px;
    }
    .expandable-ui{
      .product-desc-ui{
        width: calc(100% - 340px);
        margin: 20px 20px 0 0;
      }
      .attributes-ui{
        margin: 20px 0 0 0;
        width: 315px;
        .f-right-ui{
          width: 156px;
        }
      }
    }
  }
}

/* grid view */
.grid-view-lq {
  .product-item-ui {
    width: 100% / $gridColumns;
    float: left;
    height: $gridItemHeight;
    padding: $gridItemSpacing;
    &:nth-child(even) {
      padding-right: $gridItemSpacing;
    }
    &:nth-child(odd) {
      padding-left: $gridItemSpacing;
      border-left: 1px solid $lightBorderColor;
    }
    &:not(:nth-last-child(-n+#{$gridColumns})) {
      border-bottom: 1px solid $lightBorderColor;
    }
    .product-name-ui{
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
  }

  .image-container-ui {
    width: 100%;
    height: 306px;
    img {
      margin-left:0;
    }
  }

  .name-and-code-ui {
    width: calc(100% - #{$priceColumnWidthOnList});
  }

  .product-desc-ui {
    display:none;
  }

  .price-column-ui {
    position:absolute;
    top:$gridItemSpacing;
    right:$gridItemSpacing;
    padding:0;
  }

  .stepper-and-adding-ui {
    text-align: right;
    position: absolute;
    padding:0;
    right: $gridItemSpacing;
    bottom: $gridItemSpacing;
  }

  .choose-variant-ui{
    position: relative;
    z-index: 2;
    font-size: 14px;
  }

  .amount-stepper-ui {
    justify-content:flex-end;
    display:flex;
  }

  .stock-level-ui {
    right: $gridItemSpacing;
    bottom: 200px;
  }

  .unit-name-ui {
    width: 100%;
    padding: 12px 0;
  }

  .stepper-and-adding-ui .error-ui {
    padding-right: 0;
    top: -30px;
    max-width: 100%;
    line-height: 1;
    text-align: right;
    white-space: normal;
  }

  .expandable-mechanism-container-ui, .final-price-column-ui{
    display: none;
  }

  .product-attributes-listed-in-grid-view-ui{
    height: 0;
    overflow: hidden;
    position: absolute;
    top: 99%;
    background: $bgColor;
    left: 0;
    right: 0;
    z-index: 3;
    padding: 0 30px;
    transition: all ease 300ms;
    .clear-after-ui{
      margin-bottom: 10px;
    }
    .f-left-ui{
      width: 150px;
      color: $productsListLabels;
    }
    .f-right-ui{
      width: calc(100% - 150px);
    }
    &:not(.show-all-attributes-on-grid-view-ui) .clear-after-ui.last-grid-view-attribute-ui ~ .clear-after-ui{
      display: none;
    }
  }

  .product-attributes-listed-in-grid-view-ui:hover, .product-item-ui:hover .product-attributes-listed-in-grid-view-ui{
    height: auto;
    padding: 0 30px 20px;
    border-bottom: 1px solid $lightBorderColor;
    box-shadow: 0 14px 12px 0 $gridAndListHoverShadowColor;
  }
}

/* filters */
.product-filters-ui {
  width:100%;
  padding-top: 30px;

  .price-filter-ui {
    padding: 0 20px 20px 20px;
    > * {
      vertical-align: middle;
    }
    .price-label-ui {
      padding-bottom:10px;
    }
  }

  .filter-item-ui {
    border-bottom: 1px solid $lightBorderColor;
  }

  .filter-drop-ui {
    width: 100%;
    text-align: left;
    padding: 10px 20px;
    color: $primaryColorFont;
  }

  .filter-value-list-ui {
    padding: 0 20px 0 20px;
    overflow:hidden;
    + .filter-value-list-ui {
      transition:height $animations-time;
    }
  }

  .filter-drop-ui, .expandable-ui {
    background:transparent;
    transition:height $animations-time, background $animations-time;
  }

  .expanded-lq {
    background: $openedFiltersSectionBg;
  }

  .label-ui {
    line-height: 2.5em;
  }

  .show-more-ui {
    font-size:0.9rem;
    float: right;
  }

  .filters-apply-button-ui {
    position:fixed;
    bottom:0;
    left:0;
    width: $category-column-width;
    height: $filtersButtonHeight;
  }

  .price-range-ui input {
    max-width:28%;
  }
}

.selected-filters-ui {
  margin-bottom:20px;
}

.selected-filter-item-ui {
  display: inline-block;
  border: 1px solid $lightBorderColor;
  padding: 7px 14px;
  background: $selectedFilterButtonBg;
  color: $primaryColorFont;
  .filter-delete-ui {
    margin-right: 7px;
  }
  &.search-phrase-item-ui:hover {
    background: $searchPhraseButtonHover;
    color: $primaryColorFont;
  }
}

.search-phrase-mark-ui, .search-phrase-item-ui {
  background: $searchPhraseMark;
}

.add-variants-to-cart-from-products-list-popup-background-ui{
  cursor: pointer;
  z-index: 149;
  .message-popup-ui{
    width: auto;
    max-width: 80vw;
    cursor: default;
  }
  .attribute-button-ui{
    background-color: $attributesButtonBg;
    color: $attributesButtonFont;
    border: 1px solid $lightBorderColor;
    padding: 10px;
    transition: all 300ms ease;
    &:not(.last-lvl-ui){
      &:hover, &.active-lq{
        border: 1px solid $primaryColor;
      }
    }
    &.active-lq{
      cursor: default;
    }
    &.last-lvl-ui{
      padding: 0;
      cursor: default;
    }
  }
  .table-ui{
    display: block;
    border: none;
    margin-top: 20px;
    width: 100%;
    max-height: 50vh;
    overflow-y: auto;
  }
  .table-row-ui{
    display: block;
    cursor: pointer;
  }
  .table-cell-ui{
    display: inline-block;
    margin-right: -4px;
    width: 11%;
    vertical-align: middle;
    @media only screen and (min-width: 1830px) {
      width: 15%;
    }
  }
  .attribute-name-ui{
    margin-top: 20px;
    background-color: transparent;
    cursor: auto;
    font-weight: 700;
    > div {
      font-weight: normal;
      &.name-column-ui{
        font-weight: 700;
      }
    }
  }
  .attributes-list-ui{
    cursor: auto;
    border: 1px solid $lightBorderColor;
    &:hover{
      cursor: auto;
      border: 1px solid $lightBorderColor;
    }
  }
  .name-column-ui.solo-price-ui{
    width: 34%;
  }
  .brutto-price-column-ui, .netto-price-column-ui{
    width: 17%;
    &.many-units-ui{
      width: 17%;
    }
    &.no-stock-ui{
      width: 24%;
    }
    &.many-units-ui.no-stock-ui{
      width: 21%;
    }
  }
  .brutto-price-column-ui.many-units-ui{
    width: 16%;
  }
  .previous-price-ui {
    position:absolute;
    text-decoration: line-through;
    font-size:10px;
    line-height:10px;
    color: $primaryColorFont;
    &.suggested-retail-price-ui{
      text-decoration: none;
    }
  }
  .brutto-ui, .netto-ui{
    font-weight: 700;
  }
  .netto-ui{
    font-size: 21px;
    color: $nettoPrice;
  }
  .stock-column-ui{
    width: 13%;
  }
  .unit-column-ui{
    width: 13%;
  }
  .many-units-ui{
    width: 18%;
    @media only screen and (min-width: 1830px) {
      width: 14%;
    }
  }
  .quantity-column-ui{
    width: 19%;
    .change-quantity-ui{
      width: 30px;
      height: 30px;
    }
    [name="quantity"]{
      width: 40px;
      height: 30px;
    }
  }
  .options-column-ui{
    width: 44px;
    button{
      padding: 0;
      &.no-animation-lq{
        transition:none;
      }
      &.cant-toggle-lq{
        cursor: default;
        color: $lightBorderColor;
      }
    }
  }
  .select-background-ui select{
    padding: 3px 40px 3px 10px;
  }
  .more-attributes-ui{
    padding: 0 10px 10px;
    .attribute-editable-ui{
      vertical-align: top;
      margin: 0 10px 0 0;
      width: 180px;
      .select-background-ui, input{
        width: 100%;
        margin-top: 3px;
      }
    }
  }
}

W pliku __settings.liquid na samym końcu polskich tłumaczeń dodaj poniższy kod:

{% assign attributesOnProductsPage = "Atrybuty na listach towarów" -%}
{% assign showAttributesOnProductsPage = "Prezentuj atrybuty na listach towarów" -%}
{% assign attributesQuantityOnQuickView = "Ilość prezentowanych atrybutów w widoku Szybkie zakupy" -%}
{% assign attributesQuantityOnListView = "Ilość prezentowanych atrybutów w widoku Lista" -%}
{% assign attributesQuantityOnGridView = "Ilość prezentowanych atrybutów w widoku Kafelki" -%}
{% assign all = "wszystkie" -%}
{% assign multiVariantProducts = "Towary wielowariantowe" -%}
{% assign multiVariantProductsInfo = "Pozwalaj na zakup towarów wielowariantowych z listy towarów" -%}

Dalej w pliku __settings.liquid na samym końcu angielskich tłumaczeń dodaj poniższy kod:

{% assign attributesOnProductsPage = "Attributes on products page" -%}
{% assign showAttributesOnProductsPage = "Show attributes on products page" -%}
{% assign attributesQuantityOnQuickView = "Attributes quantity on Quick shopping view" -%}
{% assign attributesQuantityOnListView = "Attributes quantity on List view" -%}
{% assign attributesQuantityOnGridView = "Attributes quantity on Grid view" -%}
{% assign all = "all" -%}
{% assign multiVariantProducts = "Multivariant products" -%}
{% assign multiVariantProductsInfo = "Allow adding to cart multivariant products on products list" -%}

Następnie w tym samym pliku (__settings.liquid) dodaj analogicznie do innych opcji poniższy kod:

 

{{attributesOnProductsPage}}

 

{{showAttributesOnProductsPage}}

 

 

 

 

 

 

 

 

 

{{attributesQuantityOnQuickView}}

 

 

 

 

 

 

 

 

{{attributesQuantityOnListView}}

 

 

 

 

 

 

 

 

{{attributesQuantityOnGridView}}

 

 

 

 

 

 

 

 

 

 

 

{{multiVariantProducts}}

 

{{multiVariantProductsInfo}}

 

 

 

 

 

 

 

 

 

Teraz w tym samym pliku (__settings.liquid) w sekcji ze skryptami dodaj poniższy kod:

	if($('#showAttributesOnProductsPage-yes').prop('checked')){
		$('.attributesQuantitySections').show();
	} else {
		$('.attributesQuantitySections').hide();
	}

	$('[name=showAttributesOnProductsPage]').on('change', function(){
		if($('#showAttributesOnProductsPage-yes').prop('checked')){
			$('.attributesQuantitySections').show();
		} else {
			$('.attributesQuantitySections').hide();
		}
	});

Czy ten artykuł był pomocny?