wwg-configurator v0.0.6
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
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">