Poradniki

Dokumentacja motywu Warehouse. Szablon dla Prestashop 1.7

Wersja 4.0.0

Instalacja

Warehouse 4.0 jest kompatybilny z Prestashop 1.7.2.0+

Ustawiać

Pierwsze kroki

Przed rozpoczęciem pracy z szablonem powinieneś mieć przynajmniej podstawową wiedzę na temat działania Prestashop. Sprawdź oficjalną dokumentację Prestashop. 

Import stylów

Pobierz pliki importu stylów

Układy (kolumny)

Aby zmienić układ strony, przejdź do Projekt> Motywy

a następnie możesz ustawić inny układ dla każdego kontrolera.

Tłumaczenia

Możesz przetłumaczyć motyw i moduły, postępując zgodnie z przewodnikiem po tłumaczeniach Prestashop .

Motyw magazynu używa domyślnych ciągów tłumaczeń Prestashop i kilku niestandardowych. Dlatego większość części jest zgodna z domyślnym tłumaczeniem prestashop. Możesz więc zaimportować go do swojego sklepu

Rozmiary obrazu

Rozmiary obrazów, które możesz ustawić w Backoffice> Projekt> Ustawienia obrazów.

Domyślnie rozmiary obrazów mają takie ustawienia

Cały ten obraz musi być zachowany w twoim sklepie.

Legenda:

  • cart_default – mały obraz produktu używany do koszyka
  • small_default – używany w różnych miejscach
  • medium_default – używane w różnych miejscach
  • home_default – obraz produktu używany na stronach z listą produktów
  • large_default – obraz produktu używany jako obraz główny na stronie produktu
  • category_default – to szeroki baner imaeg kategorii na stronach kategorii
  • store_default – używane na stronach sklepu
  • thickbox_default – używane na stronie produktu, jest to powiększone zdjęcie produktu

Aby uzyskać najlepsze wyniki :

  • cart_default, small_default, medium_default, home_default, large_default, thickbox_default powinny mieć ten sam współczynnik proporcji.
  • Zdjęcia produktów, które przesyłasz, powinny mieć taki sam rozmiar jak thicbox_default i pasować do proporcji
Modyfikacja zdjęć :

Konieczne może być zmodyfikowanie rozmiarów obrazu w celu dopasowania do potrzeb i używanego stylu motywu. Rozmiar obrazu zależy od

  • rozmiar oryginalnych obrazów
  • liczba produktów w rzędzie
  • układy stron (kolumny)
  • szerokość pojemnika
  • szerokość opakowania obrazu produktu

Każda modyfikacja rozmiaru wymaga regeneracji kciuka (Backoffice> Projekt> Obrazy).

Przejrzyste obrazy :

Jeśli potrzebujesz przezroczystych obrazów (także logo sklepu)

Motyw podrzędny

Z Prestashop 1.7 można tworzyć motywy potomne. Jest to przydatne, gdy trzeba dokonać drobnych korekt w plikach .tpl szablonu, podczas gdy nadal będzie można łatwo aktualizować motywy. Więcej informacji jest dostępnych w dokumentacji ps. oraz na blogu deweloperów Prestashop

Możesz pobrać przykładowy szablon hurtowni

Theme.yml dla podrzędnego motywu Warehouse powinien wyglądać tak (nazwa folderu powinna być taka sama jak nazwa umieszczona w theme.yml – przykład: Warechild)

rodzic: magazyn
nazwa: magazyn dziecko
display_name: motyw potomny magazynu
wersja: 1.0.4
autor:
  name: „IQIT”
majątek:
  use_parent_assets: true
  css:
    wszystko:
      - id: font-awesome
        ścieżka: asset / css / font-awesome / css / font-awesome.css
        media: all
        priorytet: 200

Modyfikacje plików szablonów

