Porównywarka towarów w szablonie Topaz

W tym artykule dowiesz się jak zmodyfikować swój szablon Topaz, aby obsługiwał porównywarkę towarów.

Wskazówka

Niniejsza instrukcja przeznaczona jest dla sklepów w wersji 2020.2 lub nowszej!

Wskazówka

Kopiowanie fraz, które należy wyszukać w kodzie, może powodować problemy. Frazy do wyszukania najlepiej przepisać ręcznie, lub skopiować, ale po skopiowaniu podmienić znaki typu – _ ’ „ itp. W przeciwnym wypadku, fraza może nie zostać odnaleziona w kodzie!

Wskazówka

W tym artykule trzeba będzie wprowadzać zmiany w plikach js i css. Z tego artykułu dowiesz się jak je minifikować

Pierwszy krok to przypisanie obiektu porównywarki do właściwej strony sklepu. Otwórz Panel Administracyjny, a następnie zakładkę Wygląd sklepu -> Ustawienia. W prawym górnym rogu kliknij przycisk z trzema kwadratami a następnie z rozwijanego menu wybierz opcję Edytuj ustawienia zaawansowane. Wybierz zakładkę Strony. Znajdź stronę Porównywarka (9). W tym samym wierszu, w kolumnie z nazwą pliku, wpisz comparer.html, a następnie zapisz. Kliknij na pole z napisem Porównywarka (9). Pojawi się lista dostępnych obiektów. Kliknij kwadrat przy obiekcie o nazwie comparison-tool, by pokazał się znak wyboru (tzw. „ptaszek”). A następnie zapisz.

Wskazówka

Jeśli na liście obiektów nie widzisz obiektu comparison-tool, wykonaj następujące czynności. Otwórz Panel Administracyjny, a następnie zakładkę Wygląd sklepu -> Ustawienia. Kliknij w prawym górnym rogu na ikonkę z trzema kwadratami i z rozwiniętego menu wybierz opcję Edytuj ustawienia zaawansowane. Przejdź do zakładki Obiekty. Kliknij przycisk Dodaj. W polu Typ wybierz Porównywarka towarów a w polu Nazwa podaj comparison-tool, po czym kliknij Dodaj. Następnie wykonaj opisane wcześniej kroki.

Kolejny krok to dodanie tłumaczeń. W tym celu należy w Panelu Administratora wejść w Wygląd sklepu -> Ustawienia i wybrać zakładkę Tłumaczenia. Przycisk Dodaj pozwala na dodanie nowego tłumaczenia. Aby tłumaczenie zostało dodane, należy wprowadzić odpowiednie Id oraz frazę (Tekst) i zatwierdzić przyciskiem Dodaj. Lista Id oraz fraz do wprowadzenia:
1. NoItemsSelectedToCompare – Nie wybrano żadnych towarów do porównania
2. ProductsComparison – Porównanie towarów
3. ProductsComparisonRemove – Usuń porównanie
4. AddMoreProductsToCompare – Dodaj kolejne towary, które chcesz porównać (max. 3)
5. ShowProductsFromCategory – Pokaż inne towary z tej kategorii
6. ComparerReview – Ocena
7. ComparerAvailability – Dostępność
8. ComparerInformations – Informacje podstawowe
9. Manufacturer – Producent
10. Brand – Marka
11. ComparerTechnicalParameters – Parametry techniczne
12. RemoveFromComparisonTool – Usuń z porównania
13. AddedToComparisonTool – Dodano do porównania
14. ItemsToCompare – Możesz porównać od 2 do 4 towarów.
15. ProductsComparisonRemove – Usuń porównanie
16. MaxItemsInComparisonTool – Osiągnięto maksymalną ilość produktów

Wskazówka

Kopiując Id z powyższej instrukcji do Panelu Administracyjnego, upewnij się, że po danym Id nie została skopiowana żadna spacja.

Kolejnym krokiem jest utworzenie nowego pliku o nazwie comparer.html w głównym katalogu z plikami Twojego szablonu Topaz. Treść tego pliku powinna wyglądać następująco:
{% extends '_layout.html' -%} {% block pageContent -%} {% include 'staticElements/comparer/comparer.html' -%} {% endblock -%}
Możesz pominąć ten krok, jeżeli plik już istnieje, a jego treść jest identyczna jak powyżej.

