Configurator plugin

Struttura dei dati

L'oggetto principale da cui attingere i dati riguardanti il prodotto viene passato al componente dall'esterno e rimane interno all'applicazione React. Tra le proprietà di questo prodotto c'è variants che può esser vuoto ma deve esser presente e elenca le sue varianti. Solo se pieno il prodotto principale diventa parte dell'elenco di SubProduct. La sua proprietà children contiene invece l'elenco dei prodotti figli usabili per comporre il prodotto configurato.

Sia l'oggetto principale che questi prodotti vengon usati per comporre l'elenco di SubProduct da mostrare all'utente. L'oggetto principale viene definito attraverso una proprietà isParent, mentre gli oggetti obbligatori con la proprietà required.

Redux viene usato per gestire l'oggetto selezionato attraverso lo store selectedProduct. Questo oggetto ha una proprietà status avente tre possibili valori: None, Preview e Selected. Ogni variante contenuta nella proprietà variants ha a sua volta una proprietà status con gli stessi possibili valori.

L'elenco dei prodotti di cui è composto il prodotto da configurare viene gestito attraverso un altro store configuredProduct.

Commands

# Install node packages
sudo docker exec ConfiguratorPlugin npm i --unsafe-perm --prefix /usr/src/app

Prerequisites

What things you need to install the software

docker 17+
docker-compose 1.19.0+

Installing

# Go to the local web server folder
cd docker/dev

# Create a .env file with your docker/dev folder
# with the path to the configurator plugin folders
echo "CONFIGURATOR_PLUGIN_FOLDER=/your-path-to-the/configurator-plugin-folder
WEB_SERVER_FOLDER=/your-path-to-the/public-folder" > .env

Testing

Development

# Compose the docker containers
sudo docker-compose up -d

# Launch webpack in watch mode
sudo docker exec -it ConfiguratorPlugin npm start --prefix /usr/src/app

# Open the following page on your browser
http://localhost:8080

Build

# Build new configurator-plugin version
sudo docker exec -it ConfiguratorPlugin npm run build --prefix /usr/src/app

Publish to NPM

# Go to the docker dev folder
cd docker/dev

# Compose the docker containers
sudo docker-compose up -d

# Modify the npm package version on webpack/build/package.json

# Build the new npm version using the Build section command

# Connect to the ConfiguratorPlugin container
sudo docker exec -it ConfiguratorPlugin bash

# Login to the npm repository
npm login

# Move to the dist folder
cd /usr/src/app/dist

# Publish the new version to the npm repository
npm publish

Authors

• WWG - wwg

License

No license defined yet

Acknowledgments

• Webpack Sass loader

How to use

After you have install the package you simply need to use the component where you need it:

import Configurator from 'wwg-configurator';

export default function MyReactComponent(props) {
  return(
    <Configurator 
      productData={props.product}
      confirmConfigurationCallback={() => {}}
      updatePrice={() => {}} />
  )
} 

also you need to include theese lines in the index.html of the product

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm"
    crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4"
      crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i" rel="stylesheet">