Prezentacja rabatów w profilu klienta w szablonie Topaz

W tym artykule dowiesz się jak zmodyfikować szablon Topaz, aby umożliwić wyświetlanie rabatów w profilu klienta.

Wskazówka

Poniższa instrukcja działa dla każdego widoku szablonu Topaz, niezależnie od wybranych wersji elementów.

Zakładka Promocje będzie wyświetlać się tylko wtedy, gdy w banerze o nazwie CustomerProfileBanner będzie znajdował się przynajmniej jeden obrazek. W tym celu należy w panelu administracyjnym dodać taki banner. Wejdź w zakładkę Bannery i kliknij w przycisk Dodaj. W polu Nazwa wpisz CustomerProfileBanner. W miejscu Obrazki dodaj odpowiedni obrazek a następnie kliknij w przycisk Zapisz w prawym górnym rogu.

Następnie dodaj odpowiednie tłumaczenia.

• Id: Product, Tekst: Towar
• Id: Category, Tekst: Kategoria
• Id: Quantity, Tekst: Ilość
• Id: Netto, Tekst: Netto
• Id: BundleThreshold, Tekst: Próg pakietowy
• Id: Threshold, Tekst: Próg
• Id: AllProducts, Tekst: Wszystkie produkty
• Id: Back, Tekst: Powrót
• Id: CurrentPromotions, Tekst: Aktualne promocje
• Id: YourDiscounts, Tekst: Twoje rabaty
• Id: ValidTo, Tekst: Ważny do
• Id: ValidLifetime, Tekst: Ważny bezterminowo
• Id: ValidFrom, Tekst: Ważny od
• Id: Promotions, Tekst: Promocje
• Id: ForRegularCustomer, Tekst: Dla stałego klienta
• Id: ForNewCustomer, Tekst: Dla nowego klienta
• Id: NoDiscountsInfo, Tekst: Aktualnie nie mamy rabatów przygotowanych dla Ciebie.

Wskazówka

Tłumaczenia możesz dodać w panelu administracyjnym, wchodząc na zakładkę Tłumaczenia a następnie klikając w przycisk Dodaj. Po uzupełnieniu pól kliknij w przycisk Dodaj.

Kolejnym krokiem jest modyfikacja kodu szablonu. W pierwszej kolejności należy dodać zakładkę Promocje w profilu klienta. W plikach szablonu w folderze static-elements/customer-profile znajduje się plik o nazwie customer-profile.html. Narzędziem wyszukiwania wyszukaj w nim frazę inputs-container-js. Nad znalezioną linią powinien znajdować się tag

. Nad tym tagiem wklej poniższy kod.

`{% if config.Banners['CustomerProfileBanner'].Images[0]-%}

• {{ translations.Promotions }}

{% endif -%}`

Następnie należy dodać pliki odpowiedzialne za wyświetlanie promocji po kliknięciu w zakładkę. W folderze partials/customer dodaj folder o nazwie discounts a w nim trzy pliki:

• discount-details.html
• discount-elements.html
• discounts.html

W pliku discount-details.html wklej poniższy kod.

{% assign discount = customer-profile.DiscountERPDetails -%}

{% if discount.Description != '' and discount.Description != null -%}
{{discount.Description}}
{% endif -%}

{% if discount.Thresholds -%}
{% for threshold in discount.Thresholds -%}

{{translations.Threshold}}: {% if threshold.ThresholdType == 1 -%} {{threshold.Threshold | ToPrice}} {{threshold.ThresholdSymbol}} {% else -%} {{threshold.Threshold}} {% endif -%}
{{translations.QuantityThreshold}}: {{threshold.ThresholdMinPositionsCount}}
{% include 'partials/customer/discounts/discount-elements.html' with threshold -%}

{% endfor -%}
{% else -%}

{% include 'partials/customer/discounts/discount-elements.html' with discount -%}

{% endif -%}

{{translations.Back}}

