Skip to content

:::

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 ​

sh
pnpm dev

or...

Open in StackBlitz

Resources ​


Auto-generated

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