Nowy sposób prezentacji rabatów w profilu klienta w szablonie Szafir

Nowy sposób prezentacji rabatów w profilu klienta w szablonie Szafir

W tym artykule dowiesz się, jak zmodyfikować szablon Szafir, aby obsługiwał nowy sposób prezentacji rabatów w profilu klienta.

Wskazówka
Do poprawnego działania potrzebujesz sklepu 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ć

1. Otwórz plik common -> navigation-bars -> main-navigation-bar-partial.html. W pliku tym wyszukaj frazę {% if usr.Authenticated == true -%}. Trzy linie poniżej, powinna znajdować się linia zaczynająca się od <a href. Podmień tę linię na następującą:


2. Otwórz plik common -> pagination.html. Wyszukaj linię {% assign tab = 'loyalty’ -%}. Tuż pod nią wklej następujący kod:

{% elseif page.QueryString contains 'tab=discounts' -%}
{% assign pageQueryName = customer-profile.DiscountsERP.PageQueryGET -%}
{% assign paginationPageCount = customer-profile.DiscountsERP.PageCount -%}
{% assign paginationPageNo = customer-profile.DiscountsERP.PageNo -%}
{% assign template = 'customer-profile/discounts/discounts-list.html' -%}
{% assign templateContainer = '.discounts-list-lq' -%}
{% assign tab = 'discounts' -%}
{% elseif page.QueryString contains 'tab=discount-details' -%}
{% assign pageQueryName = customer-profile.DiscountDetPageQueryGET -%}
{% assign paginationPageCount = customer-profile.DiscountERPDetails.PageCount -%}
{% assign paginationPageNo = customer-profile.DiscountERPDetails.PageNo -%}
{% assign template = 'customer-profile/discounts/discount-elements.html' -%}
{% assign templateContainer = '.discount-elements-lq' -%}
{% assign tab = 'discount-details' -%}
{% assign id = customer-profile.DiscountERPDetails.Id -%}
{% assign discountString = customer-profile.DiscountQueryGET -%}

3. Otwórz katalog customer-profile -> discounts. W nim otwórz plik discounts.html. Usuń jego treść, i wklej następujący kod:

{% include 'customer-profile/menu.html' -%}

{{translations.DiscountsInfo}}

{% include 'customer-profile/discounts/discounts-list.html' -%}

4. W tym samym katalogu utwórz plik discount-details.html. Wklej do niego następujący kod:

{% include 'common/date-format.html' -%}
{% assign discount = customer-profile.DiscountERPDetails -%}
{% assign pageQueryName = customer-profile.DiscountsERP.PageQueryGET -%}
{% assign queries = page.QueryString | Split: '&' -%}
{% for query in queries -%}
{% if query contains 'page=' -%}
{% assign pageQueryNo = query | Split: '=' | Last -%}
{% break -%}
{% else -%}
{% assign pageQueryNo = 1 -%}
{% endif -%}
{% endfor -%}

{% 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 'customer-profile/discounts/discount-elements.html' with threshold -%}

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

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

{% endif -%}

5. W tym samym katalogu utwórz plik discount-elements.html i wklej do niego następujący 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 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.FixedPrice -%}
{% 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 -%}

{% unless element.FixedPrice and anySubtotalPrice == false -%}

{% if element.FixedPrice and anySubtotalPrice -%}
{{translations.Price}} {{translations.Netto | Downcase }}
{% else -%}
{{translations.Discount}}
{% endif -%}

{% endunless -%}
{% if anyThreshold or anyBundleThreshold or anyTotalPrice -%}

{% if element.FixedPrice and anyTotalPrice -%}
{{translations.Price}} {{translations.Brutto | Downcase}}
{% elseif anyBundleThreshold -%}
{{translations.BundleThreshold}}
{% else -%}
{{translations.Threshold}}
{% endif -%}

{% endif -%}

{% for element in elementsParent.Elements -%}

{{ forloop.index }}

{% if element.Group != null -%}
{% if element.Group.Url -%}