Następnie otwórz folder staticElements. W nim utwórz nowy katalog o nazwie comparer, a w nim utwórz nowy plik o nazwie comparer.html. W pliku tym, umieść następujący kod:
{% include 'partials/common/breadcrumbs.html' -%} {% assign comparer = comparison-tool -%} {% assign amount = comparer.Products | Size %}



    

        {% if amount == 0 %}


                {{translations.NoItemsSelectedToCompare}}

                {{translations.Crt_BackToShop}}
            

        {% else %}


                {{translations.ProductsComparison}} ({{amount}})

                    {{translations.ProductsComparisonRemove}}

                    

                    

                    {% for p in comparer.Products -%}

                    

                    {% endfor -%}
                

            {% assign index = 0 -%}

                {% for p in comparer.Products -%}

                {% assign index = index | Plus: 1 -%}



                        {% assign productAlt = p.NameNoHtml|H %}

                        {{p|Img: 'medium', productAlt}}


                    

                    

                    

                    
{{p|A}}
                    {% if p.Price %}


                        {{p.Price|ToPrice}} {{currency}}

                        {% if p.PreviousPrice > p.Price %}

                        {{p.PreviousPrice|ToPrice}} {{currency}}

                        {% endif %}
                    
                    {% else -%}
{{ translations.Com_AskForPrice }}

                    {% endif %}

                        {% if p.Price == null or p.Availability.Status == 3 or noProductInStock -%}

                        {% else -%}

                        

{{translations.Cmp_ToCart}}
                        

                        {% endif -%}

                            

                            

                            

                            
                        


                {% endfor -%}
                {% if amount == 1 -%}


                        
                    
{{translations.AddMoreProductsToCompare}}
{{translations.ShowProductsFromCategory}}
                    

                {% endif -%}

            

        {% if config.Reviews.Enabled %}


{{translations.ComparerReview}}

            {% assign index = 0 -%}

                {% for p in comparer.Products -%}

                {% assign index = index | Plus: 1 -%}


                        {% for i in (1..p.Rating)%}

                        

                            

                        

                        {% endfor %}

                        {% for i in (p.Rating..4)%}

                        

                            

                        

                        {% endfor %}

                        ({{ p.RatingCount }})
                    

                {% endfor -%}

            

        {% endif -%}
        {% if config.Stock.Enabled == true -%}


{{translations.ComparerAvailability}}

            {% assign index = 0 -%}

                {% for p in comparer.Products -%}

                {% assign index = index | Plus: 1 -%}

{{p.Availability.Text}}

                {% endfor -%}

            



{{translations.Com_StockLvl}}

            {% assign index = 0 -%}

                {% for p in comparer.Products -%}

                {% assign index = index | Plus: 1 -%}

{{p.StockLevel.Text}}

                {% endfor -%}

            

        {% endif -%}


{{translations.ComparerInformations}}

            {% assign index = 0 -%}

                {% for p in comparer.Products -%}

                {% assign index = index | Plus: 1 -%}



                {% endfor -%}

            



{{translations.Manufacturer}}

            {% assign index = 0 -%}

                {% for p in comparer.Products -%}

                {% assign index = index | Plus: 1 -%}

{{p.Manufacturer.Name}}

                {% endfor -%}

            



{{translations.Brand}}

            {% assign index = 0 -%}

                {% for p in comparer.Products -%}

                {% assign index = index | Plus: 1 -%}

{{p.Brand.Name}}

                {% endfor -%}

            



{{translations.Man_ManufacturerCode}}

            {% assign index = 0 -%}

                {% for p in comparer.Products -%}

                {% assign index = index | Plus: 1 -%}

{{p.ManufacturerCode}}

                {% endfor -%}

            



{{translations.Pro_ProductCode}}

            {% assign index = 0 -%}

                {% for p in comparer.Products -%}

                {% assign index = index | Plus: 1 -%}

{{p.Code}}

                {% endfor -%}

            

        {% if comparison-tool.Attributes != null -%}


{{translations.ComparerTechnicalParameters}}

            {% assign index = 0 -%}

                {% for p in comparer.Products -%}

                {% assign index = index | Plus: 1 -%}



                {% endfor -%}

            

        {% for attr in comparer.Attributes -%}


{{attr}}

            {% assign index = 0 -%}

                {% for p in comparer.Products -%}

                {% assign index = index | Plus: 1 -%}


                    {% assign attributeValue = p.Attributes[attr] -%}

                    {% assign lastItem = attributeValue | Last -%}

                    {% assign  attributesLength = attributeValue | Size -%}

                        {% if attributesLength ==  0 -%}

                        -

                        {% else -%}

                        {% for a in attributeValue -%}

                        {% if a != lastItem -%}

                        {{a}},

                        {% else -%}

                        {{a}}

                        {% endif -%}

                        {% endfor -%}

                        {% endif -%}
                    

                {% endfor -%}

            

        {% endfor -%}


{{translations.Pro_Weight}}

            {% assign index = 0 -%}

                {% for p in comparer.Products -%}

                {% assign index = index | Plus: 1 -%}

{{p.Weight | Normalize}} {{ translations.Com_kg }}

                {% endfor -%}

            

        {% endif -%}

        {% endif -%}