Motyw oparty jest na Bootstrap 4 ( dokumentacja ) i jest budowany z Webpackiem (domyślnie używanym przez Prestashop). Jeśli chcesz wprowadzić modyfikacje JS lub CSS, których nie można wykonać za pomocą niestandardowego CSS (możesz zastosować go w module edytora motywów lub w motywach \ magazyn \ zasoby \ js \ custom.js i motywy \ magazyn \ zasoby \ css \ custom.css), musisz przygotować środowisko programistyczne i nauczyć się korzystać z Webpack

Powinieneś także zdobyć wiedzę na temat struktury motywów Prestashop z dokumentacji

Występ

Przejdź do backoffice> Zaawansowane parametry> Wydajność

UWAGA: Pamięć podręczna powinna być włączona w działającej witrynie, jeśli nadal jesteś w fazie tworzenia, lepiej pracować bez pamięci podręcznej.

Jeśli skonfigurowałeś dodatkowy system buforowania na swoim serwerze, możesz również włączyć

Aby uzyskać więcej informacji, sprawdź ten świetny artykuł: https://canonicalized.com/prestashop-speed-optimization/

Struktura blokowa modułów (3-częściowe ustawienia modułów)

Jeśli korzystasz z modułów trzeciej części, może być konieczne dostosowanie ich projektu do struktury bloku magazynu.

Struktura bloku paska bocznego
<div class = "block block-toggle js-block-toggle">
 <h5 class = "block-title"> <span> // tytuł Twojego modułu </span> </h5>
 <div class = "block-content">
   // zawartość twojego modułu
 </div>
</div>
Struktura bloków stopki
<div class = "col col-md block block-toggle js-block-toggle">
    <h5 class = "block-title"> <span> // tytuł modułu </span> </h5>
    <div class = "block-content">
        // zawartość twojego modułu
    </div>
</div>

Wskazówka:  jeśli twój blok jest listą linków, dodaj do niego klasę „block-links”.

Zaktualizuj instrukcję

Zalecenia dotyczące aktualizacji Prestashop

Zawsze wykonaj kopię zapasową przed aktualizacją !!! Ale ponieważ na niektórych konfiguracjach serwera tworzenie kopii zapasowych za pomocą narzędzia do automatycznej aktualizacji jednym kliknięciem może powodować błędy podczas aktualizacji, zalecam wykonanie kopii zapasowej bazy danych i plików ręcznie przez panel hostingu, a następnie wyłączenie kopii zapasowej podczas aktualizacji jednym kliknięciem.

—————————————————————————————————

Wyłącz moduły nienatywne i przejdź do domyślnych opcji motywu należy wyłączyć!

Zalecane ustawienia narzędzia do automatycznej aktualizacji Prestashop 1-kliknięciem

[Z PS 1.7] Z magazynu 4.x

[Od PS 1.6] Z magazynu starszego niż 4.x

Ponieważ Prestashop 1.6 do 1.7 jest ważnym uaktualnieniem oprogramowania, a Prestashop usunął wsteczną kompatybilność dla motywu i modułów, nie ma standardowej procedury aktualizacji.

Po uaktualnieniu sklepu do PS 1.7 musisz odinstalować wszystkie moduły iqit-commerce i usunąć je z serwera. Musisz także odinstalować i usunąć stary motyw magazynu.

Następnie sprawdź swoje 3-częściowe moduły, wiele z nich nie będzie działać w zaktualizowanym sklepie Prestasshop 1.7.

Gdy uzyskasz pracę w zaktualizowanym sklepie Prestahop 1.7 z deafult (klasycznym) szablonem Prestashop, musisz zainstalować szablon magazynu zgodnie z domyślną procedurą

Moduły

Ogólne informacje na temat korzystania z modułów w prestashop można znaleźć w oficjalnej dokumentacji prestashop.

Umieszczenie modułów

Moduły Prestashop

Motyw wykorzystuje również niektóre natywne moduły Prestashop, na przykład ps_facatedsearch. Więcej informacji o tych modułach można znaleźć na  stronie dokumentacji Prestashop .

