VariantContentClassic

Purpose

VariantContentClassic is the Classic-theme counterpart of VariantContent: the variant-selection reusable used in product quick-add/product-modal experiences.

It mirrors VariantContent's behavior (dimension selectors, selected-variant resolution, add-to-cart readiness) with Classic-specific markup, a modal image swiper, and cart-quantity syncing for items already in the cart.

Where it's rendered

Rendered from the same kind of contexts as VariantContent (e.g. cart/quick-add modal), using the Classic theme variant:

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

Inputs (Liquid render parameters)

Same contract as VariantContent:

quickAddModal (boolean, optional)

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

Main data input (not a render parameter):

$store.productModal.product

Template behavior (Liquid + Alpine)

Follows the same product header, MPN/SKU, and dimensions UI behavior as VariantContent (see that page for the full model shape and dimension-resolution rules).

Differences from VariantContent:

Renders a modal-scoped image swiper (initModalImageSwiper) that reacts to the selected variant's linked media (slideToVariantImage).

Syncs quantity with any matching item already in the cart (cartItem, isInCart, handleCartIncrease/handleCartDecrease/handleCartQuantityInput).

Re-initializes local selection state when the modal's product changes (reInitWithProduct), same intent as VariantContent's watcher but implemented as an explicit method.

Alpine wiring:

x-data="variantcontentclassicreusabledefault.initComponent($store.productModal.product, '{{ Reusables.VariantContentClassic.Translations.AddToCartErrorMessage }}', '{{ Reusables.VariantContentClassic.Translations.UpdateProductQuantityErrorMessage }}')"

Data contract (JS runtime)

Model shape (storefront example)

Same product shape as VariantContent — see that page's Model shape sample for the sanitized JSON (productVariants[], dimension1/dimension2, pricing fields).

JavaScript

Global object

Global object: variantcontentclassicreusabledefault

initSwiper(refs)

Initializes a dimension-picker Swiper (color swatches / size buttons), same as VariantContent.

initModalImageSwiper(refs)

Initializes the modal's product-image Swiper. Enables loop/touch navigation only when more than one slide is present.

initComponent(product, addToCartErrorMessage, updateProductQuantityErrorMessage)

Factory returning Alpine state and handlers for variant selection, quantity, cart syncing, and the modal image swiper.

init

Alpine lifecycle method. Sets up initial dimension selection state, registers listeners, and initializes the modal image swiper.

selectedVariant

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

updateSelectedVariant

Recomputes selectedVariant from the current dimension selections and updates dependent UI/pricing state.

allDimensionsSelected

Getter returning whether all required dimension selections are complete.

hasMultipleVariants

Getter returning whether the product has more than one variant.

setSelectedColor

Sets the selected color dimension item and recomputes the selected variant.

setSelectedOther

Sets the selected non-color dimension item and recomputes the selected variant.

setDimension

Generic dimension setter used by both color and non-color selection flows.

isOtherOptionOrderable

Returns whether a candidate non-color option is orderable under the current selection.

isSingleOptionOrderable

Returns whether a single-dimension option is orderable for single-dimension products.

reInitWithProduct

Re-initializes local selection and swiper state when $store.productModal.product changes (e.g. the modal is reopened for a different product).

slideToVariantImage

Slides the modal image swiper to the media item linked to the currently selected variant.

displayStartPrice / displayFinalPrice / displayOriginalPrice

Getters controlling which price block (range/start, final, original/discounted) is shown for the current selection.

variantOrDefault(path, displayNullLine)

Reads a value from the selected variant first, falling back to the product; returns - when displayNullLine is true and the value is missing. Also toggles customColorActive for stockAvailability.label === 'Custom'.

canAddToCart

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

handleAddToCart(closeModal)

Clears toasts, checks canAddToCart(), then calls servicesreusabledefault.addToCart(...). On success, optionally closes the modal, updates quantity constraints from the response, and calls updateQuantity(...).

debounceUpdateProduct

Debounces product-variant dependent quantity updates to avoid excessive recomputation on rapid clicks.

updateQuantity(newQuantity, product, productVariantId, checkQuantity, useDebounce)

Validates/normalizes quantity server-side via servicesreusabledefault.updateProductQuantity when checkQuantity is true; otherwise updates the local quantity directly.

cartItem

Getter that finds the matching item already present in $store.cart for the selected variant.

isInCart

Getter that returns whether the currently selected variant is already present in the cart.

applyCartItemQuantity

Syncs the local quantity field from the matching cart item.

handleCartIncrease / handleCartDecrease / handleCartQuantityInput

Update the quantity of an item already in the cart (increment, decrement, or direct input) and persist the change via servicesreusabledefault.updateProductCart(...).

debouncedUpdateCartItemQuantity

Debounces cart-quantity updates from the increase/decrease/input handlers before calling the cart update service.

removeCartItem

Removes the matching item from the cart via servicesreusabledefault.removeFromCart(...) when quantity is reduced to zero.

Global Alpine stores

$store.productModal (product)

$store.cart (reading/updating the item already in the cart)

$store.toast (removeAll(), add(...))

Services / API calls

Uses servicesreusabledefault for add-to-cart and quantity-validation operations, same as VariantContent, plus cart-quantity syncing calls used only in the Classic variant:

servicesreusabledefault.addToCart(...)

servicesreusabledefault.updateProductQuantity(data, cancelToken)

servicesreusabledefault.updateProductCart(...) — used by handleCartIncrease/handleCartDecrease/handleCartQuantityInput to persist quantity changes for an item already in the cart.

servicesreusabledefault.removeFromCart(...) — used by removeCartItem to remove the item when quantity reaches zero.

Dependencies

Liquid: Reusables/VariantContentClassic/Default.liquid

JS: Reusables/VariantContentClassic/Default.js

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

Vendor: Swiper (dimension carousels + modal image swiper)

Notes

Functionally equivalent to VariantContent; consult that page for the full dimension/variant selection model shape.

Modal image swiper (initModalImageSwiper, slideToVariantImage) and cart-quantity syncing (cartItem, isInCart, cart increase/decrease/input handlers, removeCartItem) are Classic-specific and not present in VariantContent.

VariantContentClassic

Purpose#

Where it's rendered#

Inputs (Liquid render parameters)#

Template behavior (Liquid + Alpine)#

Data contract (JS runtime)#

Model shape (storefront example)#

JavaScript#

Global object#

initSwiper(refs)#

initModalImageSwiper(refs)#

initComponent(product, addToCartErrorMessage, updateProductQuantityErrorMessage)#

init#

selectedVariant#

updateSelectedVariant#

allDimensionsSelected#

hasMultipleVariants#

setSelectedColor#

setSelectedOther#

setDimension#

isOtherOptionOrderable#

isSingleOptionOrderable#

reInitWithProduct#

slideToVariantImage#

displayStartPrice / displayFinalPrice / displayOriginalPrice#

variantOrDefault(path, displayNullLine)#

canAddToCart#

handleAddToCart(closeModal)#

debounceUpdateProduct#

updateQuantity(newQuantity, product, productVariantId, checkQuantity, useDebounce)#

cartItem#

isInCart#

applyCartItemQuantity#

handleCartIncrease / handleCartDecrease / handleCartQuantityInput#

debouncedUpdateCartItemQuantity#

removeCartItem#

Global Alpine stores#

Services / API calls#

Dependencies#

Notes#