W pliku discount-elements.html wklej poniższy kod.

{% assign discount = customer-profile.DiscountERPDetails -%}
{% if include -%}
{% assign elementsParent = include -%}
{% else -%}
{% assign elementsParent = discount -%}
{% endif -%}

{% assign anyGroup = false -%}
{% assign anyProduct = false -%}
{% assign anyThreshold = false -%}
{% assign anyBundleThreshold = false -%}
{% assign anyBundleQuantity = false -%}
{% assign anyTotalPrice = false -%}
{% assign anySubtotalPrice = false -%}
{% for element in elementsParent.Elements -%}
{% if element.Group != null -%}
{% assign anyGroup = true -%}
{% endif -%}
{% if element.Product != null -%}
{% assign anyProduct = true -%}
{% endif -%}
{% if element.Threshold != null and element.Threshold > 0 -%}
{% assign anyThreshold = true -%}
{% endif -%}
{% if element.BundleThreshold != null and element.BundleThreshold > 0 -%}
{% assign anyBundleThreshold = true -%}
{% endif -%}
{% if element.BundleQuantity != null and element.BundleQuantity > 0 -%}
{% assign anyBundleQuantity = true -%}
{% endif -%}
{% if element.FixedPrice -%}
{% assign anyFixedPrice = true -%}
{% if element.TotalPrice != null and element.TotalPrice > 0 -%}
{% assign anyTotalPrice = true -%}
{% endif -%}
{% if element.SubtotalPrice != null and element.SubtotalPrice > 0 -%}
{% assign anySubtotalPrice = true -%}
{% endif -%}
{% endif -%}
{% endfor -%}

{% if anyGroup and anyProduct -%} {{translations.Product}}/{{translations.Category}} {% elseif anyGroup -%} {{translations.Category}} {% else -%} {{translations.Product}} {% endif -%}
{% if anyBundleQuantity -%}
{{translations.Quantity}}
{% endif -%} {% unless anyFixedPrice and anySubtotalPrice == false -%}
{% if anyFixedPrice and anySubtotalPrice -%} {{translations.Pro\_Price}} {{translations.Netto | Downcase }} {% else -%} {{translations.Crt\_Discount}} {% endif -%}
{% endunless -%} {% if anyThreshold or anyBundleThreshold or anyTotalPrice -%}
{% if anyFixedPrice and anyTotalPrice -%} {{translations.Pro\_Price}} {{translations.Com\_Brutto | Downcase}} {% elseif anyBundleThreshold -%} {{translations.BundleThreshold}} {% else -%} {{translations.Threshold}} {% endif -%}
{% endif -%}

{% for element in elementsParent.Elements -%}

