W tym artykule dowiesz się jak dodać w szablonie Szafir stronę umożliwiającą porównywanie cech towarów.
Pierwszym modyfikowanym plikiem będzie __settings.liquid. Pierwsze dwie linijki pliku powinny wyglądać następująco:
{% case languageId %}
{% when '1' %}
Tuż pod nimi umieść kod odpowiadający za polskie tłumaczenia:
{% assign productsComparison = "Porównywanie towarów" -%}
{% assign compareProducts = "Pozwalaj na porównywanie towarów" -%}
Kolejne około 100-200 linii (w zależności od tego, jaką wersję teraz posiadasz) będzie zaczynało się od frazy {% assign … . Następnie ujrzysz frazę {% else -%}, pod którą należy umieścić poniższy kod, odpowiadający za angielskie tłumaczenia.
{% assign productsComparison = "Products comparison" -%}
{% assign compareProducts = "Allow for products comparison" -%}
Wyszukaj również frazę #lg-settings-content a. Nad znalezioną linią powinieneć widzieć tag <script> a nad nim tag zamykający </div> (jeden lub kilka), a nad nim(i) tag zamykający </fieldset>. Pod tagiem </fieldset> należy umieścić poniższy blok kodu.
<fieldset>
<legend>{{productsComparison}}</legend>
<section>
<h3 class="section-title">{{compareProducts}}</h3>
<div class="table">
<div class="trow">
<div class="tcell">
<input type="radio" name="compareProducts" value="yes" id="compareProducts-yes" {%="" if="" settings.compareproducts="=" 'yes'="" %}="" checked="" endif="">
<label class="label" for="compareProducts-yes">{{yesTranslation}}</label>
</div>
<div class="tcell">
<input type="radio" name="compareProducts" value="no" id="compareProducts-no" {%="" if="" settings.compareproducts="=" 'no'="" %}="" checked="" endif="">
<label class="label" for="compareProducts-no">{{noTranslation}}</label>
</div>
</div>
</div>
</section>
</fieldset>
Kolejnym modyfikowanym plikiem będzie product/product-presentation-data.html. Narzędziem wyszukiwania należy wyszukać frazę page-title-ui.Nad znalezioną linią należy wkleić poniższy kod.
{% assign isInComparison = false -%}
{% for itemId in customer.ComparisonToolItems -%}
{% if itemId == product-presentation.Product.Id -%}
{% assign isInComparison = true -%}
{% endif -%}
{% endfor -%}
<div class="move-to-comparison-lq move-to-comparison-ui {% if customer.ComparisonToolItems == null or isInComparison == false-%} hidden-lq {% endif -%}">
<div class="compare-items-lq compare-items-ui">
{% for item in customer.ComparisonToolItems-%}
<span class="comparison-item-icon-ui"></span>
{% endfor -%}
{% for i in (customer.ComparisonToolItems.size..3)-%}
<span class="comparison-item-icon-ui available-ui"></span>
{% endfor -%}
</div>
<a class="compare-ui btn-ui" href = "{{config.DefinedPages.ProductComparisonTool.Url}}">{{translations.Compare}}</a>
</div>
Następnie należy wyszukać frazę product.Description != „” or. Do znalezionego warunku należy dopisać or settings.compareProducts == 'yes’. Cały warunek może wówczas wyglądać następująco:
{% if product.Description != "" or product.Attachments[0] or reviewsExist or setsExist or product.Related[0] or settings.compareProducts == 'yes' -%}
Następnie wyszukaj frazę product-presentation-menu-container-ui. Nad znalezioną linią wklej poniższy kod.
{% if settings.compareProducts == 'yes' -%}
{% assign elementsQuantity = elementsQuantity | Plus:1 -%}
{% endif -%}
Około 3 linie poniżej powinieneś znaleźć listę ul o klasie product-presentation-menu-ui. W tagu otwierającym należy dopisać atrybuty data
data-add-to-compare-translations = "{{translations.AddToCompare}}" data-delete-from-compare-translations = "{{translations.DeleteFromCompare}}"
Cała linia kodu może wyglądać następująco:
<ul class="product-presentation-menu-ui product-presentation-menu-lq attached-lq {% if elementsQuantity > 2 -%} more-elements-lq {% endif -%}" data-add-to-compare-translations = "{{translations.AddToCompare}}" data-delete-from-compare-translations = "{{translations.DeleteFromCompare}}">
Następnie wyszukaj frazę translations.RelatedProducts. Pod znalezioną linią powinieneś widzieć:
{% endif -%}
</ul>
</ul> należy usunąć a zamiast tego tagu wkleić poniższy kod.
{% if settings.compareProducts == 'yes' and isInComparison == 'false' -%}
<li class="add-to-comparison-lq add-to-comparison-ui">
<i class="ti-panel"></i> <span class="no-on-mobile-ui">{{ translations.AddToCompare }}</span><span class="mobile-ui">{{ translations.Compare }}</span>
</li>
{% endif -%}
{% if settings.compareProducts == 'yes' and isInComparison == 'true' -%}
<li class="delete-from-comparison-lq delete-from-comparison-ui">
<i class="ti-panel"></i> <span class="no-on-mobile-ui">{{ translations.DeleteFromCompare }}</span><span class="mobile-ui">{{ translations.Delete }}</span>
</li>
{% endif -%}
</ul>
<div class="hidden-lq add-to-compare-action-lq">
<input type="hidden" name="__action" value="Product/ComparisonToolAdd"/>
<input type="hidden" name="productId" value="{{ product.Id }}"/>
<input type="hidden" name="url" value="{{ page.BaseHref }}{{ config.DefinedPages.ProductComparisonTool.Url }}"/>
</div>
<div class="hidden-lq delete-from-compare-action-lq">
<input type="hidden" name="__action" value="Product/ComparisonToolDelete" />
<input type="hidden" name="productId" value="{{ product.Id }}"/>
</div>
<input class="comparison-items-count-lq hidden-lq" data-items-count="{{ customer.ComparisonToolItems | Size}}">
<div class="message-popup-background-ui after-adding-to-compare-popup-lq hidden-lq hide-lq container-to-hide-lq">
<div class="message-popup-ui box-ui after-adding-to-cart-popup-ui after-adding-to-cart-popup-container-lq">
<button aria-label="hide-container" class="btn-pure-ui close-ui hide-container-lq">
<i class="ti-close"></i>
</button>
<div class="box-ui product-added-to-compare-ui">
<span class="va-mid-ui line-height-1-ui">
<i class="va-mid-ui ti-check"></i>
{{translations.AddedToCompare}}
</span>
</div>
<div class="info-ui compare-info-ui">
<div > {{translations.2to4products}} </div>
<div class="items-ui compare-items-lq">
{% for item in customer.ComparisonToolItems-%}
<span class="comparison-item-icon-ui"></span>
{% endfor -%}
</div>
<div class="compare-button-ui">
<a class="compare-ui btn-ui compare-button-lq {% if customer.ComparisonToolItems.size > 1 -%} hidden-lq {% endif -%}" href = "{{config.DefinedPages.ProductComparisonTool.Url}}">{{translations.Compare}}</a>
</div>
</div>
</div>
</div>
<div class="message-popup-background-ui too-much-items-compare-popup-lq hidden-lq hide-lq container-to-hide-lq">
<div class="message-popup-ui box-ui after-adding-to-cart-popup-ui after-adding-to-cart-popup-container-lq">
<button aria-label="hide-container" class="btn-pure-ui close-ui hide-container-lq">
<i class="ti-close"></i>
</button>
<div class=" box-ui info-ui too-much-items-compare-ui ">
<div > {{translations.TooMuchProductsInComparer}} </div>
</div>
</div>
</div>
Teraz przejdź do pliku js/init-ui2.js. Należy w nim wkleić poniższy kod (można wkleić w pierwszej linii pliku).
//comparer functions
var comparer = {
addToComparison: function(e) {
var comparisonItemsCount = $('.comparison-items-count-lq').data('items-count');
var deleteFromCompareTranslation = $('.product-presentation-menu-lq').data('delete-from-compare-translations');
if(comparisonItemsCount < 4){
var data = $('.add-to-compare-action-lq').find('input').serializeArray();
data.push({name: "__csrf", value: __CSRF});
$.post(null, data, function (result) {
if (result.action.Result) {
$('.delete-from-comparison-lq').removeClass('hidden-lq');
$('.add-to-comparison-lq').addClass('hidden-lq');
comparisonItemsCount += 1;
$('.comparison-items-count-lq').data('items-count', comparisonItemsCount)
$('.move-to-comparison-lq').removeClass('hidden-lq');
$('.after-adding-to-compare-popup-lq').removeClass('hidden-lq');
itemsContent = '';
for( i=0; i<comparisonItemsCount; i++){
itemsContent += '<span class="comparison-item-icon-ui"></span>';
}
for( i=comparisonItemsCount; i<4; i++){
itemsContent += '<span class="comparison-item-icon-ui available-ui"></span>';
}
$('.compare-items-lq').html(itemsContent);
if($(window).width() <= 1279){
$('.product-presentation-menu-lq').slick('unslick');
}
$('.product-presentation-menu-lq li').last().remove();
$('.product-presentation-menu-lq').append('<li class="delete-from-comparison-lq delete-from-comparison-ui" ><i class="ti-panel"></i>' + deleteFromCompareTranslation + '</li>')
if(comparisonItemsCount > 1 ) {
$('.compare-button-lq').removeClass('hidden-lq');
}
if($(window).width() <= 1279){
window.UIFeatures.initSlider('.product-presentation-menu-lq', { slidesToShow: 2.5, arrows: false, infinite: false, dots: false });
}
}
});
} else {
$('.too-much-items-compare-popup-lq').removeClass('hidden-lq');
}
},
deleteFromComparison: function(e){
var comparisonItemsCount = $('.comparison-items-count-lq').data('items-count');
var data = $('.delete-from-compare-action-lq').find('input').serializeArray();
data.push({name: "__csrf", value: __CSRF});
var addToCompareTranslation = $('.product-presentation-menu-lq').data('add-to-compare-translations');
$.post(null, data, function (result) {
if (result.action.Result) {
$('.delete-from-comparison-lq').addClass('hidden-lq');
$('.add-to-comparison-lq').removeClass('hidden-lq');
comparisonItemsCount -= 1;
$('.comparison-items-count-lq').data('items-count', comparisonItemsCount);
if(!comparisonItemsCount) {
$('.move-to-comparison-lq').addClass('hidden-lq');
}
itemsContent = '';
for( i=0; i<comparisonItemsCount; i++){
itemsContent += '<span class="comparison-item-icon-ui"></span>';
}
for( i=comparisonItemsCount; i<4; i++){
itemsContent += '<span class="comparison-item-icon-ui available-ui"></span>';
}
$('.compare-items-lq').html(itemsContent);
if($(window).width() <= 1279){
$('.product-presentation-menu-lq').slick('unslick');
}
$('.product-presentation-menu-lq li').last().remove();
$('.product-presentation-menu-lq').append('<li class="add-to-comparison-lq add-to-comparison-ui"><i class="ti-panel"></i>' + addToCompareTranslation + '</li>')
if(comparisonItemsCount < 1 ) {
$('.compare-button-lq').addClass('hidden-lq');
}
if($(window).width() <= 1279){
window.UIFeatures.initSlider('.product-presentation-menu-lq', { slidesToShow: 2.5, arrows: false, infinite: false, dots: false });
}
}
});
},
deleteFromComparisonSite: function(e) {
var data = $(e.currentTarget).find('input').serializeArray();
data.push({name: "__csrf", value: __CSRF});
var id = $(e.currentTarget).find("input[name='productId']")[0].value;
var comparisonItemsCount = $('.comparison-items-count-lq').data('items-count');
$.post(e, data, function (result) {
if (result.action.Result) {
comparisonItemsCount -= 1;
if(comparisonItemsCount < 1 ) {
$('.compare-button-lq').addClass('hidden-lq');
}
location.reload();
}
});
},
setCompareSlider: function(){
var windowWidth = $(window).width();
var amount = $('.comparison-items-count-lq').data('items-count');
if ((windowWidth <= 1279 )) {
$(".compare-icons-arrow-lq").removeClass('hidden-lq');
$(".row-ui > .products-ui").addClass("comparer-slider-lq");
var slider = $('.comparer-slider-lq').slick({
infinite: true,
slidesToShow: 2,
slidesToScroll:1,
draggable: false,
autoplay: false,
autoplaySpeed: 8000,
arrows:false,
swipe:false,
responsive: [
{
breakpoint: 1000,
settings: {
slidesToShow: 1,
}
}
]
});
$(".itemPrev").on( "click", function() {
slider.slick("slickPrev").delay(500);
});
$(".itemNext").on( "click", function() {
slider.slick("slickNext").delay( 500 );
});
}
slider.slick('slickSetOption', 'infinite', false);
var stickyTop = $('.comparer-header-ui .header-ui').offset().top;
$(window).scroll(function() {
var windowTop = $(window).scrollTop();
if (stickyTop < windowTop) {
$('.comparer-header-ui .header-ui').addClass('sticky-lq')
} else {
$('.comparer-header-ui .header-ui').removeClass('sticky-lq')
}
});
}
}
Następnie wyszukaj frazę product-presentation-menu-lq.more-elements-lq. Znajdziesz instrukcję warunkową if:
if($('.product-presentation-menu-lq.more-elements-lq').index() != -1) {
window.UIFeatures.initSlider('.product-presentation-menu-lq', { slidesToShow: 2.5, arrows: false, infinite: false, dots: false });
}
Kod ten należy usunąć i wkleić poniższy:
if(($('.product-presentation-menu-lq.more-elements-lq').index() != -1) && !($('.product-presentation-menu-lq').hasClass('slick-initialized')) ){
window.UIFeatures.initSlider('.product-presentation-menu-lq', { slidesToShow: 2.5, arrows: false, infinite: false, dots: false });
}
if($('.comparer-lq').index() != -1) {
comparer.setCompareSlider();
}
Wyszukaj frazę function adjustCategoryMenuToUrlBar(). Nad znalezioną linią wklej poniższy kod.
$('body').on('click', '.add-to-comparison-lq', function (e) {
comparer.addToComparison(e);
});
$('body').on('click', '.delete-from-comparison-lq', function (e) {
comparer.deleteFromComparison(e);
});
$('body').on('click', '.remove-from-compare-site-lq', function(e){
comparer.deleteFromComparisonSite(e);
});
Kolejnym modyfikowanym plikiem będzie comparison-tool.html. Należy wkleić do pliku poniższy kod.
{% extends '_layout.html' -%}
{% block pageContent -%}
{% include 'product/comparison.html' -%}
{% endblock -%}
Następnie w katalogu product należy utworzyć nowy plik i nazwać go comparison.html.
Należy w nim umieścić poniższy kod.
{% assign productsInComparison = comparison-tool -%}
{% assign products = comparison-tool.Products -%}
{% assign attributes = comparison-tool.Attributes -%}
{% if comparison-tool.Products.size > 0-%}
<section class="container-ui comparer-header-ui">
<input type="hidden" class="comparison-items-count-lq" data-items-count={{products.size}}>
<div class="product-presentation-breadcrumbs-ui border-bottom-ui breadcrumbs-in-comparison-ui">
{% include 'common/breadcrumbs.html' -%}
</div>
<div class="header-ui">
<h1 class="page-title-ui compare-title-ui">{{translations.ProductsComparison}}</h1>
<div class="icons-ui btn-pure-ui hidden-lq compare-icons-arrow-lq">
<i class="itemPrev ti-angle-left"></i>
<i class="itemNext ti-angle-right"></i>
</div>
</div>
</section>
<section class="container-ui comparer-ui comparer-lq">
<div class="row-ui first-row-ui">
<div class="column-ui property-ui white-space-ui"></div>
<div class="products-ui {%if products.size == 3-%} three-products-ui {% endif -%} {%if products.size < 3-%} two-products-ui {% endif -%} ">
{% for product in products -%}
<div class="column-ui product-compare-info-ui">
<div class="remove-from-compare-site-lq remove-ui">
<i class="ti-trash"></i>
{{translations.DeleteFromCompare}}
<input type="hidden" name="__action" value="Product/ComparisonToolDelete" />
<input type="hidden" name="productId" value="{{ product.Id }}" />
</div>
<div class="img-ui">
{% if product.ImageId == -1 -%}
<div class="no-image-compare-ui"><i class="ti-image no-image-ui"></i></div>
{% else -%}
{{ product | Img:'large' }}
{% endif -%}
</div>
<div class="prod-name-ui">
<a href="{{ product.Url }}">{{product.Name }}</a>
</div>
<div class="prod-price-ui">
<p class="price-ui compare-price-ui value-ui">
{{product.Price }}
</p>
<p class="price-ui compare-price-ui">
{{ customer.Currency}}
</p>
<small class="price-label-ui compare-brutto-ui">{{translations.Brutto | Downcase}}</small>
</div>
<div class="add-to-cart-compare-ui">
<a class="add-to-cart-ui" href="{{ product.Url }}">
{% if customer.Cart.EditedOrderId -%}
<i class="ti-bag"></i>
{% else -%}
<i class="ti-shopping-cart"></i>
{% endif -%}
<span class="add-to-cart-label-ui add-to-cart-label-lq">
{% capture end -%} <span class="cart-name-lq"> {{ currentCartName }}</span>{% endcapture -%}
{% assign cartsAmount = customer.Carts | Size -%}
{% if customer.Cart.EditedOrderId or cartsAmount > 1 -%}
{% unless customer.Cart.EditedOrderId -%}
{{ translations.AddToCartSplittedWithName | Format: mid,end }}
{% else -%}
{% assign end = end | Prepend:mid -%}
{{ translations.AddToOrderSplitted | Format: end }}
{% endunless -%}
{% else -%}
{{ translations.AddToCartSplitted | Format: mid }}
{% endif -%}
</span>
</a>
</div>
</div>
{% endfor -%}
</div>
</div>
<section class="compare-section-ui">
{% if config.Reviews.Enabled %}
<div class="row-ui ">
<div class="column-ui attr-name-ui property-ui">
{{translations.Rating}}
</div>
<div class="products-ui {%if products.size == 3-%} three-products-ui {% endif -%} {%if products.size < 3-%} two-products-ui {% endif -%} ">
{% for product in products -%}
<div class="column-ui attr-value-ui stars-ui">
{% for i in (1..5) -%}
{% if product.Rating >= i -%}
<img src="css/img/star.svg" alt="star">
{% else -%}
<img src="css/img/star-o.svg" alt="star">
{% endif -%}
{% endfor -%}
<span class="rating-count-ui">({{ product.RatingCount }})</span>
</div>
{% endfor -%}
</div>
</div>
{% endif -%}
<div class="row-ui ">
<div class="column-ui attr-name-ui property-ui">
{{translations.Availability}}
</div>
<div class="products-ui {%if products.size == 3-%} three-products-ui {% endif -%} {%if products.size < 3-%} two-products-ui {% endif -%} ">
{% for product in products -%}
<div class="column-ui attr-value-ui">
{{product.Availability.Text}}
</div>
{% endfor -%}
</div>
</div>
</section>
<section class="compare-section-ui">
<div class="name-of-property row-ui border-bottom-ui"> {{translations.BasicInformation}} </div>
<div class="row-ui ">
<div class="column-ui attr-name-ui property-ui">
{{translations.Manufacturer}}
</div>
<div class="products-ui {%if products.size == 3-%} three-products-ui {% endif -%} {%if products.size < 3-%} two-products-ui {% endif -%} ">
{% for product in products -%}
<div class="column-ui attr-value-ui">
{{product.Manufacturer.Name}}
</div>
{% endfor -%}
</div>
</div>
<div class="row-ui">
<div class="column-ui attr-name-ui property-ui">
{{translations.Brand}}
</div>
<div class="products-ui {%if products.size == 3-%} three-products-ui {% endif -%} {%if products.size < 3-%} two-products-ui {% endif -%} ">
{% for product in products -%}
<div class="column-ui attr-value-ui">
{{product.Brand.Name}}
</div>
{% endfor -%}
</div>
</div>
<div class="row-ui">
<div class="column-ui attr-name-ui property-ui">
{{translations.ManufacturerCode}}
</div>
<div class="products-ui {%if products.size == 3-%} three-products-ui {% endif -%} {%if products.size < 3-%} two-products-ui {% endif -%} ">
{% for product in products -%}
<div class="column-ui attr-value-ui">
{{product.ManufacturerCode}}
</div>
{% endfor -%}
</div>
</div>
<div class="row-ui">
<div class="column-ui attr-name-ui property-ui">
{{translations.ProductCode}}
</div>
<div class="products-ui {%if products.size == 3-%} three-products-ui {% endif -%} {%if products.size < 3-%} two-products-ui {% endif -%} ">
{% for product in products -%}
<div class="column-ui attr-value-ui">
{{product.Code}}
</div>
{% endfor -%}
</div>
</div>
<div class="row-ui">
<div class="column-ui attr-name-ui property-ui">
{{translations.VatTax}}
</div>
<div class="products-ui {%if products.size == 3-%} three-products-ui {% endif -%} {%if products.size < 3-%} two-products-ui {% endif -%} ">
{% for product in products -%}
<div class="column-ui attr-value-ui">
{{product.VAT | ToInt}}%
</div>
{% endfor -%}
</div>
</div>
</section>
{% if attributes != null -%}
<section class="compare-section-ui">
<div class="name-of-property row-ui border-bottom-ui"> {{translations.TechnicalParameters}} </div>
{% for i in attributes -%}
<div class="row-ui">
<div class="column-ui attr-name-ui property-ui">
{{i}}
</div>
<div class="products-ui {%if products.size == 3-%} three-products-ui {% endif -%} {%if products.size < 3-%} two-products-ui {% endif -%} ">
{% for product in products -%}
<div class="column-ui attr-value-ui">
{% assign productAttr = product.Attributes[i]-%}
{% if productAttr.size == 0 -%}
-
{% else -%}
{% for attr in productAttr -%}
{% if attr != productAttr.last-%}
{{attr}},
{% else -%}
{{attr}}
{% endif -%}
{% endfor -%}
{% endif -%}
</div>
{% endfor -%}
</div>
</div>
{% endfor -%}
</section>
{% endif -%}
</section>
{% else -%}
<section class="container-ui comparer-header-ui">
<input type="hidden" class="comparison-items-count-lq" data-items-count={{products.size}}>
<div class="product-presentation-breadcrumbs-ui border-bottom-ui breadcrumbs-in-comparison-ui">
{% include 'common/breadcrumbs.html' -%}
</div>
<div class="header-ui">
<h1 class="page-title-ui compare-title-ui">{{translations.ProductsComparison}}</h1>
</div>
<p>{{translations.NoProductsInComparer}}</p>
</section>
{% endif -%}
Teraz przejdź do katalogu css.
W pliku desktop2.css w dowolnym miejscu wklej poniższy kod.
.move-to-comparison-ui {
height: 80px;
padding: 20px 13%;
margin-top: 2px;
width: 99.5vw;
position: relative;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw;
background-color: #f6f6f6;
display: flex; }
@media (max-width: 1600px) {
.move-to-comparison-ui {
width: 99.3vw;
padding: 20px 5%; } }
.move-to-comparison-ui i {
padding-right: 15px; }
.move-to-comparison-ui .compare-items-ui .comparison-item-icon-ui {
margin-right: 20px;
width: 30px;
height: 30px;
margin-top: 5px; }
.comparison-item-icon-ui {
width: 40px;
height: 40px;
margin-right: 30px;
-webkit-mask: url(https://static.comarchesklep.pl/files/fonts/fontawesome-pro-5.6.3-web/svgs/regular/box.svg) no-repeat 50% 50%;
mask: url(https://static.comarchesklep.pl/files/fonts/fontawesome-pro-5.6.3-web/svgs/regular/box.svg) no-repeat 50% 50%;
background-color: black;
display: inline-block; }
.comparison-item-icon-ui:last-child {
margin-right: 0; }
.comparison-item-icon-ui.available-ui {
background-color: #d2d2d2; }
.compare-ui {
padding: 10px 0 10px 0;
display: block;
width: 300px;
text-align: center;
margin-left: 40px; }
.product-added-to-compare-ui {
font-size: 18px;
font-weight: 500;
text-align: center;
padding: 50px 80px 0 40px;
background: {{settings.bgColor}}; }
.product-added-to-compare-ui .ti-check {
color: #68a204;
font-size: 30px;
margin-right: 10px; }
.product-added-to-compare-ui + .info-ui {
padding: 25px; }
.product-added-to-compare-ui + .info-ui.compare-info-ui {
text-align: center; }
.product-added-to-compare-ui + .info-ui .compare-button-ui a {
margin-left: auto;
margin-right: auto; }
.product-added-to-compare-ui + .info-ui .items-ui {
width: 260px;
margin-left: auto;
margin-right: auto;
text-align: left;
padding: 30px 0; }
.too-much-items-compare-ui {
padding: 30px; }
.comparer-header-ui .header-ui {
height: 70px; }
.delete-from-comparison-ui {
color: #7FBA01;
float: left; }
.delete-from-comparison-ui i {
padding-right: 5px; }
.add-to-comparison-ui {
float: left; }
.add-to-comparison-ui i {
padding-right: 5px; }
.breadcrumbs-in-comparison-ui {
width: 100%; }
.compare-title-ui {
padding: 25px 0;
margin: 15px 0 30px;
font-size: 28px;
color: {{settings.primaryColorFont}};
line-height: 1.2; }
.comparer-ui {
margin-bottom: 30px; }
.comparer-ui .column-ui {
margin-left: 35px; }
.comparer-ui .column-ui.property-ui {
margin-left: 0; }
.comparer-ui .row-ui {
display: flex; }
.comparer-ui .row-ui .products-ui {
display: flex;
width: 80%; }
.comparer-ui .row-ui .products-ui:last-child {
margin-right: 0; }
.comparer-ui .row-ui .products-ui .column-ui {
width: 25%; }
.comparer-ui .row-ui .products-ui .column-ui.stars-ui .rating-count-ui {
position: relative;
top: -2px; }
.comparer-ui .row-ui .products-ui .column-ui.stars-ui img {
width: 15px;
height: 15px; }
.comparer-ui .row-ui .products-ui.three-products-ui .column-ui {
width: 33%; }
.comparer-ui .row-ui .products-ui.two-products-ui .column-ui {
width: 50%; }
.comparer-ui .property-ui {
min-width: 20%; }
.comparer-ui .product-compare-info-ui {
margin-bottom: 30px; }
.comparer-ui .product-compare-info-ui .remove-ui {
cursor: pointer;
padding: 0 0 16px 0;
color: #004B88;
float: right; }
.comparer-ui .product-compare-info-ui .img-ui {
clear: both;
height: 250px;
width: 100%;
text-align: center; }
.comparer-ui .product-compare-info-ui .img-ui .no-image-compare-ui {
padding-top: 70px; }
.comparer-ui .product-compare-info-ui .img-ui img:not([src="css/img/alo.gif"]) {
width: 100% !important;
height: 200px !important;
object-fit: contain !important; }
.comparer-ui .product-compare-info-ui .prod-name-ui {
color: #004B88;
font-size: 18px;
overflow: hidden;
height: 30px;
text-overflow: ellipsis;
white-space: nowrap; }
.comparer-ui .product-compare-info-ui .prod-price-ui {
display: flex;
margin-top: 10px; }
.comparer-ui .product-compare-info-ui .prod-price-ui .compare-price-ui {
font-size: 22px;
margin: 0; }
.comparer-ui .product-compare-info-ui .prod-price-ui .compare-price-ui.value-ui {
margin-right: 7px; }
.comparer-ui .product-compare-info-ui .prod-price-ui .compare-brutto-ui {
font-size: 12px;
line-height: 2.5em;
margin-left: 15px; }
.comparer-ui .product-compare-info-ui .add-to-cart-compare-ui {
width: 100%;
display: block; }
.comparer-ui .product-compare-info-ui .add-to-cart-compare-ui a, .comparer-ui .product-compare-info-ui .add-to-cart-compare-ui button {
text-align: center;
width: 100%;
padding: 10px;
min-height: auto;
margin-top: 20px; }
.comparer-ui .name-of-property {
font-size: 14px;
font-weight: 600;
background-color: white !important;
padding: 7px;
padding-left: 0;
margin-top: 10px; }
.comparer-ui section.compare-section-ui .row-ui:nth-child(odd) {
background-color: #f8f8f8; }
.comparer-ui .attr-name-ui {
font-size: 14px;
padding: 7px; }
.comparer-ui .attr-value-ui {
font-size: 14px;
width: 330px;
padding: 7px;
margin-right: 35px; }
.comparer-header-ui .sticky-lq {
position: fixed;
z-index: 10;
width: 100%;
top: 0;
border-bottom: 1px solid {{settings.lightBorderColor}}; }
W pliku mobile.css należy na końcu pliku dodać poniższy kod.
@media only screen and (max-width: 1279px) {
.comparer-ui {
padding: 0; }
.comparer-ui .column-ui {
width: 80% !important; }
.comparer-ui .remove-ui {
padding-top: 20px !important; }
.comparer-ui .stars-ui img {
display: inline-block; }
.comparer-ui .name-of-property {
display: none; }
.comparer-ui .property-ui {
border-right: 1px solid {{settings.lightBorderColor}};
min-width: 20%;
max-width: 20%; }
.comparer-ui .first-row-ui {
border-bottom: 1px solid {{settings.lightBorderColor}};
border-top: 1px solid {{settings.lightBorderColor}}; }
.comparer-header-ui {
padding: 0; }
.comparer-header-ui h1 {
padding: 20px;
margin-bottom: 0;
font-size: 16px; }
.comparer-header-ui .header-ui {
padding-left: 20px;
display: flex;
height: 70px; }
.comparer-header-ui .header-ui .icons-ui {
width: 30%;
display: flex;
justify-content: space-between;
margin: 20px auto 30px auto; } }
@media (max-width: 500px) {
.comparer-ui .column-ui {
width: 75% !important; }
.comparer-ui .property-ui {
min-width: 25% !important;
max-width: 25% !important;
overflow: scroll !important; } }
@media (max-width: 650px) {
.move-to-comparison-ui .compare-items-ui .comparison-item-icon-ui {
width: 15px !important;
height: 15px !important;
margin-right: 10px !important; }
.move-to-comparison-ui .compare-ui {
width: 50% !important;
margin-left: 10px !important; } }
Dodatkowo będziesz musiał dodać tłumaczenia do panelu administracyjnego. W tym celu należy wejść w zakładkę Wygląd sklepu/ Ustawienia/ Tłumaczenia i kliknąć w przycisk Dodaj. Należy wpisać Id tłumaczenia oraz Tekst, który będzie się wyświetlał na stronie. Zmiany należy zatwierdzić przyciskiem Dodaj.
- Id: DeleteFromCompare ,Tekst: Usuń z porównania
-
Id: AddToCompare,
Tekst: Dodaj do porównania -
Id: AddedToCompare,
Tekst: Dodano do listy porównania -
Id: 2to4products,
Tekst: Możesz dodać od 2 do 4 produktów -
Id: Rating,
Tekst: Ocena -
Id: BasicInformation,
Tekst: Informacje podstawowe -
Id: TechnicalParameters,
Tekst: Parametry techniczne -
Id: ProductsComparison,
Tekst: Porównywanie towarów -
Id: NoProductsInComparer,
Tekst: Nie wybrano żadnych towarów do porównania -
Id: TooMuchProductsInComparer,
Tekst: Możesz dodać maksymalnie 4 produkty