:::

Customized Products example ​

The example shows how to integrate a Vue.js project with the logic provided by Customized Products plugin. This is ready to run project containing all needed tools to make Custom Products extension working in a headless approach.

Features ​

• 🚠  ProductCustomizedProductConfigurator.vue component to use in a Vue project
• 🛤️  useProductCustomizedProductConfigurator composable function to work with the logic enabled by a plugin

Requirements ​

• A knowledge about Custom Products extension
• Custom Products extension available
• Some Vue.js project

Setup ​

1. Setup your Vue template

2. Prepare some customized products following the documentation

Usage ​

In the example, the product with Custom Product is found and used in the template.

<ProductCustomizedProductConfigurator /> component utilizes features from useProductCustomizedProductConfigurator which takes the product from app's context and take care of the state of selected options.

1. Import a component to display extended product options

   js

   import ProductCustomizedProductConfigurator from "@/components/ProductCustomizedProductConfigurator.vue";
   

2. Register a product in Shopware context:

   js

   // product found by an api-client or a composable
   useProduct(product);
   

3. Display the component

   html

   <!-- your Vue template -->
   <ProductCustomizedProductConfigurator />
   

useProductCustomizedProductConfigurator API ​

Available methods and properties provided by the composable function:

isActive - is customized product enabled

customizedProduct - the entire Product entity

state - state of the selected options

addToCart - method for adding product to cart, using customized options in the payload

handleFileUpload - helper for media type options, updates the state automatically

Investigate more in the component's source.

Run for development ​

pnpm dev

or...

Resources ​

• Custom Products docs
• 📖  Composable Frontends Documentation