Storefront Integration
Overview
The Virtual Try-On widget is a Vue component that wraps a custom web component, <virtual-try-on-widget>. It lets customers virtually try on products directly from the product detail page (PDP).
SCAYLE offers an AI skill that handles the setup of the storefront integration described on this page. Reach out to your SCAYLE Account Manager to get access to this skill, as it includes the files needed for this integration.
If you use the SCAYLE storefront Boilerplate (from version 2.** onwards), the AI skill will fully handle the integration. However, the skill can also be used and adapted for any Vue-based shop frontend.
The Vue wrapper handles configuration, authentication, per-shop gating, basket integration, and analytics. The visual try-on experience, including the My Look button, ships inside the web component bundle that the wrapper loads.
The integration consists of the following parts:
| Part | File |
|---|---|
| Vue component | modules/virtualTryOn/components/VirtualTryOnWidget.vue |
| Settings composable | modules/virtualTryOn/composables/useVirtualTryOnSettings.ts |
| Tracking composable | modules/virtualTryOn/composables/useVirtualTryOnEvents.ts |
| Global configuration | nuxt.config.ts |
| PDP integration | app/components/product/detail/SFProductActions.vue |
| Tracking module touchpoints |
|
For more information on the tracking composable and the tracking module touchpoints, see Tracking and Analytics.
Configure Nuxt v2
Register the Custom Element
Because the widget is a web component, register it as a custom element. This prevents Vue from parsing it as a Vue component.
Set the Environment Variables
When requesting the activation of the Virtual Try-On Add-on, your SCAYLE Account Manager will share the dedicated URLs for your environments with you.
Set the following environment variables in your .env file:
| Variable | Description |
|---|---|
NUXT_PUBLIC_VIRTUAL_TRY_ON_HOST | URL of the host that serves the Virtual Try-On script and widget. |
NUXT_PUBLIC_VIRTUAL_TRY_ON_API_URL | API endpoint of the Virtual Try-On service. |
Add the Widget to the Product Detail Page
Place the widget in the SFProductActions.vue component, next to other product actions such as Add to Basket.
Component Props
The VirtualTryOnWidget component accepts the following props:
| Prop | Required | Description |
|---|---|---|
productId | Yes | ID of the current product. |
productName | Yes | Name of the product. |
variantId | Yes | ID of the currently selected variant. |
categories | No, defaults to [] | The full Pass every category path. Don't flatten them to the longest path. The widget needs every path to check every category node. |
product | No | The full If you omit it, the widget still renders and emits the |
variant | No | The selected Variant. Serves the same purpose as product. |
For more information on the mirrored add_to_cart event, see Tracking and Analytics.
Example
The following example shows the widget in SFProductActions.vue:
