VariantContent

Purpose

The VariantContent reusable renders product variant selection UI (dimensions like Color/Size), plus basic product header info (category/title/image) and an Add to cart action.

It is designed to be used inside the Product modal flow and reads its main input from the global Alpine store $store.productModal.product.

It has two rendering modes:

Default mode (used in the product modal / quick view)

quickAddModal: true mode (used in Cart for a compact “available variants” experience)

Where it's rendered

This reusable is rendered in at least these places:

Reusables/ProductGridItem/Default.liquid

{% render 'Reusables\\VariantContent\\Default' %}

Components/Cart/Default.liquid

{% render 'Reusables\\VariantContent\\Default', quickAddModal: true %}

What these two render sites correspond to in the UI

Based on the two render sites above, VariantContent is used in two distinct UI contexts:

Cart: “quick add / available variants” modal-like content

Render site: Components/Cart/Default.liquid with quickAddModal: true.

Used in the cart flow to present a compact variant-picker UI.

In this mode, the reusable emphasizes:

the AvailableVariants title

a product image

the dimensions UI (Color/Size etc.)

The JS also resets selection state when the modal product changes.

Product cards (product grid item / quick view)

Render site: Reusables/ProductGridItem/Default.liquid.

This is the “product card” context, where VariantContent is used as part of the product tile/quick-view behavior.

Whether it shows as an inline UI, a modal, or a mobile-only pattern depends on the surrounding markup/behavior in ProductGridItem and the product-modal store; VariantContent itself just reads $store.productModal.product and renders accordingly.

Inputs (Liquid render parameters)

Optional Liquid render parameter:

quickAddModal (boolean)

When true, the template shows the “Available variants” title and a product image block at the top.

The JS receives isQuickAddModal = true and resets selection state when the modal product changes.

Main data input (not a render parameter):

$store.productModal.product

The template mounts only when a product exists:

<template x-if="$store.productModal.product">
  <div x-data="variantcontentreusabledefault.initComponent($store.productModal.product, true)">
    ...
  </div>
</template>

Model shape (storefront example)

Below is a real runtime sample of $store.productModal.product that you provided (sanitized by collapsing long arrays like searchAttributes and productVariants).

Sanitized storefront sample:

{
  "vatIncluded": false,
  "vatRate": 25,
  "reducedVatRate": 5,
  "isMpnVisible": true,
  "isSkuVisible": true,
  "title": "Sample product title",
  "alias": "lefki-blouza-gynaikeia",
  "status": "Active",
  "categoryId": "example-category-id",
  "categoryName": "Sample category",
  "categoryLink": "/category/blouzes-top",
  "availability": "Unavailable",
  "id": "example-product-id",
  "companyId": "example-company-id",
  "link": "product/lefki-blouza-gynaikeia",
  "mediaItems": [
    {
      "id": "example-media-id-1",
      "link": "https://example.com/media/product-woman-top-4.jpg",
      "position": 0,
      "alt": "product-woman-top-4.jpg",
      "mediaType": "Image"
    },
    {
      "id": "example-media-id-2",
      "link": "https://example.com/media/green.pdf",
      "position": 1,
      "alt": "green.pdf",
      "mediaType": "Attachment"
    }
  ],
  "variantCount": 24,
  "productVariants": [
    {
      "id": "example-variant-id-1",
      "dimension1ItemId": "example-dim1-item-red",
      "dimension2ItemId": "example-dim2-item-m",
      "sku": "kokkino-medium",
      "sellOutOfStock": true,
      "canOrder": true,
      "startQuantity": 1,
      "price": 0,
      "unitPrice": 0
    },
    {
      "id": "example-variant-id-2",
      "dimension1ItemId": "example-dim1-item-green",
      "dimension2ItemId": "example-dim2-item-l",
      "sellOutOfStock": true,
      "canOrder": true,
      "startQuantity": 1,
      "price": 25,
      "unitPrice": 25,
      "finalPriceText": "25,00 €",
      "finalPrice": 25
    },
    {
      "id": "example-variant-id-3",
      "dimension1ItemId": "example-dim1-item-black",
      "dimension2ItemId": "example-dim2-item-m",
      "gtin": "12334566",
      "mpn": "12334566",
      "sku": "12334566",
      "sellOutOfStock": true,
      "canOrder": true,
      "startQuantity": 1,
      "price": 50,
      "unitPrice": 50,
      "finalPriceText": "50,00 €",
      "finalPrice": 50
    }
  ],
  "dimension1": {
    "name": "Color",
    "type": "Color",
    "items": [
      { "id": "example-dim1-item-black", "value": "Black", "textColor": "#000000" },
      { "id": "example-dim1-item-red", "value": "Red", "textColor": "#d64343" },
      { "id": "example-dim1-item-green", "value": "Green", "textColor": "#1aa189" }
    ]
  },
  "dimension2": {
    "name": "Size",
    "type": "Size",
    "items": [
      { "id": "example-dim2-item-s", "value": "S" },
      { "id": "example-dim2-item-m", "value": "M" },
      { "id": "example-dim2-item-l", "value": "L" },
      { "id": "example-dim2-item-xl", "value": "XL" }
    ]
  },
  "hasPriceRange": false,
  "inWishlist": false
}

