https://github.com/raj-kumar94/product-customiser-react
Product customizer made with react and react-konva
https://github.com/raj-kumar94/product-customiser-react
customisation customizer eccomerce konva konva-react konvajs product react reactjs
Last synced: 29 days ago
JSON representation
Product customizer made with react and react-konva
- Host: GitHub
- URL: https://github.com/raj-kumar94/product-customiser-react
- Owner: raj-kumar94
- Created: 2020-09-26T19:53:17.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2020-11-12T05:13:50.000Z (over 4 years ago)
- Last Synced: 2025-02-05T08:35:54.277Z (3 months ago)
- Topics: customisation, customizer, eccomerce, konva, konva-react, konvajs, product, react, reactjs
- Language: JavaScript
- Homepage: https://raj-kumar94.github.io/product-customiser-react/
- Size: 999 KB
- Stars: 3
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
Demo: https://raj-kumar94.github.io/product-customiser-react/
# Steps:
1. Clone the rep
2. cd repo
3. `npm install`
4. `npm start`
open the link `http:localhost:3000`
# Layout
Currently app is divided in 3 parts:
1. Product view/slider images
2. Select options/ Swatch elements
3. Grid views (to show views in Grid format)
# Using product data
Shopify's Product data + configuration data gets converted into `configObject`, `sliderImages`, and `currentLayerColors`
check file `utils/generatedConfigDummyData.json` to see the dummy data.
- `sliderImages` is the 2D array of images to be displayed on the screen
- `currentLayerColors` is object containing layers and their selected color
- `configObject` contains all the info related to the configurator data
TODO:
- Improve Swatch UI
- Add Accordion
- Add hidden input fields to be part of the form