Obsługa lookbooka w szablonie Topaz

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

{{ translations.Lookbook }}

{% elseif lookbooksQuantity == 1 or fakeLookbook -%}
{{ config.DefinedPages.Lookbook | A }}
{% 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 -%}

{% if lookbooksQuantity > 0 -%}

{{ lookbook.Text }}

{% for image in lookbook.Images -%}

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

{{translations.ShowProducts | Upcase}}

{% endif -%}

{% endfor -%}

{% else -%}

{{ translations.Lookbook }}

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

560x630

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

700x850

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

1260x540

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

630x950

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

560x630

{% endif -%}

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

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}

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

'+
'

'+res.collection['product-details.Product.Name']+'

'+
'

'+res.collection['product-details.Product.Price']+' '+__curr+'

'+
''+checkTranslation+'

'+
'

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

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