{% include 'partials/newsletter-global.html' -%}

Kolejnym krokiem jest dodanie odpowiedniego kodu do plików css, odpowiadających za wygląd porównywarki. W tym celu przejdź do katalogu css. Na końcu pliku layout.css wklej następujący kod:
.comparerContainer{font-family:{{settings.fontFamily}};background:{{settings.primaryPageBgColor}};max-width:1400px;margin:40px auto}.comparerContainer #firstRow{background:{{settings.primaryPageBgColor}} !important}.comparerContainer .row{width:100%;display:block;display:flex;flex-direction:row}.comparerContainer .row section{width:100%;display:inherit}.comparerContainer .groupInfo{background-color:#f8f8f8}.comparerContainer .lastProduct{border-right:none !important}.comparerContainer .noProducts{width:100%;margin-bottom:40px}.comparerContainer .noProducts .title{display:block;font-size:24px;line-height:32px;color:{{settings.primaryFontColor}}}.comparerContainer .noProducts .noProductsLinks{display:block;margin-top:20px;font-size:14px;line-height:24px;color:{{settings.linkFontColor}}}.comparerContainer .noProducts .noProductsLinks:hover{cursor:pointer}.comparerContainer .topSection-info{border-right:1px solid {{settings.borderColor}};border-bottom:1px solid {{settings.borderColor}};border-top:none;border-left:none;width:25%}.comparerContainer .topSection-info .title{display:block;font-size:20px;line-height:32px;color:{{settings.primaryFontColor}};padding-right:10px}.comparerContainer .topSection-info .removeComparer{display:block;margin-top:20px;font-size:14px;line-height:24px;color:{{settings.linkFontColor}}}.comparerContainer .topSection-info .removeComparer:hover{cursor:pointer}.comparerContainer .topSection-productInfo{width:35%;border-right:1px solid {{settings.borderColor}};border-bottom:1px solid {{settings.borderColor}};border-top:none;border-left:none;position:relative}.comparerContainer .topSection-productInfo .productImage{height:150px;position:relative}.comparerContainer .topSection-productInfo .productImage a{cursor:initial}.comparerContainer .topSection-productInfo .productImage .itemPrev,.comparerContainer .topSection-productInfo .productImage .itemNext{position:absolute;border-radius:50%;background-color:{{settings.sliderBgColor}};width:30px;height:30px;top:50%;border:none;transition:200ms}.comparerContainer .topSection-productInfo .productImage .itemPrev:hover,.comparerContainer .topSection-productInfo .productImage .itemNext:hover{background-color:{{settings.linkFontColor}};border:none !important}.comparerContainer .topSection-productInfo .productImage .itemPrev:hover .svgIcon,.comparerContainer .topSection-productInfo .productImage .itemNext:hover .svgIcon{fill:{{settings.sliderHoverArrowColor}} !important;border:none !important}.comparerContainer .topSection-productInfo .productImage .itemPrev{left:5px}.comparerContainer .topSection-productInfo .productImage .itemNext{right:5px}.comparerContainer .topSection-productInfo .productImage .svgItemPrev{padding-left:0px !important;margin-left:-9px !important;margin-top:-3px !important;fill:{{settings.sliderArrowColor}} !important}.comparerContainer .topSection-productInfo .productImage .svgItemNext{float:right;margin-top:-3px !important;fill:{{settings.sliderArrowColor}} !important;padding-top:0 !important;margin-right:-7px !important}.comparerContainer .topSection-productInfo .productImage img{display:block;margin:0 auto;max-height:150px;object-fit:contain;max-width:50%;cursor:pointer !important}.comparerContainer .topSection-productInfo .productImage .svgIcon{width:43px;height:34px;fill:#e5e5e5;margin:0 auto;display:block;padding-top:58px;padding-left:40px}.comparerContainer .topSection-productInfo .addMoreProducts{margin-top:10px;display:block;color:{{settings.secondaryFontColor}};text-align:center;font-size:14px;line-height:24px;margin-left:40px;font-weight:400}.comparerContainer .topSection-productInfo .showMoreProducts{font-weight:500;font-size:14px;line-height:24px;color:{{settings.linkFontColor}};margin-top:15px;margin-left:40px;text-align:center}.comparerContainer .topSection-productInfo .showMoreProducts>a:hover{cursor:pointer}.comparerContainer .topSection-productInfo .removeItem{position:absolute;top:10px;right:37px;background-color:{{settings.linkFontColor}};-webkit-mask:url(https://static.comarchesklep.pl/files/fonts/fontawesome-pro-5.6.3-web/svgs/light/times.svg) no-repeat 50% 50%;mask:url(https://static.comarchesklep.pl/files/fonts/fontawesome-pro-5.6.3-web/svgs/light/times.svg) no-repeat 50% 50%;width:15px;height:15px}.comparerContainer .topSection-productInfo .removeItem:hover{cursor:pointer}.comparerContainer .topSection-productInfo .productName{font-size:16px;line-height:24px;height:50px;margin-top:10px;margin-left:40px;color:{{settings.primaryFontColor}}}.comparerContainer .topSection-productInfo .productPrice{font-size:18px;line-height:26px;display:inline;font-weight:bold;color:{{settings.productPriceFontColor}};margin-left:40px}.comparerContainer .topSection-productInfo .redPrice{color:{{settings.ribbonPromotionColor}}}.comparerContainer .topSection-productInfo .previousPrice{font-size:14px;font-weight:400;display:inline;text-decoration:line-through;color:{{settings.productPricePreviousFontColor}};margin-left:40px}.comparerContainer .topSection-productInfo .currency{font-size:12px;line-height:18px;color:{{settings.primaryFontColor}};font-weight:bold}.comparerContainer .topSection-productInfo .buttons{margin:30px 40px 50px;width:calc(100% - 80px);height:40px;display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:center}.comparerContainer .topSection-productInfo .buttons .disableCartButton{visibility:hidden}.comparerContainer .topSection-productInfo .buttons .addToCartButton{width:75%;height:24px;text-transform:uppercase;font-size:14px;line-height:24px;font-weight:400;background-color:{{settings.primaryBtnBgColor}};color:{{settings.primaryBtnFontColor}};border:1px solid {{settings.primaryBtnBorderColor}};transition:200ms;text-align:center;padding:8px 0}.comparerContainer .topSection-productInfo .buttons .addToCartButton:hover{background-color:{{settings.primaryBtnHoverBgColor}};color:{{settings.primaryBtnHoverFontColor}};border:1px solid {{settings.primaryBtnHoverBorderColor}};cursor:pointer}.comparerContainer .topSection-productInfo .buttons .addToFavouriteButton{border:1px solid {{settings.secondaryBtnBorderColor}};width:40px;height:40px;background-color:{{settings.primaryPageBgColor}};transition:200ms}.comparerContainer .topSection-productInfo .buttons .addToFavouriteButton:hover{border-color:{{settings.secondaryBtnHoverBorderColor}};cursor:pointer}.comparerContainer .topSection-productInfo .buttons .addToFavouriteButton:hover .favouriteIcon{background-color:{{settings.secondaryBtnHoverBorderColor}}}.comparerContainer .topSection-productInfo .buttons .addToFavouriteButton .wishList{-webkit-mask:url(https://static.comarchesklep.pl/files/fonts/fontawesome-pro-5.6.3-web/svgs/solid/heart.svg) !important;mask:url(https://static.comarchesklep.pl/files/fonts/fontawesome-pro-5.6.3-web/svgs/solid/heart.svg) !important;background-color:{{settings.secondaryBtnHoverBorderColor}} !important}.comparerContainer .topSection-productInfo .buttons .addToFavouriteButton .favouriteIcon{-webkit-mask:url(https://static.comarchesklep.pl/files/fonts/fontawesome-pro-5.6.3-web/svgs/light/heart.svg);mask:url(https://static.comarchesklep.pl/files/fonts/fontawesome-pro-5.6.3-web/svgs/light/heart.svg);background-color:{{settings.primaryFontColor}};width:20px;height:20px;display:block;margin:10px auto 0}.comparerContainer .topSection-productInfo .buttons .wishListBorder{border-color:{{settings.secondaryBtnHoverBorderColor}}}.comparerContainer .lastAttribute{border-bottom:1px solid {{settings.borderColor}}}.comparerContainer .property{border-right:1px solid {{settings.borderColor}};border-bottom:1px solid {{settings.borderColor}};border-top:none;border-left:none;width:25%}.comparerContainer .property .propertyName{font-size:16px;color:{{settings.primaryFontColor}};font-weight:400;line-height:24px;text-align:left;padding:18px 10px;text-transform:capitalize}.comparerContainer .property .groupName{color:{{settings.secondaryFontColor}};font-size:14px;font-weight:bold;padding:8px 0 8px 10px;text-transform:capitalize}.comparerContainer .propertyValueContainer{width:35%;border-right:1px solid {{settings.borderColor}};border-bottom:1px solid {{settings.borderColor}};border-top:none;border-left:none}.comparerContainer .propertyValueContainer .rating{width:calc(100% - 80px);margin:18px 40px}.comparerContainer .propertyValueContainer .rating .stars{width:13px;height:13px}.comparerContainer .propertyValueContainer .rating .productRating--color{fill:{{settings.linkFontColor}}}.comparerContainer .propertyValueContainer .rating .ratingCount{font-size:14px;color:{{settings.secondaryFontColor}};line-height:24px;font-weight:400;margin-left:12px}.comparerContainer .propertyValueContainer .propertyValue{width:calc(100% - 80px);margin:18px 40px;font-size:14px;line-height:24px;color:{{settings.primaryFontColor}};font-weight:300;word-break:break-word}.comparerContainer .propertyValueContainer .delivery{color:{{settings.linkFontColor}}}@media only screen and (max-width: 1350px){.comparerContainer .fourItems .removeItem{right:20px}.comparerContainer .fourItems .productName,.comparerContainer .fourItems .buttons{margin-left:20px;margin-right:20px}.comparerContainer .fourItems .buttons{width:calc(100% - 40px);margin-bottom:20px}.comparerContainer .fourItems .productPrice,.comparerContainer .fourItems .previousPrice{margin-left:20px;display:block}.comparerContainer .fourItems .previousPrice{height:0}.comparerContainer .twoItems{width:50%}.comparerContainer .propertyValueContainer .propertyValue,.comparerContainer .propertyValueContainer .rating{margin-left:20px;margin-right:20px}.comparerContainer .propertyValueContainer .rating{width:calc(100% - 40px)}}

