Wstrzykiwanie kodu w nagłówku i stopce (CSS/JS): kompletny przewodnik

Prezentacja

Wstrzykiwanie kodu w nagłówku i stopce pozwala dodać kod CSS, JavaScript lub HTML do sklepu PrestaShop bez zmieniania jakiegokolwiek pliku motywu. Wszystkim zarządzasz w panelu administracyjnym w postaci fragmentów: każdy blok kodu ma swoje miejsce wstrzykiwania, kierowanie na strony, kolejność wstrzykiwania oraz status aktywny lub nieaktywny.

Typowe zastosowania: Google Tag Manager, Google Analytics, Meta Pixel, znaczniki weryfikacyjne (Search Console, Pinterest i tak dalej), własne style CSS, skrypty czatu czy baner zgody na pliki cookie.

Instalacja

1. Pobierz archiwum dfcodeinjector.zip ze swojego konta DataFirefly.
2. W panelu administracyjnym otwórz Moduły > Menedżer modułów, kliknij Wgraj moduł i wskaż archiwum.
3. Kliknij Konfiguruj, aby otworzyć menedżer fragmentów.

Tworzenie fragmentu

W menedżerze kliknij Dodaj fragment i wypełnij poniższe pola.

Pola formularza

• Nazwa: wewnętrzny identyfikator fragmentu (na przykład „Google Tag Manager”).
• Miejsce wstrzykiwania: punkt, w którym kod zostaje wstawiony (zobacz niżej).
• Kod: wklej pełny kod razem ze znacznikami. Jest wstrzykiwany bez zmian, bez przekształceń i bez filtrowania.
• Strony docelowe: zostaw puste dla wszystkich stron albo wybierz konkretne strony.
• Kolejność wyświetlania: fragmenty w tym samym miejscu są wstrzykiwane w kolejności rosnącej.
• Aktywny: włącza lub wyłącza fragment bez usuwania go.

Trzy miejsca wstrzykiwania

• Nagłówek (znacznik head): dla stylów, znaczników meta i znaczników weryfikacyjnych. Wstrzykiwany przez hook displayHeader.
• Początek body: tuż po otwarciu body, dla kontenerów znaczników (na przykład części noscript w GTM). Hook displayAfterBodyOpeningTag.
• Koniec body: tuż przed zamknięciem body, dla skryptów wpływających na wydajność i śledzenie. Hook displayBeforeBodyClosingTag.

Kierowanie na strony

Każdy fragment może być publikowany wszędzie (puste pole) albo ograniczony do wybranych stron: strona główna, karta produktu, kategoria, CMS, wyszukiwarka, koszyk, ścieżka zamówienia i tak dalej. Moduł porównuje bieżącą stronę z kontrolerem frontu (php_self); jeśli lista jest wypełniona, a strona do niej nie należy, fragment nie zostaje wstrzyknięty.

Przykłady

Google Tag Manager

GTM instaluje się w dwóch częściach. Utwórz dwa fragmenty:

1. Fragment „GTM head”: miejsce Nagłówek, wklej pierwszy skrypt dostarczony przez Google:

<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){ ... })(window,document,'script','dataLayer','GTM-XXXXXX');</script>
<!-- End Google Tag Manager -->

2. Fragment „GTM body”: miejsce Początek body, wklej część noscript dostarczoną przez Google.

Własny CSS

Miejsce Nagłówek, otocz swój CSS znacznikiem style:

<style>
.header-banner { background:#0f172a; color:#fff; }
</style>

Znacznik weryfikacyjny

Dla Search Console albo serwisu społecznościowego, miejsce Nagłówek:

<meta name="google-site-verification" content="TWOJ_KOD" />

Multisklep

W trybie multisklep każdy fragment może być globalny (wszystkie sklepy) albo zastrzeżony dla jednego sklepu przez pole Sklep. W trybie jednosklepowym pole jest ukryte, a fragment obowiązuje w bieżącym sklepie.

Zgodność z motywami

Rozwiązywanie problemów

• Kod się nie pojawia: sprawdź, czy fragment jest aktywny, czy miejsce wstrzykiwania jest poprawne i czy bieżąca strona należy do stron docelowych (albo czy to pole jest puste).
• Nic na początku ani końcu body: Twój motyw prawdopodobnie nie wywołuje odpowiednich hooków; użyj miejsca Nagłówek albo dodaj te hooki do motywu.
• Konflikt kolejności: dostosuj pole Kolejność wyświetlania, aby kontrolować sekwencję wstrzykiwania.