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. W folderze products dodaj plik add-variants-to-cart-from-products-list.html i wklej do niego poniższy kod: 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: 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 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 -%} {% 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 attributeIndex = 1 -%} {% for attribute in product.AttributesList.Attributes -%} {% assign valuesSize = attribute.Values | Size -%} {% assign valueIndex = 1 -%} {% 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: 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: Teraz w tym samym pliku (js/init-ui1.js) wyszukaj frazę productsAddedToCart. Linijkę nad tą frazą zastąp poniższym kodem: Na samym końcu pliku js/init-ui2.js wklej poniższy kod: W pliku scss/globals/_globals-m.scss znajdź frazę expandable-ui i podmień ją wraz z jej zawartością na poniższy kod: Następnie na końcu tego samego pliku (scss/globals/_globals-m.scss) dodaj poniższy kod: Teraz w pliku scss/partials/_product-list.scss podmień całą jego zawartość na poniższy kod: W pliku __settings.liquid na samym końcu polskich tłumaczeń dodaj poniższy kod: Dalej w pliku __settings.liquid na samym końcu angielskich tłumaczeń dodaj poniższy kod: Następnie w tym samym pliku (__settings.liquid) dodaj analogicznie do innych opcji poniższy kod: Teraz w tym samym pliku (__settings.liquid) w sekcji ze skryptami dodaj poniższy kod:
Szafir
{% 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 -%}
{% 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 -%}
{% if settings.attributesQuantityOnListView > 0 or settings.showAllAttributesOnListView == 'true' -%}
{% assign showAttributesOnListView = true -%}
{% endif -%}
{% 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 -%}
if(window.childs[childIndex]){
var childUnit = window.childs[childIndex].unit;
if($('.dimensions-lq').index() != -1) {
changeDimensions(childUnit);
}
}
if($(e.currentTarget).data('id') != undefined){
var productId = $(e.currentTarget).data('id');
} else {
var productId = $('[data-product-id]').data('product-id');
}
if($('.child-lq').index() != -1 || $('.choose-variant-lq').index() != -1){
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();
});
.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;
}
}
.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;
}
}
}
.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;
}
}
}
}
{% 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" -%}
{% 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" -%}
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?