iqitadditionaltabs

Za pomocą tego modułu możesz dodać dodatkowe treści do produktu, które będą pokazywane w zakładkach na stronie produktu.

Wewnątrz strony konfiguracyjnej modułu możesz stworzyć zakładki globalne, które będą widoczne dla wszystkich produktów.

lub na stronie edycji produktu możesz tworzyć unikalne zakładki dla każdego produktu

iqitaddthisplugin

Dodaje integrację z narzędziem do udostępniania społecznościowego http://www.addthis.com/, które umożliwia udostępnianie stron produktów w mediach społecznościowych. Mam również możliwość sprawdzenia statystyk aktywności społecznej. Przez moduł domyślny użyć naszego AddThis-id, jeśli chcesz korzystać z własnych AddThis konto trzeba utworzyć accunt na addthis.com stronie i tworzyć własne „przyciski Akcja”> „inline” narzędzie

iqitcompare

Dodaj możliwość porównywania produktów z klientami

iqitcontactpage

Dodaje dodatkowe treści i mapę na stronie kontaktowej prestashop. Uwaga:  ten formularz kontaktowy jest częścią samego sklepu, nie jest częścią tego modułu.

iqitcookielaw

Pokaż powiadomienie o europejskim prawie dotyczącym plików cookie.

iqitcountdown

Pokaż odliczanie do końca ceny specjalnej na liście produktów i na stronach produktów. Aby skonfigurować odliczanie, musisz dodać specjalną cenę na produkt z określoną datą zakończenia.

iqitcrossselling

Jest to moduł zamienny dla modułu podstawowego Prestashop „ps_crosseling”. Pokazuje klientów, którzy kupili ten produkt, również kupili na stronie produktu, dodali do potwierdzenia koszyka i na stronie koszyka.

Produkty Crosselings są generowane automatycznie na podstawie wielu zamówień produktów ze statusem dostawy

Jest zaczepiony undef następujące haki:

  • displayFooterProduct – pokaż skrzyżowania w stopce strony produktu
  • displayModalCartCrosseling – pokaż crrosselisn na dodaniu do koszyka potwierdzenie modalne
  • displayShoppingCart – pokazuje crosseling na stronie koszyka

Jeśli chcesz usunąć moduł z jednego z następujących haczyków, przejdź do Projekt> pozycje> znajdź nazwę modułu i odczep iqitcrosselings

iqitelementor

Jest to kreator stron Live Drag & Drop  , oparty na świetnej wtyczce WordPress Elementor  firmy Pojo.me.

Tworzenie strony głównej

Iść do

następnie

  1. Stwórz własny układ
  2. Wybierz go na swoją stronę główną

Strony i produkty Cms

Możesz także utworzyć opis produktu lub zawartość stron cms za pomocą narzędzia budującego elementy elementor.

Jak używać elementor

  • Przegląd
  • Sekcje i kolumny – część 1
  • Sekcje i kolumny – część 2
  • Sekcje i kolumny – część 3
  • Edycja mobilna
  • Typografia
  • Animacja wejściowa
  • Animacja najechania kursorem
  • Widgety

Języki

Musisz utworzyć zawartość w kreatorze elementów dla każdego języka używanego w sklepie. Język, który aktualnie edytujesz, jest wyróżniony u góry.

Po utworzeniu strony możesz przełączyć się na inny język i aby przyspieszyć proces, możesz zaimportować zawartość z wcześniej utworzonej strony, klikając 1.

Menedżer szablonów

W bibliotece możesz zapisać swoje układy, aby móc ich później używać na innych stronach. Możesz także eksportować / importować szablony do plików .json.

iqitemailsubscriptionconf

Dodaje kontroler frontcontroller dla modułu podstawowego Prestashop ps_emailsubscription. Dzięki temu potwierdzenie subskrypcji pokazane jest na osobnej stronie.

