@ppg_pl/pallete

v2.0.27

Published

18 days ago

Color-Selector WebComponent

0High
0Medium
0Low

bna_agency

victazzz

Project Documentation

This documentation provides an overview of the project's architecture, technologies used, and integration instructions for both the backend and frontend components.

Backend

Version 1.0.1

Framework: The application backend is built using Strapi version 4.
Database: The staging environment is configured with a PostgreSQL database.
Collation Method: Refer to the Strapi documentation for detailed information on collation.

Version 2.0.0

Framework: The application backend is built using Directus version 10.10.4.
Database: The staging environment is configured with a PostgreSQL database.
Collation Method: Refer to the Directus documentation for detailed information on collation.

Frontend

Webcomponent Library: The frontend application is written as a webcomponent using StencilJS.
Integration: To integrate the webcomponent into an HTML file, follow these steps:
1. Install the package using npm:
```
npm install @ppg_pl/pallete
```
  or using yarn:
```
yarn add @ppg_pl/pallete
```
2. Connect the generated www folder to your HTML file.
3. Ensure correct paths for assets and scripts within the HTML file. Below is an example of how to import the package into any project:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Color Selector</title>

    <style type="text/css" media="screen, print">
      @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>
    <!-- here is the path  -->
    <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>
  </head>
  <body>
    <my-component class="modal_pallete" price="5.99"></my-component>

    <label for="shop">Shop</label> <input name="shop" type="shop" /> <label for="product">Product</label><input name="product" type="product" />
    <button>open modal</button>

    <script>
      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"]');

      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();
      });
      modal.addEventListener('addToBasket', e => {
        const { id } = e.detail;

        console.log('Dodaj tester do koszyka:', id);
      });
    </script>
  </body>
</html>

Additional Integrations

For other integrations and specific functionalities, refer to the comprehensive documentation provided for each component or library.

Published

Vulnerabilities

Links

Maintainers

Keywords