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:

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

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

5. W tym samym katalogu utwórz plik discount-elements.html i wklej do niego następujący kod:

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

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

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:

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ę:

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:

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?