iqitextendedproduct

Dodaje  filmy YouTube / Vimeo / Dailymotion  lub obrazy 360 stopni do Twoich produktów.

iqitfreedeliverycount

  • Pokaż pozostałą kwotę do darmowej wysyłki na stronie kasy, z obsługą ajax
  • Pokaż pozostałą kwotę do darmowej wysyłki na wózku, z obsługą Ajax
  • Pokaż pozostałą kwotę do darmowej wysyłki w wyskakującym okienku potwierdzenia, z obsługą Ajax
  • Możesz użyć domyślnego pola prestashop, aby określić bezpłatną wysyłkę lub użyć niestandardowej wartości w konfiguracji modułu – jest to pomocne, gdy oferujesz bezpłatną wysyłkę tylko dla jednego przewoźnika

iqithtmlandbanners

Dodaje niestandardowy html lub banery (pokazy slajdów) w różnych zaczepach na stronie

iqitlinksmanager

Dodaje bloki z linkami w różnych hookach na twojej stronie.

iqitmegamenu

Dokumentacja dla tego modułu jest dostępna tutaj: iqitmegamenu_documentation.pdf

„Uwaga: w motywie magazynu cała część menu dotycząca konfiguracji projektu jest przenoszona do modułu iqitthemeeditor”

iqitpopup

Twórz własne niestandardowe okna wyskakujące z opcjonalną subskrypcją biuletynu.

  • Wykorzystuje zawartość HTML. Możesz w nim umieścić obrazy, własny tekst, ramki wideo, likebox itp
  • Opcjonalny formularz biuletynu.

iqitproductsnav

Pokaż linki do następnych i poprzednich produktów w kategorii na stronie produktu

iqitproducttags

Wyświetla tagi produktów (możesz im pomóc podczas tworzenia produktu) na stronie produktu

iqitreviews

Dodaj funkcję dodawania recenzji produktów. Wewnątrz konfiguracji modułu możesz wybrać automatyczne publikowanie komentarzy lub zezwolenie na komentarze gości.

Możesz także zatwierdzać lub usuwać komentarze

iqitsizecharts

Pozwala tworzyć tabele rozmiarów dla Twoich produktów.

W konfiguracji modułu możesz stworzyć przewodnik po rozmiarach, który może zawierać tekst, obrazy, tabele itp. Możesz przypisać przewodnik po rozmiarach do kategorii, więc wszystkie produkty przypisane do wybranych kategorii będą wyświetlać ten przewodnik na stronie produktu, ale nie jest to konieczne, ponieważ można również przypisać tabelę rozmiarów tylko do konkretnego produktu, w backoffice podczas edycji produktu w opcji modułów

wtedy pokaże się przycisk tabeli rozmiarów na stronie produktu, który otworzy okno modalne ze zdefiniowanym przewodnikiem

iqitsociallogin

Ten moduł pozwala klientom połączyć Twój sklep za pomocą kont społecznościowych Facebook, Twitter i Google+.

Aby korzystać z logowania na Facebooku, musisz włączyć protokół SSL w całym sklepie. Nie będzie działać bez SSL!

Konfiguracja logowania na Facebooku

1. Przejdź do https://developers.facebook.com/apps i utwórz nową aplikację, klikając „Utwórz nową aplikację”.

2. Wypełnij wszystkie wymagane pola, takie jak nazwa i opis aplikacji oraz adres e-mail.
3. Przejdź do Ustawień

  • Identyfikator aplikacji i zabezpieczenie aplikacji należy skopiować do konfiguracji modułu iqitsociallogin
  • Musisz wypełnić domenę aplikacji swoją domeną przykład: domena.com
  • Następnie kliknij Dodaj platformę iz okna modalnego wybierz Witryna   iw adresie URL strony wpisz pełny adres URL z przykładem protokołu: https://domain.com
  • Następnie kliknij przycisk Zapisz zmiany

