Obsługa lookbooka w szablonie Topaz

W tym artykule dowiesz się jak zmodyfikować swój szablon, aby obsługiwał lookbooka.

Topaz

W Panelu Administratora przejdź do zakładki Tłumaczenia (Wygląd sklepu -> Ustawienia -> Tłumaczenia) i dodaj tam dwie frazy. ShowProducts – Pokaż towary, Lookbook – Lookbook. Następnie przejdź do zakładki Bannery (Wygląd sklepu -> Ustawienia -> Bannery) i dodaj tam banner o nazwie lookbook. Po jego dodaniu wejdź w jego ustawienia i zaznacz Lookbook zamiast Standardowy. Resztę uzupełnij wedle własnego uznania. W polu Nazwa (Lookbook) będzie nazwa lookbooka, która będzie się wyświetlać w sklepie. Teraz przejdź do zakładki Strony (Wygląd sklepu -> Ustawienia -> Trzykropek w prawym górnym rogu -> Edytuj ustawienia zaawansowane -> Strony) i przy stronie Lookbook wpisz lookbook.html, a następnie wejdź w ustawienia danej strony i zaznacz check-box header [Nagłówek]. Zapisz to wszystko kliknięciem w dyskietkę w prawym górnym rogu.

W pliku elements/header/header-1.html (lub header-2.html – w zależności od wybranej w szablonie wersji nagłówka) wyszukaj frazę config.DefinedPages.Contact. Pod linijką z tą frazą wklej poniższy kod:


{% for banner in config.Banners -%}
    {% assign imagesQuantity = banner.Images | Size -%}
    {% if banner.Name == 'lookbook' and imagesQuantity == 0 -%}
        {% assign fakeLookbook = true -%}
    {% endif -%}
{% endfor -%}
{% assign lookbooksQuantity = config.Lookbook.List | Size -%}
{% if lookbooksQuantity > 1  -%}
    <span class="mainMenu__navLink header__icon openLookbooksMenu-js">
        {{ translations.Lookbook }}
        <svg class="header__icon--arrowDown"><use xlink:href="css/img/icons-sprite.svg#angle-right-light"></use></svg>
    </span>
    <div class="headerSection__navigation">
        <nav class="mainNavigation mainNavigation__sites lookbooksNavigation-js">
            <ul>
                {% for lookbook in config.Lookbook.List -%}
                    <li><a href="lookbook{{lookbook.Url}}"><span>{{lookbook.Text}}</span></a></li>
                {% endfor -%}
            </ul>
        </nav>
    </div>
{% elseif lookbooksQuantity == 1 or fakeLookbook -%}
    <span class="mainMenu__navLink">{{ config.DefinedPages.Lookbook | A }}</span>
{% endif -%}

{% for banner in config.Banners -%}

{% assign imagesQuantity = banner.Images | Size -%}

{% if banner.Name == 'lookbook' and imagesQuantity == 0 -%}

{% assign fakeLookbook = true -%}

{% endif -%}

{% endfor -%}

{% assign lookbooksQuantity = config.Lookbook.List | Size -%}

{% if lookbooksQuantity > 1 -%}

</span>

<ul>

{% for lookbook in config.Lookbook.List -%}

<li><a href="lookbook{{lookbook.Url}}"><span>{{lookbook.Text}}</span></a></li>

{% endfor -%}

</ul>

</nav>

</div>

{% elseif lookbooksQuantity == 1 or fakeLookbook -%}

<span class="mainMenu__navLink">{{ config.DefinedPages.Lookbook | A }}</span>

{% endif -%}

Następnie w folderze staticElements dodaj folder lookbook, a w nim plik lookbook.html, który będzie zawierał poniższy kod:


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

{% assign lookbooksQuantity = config.Lookbook.List | Size -%}
{% if lookbooksQuantity > 1  -%}
    {% assign lookbook = config.Lookbook.Current -%}
{% elseif lookbooksQuantity == 1 -%}
    {% assign lookbook = config.Lookbook.List[0] -%}
{% endif -%}