Do pliku layout-m.css wklej następujący kod:
@media only screen and (max-width: 768px){.oneItem{margin-left:20px !important;margin-right:20px !important;width:calc(100% - 40px) !important}.row>section{width:75% !important}.row>section .comparerSlider{width:50% !important}.row>section .lastProduct{border-right:1px solid {{settings.borderColor}} !important}.comparerSlider .slick-track{height:calc(100% - 1px) !important}.topSection-info .title,.topSection-info .removeComparer,.property .groupName,.property .propertyName{padding-left:20px !important}.noProducts{margin-left:20px}}@media only screen and (max-width: 580px){.row section{width:60% !important}.row .topSection-info,.row .property{width:40% !important}.previousPrice{display:block !important}}@media only screen and (max-width: 385px){.buttons{width:calc(100% - 10px) !important;margin-left:5px !important;margin-right:5px !important}.title{font-size:16px !important}.removeComparer{font-size:12px !important}}

Do pliku layout-d.css wklej następujący kod:
@media only screen and (max-width: 1150px){.comparerContainer .fourItems .buttons .addToCartButton{display:block !important;width:auto !important;padding:8px 15px !important}.comparerContainer .fourItems .buttons .addToFavouriteButton{margin:10px auto}}@media only screen and (min-width: 971px) and (max-width: 1050px){.buttons{margin-left:10px !important;margin-right:10px !important;width:calc(100% - 20px) !important}}@media only screen and (max-width: 970px){.row .property{border-right:none}.row section{width:75% !important}.row section .comparerSlider{width:50% !important}.row section .lastProduct{border-right:1px solid {{settings.borderColor}} !important}.comparerSlider .slick-track{height:calc(100% - 1px) !important}.copmarerContainer .topSection-info .buttons{width:calc(100% - 40px)}.copmarerContainer .topSection-info .removeItem{right:20px}.copmarerContainer .topSection-info .productName,.copmarerContainer .topSection-info .buttons{margin-left:20px;margin-right:20px}.copmarerContainer .topSection-info .productPrice,.copmarerContainer .topSection-info .previousPrice{margin-left:20px;display:block}.copmarerContainer .topSection-info .previousPrice{height:0}}