Template behavior (Liquid + Alpine)

Product header

Shows category name (as a link when product.categoryLink exists).

Shows the title via variantOrDefault('title').

When quickAddModal: true:

Shows the AvailableVariants heading.

Renders a product image linking to /product/${product.alias}.

MPN / SKU

When not in quickAdd mode, the template can show MPN/SKU based on feature flags:

product.isMpnVisible → prints variantOrDefault('mpn', true)

product.isSkuVisible → prints variantOrDefault('sku', true)

If a value isn’t available and displayNullLine = true, variantOrDefault returns -.

Dimensions UI (Color + Other)

The template displays up to two dimensions (product.dimension1, product.dimension2).

If one of them has type === 'Color', it is treated as the color dimension.

The other one (if present) is displayed as the other dimension (often Size).

Each dimension is rendered in a Swiper carousel, initialized with:

Buttons are disabled based on orderability checks (implemented in JS) and selection state is highlighted.

JavaScript

Source: Reusables/VariantContent/Default.js.

init

Alpine lifecycle method returned by initComponent that initializes selection state and watches $store.productModal.product to re-initialize when the modal product changes.

JavaScript

Reusables/VariantContent/Default.js exposes variantcontentreusabledefault.

variantcontentreusabledefault.initComponent(product, isQuickAddModal = false)

initComponent(product, isQuickAddModal = false): factory that returns Alpine state + handlers for variant selection.

Side effects: watches Alpine.store('productModal').product and re-initializes selection when it changes.

Lifecycle

init(): runs on Alpine mount to set up initial selection state and watchers.

Variant selection

selectedVariant: currently resolved variant (falsy when selection is incomplete).

updateSelectedVariant(): recomputes selectedVariant when a user changes a dimension selection.

allDimensionsSelected(): returns whether the current selection is complete.

hasMultipleVariants(): indicates whether the product behaves as multi-variant in the UI.

isMultiVariant(): returns whether the current product is treated as multi-variant.

isSingleVariant(): returns whether the current product is treated as single-variant.

handleClickEvents(...): centralizes click handlers for dimension buttons.

Price display helpers

displayStartPrice(): returns whether start price should be shown.

displayFinalPrice(): returns whether final price should be shown.

displayOriginalPrice(): returns whether original price should be shown.

updateSelectedVariant() (method): recomputes selectedVariant when a user changes a dimension selection.

allDimensionsSelected() (method): returns whether the current selection is complete (based on which dimensions exist).

hasMultipleVariants() (method): indicates whether the product behaves as multi-variant in the UI.

isMultiVariant() / isSingleVariant() (methods): classify product variant mode for UI branching.

handleClickEvents(...) (method): centralizes click handlers for dimension buttons (sets selected ids + triggers recomputation).

selectedVariant

Computed getter that returns the currently selected variant (or null when selection is incomplete).

updateSelectedVariant

Recomputes the selected variant based on the currently selected dimension item ids and updates the product-modal selected index.

allDimensionsSelected

Returns true when all required dimension selections are present for the current product.

hasMultipleVariants

Returns true when the product has more than one variant and the UI should render variant selection.

isMultiVariant

Returns true when the product should be treated as multi-variant for UI branching.

isSingleVariant

Returns true when the product is treated as single-variant.

handleClickEvents

Registers click/middle-click events on the root element for navigation tracking behavior.

displayStartPrice

Returns whether the start price (price range) should be shown in the UI.

displayFinalPrice

Returns whether the final price should be shown (depends on selection state and pricing mode).

displayOriginalPrice

Returns whether the original/strikethrough price should be shown (discount UI).

canAddToCart

Returns whether the current selection is orderable and the add-to-cart action should be enabled.

Price display helpers:

displayStartPrice() returns whether start price should be shown.

displayFinalPrice() returns whether final price should be shown.

displayOriginalPrice() returns whether original price should be shown (discount UI).

Selection attempts to find a matching variant based on chosen dimension item ids:

dimension1ItemId must match selectedDim1Id (when product.dimension1 exists)

dimension2ItemId must match selectedDim2Id (when product.dimension2 exists)

The active variant influences variantOrDefault(path) resolution.

