Przejdź do głównej zawartości

6. Opcje rozszerzenia i customizacji

Theme Engine (CSS Variables)​

Możliwość nadpisania stylów poprzez zmienne CSS (np. --ppg-btn-color), w zależności od tego, jakie zmienne są zdefiniowane w komponentach. Sprawdź pliki .scss w repozytorium color-selector / color-selector-tinting, aby poznać dostępne zmienne.

Integracja z koszykiem i zdarzenia​

Palette (color-selector)​

Komponent emituje zdarzenie addToBasket po wyborze testera do koszyka:

document.querySelector('.modal_pallete').addEventListener('addToBasket', (e) => {
  const { id } = e.detail;
  console.log('Dodaj tester do koszyka:', id);
  // Integracja z koszykiem sklepu...
});

Tinting (color-selector-tinting)​

Komponent emituje zdarzenie onSelectedColor po wyborze koloru:

document.querySelector('.modal_tinting').addEventListener('onSelectedColor', (e) => {
  const color = e.detail; // { hex, name, number, ... }
  console.log('Wybrano kolor:', color);
  // Integracja z koszykiem / formularzem...
});

GTM (Google Tag Manager)​

Oba komponenty zawierają wstrzyknięty skrypt GTM (Helmet). ID kontenera GTM można dostosować w kodzie źródłowym.

Konfiguracja API (development vs production)​

W plikach src/components/api/index.ts / services.ts znajdują się stałe:

  • APIURL – adres backendu Directus
  • accessToken – token autoryzacji

W produkcji komponenty korzystają z tokenów produkcyjnych. W środowisku deweloperskim można nadpisać te wartości (np. przez zmienne środowiskowe w rollup-plugin-dotenv).