Następnie należy dodać odpowiedni kod do plików js. W tym celu, w plikach Topaza, otwórz folder js a następnie plik layout0.js. Odszukaj linijkę z frazą productListFunctions.init();. Pod znalezioną linijką znajduje się linia ze znakiem }. Pod nią wklej następujący kod:
if($('body').find('.comparerContainer').index() >= 0) { comparerFunctions.init(); }

Otwórz plik layout1.js znajdujący się w tym samym katalogu. Poniższy kod możesz wkleić na samym początku pliku:
var comparerFunctions = { init: function() { this.events(); },


    events: function() {

        $(document).ready(function(){

            $('.propertyValue-js').each(function(index) {

                var t = $(this).text();

                t = t.replace(/([A-Z])/g, ' $1').trim();

                $(this).text(t);

            })
            $('.row').each(function() {

                if(!($(this).hasClass('groupInfo'))) {

                    $(this).children('.property').css('box-shadow', '2px 0 2px -2px #E5E5E5');

                    $(this).children('.topSection-info').css('box-shadow', '2px 0 2px -2px #E5E5E5');

                }

            });
            var amount = $('#amount').attr('value');

            var windowWidth = $(window).width();
            if (amount <= 2) {
                $('.topSection-productInfo').css('width', '50%');
                $('.propertyValueContainer').css('width', '50%');

                if(amount == 1 && windowWidth <= 768) {
                    $('.productPrice').addClass('oneItem');
                    $('.productName').addClass('oneItem');
                    $('.buttons').addClass('oneItem');
                    $('.lastProduct > *').css('margin-left', '10px', '!important');

                    $('.lastProduct > *').css('margin-right', '10px', '!important');

                } else if(amount == 1 && windowWidth <= 600) {
                    $('.topSection-productInfo').css('width', '100%', '!important');
                    $('.propertyValueContainer').css('width', '100%', '!important');
                    $('.lastProduct').css('display', 'none');
                }
            }

            if ((windowWidth <= 970 && amount > 2) || (windowWidth <= 742 && amount == 2)) {
                $(".row > section").addClass("comparerSlider");

                var slider = $('.comparerSlider').slick({

                    infinite: true,

                    slidesToShow: 2,

                    slidesToScroll:1,

                    draggable: false,

                    autoplay: false,

                    autoplaySpeed: 8000,

                    arrows:false,

                    swipe:false,

                    responsive: [

                        {

                            breakpoint: 768,

                            settings: {

                                slidesToShow: 1,

                            }

                        }

                    ]
                });
                if(amount == 2) {

                    slider.slick('slickSetOption', 'infinite', false);

                }
                if(windowWidth <= 970 && windowWidth > 768 && amount > 2) {

                    showSliderArrows();

                }   
                if (windowWidth <= 768 && amount > 2) {

                    $(".itemPrev").removeClass('hidden');

                    $(".itemNext").removeClass('hidden');

                }
                if(windowWidth <= 742 && amount == 2) {
                    $(".itemNext").removeClass('hidden');
                }

                $(".itemPrev").on( "click", function() {
                    slider.slick("slickPrev").delay(500);
                    if((windowWidth <= 970 && windowWidth > 768 && amount > 2)) {

                        showSliderArrows();

                    }

                    if(amount == 2) {

                        $('.itemPrev').addClass('hidden');

                        $('.itemNext').removeClass('hidden');

                    }

                });
                $(".itemNext").on( "click", function() {

                    slider.slick("slickNext").delay( 500 );

                    if((windowWidth <= 970 && windowWidth > 768 && amount > 2)) {

                        showSliderArrows();

                    }

                    if(amount == 2) {

                        $('.itemNext').addClass('hidden');

                        $('.itemPrev').removeClass('hidden');

                    }

                });

            }

        });
        var topSection = document.getElementById("firstRow");

        var topPosition = topSection.offsetTop;
        $(window).on('scroll', function() {
            if (window.pageYOffset > (topPosition)) {

                topSection.style.position = 'sticky';

                topSection.style.top = '0';

                topSection.style.zIndex = '100';
            } else {

                topSection.style.position = 'inherit';

                topSection.style.top = 'none';

                topSection.style.zIndex = 'inherit';

            }

        });
        $('body').on('click', '.productWishListAdd-js', function (e) {

            app.productWishListAdd(e);

        });
        $('body').on('click', '.productWishListRemove-js', function (e) {

            app.productWishListRemove(e);

        });
        $('body').on('click', '.removeItem', function (e) {

            app.productComparisonToolDeleteItem(e);

        });
        $('body').on('click', '.removeComparer', function (e) {

            var productIds = $(this).parent('.removeComparerContainer').children($('input [name="productId"]'));

            app.productComparisonToolDeleteAll(productIds);

        });

function showSliderArrows() { var currentProducts = $('.topSection-productInfo'); var activeProducts = []; var i=0; currentProducts.each(function() { if($(this).attr('aria-hidden') == 'false') { activeProducts[i++] = $(this); } }); activeProducts[0].find('.itemPrev').removeClass('hidden'); activeProducts[0].find('.itemNext').addClass('hidden'); activeProducts[1].find('.itemNext').removeClass('hidden'); activeProducts[1].find('.itemPrev').addClass('hidden'); } } }

