Obsługa strony porównywania towarów w szablonie Szafir

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

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

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

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

<legend>{{productsComparison}}</legend>

<h3 class="section-title">{{compareProducts}}</h3>

<label class="label" for="compareProducts-yes">{{yesTranslation}}</label>

</div>

<label class="label" for="compareProducts-no">{{noTranslation}}</label>

</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>

{% assign isInComparison = false -%}

{% for itemId in customer.ComparisonToolItems -%}

{% if itemId == product-presentation.Product.Id -%}

{% assign isInComparison = true -%}

{% endif -%}

{% endfor -%}

{% for item in customer.ComparisonToolItems-%}

{% endfor -%}

{% for i in (customer.ComparisonToolItems.size..3)-%}

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

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

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

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

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

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

{% if settings.compareProducts == 'yes' and isInComparison == 'false' -%}

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

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

</div>

</button>

</span>

</div>

<div > {{translations.2to4products}} </div>

{% for item in customer.ComparisonToolItems-%}

{% endfor -%}

</div>

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

</button>

<div > {{translations.TooMuchProductsInComparer}} </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')
			}
		});
	}
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

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

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

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

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

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

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

{% assign productsInComparison = comparison-tool -%}

{% assign products = comparison-tool.Products -%}

{% assign attributes = comparison-tool.Attributes -%}

{% if comparison-tool.Products.size > 0-%}

{% include 'common/breadcrumbs.html' -%}

</div>

<h1 class="page-title-ui compare-title-ui">{{translations.ProductsComparison}}</h1>

</div>

</section>

{% for product in products -%}

</div>

{% if product.ImageId == -1 -%}

{% else -%}

{% endif -%}

</div>

<a href="{{ product.Url }}">{{product.Name }}</a>

</div>

</p>

</p>

<small class="price-label-ui compare-brutto-ui">{{translations.Brutto | Downcase}}</small>

</div>

{% if customer.Cart.EditedOrderId -%}

{% else -%}

{% endif -%}

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

{% else -%}

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

{% endunless -%}

{% else -%}

{% endif -%}

</span>

</a>

</div>

{% endfor -%}

</div>

{% if config.Reviews.Enabled %}

</div>

{% for product in products -%}

{% for i in (1..5) -%}

{% if product.Rating >= i -%}

{% else -%}

{% endif -%}

{% endfor -%}

<span class="rating-count-ui">({{ product.RatingCount }})</span>

</div>

{% endfor -%}

</div>

{% endif -%}

</div>

{% for product in products -%}

</div>

{% endfor -%}

</div>

</section>

<div class="name-of-property row-ui border-bottom-ui"> {{translations.BasicInformation}} </div>

</div>

{% for product in products -%}

</div>

{% endfor -%}

</div>

</div>

{% for product in products -%}

</div>

{% endfor -%}

</div>

</div>

{% for product in products -%}

</div>

{% endfor -%}

</div>

</div>

{% for product in products -%}

</div>

{% endfor -%}

</div>

</div>

{% for product in products -%}

{{product.VAT | ToInt}}%

</div>

{% endfor -%}

</div>

</section>

{% if attributes != null -%}

<div class="name-of-property row-ui border-bottom-ui"> {{translations.TechnicalParameters}} </div>

{% for i in attributes -%}

</div>

{% for product in products -%}

{% assign productAttr = product.Attributes[i]-%}

{% if productAttr.size == 0 -%}

{% else -%}

{% for attr in productAttr -%}

{% if attr != productAttr.last-%}

{{attr}},

{% else -%}

{% endif -%}

{% endfor -%}

{% endif -%}

</div>

{% endfor -%}

</div>

{% endfor -%}

</section>

{% endif -%}

</section>

{% else -%}

{% include 'common/breadcrumbs.html' -%}

</div>

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

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

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

@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.

Lista tłumaczeń:

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

Obsługa strony porównywania towarów w szablonie Szafir

Czy ten artykuł był pomocny?

Społeczność Comarch

Oferta e-Commerce

Przydatne linki

Kontakt