{% if element.Group != null -%} {% if element.Group.Url -%} {% endif -%} {{ element.Group.Name }} {% if element.Group.Url -%} {% endif -%} {% elseif element.Product != null -%} {% if element.Product.Url -%} {% endif -%} {{ element.Product.NameNoHtml }} {% if element.Product.Url -%} {% endif -%} {% else -%} {{ translations.AllProducts }} {% endif -%}
{% if anyBundleQuantity -%}
{% if element.BundleQuantity > 0 -%} {{translations.Quantity}} {{ element.BundleQuantity | Normalize }} {% endif -%}
{% endif -%} {% unless anyFixedPrice and anySubtotalPrice == false -%}
{% if element.FixedPrice -%} {% if element.SubtotalPrice > 0 -%} {{ translations.Pro\_Price | Downcase }} {{ translations.Netto | Downcase }} {% endif -%} {% else -%} {{ translations.Crt\_Discount | Downcase }} {% endif -%} {% if element.FixedPrice -%} {% if element.SubtotalPrice > 0 -%} {{ element.SubtotalPrice | ToPrice }} {% endif -%} {% else -%} {% if element.Type == 1 or element.Type == 3 or element.Type == 9 -%} {{ element.Value | ToPrice }} {% else -%} {{ element.Value | Normalize }} {% endif -%} {% endif -%} {{ element.ValueSymbol }}
{% endunless -%} {% if anyThreshold or anyBundleThreshold or anyTotalPrice -%}
{% if element.FixedPrice -%} {% if element.TotalPrice > 0 -%} {{ translations.Pro\_Price | Downcase }} {{ translations.Com\_Brutto | Downcase }} {% endif -%} {% elseif element.BundleThreshold > 0 -%} {{ translations.BundleThreshold | Downcase }} {% elseif element.Threshold > 0 -%} {{ translations.Threshold | Downcase }} {% endif -%} {% if element.FixedPrice -%} {% if element.TotalPrice > 0 -%} {{ element.TotalPrice | ToPrice }} {% endif -%} {{ element.ValueSymbol }} {% elseif element.BundleThreshold > 0 -%} {% if element.Type == 1 or element.Type == 3 or element.Type == 9 -%} {{ element.BundleThreshold | ToPrice }} {% else -%} {{ element.BundleThreshold | Normalize }} {% endif -%} {{ element.BundleThresholdSymbol }} {% elseif element.Threshold > 0 -%} {% if element.Type == 1 or element.Type == 3 or element.Type == 9 -%} {{ element.Threshold | ToPrice }} {% else -%} {{ element.Threshold | Normalize }} {% endif -%} {{ element.ThresholdSymbol }} {% endif -%}
{% endif -%}

{% endfor -%}

W pliku discounts.html wklej poniższy kod.

`{% assign name = 'CustomerProfileBanner' -%}
{% if config.Banners[name] -%}
{% assign banner = config.Banners[name] -%}

{{translations.CurrentPromotions}}

{% assign imagesNumber = banner.Images | Size -%} {% assign images = banner.Images -%} {% for img in images -%}



{% if img.Heading != '' -%}

{{img.Heading}}

{% endif -%} {% if img.Text != '' -%}

{{img.Text}}

{% endif -%}

{% if img.Link != '' -%} {{translations.Check}} {% endif -%}

{% endfor -%} {% if imagesNumber == 0 %}

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

{% if header3 == true -%} 1118 x 534 {% else -%} 1920x680 {% endif -%}

{% endif %}

{{translations.YourDiscounts}}

` {% assign discountsERP = customer-profile.DiscountsERP -%} {% assign discountString = customer-profile.DiscountQueryGET | H -%} {% assign paginationPageNo = discountsERP.PageNo -%} {% if paginationPageNo == 1 -%} {% assign orderValuesSize = customer-profile.DiscountsEshop.OrderValue | Size -%} {% if orderValuesSize > 0 -%} {% assign anyDiscount = true -%} {% for orderValue in customer-profile.DiscountsEshop.OrderValue -%}

{{ orderValue.Discount | Normalize }} %

{{ orderValue.ValueFrom }} {{ customer.Currency }} - {{ orderValue.ValueTo }} {{ customer.Currency }}

{% if orderValue.DateTill -%} {{ translations.ValidTo | Downcase }}: {{ orderValue.DateTill | Date:dateFormat }} {% else -%} {{ translations.ValidLifetime | Downcase }} {% endif -%}

{% endfor -%} {% endif -%} {% if customer-profile.DiscountsEshop.Regular -%} {% assign anyDiscount = true -%} {% assign regular = customer-profile.DiscountsEshop.Regular -%}

{{ regular.Discount | Normalize }} %

{{ translations.ForRegularCustomer }}

{% if regular.DateTill -%} {{ translations.ValidTo | Downcase }}: {{ regular.DateTill | Date:dateFormat }} {% else -%} {{ translations.ValidLifetime | Downcase }} {% endif -%}

{% endif -%} {% if customer-profile.DiscountsEshop.FirstOrder -%} {% assign anyDiscount = true -%} {% assign firstOrder = customer-profile.DiscountsEshop.FirstOrder -%}