Następnie należy dodać możliwość dodawania produktów do porównywarki z poziomu szczegółów towaru. Otwórz katalog elements -> product. W zależności do tego, jaką wersję szczegółów towaru wybrałeś w Kreatorze, w katalogu będzie plik product-details-1.html lub product-details-2.html. Wykonaj kolejne kroki w zależności od tego, który plik znajduje się w Twoim Topazie.

Dalsza instrukcja dla pliku product-details-1.html

Otwórz plik i wyszukaj linię, w której znajduje się fragment comparison-tool-add-button. Musisz usunąć wszystko pomiędzy liniami o treści (włącznie z nimi). Pod usuniętymi liniami kodu znajdują się dwie linie o treści </div> i {% endif -%}. Nad nimi wklej następujący kod:
{% assign isInComparisonTool = false -%} {% for itemId in customer.ComparisonToolItems -%} {% if itemId == product-details.Product.Id -%} {% assign isInComparisonTool = true -%} {% endif -%} {% endfor -%}


                                

                                    

                                        

                                    

                                    {{translations.Cmp_Compare}}

{{translations.RemoveFromComparisonTool}}

a pod nimi wklej następujący kod:

{% assign comparisonToolItems = customer.ComparisonToolItems | Size | Plus: 1 -%}

{{translations.AddedToComparisonTool}} ({{comparisonToolItems}}/4)