4. Następnie przejdź do  przeglądu aplikacji  i upublicznij aplikację

4. Następnie przejdź do + Dodaj produkty  i wybierz login do Facebooka, a następnie wybierz Ustawienia zamiast szybkiego startu logowania do Facebooka

5. Umieść swój pełny adres URL z przykładem protokołu: https://domain.com w prawidłowym adresie URL przekierowania OAuth

W  prawidłowych identyfikatorach URI przekierowania OAuth  wstaw adresy URL:

  1. https://yourdomain.com/module/iqitsociallogin/authenticate?provider=facebook&page=authentication (lub jeśli Twój sklep jest wielojęzyczny, musisz dodać link w każdym języku, przykład:  https://yourdomain.com/en/module/iqitsociallogin / authentication? provider = facebook & page = authentication  )
  2. https://yourdomain.com/module/iqitsociallogin/authenticate?provider=facebook&page=checkout (lub jeśli Twój sklep jest wielojęzyczny, musisz dodać link w każdym języku, przykład:  https://yourdomain.com/en/module/iqitsociallogin / authentication? provider = facebook & page = checkout  )
  3. https://yourdomain.com/index.php?provider=facebook&page=authentication&fc=module&module=iqitsociallogin&controller=authenticate
  4. https://yourdomain.com/index.php?provider=facebook&page=checkout&fc=module&module=iqitsociallogin&controller=authenticate

6. Kliknij Zapisz zmiany i przetestuj swój login . Ważny tryb konserwacji Prestashop musi być wyłączony podczas testów!


Konfiguracja logowania Google

  1. Przejdź do  Google Developers Console.  i kliknij utwórz  i wpisz nazwę swojego projektu
  2. Następnie utwórz identyfikator klienta OAuth 
    Może być konieczne wpisanie nazwy produktu
  3. Następnie z   listy Typ aplikacji wybierz  aplikację internetową  i wypełnij Autoryzowane źródła JavaScript przykładową nazwą domeny: https://twojadomena.com
    Musisz również wypełnić  Autoryzowane URI przekierowań, Autoryzowane URI przekierowań,  musisz je wypełnić
    1. https://twojadomena.com/module/iqitsociallogin/authenticate?provider=google&page=authentication (lub jeśli Twój sklep jest wielojęzyczny, musisz dodać link w każdym języku):  https://twojadomena.com/en/module/iqitsociallogin /henticate? dostawca = Google i strona = uwierzytelnianie  )
    2. https://twojadomena.com/module/iqitsociallogin/authenticate?provider=google&page=checkout (lub jeśli Twój sklep jest wielojęzyczny, musisz dodać link w każdym języku, przykład: https: //twojadomena.com/en/module/iqitsociallogin / authentication? provider = google & page = checkout)
    3. https://yourdomain.com/index.php?provider=google&page=authentication&fc=module&module=iqitsociallogin&controller=authenticate
    4. https://yourdomain.com/index.php?provider=google&page=checkout&fc=module&module=iqitsociallogin&controller=authenticate
  4. Skopiuj identyfikator klienta i klucz tajny klienta do konfiguracji modułu iqitsociallogin
  5. Następnie z lewego panelu wybierz Bibliotekę,  znajdź Google+ i włącz ją
  6. Następnie przetestuj logowanie społecznościowe . Ważny tryb konserwacji Prestashop musi być wyłączony podczas testów!