{% endif -%}
{{ element.Group.Name }}
{% if element.Group.Url -%}

{% endif -%}
{% else -%}
{% if element.Product.Url -%}

{% endif -%}
{{ element.Product.NameNoHtml }}
{% if element.Product.Url -%}

{% endif -%}
{% endif -%}

{% unless element.FixedPrice and anySubtotalPrice == false -%}


{% if element.FixedPrice -%}
{% if element.SubtotalPrice > 0 -%}
{{ translations.Price | Downcase }} {{ translations.Netto | Downcase }}
{% endif -%}
{% else -%}
{{ translations.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.Price | Downcase }} {{ translations.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 -%}

{% assign paginationPageCount = discount.PageCount -%}
{% if paginationPageCount > 1 -%}

{% include 'common/pagination.html' -%}

{% endif -%}

6. W tym samym katalogu utwórz plik discounts-list.html i wklej do niego następujący kod:

{% include 'common/date-format.html' -%}

{% 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 }}
{{ discount.Name }}
{% 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 -%}
{% include 'common/pagination.html' -%}
{% endif -%}
{% unless anyDiscount -%}
{{ translations.NoDicountsInfo }}
{% endunless -%}

7. Następnie przejdź do katalogu customer-profile. Otwórz plik menu.html. Wyszukaj linię <ul class=”category-column-ui customer-profile-menu-ui category-column-lq attached-lq customer-profile-menu-lq” data-container=”.customer-profile-content-lq”>. Linia pod spodem zaczyna się od <li class=”load-erp-data-lq. Podmień ją na następującą:

  • W tym samym pliku wyszukaj frazę {% if settings.discountsPresentationInCustomerProfileInPromotionsTab == 'yes’ %}. Linia pod spodem zaczyna się od <li class=”discounts-menu-button-lq”. Podmień ją na następującą:

  • 8. Otwórz katalog js a w nim plik init-ui2.js. Wyszukaj linię function setProductNameMaxWidthInTable() {. Należy podmienić całą funkcję (od znalezionej linii włącznie, do linii o treści }; znajdującej się ok. 70 linii poniżej – 2 linie przed tą znajduje się linia $(’.products-table-header-container-lq .name-and-code-lq’).css(’width’, nameWidth);):

    function setProductNameMaxWidthInTable() {
    if($(window).width() > 1279) {
    function calculateProductNameMaxWidthInTable(parent) {
    if(parent){
    var header = parent.find('.products-table-header-container-lq');
    } else {
    var header = $('.products-table-header-container-lq');
    }

    var headerWidth = header.width();
    var nameWidth = headerWidth;

    function calculateNameWidth(className) {
    var elements = header.find(className);
    var size = elements.length;
    if (size == 1) {
    nameWidth -= elements.outerWidth();
    } else if (size > 1) {
    elements.each(function () {
    nameWidth -= $(this).outerWidth();
    });
    }
    }

    calculateNameWidth('.remove-product-lq');
    calculateNameWidth('.open-complaint-form-container-lq');
    calculateNameWidth('.price-like-column-lq');
    calculateNameWidth('.percent-column-lq');
    calculateNameWidth('.amount-stepper-column-lq');
    calculateNameWidth('.currency-column-lq');
    calculateNameWidth('.options-column-lq');
    calculateNameWidth('.number-column-lq');

    if ($('.attributes-view-lq').index() != -1) {
    var freeSpaceWidth = headerWidth;

    function calculateFreeSpaceWidth(className) {
    var elements = header.find(className);
    var size = elements.length;
    if(className == '.attributes-view-lq' && size > 5){
    size = 5;
    }
    if (size == 1) {
    freeSpaceWidth -= elements.outerWidth();
    } else if (size > 1) {
    elements.each(function (i) {
    if(i < size){ freeSpaceWidth -= $(this).outerWidth(); } else { return false; } }); } } calculateFreeSpaceWidth('.remove-product-lq'); calculateFreeSpaceWidth('.open-complaint-form-container-lq'); calculateFreeSpaceWidth('.attributes-view-lq'); calculateFreeSpaceWidth('.arrow-lq'); calculateFreeSpaceWidth('.options-column-lq'); calculateFreeSpaceWidth('.name-column-lq'); if (nameWidth > freeSpaceWidth) {
    var difference = nameWidth - freeSpaceWidth;
    var amountStepperWidth = $('.amount-stepper-column-lq').outerWidth() + difference;
    $('.amount-stepper-column-ui').css('width', amountStepperWidth);
    nameWidth = freeSpaceWidth;
    }
    }

    if(parent){
    parent.find('.name-and-code-lq').css('width', nameWidth);
    } else {
    $('.name-and-code-lq').css('width', nameWidth);
    }

    if ($('.choose-cart-table-view-lq').index() != -1) {
    nameWidth -= $('.choose-cart-table-view-lq').width();
    }

    if(parent){
    parent.find('.products-table-header-container-lq .name-and-code-lq').css('width', nameWidth);
    } else {
    $('.products-table-header-container-lq .name-and-code-lq').css('width', nameWidth);
    }
    };

    if($('.discount-elements-table-lq').index() != -1){
    $('.discount-elements-table-lq').each(function(){
    calculateProductNameMaxWidthInTable($(this));
    });
    } else {
    calculateProductNameMaxWidthInTable()
    }
    }
    };

    9. Otwórz plik scss -> globals -> _globals-m.scss. Wyszukaj frazę .position-attributes-set-form-lq{. Poniżej znajdują się dwie linie o treści }. Tuż pod nimi wklej poniższy kod:

    &.discount-element-ui{
    height: 100px;
    .name-and-code-lq{
    margin-top: 4px;
    }
    .price-like-column-ui{
    left: 60px;
    text-align: left;
    .prices-ui{
    left: 0;
    }
    }
    .value-ui{
    position: absolute;
    left: 40px;
    font-size: 10px;
    top: 2px;
    }
    }

    W tym samym katalogu otwórz plik _globals2.scss. Wyszukaj linię // Discounts in customer-profile. Poniżej znajduje się linia .discount-item-ui{. Tuż pod nią wklej poniższą linijkę:

    height: 72px;

    Poniżej znajduje się linia .discount-value-ui{. Klika linii poniżej znajdziesz linię o treści vertical-align: middle;. Słowo middle zamień na top.

    Kolejne kilka linii poniżej znajduje się linia o treści .currency-ui{. Tuż nad nią wklej ten kod:

    &.clickable-ui{
    cursor: pointer;
    }

    10. Otwórz Panel administracyjny, a w nim zakładkę Wygląd sklepu -> Ustawienia -> Tłumaczenia. Nowe tłumaczenia dodaj poprzez kliknięcie przycisku Dodaj, wprowadzenie Id, Tekstu i zatwierdzenie przyciskiem Dodaj. Należy dodać następujące tłumaczenia (Id – Tekst):
    1. Threshold – Próg
    2. QuantityThreshold – Próg ilościowy
    3. BundleThreshold – Próg pakietowy

    Wskazówka
    Kopiując Id tłumaczeń upewnij się, że przed lub za danym Id nie znajduje się żadna spacja, inaczej tłumaczenie może nie zadziałać w sposób poprawny!
    Wskazówka
    Pamiętaj, aby po wprowadzeniu zmian w plikach scss i js, wykonać odpowiednie komendy opisane w artykule o minifikacji, do którego link znajduje się na samej górze niniejszego artykułu. Przed wykonaniem odpowiedniej komendy dla plików js, usuń z katalogu js pliki: init-ui1.min.js, collection-points.min.js, init-ui2.min.js, init.min.js, sw.min.js. Po wykonaniu komendy możesz usunąć plik slick.min.min.js.

    • Czy ten artykuł był pomocny?

    ( 0 )
    ( 1 )
    Wyślij opnie