{{ firstOrder.Discount | Normalize }} %

{{translations.ForNewCustomer}}

{% if firstOrder.DateTill -%} {{ translations.ValidTo | Downcase }}: {{ firstOrder.DateTill | Date:dateFormat }} {% else -%} {{ translations.ValidLifetime | Downcase }} {% endif -%}

{% endif -%} {% endif -%} {% if discountsERP.TotalItems > 0 -%} {% assign anyDiscount = true -%} {% for discount in discountsERP.Discounts -%}

{{ translations.Details }}

{% if discount.Name != null -%} {{ discount.Name }} {% else -%} {{ translations.AllProducts }} {% endif -%}

{% if discount.DateTill -%} {% if discount.DateFrom -%}

{{ translations.ValidFrom | Downcase }}: {{ discount.DateTill | Date:dateFormat }}

{% endif -%} {{ translations.ValidTo | Downcase }}: {{ discount.DateTill | Date:dateFormat }} {% else -%} {{ translations.ValidLifetime | Downcase }} {% endif -%}

{% endfor -%}

{% endif -%} {% endif -%} {% if discountsERP.TotalItems > 10 -%} {% endif -%}

{% unless anyDiscount -%}
{{ translations.NoDiscountsInfo }}
{% endunless -%}

Aby dodać odpowiednie style do zakładki z promocjami znajdź folder css/partials/customer i dodaj w nim folder o nazwie discounts a w nim plik o nazwie discounts-g.css. Do tego pliku wklej poniższy kod.

