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 }}`
{% for lookbook in config.Lookbook.List -%}- {{lookbook.Text}}
{% endfor -%}
{% 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.Hide | Upcase}}
{{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+'
'+
'