Konfiguracja logowania na Twitterze

  1. Wejdź na  https://dev.twitter.com/apps  i  utwórz nową aplikację .
  2. Wypełnij wszystkie wymagane pola, takie jak nazwa i opis aplikacji.
    Umieść domenę swojej witryny w   przykładzie pola Witryna : http: // twojadomena, com Podaj ten adres URL jako dwa adresy URL  oddzwaniania  dla przykładu aplikacji https://yourdomain.com i  https://yourdomain.com/module/iqitsociallogin/authenticate (lub jeśli twój sklep jest wielojęzyczny, musisz dodać link w każdym przykładzie języka: https://yourdomain.com/en/    https://yourdomain.com/en/module/iqitsociallogin/authenticate  )
  3. Przejdź do zakładki Ustawienia i wprowadź adres URL prywatności oraz adres URL warunków korzystania z usług. Mogą to być linki do adresu URL usług terminowych i prywatnych w Twoim sklepie
  4.  Przejdź do zakładki Uprawnienia  Zmień dostęp na Tylko do odczytu  i zaznacz  Poproś o adres e-mail od użytkownika
  5. Przejdź do karty Klucze i tokeny dostępu i skopiuj klucze do konfiguracji modułu iqitsociallogin
  6. Następnie przetestuj logowanie społecznościowe . Ważny tryb konserwacji Prestashop musi być wyłączony podczas testów!

iqitthemeeditor

Jest to moduł, który pozwala dostosować projekt sklepu.

Możesz edytować za pomocą edytora backoffice lub edytora na żywo  . Oba edytory zawierają te same funkcje. Aby zaimportować / wyeksportować  styl, użyj edytora backoffice .

Uwaga:  Podczas korzystania z edytora motywów powinieneś wyłączyć cache w swoim sklepie (wbudowany Prestashop i 3-częściowy moduł cache, jeśli go używasz), w przeciwnym razie niektóre zmiany mogą nie być widoczne bezpośrednio w Twoim sklepie.

Edytor na żywo

Opcje są podzielone na sekcje

Wskazówka:  możesz zmienić rozmiar rzutni, klikając ikony urządzeń, dzięki czemu możesz wyświetlić podgląd strony na tabletach w telefonach.

Wskazówka:  jeśli edytujesz konkretną stronę, zmień stronę podglądu za pomocą pola wyboru lub po prostu przejdź do tej strony, klikając ją w podglądzie (np. Jeśli chcesz edytować stronę produktu i chcesz zobaczyć zmiany na żywo, kliknij dowolny produkt na swojej stronie zapowiedź)

iqitwishlist

Pozwala klientowi utworzyć listę życzeń z produktami. W konfiguracji modułu możesz włączyć / wyłączyć wyświetlanie produktów z krosowaniem (klient, który kupił ten produkt również kupił) do produktów wybranych przez klienta. Możliwe jest również podpięcie modułu do haków typu

displayHeaderButtons i displayHeaderButtonsMobile, aby wyświetlały się obok koszyka i przyciski logowania w nagłówku

ph_simpleblog

Moduł bloga dla Twojego sklepu.
Dostępna jest osobna dokumentacja:

Revolutionslider

Revolution Slider jest zawarty w szablonie dzięki rozszerzonej licencji. Dzięki tej licencji nie można aktywować modułu suwaka rewolucji przez backoffice Prestashop,  ale moduł bez aktywacji jest W PEŁNI FUNKCJONALNY! Moduł do tworzenia pokazu slajdów w Twoim sklepie. W pakiecie plików motywów dostępna jest osobna dokumentacja, w suwaku Rewolucja Folder.

Zasadniczo po zaimportowaniu slidera musisz przypisać go do podpięcia displayHome. Jeśli po tym pokazie slajdów nie zostanie pokazany, upewnij się, że sam moduł jest przeniesiony do tego hooka (w projektowaniu> pozycje)

Pełna dokumentacja dostępna pod  https://iqit-commerce.com/rev-17-doc/

Revolution Slider jest zawarty w szablonie dzięki rozszerzonej licencji. Dzięki tej licencji nie można aktywować modułu suwaka rewolucji przez backoffice Prestashop,  ale moduł bez aktywacji jest W PEŁNI FUNKCJONALNY! 

0 Komentarze
Udostępnij

Prestashop Developer