TURBO for Developers

Home > widget-integration > QuickViewController

QuickViewController class

Signature:

export declare class QuickViewController extends Controller

Extends: Controller

Constructors

Constructor	Modifiers	Description
(constructor)(domHelper, dtoHelper, wcagHelper, appService, cartAPI, productAPI, swatchService, cartController, slickHelper, combinedProductListingController, combinedProductListingsService)		Constructs a new instance of the `QuickViewController` class

Properties

Property	Modifiers	Type
appService	`protected`	AppService
buttonQuickviewFocus	`protected`	HTMLElement \| null
cartAPI	`protected`	CartAPI
cartController	`protected`	CartController
combinedProductListingController	`protected`	CombinedProductListingsController
combinedProductListingsService	`protected`	CombinedProductListingsService
domHelper	`protected`	DomHelper
dtoHelper	`protected`	DTOHelper
productAPI	`protected`	ProductAPI
QUICK_VIEW_CLOSE_AFTER_ADD_DELAY	`protected` `readonly`	(not declared)
slickHelper	`protected`	SlickHelper
sliderRef	`protected`	JQuery<HTMLElement> \| null
state	`protected`	Signal<QuickViewState>
swatchService	`protected`	ProductSwatchService
wcagHelper	`protected`	WCAGHelper

Methods

Method	Modifiers	Description
applySwatchSettings(modal, optionsWithValues)	`protected`
autoSelectFirstAvailableVariant(modal, variants)	`protected`
buildProductDetailUrl(handle, locale, addCollectionToProductUrl)	`protected`
close()
dispatchOpenEvent(productId)	`protected`
fetchQuickViewHtml(productId)	`protected`
focusCartModal()	`protected`
getModalZIndex()	`protected`	Keeps quick view above theme headers and Boost sticky UI.
getPreOrderButtonText(variant)	`protected`
getPreOrderNoteText(variant)	`protected`
getSellingPlanId(variant)	`protected`
getSwatchGroupIndex(option)	`protected`	Position of the swatch group that owns `option`, matching the order of `options_with_values` (and therefore of variant titles and merged_options). Returns -1 when the option is not inside a swatch group.
getVariantOptionValueAt(variant, optionIndex)	`protected`	Value `variant` carries for the swatch group at `optionIndex`. merged_options and original_merged_options are "OptionName:Value" entries ordered like the swatch groups. original_merged_options wins for a given position because the quick view template builds the labels from it when it is present, but either list can be empty or shorter than the option count, so each source is consulted per index before falling back on the title ("V1 / V2 / ..." in the same order). Returns null when no source resolves the position. Deliberately different from CombinedProductListingsController, which ORs both lists and searches every entry: matching a value regardless of its position is what let a name shared by two options collide.
goToSlide(index)
handleSliderNavigation(index, images, thumbItems)	`protected`
handleSwatchSelect(modal, option, variants)	`protected`
hideImageSection(html)	`protected`
initAddToCartButton(modal)	`protected`
initBuyNowButton(modal)	`protected`
initCloseHandlers(modal)	`protected`
initModal()	`protected`
initPreorderButton(modal)	`protected`
initQuantityInput(modal)	`protected`
initSelectedOption(option, variants)	`protected`
initSlider()	`protected`
initSwatchSelection(modal, variants, optionsWithValues)	`protected`
initThumbnailEvents()	`protected`
initThumbnailNavigation(modal, images)	`protected`
initWCAGSupport(modal)	`protected`
injectHtml(html)	`protected`
isPreOrderVariant(variant)	`protected`
open(action, triggerElement)
parseProductData(modal)	`protected`
selectThumbnail(index)	`protected`
updateAddToCartButton(modal, selectedVariant)	`protected`
updateDetailLink(modal, productData, selectedVariant)	`protected`
updateLabels(modal, selectedVariant)	`protected`
updateNavigationButtons(modal, imageCount)	`protected`
updatePreOrderUI(modal, selectedVariant)	`protected`
updatePrice(modal, selectedVariant)	`protected`
updateSliderForVariant(modal, images, selectedVariant)	`protected`
updateSoldOutLabels(modal, variants)	`protected`
updateSoldOutOption(modal, _option, variants)	`protected`
updateUI(modal, productData, images)	`protected`
variantHasOptionValue(variant, optionIndex, optionValue)	`protected`	Whether `variant` carries `optionValue` in the swatch group at `optionIndex`. Checking the position rather than the whole variant is what keeps a value name shared by two options (e.g. "GREY" under both "Rubber Color" and "Product Color") from matching in the wrong group. The comparison ignores case because the label text and the API value can differ in casing.