{% assign ComparerItems = customer.ComparisonToolItems | Size | Plus: 1 -%}
= 2 -%} addedToCompare {% endif -%}”>
= 4 -%} addedToCompare {% endif -%}”>

W pliku layout-m.css wklej następujący kod:
@media only screen and (min-width: 461px) and (max-width: 768px){.addToComparePopup{bottom:16px !important;right:15% !important}} @media only screen and (max-width: 599px){.addToComparePopup{width:100% !important;bottom:0 !important;right:0 !important;left:0 !important}}

A w pliku layout-d.css wklej następujący kod:
@media only screen and (min-width: 769px) and (max-width: 900px){.addToComparePopup{bottom:16px !important;right:15% !important}}

Pozostało dodać kod w plikach js. Otwórz katalog js a w nim plik layout0.js. Wyszukaj frazę productComparisonToolAdd. Musisz usunąć kilka linii kodu, od znalezionej przed chwilą (włącznie) do najbliższej linii o treści }, (około 11 linii kodu). W miejsce usuniętego kodu, wklej poniższy:
productComparisonToolAdd: function (e) { var data = $(e.currentTarget).find('input').serializeArray(); var comparisonItems = data[4].value; if(comparisonItems >= 4) { $('.addToComparePopup').fadeIn(); var msg =__translations.MaxItemsInComparisonTool; $('.addToCompare').text(msg);

} else { var url = data[2].value; $.post(null, data, function (result) { if (result.action.Result) { $('.addToComparePopup').fadeIn(); $('#comparison-tool-delete-button').removeClass('hidden'); $('#comparison-tool-add-button').addClass('hidden'); } else if (result.action.Code != 100) { app.showTemporaryPopup(result.action.Message, 'error'); } }); } }, productComparisonToolDelete: function (e) { var data = $(e.currentTarget).find('input').serializeArray(); var pId = data[1].value; $.post(null,{__action:'product/ComparisonToolDelete',__csrf:__CSRF,productId:pId},function(d){ setInterval(function() { location.reload(); }, 1000); }); }, productComparisonToolDeleteItem: function (e) { var pId = $(e.currentTarget).attr('data-id'); $.post(null,{__action:'product/ComparisonToolDelete',__csrf:__CSRF,productId:pId,__template:'comparer.html'},function(d){ setInterval(function() { location.reload(); }, 1000); }); }, productComparisonToolDeleteAll: function (e) { e.each(function() { var pId = $(this).attr('data-id'); $.post(null,{__action:'product/ComparisonToolDelete',__csrf:__CSRF,productId:pId,__template:'comparer.html'}); }) setInterval(function() { location.reload(); }, 3000); },

Otwórz plik layout1.js. Wyszukaj linię o treści app.productComparisonToolAdd(e);. Następujący kod musisz wkleić poniżej kolejnej linii o treści });:
body.on('click', '.productComparisonToolDelete-js', function (e) { app.productComparisonToolDelete(e); });

body.on('click', '.closeComparePopup', function (e) { $('.addToComparePopup').addClass('hidden'); });

Jeśli posiadasz pierwszą wersję szczegółów towaru, to koniec instrukcji. Dalsza część dotyczy zmian dla wersji drugiej szczegółów towaru.

Dalsza instrukcja dla pliku product-details-2.html

Otwórz plik i wyszukaj linię, w której znajduje się fragment productComparisonToolAdd-js. Musisz usunąć wszystko pomiędzy liniami o treści (włącznie z nimi). Pod usuniętymi liniami kodu znajdują się dwie linie o treści </div> i {% endif -%}. Nad nimi wklej następujący kod:
{% assign isInComparisonTool = false -%} {% for itemId in customer.ComparisonToolItems -%} {% if itemId == product-details.Product.Id -%} {% assign isInComparisonTool = true -%} {% endif -%} {% endfor -%}


                    

                        

                        {{translations.Cmp_Compare}}

{{translations.RemoveFromComparisonTool}}

a pod nimi wklej następujący kod:




{{translations.AddedToComparisonTool}}
                    
                

{{translations.ItemsToCompare}}
{{translations.ProductsComparisonRemove}}
                    

                    

                    

                    {% for itemId in customer.ComparisonToolItems -%}

                        

                    {% endfor -%}
                

                    {% assign ComparerItems = customer.ComparisonToolItems | Size | Plus: 1 -%}

                    

                    

                    

                    
                
                {% assign ComparerItems = customer.ComparisonToolItems | Size | Plus: 1 -%}

                {% if ComparerItems > 1 -%}

                    