.banner-discounts{margin:0 auto;background-color:#f2f2f2;height:auto}.banner-discounts__list{width:100%;height:100%}.banner-discounts__wrapper{width:100%;display:flex;justify-content:center;padding:0;margin:0;box-sizing:border-box;position:relative}.banner-discounts a{position:absolute;bottom:8%;left:10%;text-decoration:none;width:230px;box-sizing:border-box;padding:16px}.banner-discounts figure{margin:0}.banner-discounts__image img{box-sizing:border-box;padding:0;margin:0;object-fit:cover;min-height:170px;max-width:100%;width:100%;object-position:50% 50%}.banner-discounts__image img[src="css/img/alo.gif"]{width:100%!important;height:100%!important}.banner-discounts__image_placeholder img{object-fit:contain;background-color:#f2f2f2;max-height:680px}.banner-discounts__info{position:absolute;left:10%;bottom:33%;width:80%}.banner-discounts__title{margin:0;padding:0;font-weight:300;color:{{settings.bannerFontColor}};display:block;font-size:48px}.banner-discounts__title.banner-discounts__title__small{line-height:1.5;font-size:14px;margin-top:10px}.banner-discounts__text{color:{{settings.bannerFontColor}};margin:.8rem 0 0;padding:0}.banner-discounts__size{position:absolute;font-size:30px;color:gray;text-align:center;top:50%;left:50%;transform:translate(-50%,-50%);margin:0}.banner-discounts .slick-track{height:100%}.banner-discounts .slick-arrow{background-color:{{settings.sliderBgColor}};padding:20px}.banner-discounts .slick-arrow:hover{background-color:{{settings.sliderHoverBgColor}}}.banner-discounts .slick-arrow:before{color:#fff;position:absolute;right:0;left:10px;top:47%;transform:translateY(-50%);font-size:20px}@media only screen and (max-width:599px){.banner-discounts .slick-arrow:before{font-size:15px}}.banner-discounts .slick-prev,.banner-discounts .slick-next{font-size:0;line-height:0;position:absolute;top:51%;display:block;width:30px;height:155px;padding:0;-webkit-transform:translate(0,-50%);-ms-transform:translate(0,-50%);transform:translate(0,-50%);cursor:pointer;border:none;outline:none;background-color:{{settings.sliderBgColor}};opacity:.6;z-index:8}.banner-discounts .slick-prev :hover,.banner-discounts .slick-next :hover{background-color:{{settings.sliderHoverBgColor}}}.banner-discounts .slick-list{padding:0!important;height:100%}.banner-discounts .slick-prev:hover,.banner-discounts .slick-next:hover{outline:none}.banner-discounts .slick-prev.slick-disabled:before,.banner-discounts .slick-next.slick-disabled:before,.banner-discounts .slick-prev.slick-disabled,.banner-discounts .slick-next.slick-disabled{outline:none;display:none}.banner-discounts .slick-prev:before,.banner-discounts .slick-next:before{color:{{settings.sliderArrowColor}};fill:{{settings.sliderArrowColor}};opacity:.8}.banner-discounts .slick-prev{left:0;border-radius:0 25px 25px 0}.banner-discounts [dir='rtl'] .slick-prev{right:0;left:auto}.banner-discounts .slick-next{right:0;border-radius:25px 0 0 25px}.banner-discounts .slick-arrow.slick-next:before{left:3px}.banner-discounts [dir='rtl'] .slick-next:before,.banner-discounts .slick-prev:before{border:solid{{settings.sliderArrowColor}};border-width:0 1px 1px 0;display:inline-block;padding:3px;transform:rotate(135deg);-webkit-transform:rotate(135deg)}.banner-discounts .slick-next:before,.banner-discounts [dir='rtl'] .slick-prev:before{border:solid{{settings.sliderArrowColor}};border-width:0 1px 1px 0;display:inline-block;padding:3px;transform:rotate(-45deg);-webkit-transform:rotate(-45deg)}.banner-discounts .slick-prev:before,.banner-discounts .slick-next:before{width:4px;height:4px;content:" "}.banner-discounts [dir='rtl'] .slick-next{right:auto;left:0}.banner-discounts [dir='rtl'] .slick-next:before,.banner-discounts .slick-prev:before,.banner-discounts .slick-next:before,.banner-discounts [dir='rtl'] .slick-prev:before{width:10px;height:10px}.banner-discounts .slick-arrow:hover:before{border-color:{{settings.sliderHoverArrowColor}}}@media screen and (max-width:480px){.banner-discounts .banner-discounts__info{bottom:55%}.banner-discounts .banner-discounts__title{font-size:20px}}.headerSection__bannerBg{width:100%;height:fit-content;background-color:{{settings.headerBgColor}}!important;margin-top:0!important}.headerSection__banner{display:block;width:100%;margin:0 auto;height:fit-content;max-width:1400px;margin:0 auto;box-sizing:border-box;flex-direction:column;justify-content:space-between;position:relative;background-color:{{settings.headerBgColor}}}.headerSection__banner .banner-discounts{background-color:{{settings.headerBgColor}}!important}.headerSection__banner .banner-discounts__wrapper{height:fit-content;width:79.9%!important;float:right;margin-left:auto;margin-right:0}.headerSection__banner .banner-discounts__image_placeholder img{max-height:534px!important}@media screen and (max-width:1600px){.headerSection__banner{padding-left:3%;padding-right:3%}}.banner-discounts__title{font-size:28px}.banner-discounts__title.banner-discounts__title__small{font-size:13px}.banner-discounts__info{bottom:unset;top:80px}@media screen and (max-width:480px){.banner-discounts__image{width:100%;object-fit:cover;object-position:center}}@media screen and (max-width:1390px){.headerSection__banner .banner-discounts__wrapper{width:100%!important}}@media screen and (max-width:1390px){.headerSection__banner .banner-discounts__wrapper{width:100%!important}}.discounts__header{padding:20px 0;font-weight:400}.discounts__container{margin-bottom:30px;display:flex;flex-wrap:wrap}.discounts__item{width:40%;padding:20px 20px 0 0;margin-right:60px;display:flex;height:80px}.discounts__name{text-transform:uppercase;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.discounts__info{padding:7px;font-size:15px;width:calc(100% - 100px - 60px)}.discounts__date{color:#959494;padding-top:5px}.discounts__value{margin-right:10px;width:100px;max-height:50px;padding:20px 10px 0 10px;text-align:center;color:{{settings.primaryBtnFontColor}};border:2px solid{{settings.primaryBtnBorderColor}};background-color:{{settings.primaryBtnBgColor}};font-size:20px}.discounts__value.discounts-clickable{cursor:pointer}.discounts__value.discounts-clickable:hover{background-color:{{settings.primaryBtnHoverBgColor}};border:2px solid{{settings.primaryBtnHoverBorderColor}};color:{{settings.primaryBtnHoverFontColor}}}.discounts__value__details{font-size:17px}.discounts__row{display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:space-between;padding-bottom:5px;border-bottom:1px solid #f2f2f2;margin-bottom:5px;font-size:13px;font-weight:300;align-items:center}.discounts__row:last-of-type{border-bottom:none;margin-bottom:20px}.discounts__rowTitle{font-size:15px;text-align:left;font-weight:400}.discounts__rowTitle:first-child{width:35%}.discounts__cell:first-child{width:35%}@media (min-width:767px){.discounts__mobile{display:none}}@media screen and (max-width:1200px){.discounts__header{text-align:center}.discounts__item{width:90%;margin-left:auto;margin-right:auto}}@media screen and (max-width:767px){.discounts__row{flex-wrap:wrap}.discounts__row__header{display:none}.discounts__rowTitle{width:auto!important}.discounts__cell{padding-right:20px;padding-top:10px;width:auto!important}.discounts__details-container{padding:20px}}@media only screen and (max-width:480px){.discounts__item{width:90%;padding:20px 0 20px 0;height:70px}.discounts__value{width:100px;font-size:17px}.discounts__info{padding:5px;font-size:14px}.discounts__date{padding-top:5px}}

Ostatnim krokiem jest dodanie kodu JavaScript. Znajdź plik layout1.js i na końcu pliku wklej poniższy kod.

function customerProfileBannerSlick() { $(".customerProfileBanner").not('.slick-initialized').slick({ lazyLoad: 'progressive', infinite: true, slidesToShow: 1, slidesToScroll: 1, draggable: false, autoplay: true, autoplaySpeed: 8000 }); }

$('li.discounts-js').on('click', function(e) {
$(function() {
var checkDiv = setInterval(function(){
if($('.customerProfileBanner').length > 0) {
customerProfileBannerSlick();
}
}, 100);
});

});

$('body').on('click', '.discountsDetails-js', function(e) {
$('.discountsDetailsTemplate-js').removeClass('hidden');
$('.discountsMainTemplate-js').addClass('hidden');
window.scroll(top);
var discountDetailsUrl = $(e.currentTarget).data('url');
var discountDetailsTemplate = $(e.currentTarget).data('template');
var content = $('.discountsDetailsTemplate-js');
$.get(discountDetailsUrl, { __collection:'customer-profile.DiscountERPDetails', __template:discountDetailsTemplate }, function(result){
if(result && result.collection && result.template){
content.html(result.template);

}
});
});

$('body').on('click', '.discountsDetailsButton-js', function(e) {
$('.discountsDetailsTemplate-js').addClass('hidden');
$('.discountsMainTemplate-js').removeClass('hidden');
});

Czy ten artykuł był pomocny?

Wyślij opinie

Inne w kategorii

• Wyszukiwarka zaawansowana w szablonie Topaz

• -1

• 2099

• Ustawienia paska nawigacji w szablonie Szafir

• 1

• 2273

• Aktualizacja filtrów i wyszukiwarki w szablonach

• -1

• 2669

• Dodanie nowego widoku filtrów

• -26

• 1636

• Zmiana nagłówka sekcji polecanych towarów na przykładzie szablonu Topaz

• 0

• 2880

• Szablon i treści wiadomości e-mail

• 0

• 3135