variantOrDefault(path, displayNullLine)

This helper returns the first non-empty value found in:

The selected variant (product.productVariants[selectedVariantIndex])

The product object (product)

If nothing is found:

returns - when displayNullLine = true

otherwise returns the (likely empty/undefined) product value

Implementation notes (from the real code):

path can be either a string like 'sku' or 'quantityConstraints.additive.minimum' or an array of path segments.

The function also toggles this.customColorActive when the object being read has:

stockAvailability.label === 'Custom' and a truthy stockAvailability.color.

Add to cart

handleAddToCart(closeModal = false): clears toasts and proceeds only if canAddToCart() allows it.

It calls the following concrete service method (from the real code):

servicesreusabledefault.addToCart(productId, variantId, minQty, finalPrice, originalPrice, showPopUp)

Where:

productId is this.product.id

variantId is variant.id (from this.product.productVariants[this.selectedVariantIndex])

minQty is variant?.quantityConstraints?.additive?.minimum

finalPrice is variant.finalPrice

originalPrice is variant.originalPrice

showPopUp is set based on closeModal

On failure it shows:

$store.toast.add(addToCartErrorMessage, 'ic-warning', 'error')

After a successful add:

It optionally closes $store.productModal (when closeModal is true)

It finds the matching cart item in response.data.cartItems and updates:

variant.quantityConstraints = addedProduct?.quantityConstraints

It calls updateQuantity(...) using the minimum additive quantity from the server:

updateQuantity(addedProduct?.quantityConstraints?.additive?.minimum, addedProduct, addedProduct.productVariantId)

Global Alpine stores

This reusable uses:

$store.productModal

product

$store.toast

removeAll()

add(...) (for errors/success feedback)

Services / API calls

The JS integrates with servicesreusabledefault for add-to-cart and quantity-validation operations.

Concrete methods used (from the real code):

servicesreusabledefault.addToCart(...)

servicesreusabledefault.updateProductQuantity(data, cancelToken)

data shape used by this reusable:

productId: product.productId || product.id

productVariantId

requestedQuantity

cancelToken is an Axios cancel token (axios.CancelToken.source().token)

Error feedback (runtime variables used by this reusable):

addToCartErrorMessage (toast on add-to-cart failure)

updateProductQuantityErrorMessage (toast on quantity update failure)

As with the rest of the theme, the reusable treats a response as failure when:

response.status < 200 || response.status >= 300 || response?.success === false

Dependencies

Liquid: Reusables/VariantContent/Default.liquid

JS: Reusables/VariantContent/Default.js

Translations: Reusables/VariantContent/Default.json (consumed as Reusables.VariantContent.Translations.*)

Vendor:

Swiper (used for dimension carousels)

Notes

Image rendering uses product.mediaItems[0].link when present; otherwise it falls back to GlobalData.Settings.noImage.link or the theme fallback /Assets/images/no-image.svg.

Color items use item.textColor; the template supports one or two concatenated hex colors (e.g. #RRGGBB#RRGGBB) and renders split halves.

VariantContent

Purpose#

Where it's rendered#

What these two render sites correspond to in the UI#

Inputs (Liquid render parameters)#

Model shape (storefront example)#

Template behavior (Liquid + Alpine)#

Product header#

MPN / SKU#

Dimensions UI (Color + Other)#

JavaScript#

init#

JavaScript#

variantcontentreusabledefault.initComponent(product, isQuickAddModal = false)#

Lifecycle#

Variant selection#

Price display helpers#

selectedVariant#

updateSelectedVariant#

allDimensionsSelected#

hasMultipleVariants#

isMultiVariant#

isSingleVariant#

handleClickEvents#

displayStartPrice#

displayFinalPrice#

displayOriginalPrice#

canAddToCart#

variantOrDefault(path, displayNullLine)#

Add to cart#

Global Alpine stores#

Services / API calls#

Dependencies#

Notes#

Purpose

Where it's rendered

What these two render sites correspond to in the UI

Inputs (Liquid render parameters)

Model shape (storefront example)

Template behavior (Liquid + Alpine)

Product header

MPN / SKU

Dimensions UI (Color + Other)

JavaScript

init

JavaScript

variantcontentreusabledefault.initComponent(product, isQuickAddModal = false)

Lifecycle

Variant selection

Price display helpers

selectedVariant

updateSelectedVariant

allDimensionsSelected

hasMultipleVariants

isMultiVariant

isSingleVariant

handleClickEvents

displayStartPrice

displayFinalPrice

displayOriginalPrice

canAddToCart

variantOrDefault(path, displayNullLine)

Add to cart

Global Alpine stores

Services / API calls

Dependencies

Notes