Zintegruj własne elementy graficzne (widżety) (przykład na widgecie informacji o sklepie)

Wczoraj napotkałem problem z utworzeniem widżetu z Informacje o sklepie żeby zainstalować Portal ocen dla sklepów internetowych, z którego korzystamy za pośrednictwem Stowarzyszenie Kupców móc korzystać.

Niestety nie ma wtyczki do tego za pośrednictwem Shopware Store. Więc kody musiały być umieszczone ręcznie.

Aby to zrobić, najpierw skonfigurowałem widżet informacji o sklepie w backendzie strony.

Następnie kod jest dostępny nieco głębiej.

W kolejnym kroku umieściłem ten kod w stopce. Uruchom program ftp (np. Filezilla) i poszukaj:

/Tematy/Frontend/Twoja nazwamotywu/frontend/indeks

W tym momencie zakładam, że już używasz własnego motywu, w przeciwnym razie twoje zmiany nie byłyby bezpieczne dla aktualizacji. W przeciwnym razie Shopware udostępnia następującą dokumentację:

Wprowadź zmiany w szablonie

Zawsze tworzę kopię zapasową bieżącego pliku przed wprowadzeniem zmian i dodaję aktualną datę do nazwy.

Wstaw powyższy kod za pomocą edytora tekstu (np. Notepad++).

Teraz widżet jest wyświetlany w dolnej części Twojego sklepu internetowego Shopware. Oczywiście nie wygląda to najlepiej. Dlatego informacje o sklepie zawierają mały fragment kodu, który mocno umieszcza ten widżet w prawym dolnym rogu:

@ekran tylko dla multimediów i (minimalna szerokość: 768 pikseli) { div#shopaskunft_widget { display: block; pozycja: stała; po prawej: 10px; dół: 10 pikseli; }}

Ale co z tym zrobić?

W backendzie Showware można określić dodatkowy plik css. Najpierw prześlij nowy plik css z powyższym kodem przez ftp.

Teraz wystarczy tylko powiedzieć Shopware 5, że ten plik ma być używany. Aby to zrobić, przejdź do zaplecza Ustawienia/Menedżer motywów...

... wybierz swój motyw i kliknij Konfiguruj motyw.

W zakładce Konfiguracja...

… wprowadź swój plik css w „Inne pliki CSS”:

<link href="/pl/themes/Frontend/Twoja nazwamotywu/frontend/_public/src/css/shopaskunft.css?template=itintime_170425&is_preview=on" media="all" rel="stylesheet" type="text/css" />

Teraz opróżnij pamięć podręczną sklepu i skompiluj motyw.

Et voila… Twój widżet wygląda świetnie! 🙂

Widżet RBA z informacji o sklepie jest nadal wymagany do wysyłania wiadomości e-mail z ocenami. Pokażę ci, jak to skonfigurować w tym poście:

Zainstaluj widżet RBA z informacji o sklepie w Shopware 5