:::

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

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

2. Register a product in Shopware context:

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

3. Display the component

   <!-- 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

---

Auto-generated

This page is generated from an external markdown file. In case of any issues or dead links, please visit the source file.