Saly - baza wiedzy

26.2 Personalizacja skryptów JS/CSS *

Wersja instrukcji

Data publikacji

Słowa kluczowe

1.0 Pierwsza wersja instrukcji

własny kod, JavaScript, CSS, skrypt, analityka, head, body, zakres stron, priorytet, walidacja

Spis treści:

  • 1. Jak wejść do sekcji Własny kod

  • 2. Zakładki JavaScript i CSS

  • 3. Lista skryptów

  • 4. Dodawanie / edycja skryptu

  • 5. Bezpieczeństwo, walidacja i rozmiar

  • 6. Zarządzanie skryptami

Dostęp / Wymagania: Sekcja Własny kod jest częścią modułu Personalizacja (pakiet Enterprise). Wymagane jest zalogowanie jako administrator platformy.

Sekcja Własny kod pozwala dodać do sklepu własne skrypty JavaScript oraz style CSS — np. kod analityczny (Google Analytics), piksele śledzące czy dodatkowe stylowanie — bez modyfikowania szablonu sklepu.

1. Jak wejść do sekcji Własny kod

W panelu administracyjnym otwórz moduł Personalizacja i w menu po lewej wybierz Własny kod.

📷 MIEJSCE NA ZRZUT: 26-2_wlasny-kod_lista.png — podpis: „Widok 1. Sekcja Własny kod — zakładki JavaScript i CSS oraz lista skryptów".

2. Zakładki JavaScript i CSS

Skrypty podzielone są na dwie zakładki, każda z licznikiem:

  • JavaScript — kod wykonywany w przeglądarce (analityka, integracje, dodatkowe funkcje).

  • CSS — style wpływające na wygląd sklepu.

Style CSS są zawsze wstrzykiwane w sekcji <head> każdej strony — dlatego dla CSS nie wybiera się ani lokalizacji w HTML, ani zakresu stron (działają wszędzie).

3. Lista skryptów

W tabeli skryptów zobaczysz kolumny:

  • Status — przełącznik włączający/wyłączający skrypt na żywo.

  • Nazwa — nazwa i opis; jeśli skrypt ma ostrzeżenia bezpieczeństwa, pojawi się tu informacja „{liczba} ostrzeżeń".

  • Lokalizacja (tylko JavaScript) — gdzie kod jest wstawiany (<head> / Po <body> / Przed </body>).

  • Gdzie działa — zakres stron (np. „Wszystkie strony" lub liczba wybranych stron).

  • Rozmiar — wielkość kodu.

  • Priorytet — kolejność ładowania.

  • AkcjeEdytuj i Usuń.

4. Dodawanie / edycja skryptu

Kliknij Dodaj JavaScript / Dodaj CSS (lub Dodaj pierwszy skrypt, gdy lista jest pusta). Otworzy się formularz z polami:

Podstawowe informacje

  • Nazwa skryptu (wymagana, min. 3 znaki) — np. „Google Analytics 4".

  • Opis (opcjonalnie) — krótka notatka, do czego służy skrypt.

  • Aktywny (przełącznik, domyślnie włączony) — pozwala włączyć/wyłączyć skrypt bez usuwania.

Lokalizacja w HTML (tylko JavaScript)

Wybierasz, gdzie wstrzyknąć kod (domyślnie Przed </body>):

  • <head> — w nagłówku strony (typowe dla kodów analitycznych),

  • Po <body> — zaraz po otwarciu treści strony,

  • Przed </body> — tuż przed końcem strony (typowe dla skryptów ładowanych na końcu).

Na jakich stronach wyświetlać (tylko JavaScript)

Zaznaczasz, na których stronach skrypt ma działać (można wybrać wiele): Wszystkie strony, Strona główna, Strony produktów, Strony kategorii, Koszyk, Checkout, Podziękowanie. Wybranie konkretnej strony usuwa „Wszystkie strony"; trzeba zaznaczyć co najmniej jedną.

Kod skryptu

W edytorze wklejasz treść skryptu (JavaScript lub CSS). Pod edytorem widać wskaźnik rozmiaru (aktualny / maksymalny).

Zaawansowane — Priorytet

Priorytet (suwak 0–1000): niższa wartość = wyższy priorytet (skrypt ładuje się wcześniej). Przydatne, gdy kolejność ładowania ma znaczenie.

Na końcu kliknij Utwórz skrypt (nowy) lub Zapisz zmiany (edycja).

📷 MIEJSCE NA ZRZUT: 26-2_nowy-skrypt-formularz.png — podpis: „Widok 2. Formularz nowego skryptu — nazwa, lokalizacja w HTML, zakres stron, kod i priorytet".

5. Bezpieczeństwo, walidacja i rozmiar

Dodawaj wyłącznie kod z zaufanych źródeł. Własny kod działa w sklepie tak samo jak kod platformy — błędny lub złośliwy skrypt może wpłynąć na działanie strony.

  • Ostrzeżenia bezpieczeństwa — system automatycznie sprawdza kod. Ostrzeżenia mają charakter informacyjny (nie blokują zapisu); ich liczba jest widoczna przy skrypcie na liście. Potraktuj je jako sygnał do weryfikacji kodu.

  • Limit rozmiaru — przy zbliżaniu się do limitu pojawia się ostrzeżenie, a po jego przekroczeniu (maks. 100 KB na skrypt) zapis jest zablokowany. Bardzo duży kod lepiej ładować z zewnętrznego pliku.

  • Pola wymagane — bez nazwy (min. 3 znaki), treści kodu i — dla JavaScript — lokalizacji oraz co najmniej jednej strony, zapis jest zablokowany.

  • Przełącznik Aktywny pozwala bezpiecznie przetestować lub czasowo wyłączyć skrypt.

6. Zarządzanie skryptami

Z poziomu listy możesz skrypt edytować, włączyć/wyłączyć (przełącznik Status/Aktywny) oraz usunąć (z potwierdzeniem „Usunąć skrypt?" — operacji nie można cofnąć).