{{translations.Cmp_Compare}}
                    

                {% endif -%}

Następnie należy dodać kod odpowiadający za wygląd wyskakującego okienka z informacją o dodaniu towaru do porównywarki. Aby to zrobić, przejdź do katalogu css. W pliku layout.css wklej na samym dole następujący kod:
.product-details .addToComparePopup{display:none;position:fixed;margin-left:auto;margin-right:auto;right:0;left:0;top:30%;width:30%;height:auto;background-color:{{settings.primaryPageBgColor}};transition:200ms;z-index:100;opacity:1 !important;box-shadow:0 3px 8px #616060}.product-details .addToComparePopup .comparisonIcons{width:calc(100% - 70px);margin:40px auto !important;text-align:center}.product-details .addToComparePopup .comparisonInfo{width:100%;position:relative;margin-top:40px;line-height:26px;display:block}.product-details .addToComparePopup .comparisonInfo .comparerItemIcon{width:40px;height:40px;margin-right:10px;-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:{{settings.secondaryFontColor}};display:inline-block;padding:10px}.product-details .addToComparePopup .comparisonInfo .addedToCompare{background-color:{{settings.linkFontColor}} !important}.product-details .addToComparePopup .comparisonInfo .addToCompare{margin-left:70px;font-size:18px;font-weight:500;color:{{settings.primaryFontColor}}}.product-details .addToComparePopup .comparisonInfo .comparisonItems{font-size:14px;line-height:24px;color:{{settings.primaryFontColor}};display:inline-block;margin-left:70px}.product-details .addToComparePopup .comparisonInfo .removeComparison{margin-right:42px;margin-top:2px;float:right;font-size:14px;line-height:24px;font-weight:400;color:{{settings.linkFontColor}}}.product-details .addToComparePopup .comparisonInfo .removeComparison:hover{cursor:pointer}.product-details .addToComparePopup .comparisonInfo .closeComparePopup{position:absolute;top:4px;right:0;margin-right:40px;background-color:{{settings.primaryFontColor}};-webkit-mask:url(https://static.comarchesklep.pl/files/fonts/fontawesome-pro-5.6.3-web/svgs/light/times.svg) no-repeat 50% 50%;mask:url(https://static.comarchesklep.pl/files/fonts/fontawesome-pro-5.6.3-web/svgs/light/times.svg) no-repeat 50% 50%;width:18px;height:18px}.product-details .addToComparePopup .comparisonInfo .closeComparePopup:hover{cursor:pointer}.product-details .addToComparePopup .goToComparisonTool{width:60%;height:24px;text-transform:uppercase;font-size:14px;line-height:24px;font-weight:400;background-color:{{settings.primaryBtnBgColor}};color:{{settings.primaryBtnFontColor}};border:1px solid {{settings.primaryBtnBorderColor}};transition:200ms;text-align:center;padding:8px 0;margin:40px auto;display:block}.product-details .addToComparePopup .goToComparisonTool:hover{background-color:{{settings.primaryBtnHoverBgColor}};color:{{settings.primaryBtnHoverFontColor}};border:1px solid {{settings.primaryBtnHoverBorderColor}};cursor:pointer}@media only screen and (max-width: 1550px){.product-details .comparisonItems,.product-details .removeComparison{display:block;width:100%;text-align:center;float:none !important}.product-details .comparisonItems{margin:0 auto !important}.product-details .removeComparison{margin:20px auto 0 !important}}

W pliku layout-m.css wklej następujący kod:
@media only screen and (max-width: 768px){.addToComparePopup{width:calc(100% - 40px) !important}} @media only screen and (max-width: 330px){.addToComparePopup>.addToCompare{margin-left:20px !important}}

A w pliku layout-d.css wklej następujący kod:
@media only screen and (min-width: 641px) and (max-width: 1077px){.addToComparePopup{width:50% !important}}

Otwórz plik layout1.js. Wyszukaj linię o treści app.productComparisonToolAdd(e);. Następujący kod musisz wkleić poniżej kolejnej linii o treści });:
body.on('click', '.removeComparison', function (e) { var productIds = $(this).parent('.deleteComparison-js').children($('input [name="productId"]')); app.productComparisonToolDeleteAll(productIds); });


        body.on('click', '.productComparisonToolDelete-js', function (e) {

            app.productComparisonToolDelete(e);

        });

body.on('click', '.closeComparePopup', function (e) { $('.addToComparePopup').addClass('hidden'); });

Porównywarka towarów w szablonie Topaz

Porównywarka towarów w szablonie Topaz

Czy ten artykuł był pomocny?

Społeczność Comarch

Oferta e-Commerce

Przydatne linki

Kontakt