Obsługa prezentacji wymiarów towaru dla wskazanej jednostki miary

W tym artykule dowiesz się jak umożliwić wyświetlanie wymiarów towarów w zależności od wybranej jednostki miary w szablonach Szafir, Bursztyn, Opal, Agat, Topaz.

Szafir

W pierwszej kolejności dokonaj zmian w pliku product-presentation-data.html. W narzędziu wyszukiwania wyszukaj frazę if unit.Id == unitId. Powinieneś znaleźć kilka wyników, jednak interesuje Cię tylko ten pierwszy. Tuż pod nim wklej poniższy fragment.

Następnie wyszukaj frazę if unit.Default == true or unit.Id == null. Linia w kodzie, który znalazłeś powinna być około 10 linii pod tą, którą przed chwilą zmieniałeś. Tuż pod nią wklej poniższy kod.

Następnie należy wyszukać frazę data-ratio. Znajdziesz prawdopodobnie dwa wyniki, jednak również interesuje Cię ten pierwszy. Pod linią, którą znajdziesz i która będzie rozpoczęta słowem <option powinieneś znaleźć linię {% endfor -%} a pod nią </select>. Pod linią </select> należy wpisać poniższy kod.

Potem w tym samym pliku wyszukaj frazę if activeProduct.Attributes[limitIndex]. Nad znalezionym wynikiem powinieneś widzieć {% if tableView -%} a powyżej </ul> oraz {% endif -%}. Nad linią {% endif -%} i poniżej linii {% endfor -%} wklej poniższy kod.

Teraz wyzukaj frazę downloads-ui. Nad znalezioną linią powinieneś znaleźć poniższy kawałek kodu.

Nad tagiem zamykającym </ul> wklej poniższy kod.

Teraz przejdź do pliku init-ui1.js. Należy wyszukać frazę function loadChildsProps() . Pod pierwszą linijką (która będzie się zaczynać od słów var childs) należy wkleić poniższy kod.

Następnie wyszukaj frazę changePrices(child, index);. Nad znalezioną linią wklej poniższy kod.

W ostatnim kroku należy zaimplementować funkcję odpowiadającą za zmianę wymiarów w zależności od wybranej jednostki. W dowolnym miejscu w pliku (może być powyżej funkcji function changePrices(child, index), która znajduje się kilka linii poniżej) należy wkleić poniższy kod.

Bursztyn

Pierwszym zmienianym plikiem będzie plik productdetails.html. Po kilku pierwszych linijkach kodu powinieneś zauważyć kod wyglądający w ten sposób.

Kod ten należy usunąć a wstawić poniższy.

Następnie wyszukaj frazę if attr. Pod znalezioną linią powinieneś widzień linię {% endfor -%}. Pod tą linią należy wkleić poniższy kod.

Teraz przejdź do pliku js/details.js. Wyszukaj frazę if (prevPrice. Nad znalezioną linią wklej poniższy kod.

Opal

Pierwszym zmienianym plikiem będzie plik productdetails.html. Po kilku pierwszych linijkach kodu powinieneś zauważyć kod wyglądający w ten sposób.

Kod ten należy usunąć a wstawić poniższy.

Następnie wyszukaj frazę if attr. Pod znalezioną linią powinieneś widzieć linię {% endfor -%}. Pod tą linią należy wkleić poniższy kod.

Teraz przejdź do pliku js/details.js. Wyszukaj frazę if (prevPrice. Nad znalezioną linią wklej poniższy kod.

Agat

Pierwszym modyfikowanym plikiem w szablonie Agat będzie product-page.html. Po kilku pierwszych linijkach kodu, przed <section class=”product-details”> należy wstawić poniższy fragment.

Następnie wyszukaj frazę if productD.UPC. Pod znalezioną linią powinieneś znaleźć linię zaczynającą się od < li a pod nią {% endif -%}. Pod tym fragmentem wklej poniższy kod.

Kolejnym zmienianym plikiem będzie partials/product/product-popup.html. Wyszukaj frazę {{ unit.Id }}. Prawdopodobnie znajdziesz dwa wyniki, ale interesuje Cię ten drugi. Pod wyszukaną linią powinieneś widzieć linię {% endfor -%}. Pod nią należy wkleić poniższy kod.

W ostatnim kroku przejdź do katalogu js/init.js. Wyszukaj frazę $(e.currentTarget).hasClass(’attributeId’). Nad nią należy wkleić poniższy kod.

Topaz

Wskazówka
Poniższa instrukcja jest uniwersalna dla obu wariantów widoku szczegółów towaru w szablonie Topaz. Jeśli chcesz dodać obsługę wag w pierwszym wariancie, należy zmodyfikować pliki src/assets/elements/productDetails/product-details1/html.js oraz src/assets/elements/productDetails/product-details1/js.js. Natomiast jeżeli chcesz dodać obsługę wag w drugim wariancie, należy zmodyfikować plikisrc/assets/elements/productDetails/product-details2/html.js oraz src/assets/elements/productDetails/product-details2/js.js

Na początku zmodyfikuj plik html.js. Należy wyszukać frazę productDetails-js. Nad znalezioną linią wklej poniższy kod.

Następnie wyszukaj frazę if product.UPC. Pod znalezioną linią powinieneś znaleźć linię zaczynającą się od < li a pod nią {% endif -%}. Pod tym fragmentem wklej poniższy kod.

Następnie wuszukaj frazę else if ($(’#supplyId’).attr(’data-clip’). Nad znalezioną linią wklej poniższy kod.

Dodatkowo będziesz musiał dodać tłumaczenia do panelu administracyjnego. W tym celu należy wejść w zakładkę Wygląd sklepu/ Ustawienia/ Tłumaczenia i kliknąć w przycisk Dodaj. Należy wpisać Id tłumaczenia oraz Tekst, który będzie się wyświetlał na stronie. Zmiany należy zatwierdzić przyciskiem Dodaj.

Lista tłumaczeń:
  • Id: Height ,Tekst: Wysokość
  • Id: Length ,Tekst: Długość
  • Id: Width ,Tekst: Szerokość

Czy ten artykuł był pomocny?