Przejdź do głównej zawartości

2. Integracja i implementacja (Frontend)

Instalacja paczek​

npm install @ppg_pl/pallete @ppg_pl/tinting

Lub osobno:

npm install @ppg_pl/pallete   # Palette – gotowe kolory
npm install @ppg_pl/tinting   # Tinting – mieszalnik

Osadzanie komponentów​

Komponenty działają w dowolnym środowisku (Vanilla JS, React, Vue, Angular).

Palette (color-selector)​

Główny komponent: <my-component>. Atrybuty: shop, product, baselink, colorname, available_testers, price.

HTML:

<my-component
  class="modal_pallete"
  shop="XYZ"
  product="123"
  baselink="/link-do-produktu"
  colorname="ecru"
  available_testers='[{"id_product_attribute": 213, "color_name": "ecru"}]'
  price="5.99">
</my-component>

Skrypty (ESM + legacy):

<script type="module" src="/node_modules/@ppg_pl/pallete/www/build/pallete.esm.js"></script>
<script nomodule src="/node_modules/@ppg_pl/pallete/www/build/pallete.js"></script>

Font Galatea (opcjonalnie, dla spójnego wyglądu):

<style>
  @font-face {
    font-family: 'Galatea';
    src:
      url(/node_modules/@ppg_pl/pallete/www/build/assets/fonts/Galatea-Regular.woff2) format('woff2'),
      url(/node_modules/@ppg_pl/pallete/www/build/assets/fonts/Galatea-Regular.woff) format('woff'),
      url(/node_modules/@ppg_pl/pallete/www/build/assets/fonts/Galatea-Regular.ttf) format('truetype'),
      url(/node_modules/@ppg_pl/pallete/www/build/assets/fonts/Galatea-Regular.eot) format('embedded-opentype');
    font-weight: 400;
    font-style: normal;
  }
</style>

Tinting (color-selector-tinting)​

Główny komponent: <my-component>. Atrybuty: shop, product, baselink, colorname.

HTML:

<my-component
  class="modal_tinting"
  shop="XYZ"
  product="456"
  baselink="/produkt">
</my-component>

Skrypty:

<script type="module" src="/node_modules/@ppg_pl/tinting/www/build/tinting.esm.js"></script>
<script nomodule src="/node_modules/@ppg_pl/tinting/www/build/tinting.js"></script>

Kontrola modala (Palette i Tinting)​

Oba komponenty udostępniają metody open() i close():

const modal = document.querySelector('.modal_pallete'); // lub .modal_tinting

modal.open();
modal.close();

Przykład: przycisk otwierający modal​

const btn = document.querySelector('button');
const modal = document.querySelector('.modal_pallete');
const shop = document.querySelector('input[name="shop"]');
const product = document.querySelector('input[name="product"]');

// Palette: ustaw dostępne testery (opcjonalnie)
modal.setAttribute('available_testers', JSON.stringify([
  { id_product_attribute: 213, color_name: 'ecru' }
]));

btn.addEventListener('click', () => {
  modal.setAttribute('shop', shop.value);
  modal.setAttribute('product', product.value);
  modal.open();
});