<section class="lookbookSection" data-product-details-url="{{page.BaseHref}}{{ config.DefinedPages.ProductDetails.Url }}" data-check-translation="{{translations.Check}}">
    {% if lookbooksQuantity > 0 -%}
        <h2 class="lookbook__name">{{ lookbook.Text }}</h2>
        <div>
            {% for image in lookbook.Images -%}
                <div class="lookbook__imageContainer lookbookImageContainer-js" style="background: url({{image.Url}}) no-repeat center; background-size: cover">
                    {% if image.JSON != "" -%}
                        <div class="lookbook__productsContainer lookbookProductsContainer-js" {% if image.JSON != "" -%} data-lookbook-products="{{image.JSON | H}}" {% endif -%} style="display: none;"></div>
                        <div class="lookbook__productsToggleButton lookbook__hideProductsButton hideLookbookProducts-js" style="display: none;">{{translations.Hide | Upcase}}</div>
                        <div class="lookbook__productsToggleButton lookbook__showProductsButton showLookbookProducts-js">{{translations.ShowProducts | Upcase}}</div>
                        <div class="lookbook__productsContainerBackgroundMobile" style="display: none;"></div>
                    {% endif -%}
                </div>
            {% endfor -%}
        </div>
    {% else -%}
        <h2 class="lookbook__name">{{ translations.Lookbook }}</h2>
        <div>
            <div class="lookbook__imageContainer lookbook__imagePlaceholder lookbookImageContainer-js">
                {{'css/img/img-placeholder.jpg' | Img: '', translations.DefaultImage}}
                <div class="lookbook__imagePlaceholderSize">560x630</div>
            </div>
            <div class="lookbook__imageContainer lookbook__imagePlaceholder lookbookImageContainer-js">
                {{'css/img/img-placeholder.jpg' | Img: '', translations.DefaultImage}}
                <div class="lookbook__imagePlaceholderSize">700x850</div>
            </div>
            <div class="lookbook__imageContainer lookbook__imagePlaceholder lookbookImageContainer-js">
                {{'css/img/img-placeholder.jpg' | Img: '', translations.DefaultImage}}
                <div class="lookbook__imagePlaceholderSize">1260x540</div>
            </div>
            <div class="lookbook__imageContainer lookbook__imagePlaceholder lookbookImageContainer-js">
                {{'css/img/img-placeholder.jpg' | Img: '', translations.DefaultImage}}
                <div class="lookbook__imagePlaceholderSize">630x950</div>
            </div>
            <div class="lookbook__imageContainer lookbook__imagePlaceholder lookbookImageContainer-js">
                {{'css/img/img-placeholder.jpg' | Img: '', translations.DefaultImage}}
                <div class="lookbook__imagePlaceholderSize">560x630</div>
            </div>
        </div>
    {% endif -%}
</section>

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

{% assign lookbooksQuantity = config.Lookbook.List | Size -%}

{% if lookbooksQuantity > 1 -%}

{% assign lookbook = config.Lookbook.Current -%}

{% elseif lookbooksQuantity == 1 -%}

{% assign lookbook = config.Lookbook.List[0] -%}

{% endif -%}

{% if lookbooksQuantity > 0 -%}

<h2 class="lookbook__name">{{ lookbook.Text }}</h2>

<div>

{% for image in lookbook.Images -%}

{% if image.JSON != "" -%}

<div class="lookbook__productsToggleButton lookbook__hideProductsButton hideLookbookProducts-js" style="display: none;">{{translations.Hide | Upcase}}</div>

<div class="lookbook__productsToggleButton lookbook__showProductsButton showLookbookProducts-js">{{translations.ShowProducts | Upcase}}</div>

{% endif -%}

</div>

{% endfor -%}

</div>

{% else -%}

<h2 class="lookbook__name">{{ translations.Lookbook }}</h2>

<div>

{{'css/img/img-placeholder.jpg' | Img: '', translations.DefaultImage}}

</div>

{{'css/img/img-placeholder.jpg' | Img: '', translations.DefaultImage}}

</div>

{{'css/img/img-placeholder.jpg' | Img: '', translations.DefaultImage}}

</div>

{{'css/img/img-placeholder.jpg' | Img: '', translations.DefaultImage}}

</div>

{{'css/img/img-placeholder.jpg' | Img: '', translations.DefaultImage}}

</div>

{% endif -%}

</section>

Teraz w pliku css/layout.css dodaj poniższy kod:


.lookbookSection{width:85%;max-width:1400px;margin:50px auto 150px}.lookbook__name{margin-bottom:100px}.lookbook__imageContainer{position:relative;vertical-align:top}.lookbook__imageContainer:nth-child(5n+1){display:inline-block;width:40%;margin-right:calc(10% - 5px)}.lookbook__imageContainer:nth-child(5n+2){display:inline-block;width:50%}.lookbook__imageContainer:nth-child(5n+3){width:90%}.lookbook__imageContainer:nth-child(5n+4){display:inline-block;width:45%;margin-right:calc(15% - 5px)}.lookbook__imageContainer:nth-child(5n){display:inline-block;width:40%}.lookbook__imageContainer img{max-width:100%;max-height:100%;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%)}.lookbook__imagePlaceholder{background-color:#f2f2f2}.lookbook__imagePlaceholderSize{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%)}.lookbook__productsToggleButton{position:absolute;right:0;bottom:0;padding:20px;background:#fff;width:250px;text-align:center;cursor:pointer}.lookbook__productsContainer{position:absolute;right:0;bottom:59px;padding:0 20px;background:#fff;width:250px}.lookbook__product{position:relative;padding:20px 0;border-bottom:1px solid #f2f2f2}.lookbook__productName{color:{{settings.inputLabelColor}};overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-bottom:10px}.lookbook__productPrice{font-size:18px;font-weight:700;display:inline-block;width:calc(100% - 50px)}.lookbook__checkProductLink{position:absolute;right:0;bottom:20px;color:{{settings.linkFontColor}}}

.lookbookSection{width:85%;max-width:1400px;margin:50px auto 150px}.lookbook__name{margin-bottom:100px}.lookbook__imageContainer{position:relative;vertical-align:top}.lookbook__imageContainer:nth-child(5n+1){display:inline-block;width:40%;margin-right:calc(10% - 5px)}.lookbook__imageContainer:nth-child(5n+2){display:inline-block;width:50%}.lookbook__imageContainer:nth-child(5n+3){width:90%}.lookbook__imageContainer:nth-child(5n+4){display:inline-block;width:45%;margin-right:calc(15% - 5px)}.lookbook__imageContainer:nth-child(5n){display:inline-block;width:40%}.lookbook__imageContainer img{max-width:100%;max-height:100%;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%)}.lookbook__imagePlaceholder{background-color:#f2f2f2}.lookbook__imagePlaceholderSize{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%)}.lookbook__productsToggleButton{position:absolute;right:0;bottom:0;padding:20px;background:#fff;width:250px;text-align:center;cursor:pointer}.lookbook__productsContainer{position:absolute;right:0;bottom:59px;padding:0 20px;background:#fff;width:250px}.lookbook__product{position:relative;padding:20px 0;border-bottom:1px solid #f2f2f2}.lookbook__productName{color:{{settings.inputLabelColor}};overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-bottom:10px}.lookbook__productPrice{font-size:18px;font-weight:700;display:inline-block;width:calc(100% - 50px)}.lookbook__checkProductLink{position:absolute;right:0;bottom:20px;color:{{settings.linkFontColor}}}

Następnie w pliku css/layout-m.css dodaj poniższy kod:


.lookbookSection{margin:20px auto}.lookbookSection .lookbook__imageContainer{width:100%;margin:0 0 100px}.lookbookSection .lookbook__imageContainer:last-child{margin-bottom:20px}.lookbook__name{margin-bottom:20px}.lookbook__showProductsButton{bottom:0;right:auto;left:50%;transform:translate(-50%, 50%);border:1px solid #f2f2f2}.lookbook__hideProductsButton,.lookbook__productsContainer{position:fixed;width:calc(100% - 40px);z-index:102}.lookbook__productsContainerBackgroundMobile{position:fixed;top:0;right:0;bottom:0;left:0;background:rgba(255,255,255,0.8);z-index:101}

.lookbookSection{margin:20px auto}.lookbookSection .lookbook__imageContainer{width:100%;margin:0 0 100px}.lookbookSection .lookbook__imageContainer:last-child{margin-bottom:20px}.lookbook__name{margin-bottom:20px}.lookbook__showProductsButton{bottom:0;right:auto;left:50%;transform:translate(-50%, 50%);border:1px solid #f2f2f2}.lookbook__hideProductsButton,.lookbook__productsContainer{position:fixed;width:calc(100% - 40px);z-index:102}.lookbook__productsContainerBackgroundMobile{position:fixed;top:0;right:0;bottom:0;left:0;background:rgba(255,255,255,0.8);z-index:101}

Teraz w pliku js/layout1.js (lub layout0.js jeśli nie ma layout1.js, lub layout.js jeśli nie ma dwóch poprzednich) dodaj poniższy kod:


if($('.lookbookImageContainer-js').length > 0){
    var setLookbookImages = function () {
        $('.lookbookImageContainer-js').each(function(index){
            if(index == 0){
                var heightRatio = 1.13;
            } else if(index == 1){
                var heightRatio = 1.22;
                var marginTopRatio = 0.39;
            }  else if(index == 2){
                var heightRatio = 0.43;
                var marginTopRatio = 0.25;
                var marginBottomRatio = 0.36;
            }  else if(index == 3){
                var heightRatio = 1.52;
            }  else if(index == 4){
                var heightRatio = 1.13;
                var marginTopRatio = 0.46;
            }
            var width = $(this).width();
            var height = width * heightRatio;
            $(this).css('height', height);
            if($(window).width() > 768){
                if(marginTopRatio){
                    var marginTop = height * marginTopRatio;
                    $(this).css('margin-top', marginTop);
                }
                if(marginBottomRatio){
                    var marginBottom = height * marginBottomRatio;
                    $(this).css('margin-bottom', marginBottom);
                }
            } else {
                if(marginTopRatio){
                    $(this).css('margin-top', 0);
                }
                if(marginBottomRatio){
                    $(this).css('margin-bottom', 100);
                }
            }
        })
    };
    setLookbookImages();
    $(window).resize(function() {
        setLookbookImages();
    });

    var addLookbookProducts = function () {
        var url = $('[data-product-details-url]').data('product-details-url');
        var checkTranslation = $('[data-check-translation]').data('check-translation');
        $('[data-lookbook-products]').each(function(){
            var productContainer = $(this);
            var products = JSON.stringify(productContainer.data('lookbook-products'));
            var objProducts = JSON.parse(products);
            $.each(objProducts, function (index, value) {
                var productUrl = url + ',,' + value.id;
                var data = {__collection: 'product-details.Product.Name|product-details.Product.Price'};
                $.get(productUrl, data, function (res) {
                    productContainer.append(
                        '<div class="lookbook__product">'+
                            '<div class="lookbook__productName">'+res.collection['product-details.Product.Name']+'</div>'+
                            '<div class="lookbook__productPrice">'+res.collection['product-details.Product.Price']+' '+__curr+'</div>'+
                            '<a href="'+productUrl+'" class="lookbook__checkProductLink">'+checkTranslation+'</div>'+
                        '</div>'
                    );
                });
            });
        });
    };
    addLookbookProducts();

    $('body').on('click', '.showLookbookProducts-js', function (e) {
        $(e.currentTarget).siblings().show();
        $(e.currentTarget).hide();
    });

    $('body').on('click', '.hideLookbookProducts-js', function (e) {
        $(e.currentTarget).siblings().hide();
        $(e.currentTarget).next().show();
        $(e.currentTarget).hide();
    });
}

if($('.lookbookImageContainer-js').length > 0){

var setLookbookImages = function () {

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

if(index == 0){

var heightRatio = 1.13;

} else if(index == 1){

var heightRatio = 1.22;

var marginTopRatio = 0.39;

} else if(index == 2){

var heightRatio = 0.43;

var marginTopRatio = 0.25;

var marginBottomRatio = 0.36;

} else if(index == 3){

var heightRatio = 1.52;

} else if(index == 4){

var heightRatio = 1.13;

var marginTopRatio = 0.46;

}

var width = $(this).width();

var height = width * heightRatio;

$(this).css('height', height);

if($(window).width() > 768){

if(marginTopRatio){

var marginTop = height * marginTopRatio;

$(this).css('margin-top', marginTop);

}

if(marginBottomRatio){

var marginBottom = height * marginBottomRatio;

$(this).css('margin-bottom', marginBottom);

}

} else {

if(marginTopRatio){

$(this).css('margin-top', 0);

}

if(marginBottomRatio){

$(this).css('margin-bottom', 100);

}

})

};

setLookbookImages();

$(window).resize(function() {

setLookbookImages();

});

var addLookbookProducts = function () {

var url = $('[data-product-details-url]').data('product-details-url');

var checkTranslation = $('[data-check-translation]').data('check-translation');

$('[data-lookbook-products]').each(function(){

var productContainer = $(this);

var products = JSON.stringify(productContainer.data('lookbook-products'));

var objProducts = JSON.parse(products);

$.each(objProducts, function (index, value) {

var productUrl = url + ',,' + value.id;

var data = {__collection: 'product-details.Product.Name|product-details.Product.Price'};

$.get(productUrl, data, function (res) {

productContainer.append(

'<div class="lookbook__product">'+

'<div class="lookbook__productName">'+res.collection['product-details.Product.Name']+'</div>'+

'<div class="lookbook__productPrice">'+res.collection['product-details.Product.Price']+' '+__curr+'</div>'+

'<a href="'+productUrl+'" class="lookbook__checkProductLink">'+checkTranslation+'</div>'+

'</div>'

);

});

};

addLookbookProducts();

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

$(e.currentTarget).siblings().show();

$(e.currentTarget).hide();

});

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

$(e.currentTarget).siblings().hide();

$(e.currentTarget).next().show();

$(e.currentTarget).hide();

});

}

Następnie w pliku js/layout0.js (lub layout.js jeśli nie ma layout0.js) znajdź zmienną var headerFunctions i podmień ją na jeden z poniższych kodów. Pierwszy jest do nagłówka z domyślnie ukrytą wyszukiwarką, a drugi do nagłówka z domyślnie odkrytą wyszukiwarką.

header-1


var headerFunctions = {
    init: function () {
        headerFunctions.events();
    },
    events: function () {
        var pageHeader = $('.pageHeader-js');

        pageHeader.on('click', '.showSearchSection-js', function() {
            $('.pageHeader-js .headerSearchForm-js').toggle(200);
            $('.pageHeader-js .sitesNavigation-js').hide(200);
            $('.pageHeader-js .mainNavigation-js').hide(200);
            $('.pageHeader-js .lookbooksNavigation-js').hide(200);
            $('.openCategoryMenu-js, .openPagesMenu-js, .openLookbooksMenu-js').removeClass('activeButton-js');
            $('.searchFormPhrase-js').focus();
        });

        pageHeader.on('click', '.showMenuSection-js', function() {
            $('.pageHeader-js .headerMainMenu-js').toggle(200);
        });

        pageHeader.on('click', '.mainMenuMobileCloseBtn-js', function() {
            $('.pageHeader-js .headerMainMenu-js').hide(200);
        });

        pageHeader.on('click', '.openCategoryMenu-js', function() {
            $('.pageHeader-js .sitesNavigation-js').hide(200);
            $('.pageHeader-js .languageAndCurrencyMenu-js').hide(200);
            $('.pageHeader-js .headerSearchForm-js').hide(200);
            $('.pageHeader-js .lookbooksNavigation-js').hide(200);
            $('.pageHeader-js .mainNavigation-js').toggle(200);
            $('.openLanguageAndCurrencyMenu-js, .openPagesMenu-js, .openLookbooksMenu-js').removeClass('activeButton-js');
            $(this).toggleClass('activeButton-js');
            app.loadImages();
        });

        pageHeader.on('click', '.openLanguageAndCurrencyMenu-js', function() {
            $('.pageHeader-js .sitesNavigation-js').hide(200);
            $('.pageHeader-js .mainNavigation-js').hide(200);
            $('.pageHeader-js .headerSearchForm-js').hide(200);
            $('.pageHeader-js .lookbooksNavigation-js').hide(200);
            $('.pageHeader-js .languageAndCurrencyMenu-js').toggle(200);
            $('.openCategoryMenu-js, .openPagesMenu-js, .openLookbooksMenu-js').removeClass('activeButton-js');
            $(this).toggleClass('activeButton-js');
        });

        pageHeader.on('click', '.openPagesMenu-js', function() {
            $('.pageHeader-js .mainNavigation-js').hide(200);
            $('.pageHeader-js .languageAndCurrencyMenu-js').hide(200);
            $('.pageHeader-js .headerSearchForm-js').hide(200);
            $('.pageHeader-js .lookbooksNavigation-js').hide(200);
            $('.pageHeader-js .sitesNavigation-js').toggle(200);
            $('.openCategoryMenu-js, .openLanguageAndCurrencyMenu-js, .openLookbooksMenu-js').removeClass('activeButton-js');
            $(this).toggleClass('activeButton-js');
        });

        pageHeader.on('click', '.openLookbooksMenu-js', function() {
            $('.pageHeader-js .mainNavigation-js').hide(200);
            $('.pageHeader-js .languageAndCurrencyMenu-js').hide(200);
            $('.pageHeader-js .headerSearchForm-js').hide(200);
            $('.pageHeader-js .sitesNavigation-js').hide(200);
            $('.pageHeader-js .lookbooksNavigation-js').toggle(200);
            $('.openCategoryMenu-js, .openLanguageAndCurrencyMenu-js, .openPagesMenu-js').removeClass('activeButton-js');
            $(this).toggleClass('activeButton-js');
        });

        pageHeader.on('change', '.customerLanguageChange-js', function(e) {
            if($(this).is(':checked')) {app.customerLanguageChange(e)}
        });

        pageHeader.on('change', '.customerCurrencyChange-js', function(e) {
            if($(this).is(':checked')) {app.customerCurrencyChange(e)}
        });

        pageHeader.on('click', '.openUndercategoryMenu-js', function(e) {
            var undercategory = $(e.currentTarget).closest('li').find('ul').first();
            $(undercategory).toggle(200);
        });
    }
};

var headerFunctions = {

init: function () {

headerFunctions.events();

events: function () {

var pageHeader = $('.pageHeader-js');

pageHeader.on('click', '.showSearchSection-js', function() {

$('.pageHeader-js .headerSearchForm-js').toggle(200);

$('.pageHeader-js .sitesNavigation-js').hide(200);

$('.pageHeader-js .mainNavigation-js').hide(200);

$('.pageHeader-js .lookbooksNavigation-js').hide(200);

$('.openCategoryMenu-js, .openPagesMenu-js, .openLookbooksMenu-js').removeClass('activeButton-js');

$('.searchFormPhrase-js').focus();

});

pageHeader.on('click', '.showMenuSection-js', function() {

$('.pageHeader-js .headerMainMenu-js').toggle(200);

});

pageHeader.on('click', '.mainMenuMobileCloseBtn-js', function() {

$('.pageHeader-js .headerMainMenu-js').hide(200);

});

pageHeader.on('click', '.openCategoryMenu-js', function() {

$('.pageHeader-js .sitesNavigation-js').hide(200);

$('.pageHeader-js .languageAndCurrencyMenu-js').hide(200);

$('.pageHeader-js .headerSearchForm-js').hide(200);

$('.pageHeader-js .lookbooksNavigation-js').hide(200);

$('.pageHeader-js .mainNavigation-js').toggle(200);

$('.openLanguageAndCurrencyMenu-js, .openPagesMenu-js, .openLookbooksMenu-js').removeClass('activeButton-js');

$(this).toggleClass('activeButton-js');

app.loadImages();

});

pageHeader.on('click', '.openLanguageAndCurrencyMenu-js', function() {

$('.pageHeader-js .sitesNavigation-js').hide(200);

$('.pageHeader-js .mainNavigation-js').hide(200);

$('.pageHeader-js .headerSearchForm-js').hide(200);

$('.pageHeader-js .lookbooksNavigation-js').hide(200);

$('.pageHeader-js .languageAndCurrencyMenu-js').toggle(200);

$('.openCategoryMenu-js, .openPagesMenu-js, .openLookbooksMenu-js').removeClass('activeButton-js');

$(this).toggleClass('activeButton-js');

});

pageHeader.on('click', '.openPagesMenu-js', function() {

$('.pageHeader-js .mainNavigation-js').hide(200);

$('.pageHeader-js .languageAndCurrencyMenu-js').hide(200);

$('.pageHeader-js .headerSearchForm-js').hide(200);

$('.pageHeader-js .lookbooksNavigation-js').hide(200);

$('.pageHeader-js .sitesNavigation-js').toggle(200);

$('.openCategoryMenu-js, .openLanguageAndCurrencyMenu-js, .openLookbooksMenu-js').removeClass('activeButton-js');

$(this).toggleClass('activeButton-js');

});

pageHeader.on('click', '.openLookbooksMenu-js', function() {

$('.pageHeader-js .mainNavigation-js').hide(200);

$('.pageHeader-js .languageAndCurrencyMenu-js').hide(200);

$('.pageHeader-js .headerSearchForm-js').hide(200);

$('.pageHeader-js .sitesNavigation-js').hide(200);

$('.pageHeader-js .lookbooksNavigation-js').toggle(200);

$('.openCategoryMenu-js, .openLanguageAndCurrencyMenu-js, .openPagesMenu-js').removeClass('activeButton-js');

$(this).toggleClass('activeButton-js');

});

pageHeader.on('change', '.customerLanguageChange-js', function(e) {

if($(this).is(':checked')) {app.customerLanguageChange(e)}

});

pageHeader.on('change', '.customerCurrencyChange-js', function(e) {

if($(this).is(':checked')) {app.customerCurrencyChange(e)}

});

pageHeader.on('click', '.openUndercategoryMenu-js', function(e) {

var undercategory = $(e.currentTarget).closest('li').find('ul').first();

$(undercategory).toggle(200);

});

}

};

header-2


var headerFunctions = {
    init: function () {
        headerFunctions.events();
    },
    events: function () {
        var pageHeader = $('.pageHeader-js');

        pageHeader.on('click', '.showSearchSection-js', function() {
            $('.pageHeader-js .headerSearchForm-js').toggle(200);
            $('.searchFormPhrase-js').focus();
        });

        pageHeader.on('click', '.showMenuSection-js', function() {
            $('.pageHeader-js .headerMainMenu-js').toggle(200);
        });

        pageHeader.on('click', '.mainMenuMobileCloseBtn-js', function() {
            $('.pageHeader-js .headerMainMenu-js').hide(200);
        });

        pageHeader.on('click', '.openCategoryMenu-js', function() {
            $('.pageHeader-js .sitesNavigation-js').hide(200);
            $('.pageHeader-js .languageAndCurrencyMenu-js').hide(200);
            $('.pageHeader-js .lookbooksNavigation-js').hide(200);
            $('.pageHeader-js .mainNavigation-js').toggle(200);
            $('.openLanguageAndCurrencyMenu-js, .openPagesMenu-js, .openLookbooksMenu-js').removeClass('activeButton-js');
            $(this).toggleClass('activeButton-js');
            app.loadImages();
        });

        pageHeader.on('click', '.openLanguageAndCurrencyMenu-js', function() {
            $('.pageHeader-js .sitesNavigation-js').hide(200);
            $('.pageHeader-js .mainNavigation-js').hide(200);
            $('.pageHeader-js .lookbooksNavigation-js').hide(200);
            $('.pageHeader-js .languageAndCurrencyMenu-js').toggle(200);
            $('.openCategoryMenu-js, .openPagesMenu-js, .openLookbooksMenu-js').removeClass('activeButton-js');
            $(this).toggleClass('activeButton-js');
        });

        pageHeader.on('click', '.openPagesMenu-js', function() {
            $('.pageHeader-js .mainNavigation-js').hide(200);
            $('.pageHeader-js .languageAndCurrencyMenu-js').hide(200);
            $('.pageHeader-js .lookbooksNavigation-js').hide(200);
            $('.pageHeader-js .sitesNavigation-js').toggle(200);
            $('.openCategoryMenu-js, .openLanguageAndCurrencyMenu-js, .openLookbooksMenu-js').removeClass('activeButton-js');
            $(this).toggleClass('activeButton-js');
        });

        pageHeader.on('click', '.openLookbooksMenu-js', function() {
            $('.pageHeader-js .mainNavigation-js').hide(200);
            $('.pageHeader-js .languageAndCurrencyMenu-js').hide(200);
            $('.pageHeader-js .sitesNavigation-js').hide(200);
            $('.pageHeader-js .lookbooksNavigation-js').toggle(200);
            $('.openCategoryMenu-js, .openLanguageAndCurrencyMenu-js, .openPagesMenu-js').removeClass('activeButton-js');
            $(this).toggleClass('activeButton-js');
        });

        pageHeader.on('change', '.customerLanguageChange-js', function(e) {
            if($(this).is(':checked')) {app.customerLanguageChange(e)}
        });

        pageHeader.on('change', '.customerCurrencyChange-js', function(e) {
            if($(this).is(':checked')) {app.customerCurrencyChange(e)}
        });

        pageHeader.on('click', '.openUndercategoryMenu-js', function(e) {
            var undercategory = $(e.currentTarget).closest('li').find('ul').first();
            $(undercategory).toggle(200);
        });
    }
};

var headerFunctions = {

init: function () {

headerFunctions.events();

events: function () {

var pageHeader = $('.pageHeader-js');

pageHeader.on('click', '.showSearchSection-js', function() {

$('.pageHeader-js .headerSearchForm-js').toggle(200);

$('.searchFormPhrase-js').focus();

});

pageHeader.on('click', '.showMenuSection-js', function() {

$('.pageHeader-js .headerMainMenu-js').toggle(200);

});

pageHeader.on('click', '.mainMenuMobileCloseBtn-js', function() {

$('.pageHeader-js .headerMainMenu-js').hide(200);

});

pageHeader.on('click', '.openCategoryMenu-js', function() {

$('.pageHeader-js .sitesNavigation-js').hide(200);

$('.pageHeader-js .languageAndCurrencyMenu-js').hide(200);

$('.pageHeader-js .lookbooksNavigation-js').hide(200);

$('.pageHeader-js .mainNavigation-js').toggle(200);

$('.openLanguageAndCurrencyMenu-js, .openPagesMenu-js, .openLookbooksMenu-js').removeClass('activeButton-js');

$(this).toggleClass('activeButton-js');

app.loadImages();

});

pageHeader.on('click', '.openLanguageAndCurrencyMenu-js', function() {

$('.pageHeader-js .sitesNavigation-js').hide(200);

$('.pageHeader-js .mainNavigation-js').hide(200);

$('.pageHeader-js .lookbooksNavigation-js').hide(200);

$('.pageHeader-js .languageAndCurrencyMenu-js').toggle(200);

$('.openCategoryMenu-js, .openPagesMenu-js, .openLookbooksMenu-js').removeClass('activeButton-js');

$(this).toggleClass('activeButton-js');

});

pageHeader.on('click', '.openPagesMenu-js', function() {

$('.pageHeader-js .mainNavigation-js').hide(200);

$('.pageHeader-js .languageAndCurrencyMenu-js').hide(200);

$('.pageHeader-js .lookbooksNavigation-js').hide(200);

$('.pageHeader-js .sitesNavigation-js').toggle(200);

$('.openCategoryMenu-js, .openLanguageAndCurrencyMenu-js, .openLookbooksMenu-js').removeClass('activeButton-js');

$(this).toggleClass('activeButton-js');

});

pageHeader.on('click', '.openLookbooksMenu-js', function() {

$('.pageHeader-js .mainNavigation-js').hide(200);

$('.pageHeader-js .languageAndCurrencyMenu-js').hide(200);

$('.pageHeader-js .sitesNavigation-js').hide(200);

$('.pageHeader-js .lookbooksNavigation-js').toggle(200);

$('.openCategoryMenu-js, .openLanguageAndCurrencyMenu-js, .openPagesMenu-js').removeClass('activeButton-js');

$(this).toggleClass('activeButton-js');

});

pageHeader.on('change', '.customerLanguageChange-js', function(e) {

if($(this).is(':checked')) {app.customerLanguageChange(e)}

});

pageHeader.on('change', '.customerCurrencyChange-js', function(e) {

if($(this).is(':checked')) {app.customerCurrencyChange(e)}

});

pageHeader.on('click', '.openUndercategoryMenu-js', function(e) {

var undercategory = $(e.currentTarget).closest('li').find('ul').first();

$(undercategory).toggle(200);

});

}

};

Obsługa lookbooka w szablonie Topaz

Obsługa lookbooka w szablonie Topaz

Topaz

Czy ten artykuł był pomocny?

Społeczność Comarch

Oferta e-Commerce

Przydatne linki

Kontakt