Quick View Methods
All methods below are as if the Smart Search object has a reference variable defined as shown in this code snippet.
Lifecycle Methods¶
created()¶
Initializes the component, sets up event listeners, debounced handlers, and loads collections if search by collections is enabled.
mounted()¶
Sets up click event listeners for search triggers, adjusts dropdown height, and initializes overlay functionality.
destroyed()¶
Cleans up event listeners, aborts pending requests, and removes DOM event handlers.
Core Functionality¶
openQuickView(event)¶
Opens the quick view search interface, sets focus, and triggers search session tracking.
closeQuickView()¶
Closes the quick view, restores body scroll, removes focus trapping, and restores previous active element.
clickaway(event)¶
Handles clicks outside the quick view to close it when appropriate.
Search Functionality¶
search(searchTerm)¶
Sets the search term and focuses the search input.
debounceQuickSearch(query)¶
Performs the actual search API call with debouncing, handles both lexical and hybrid search modes.
checkTermForKeyword(searchTerm)¶
Checks if the search term matches any configured keywords and sets redirect URL if found.
goToSearchPage()¶
Redirects to search results page or keyword redirect URL if configured.
trackSearchTerm()¶
Tracks search events and user behavior analytics.
onSearchFocus()¶
Legacy method for search focus handling (currently empty).
Collection Management¶
getCollections(currentPage, limit)¶
Fetches collections from the API for search by collection functionality.
seeMore()¶
Expands the displayed collections beyond the limited view.
collectionHref(collection)¶
Generates the URL for a collection page.
Product Display¶
shouldDisplayQuickViewProductRating(product)¶
Determines if product ratings should be displayed based on settings.
productOnSale(product)¶
Checks if a product is on sale by comparing prices.
productImage(product, variant)¶
Returns the appropriate product image URL for display.
learnMore(product, index)¶
Handles navigation to product detail page with tracking.
learnMoreURL(product)¶
Generates the URL for product detail page with discovery parameters.
Cart Functionality¶
shouldShowAddToCart()¶
Determines if add to cart functionality should be displayed.
shouldShowVariantSelector(product)¶
Checks if variant selector should be shown for a product.
selectVariant(product)¶
Updates the selected variant for a product and refreshes the display.
selectOptionsForVariant(product)¶
Sets the selected options based on the chosen variant.
variantAvailable(variant)¶
Checks if a variant is available for purchase.
buttonLabel(product)¶
Returns the appropriate button text based on product status and settings.
buttonAriaLabel(product)¶
Generates accessibility label for add to cart button.
addToCart(product)¶
Adds the selected product variant to the cart with tracking.
UI and Layout¶
configureBreakpoints()¶
Sets responsive breakpoints based on screen width for column layout.
adjustDropdownHeight()¶
Adjusts the dropdown height based on viewport size.
productImageRatio()¶
Sets the aspect ratio for product images based on layout settings.
suggestedSearchTermLabel(term)¶
Generates accessibility label for suggested search terms.
Utility Methods¶
amount(price)¶
Formats price as a number with proper decimal formatting.
formatMoney(amount)¶
Formats monetary amounts using the Money utility.
placeholderText()¶
Returns the search input placeholder text from settings.
shouldShowPoweredByRebuy()¶
Determines if "Powered by Rebuy" branding should be displayed.
shop()¶
Returns the current shop domain.
shouldPositionAbsolute(type)¶
Returns CSS classes for absolute positioning based on product layout.
skeletonLayout()¶
Returns the appropriate skeleton loading class based on product layout.
Wrapped Utility Methods¶
generateImgSrcset¶
Wrapped utility for generating responsive image srcset attributes.
getProductReviewCountHtml¶
Wrapped utility for generating HTML for product review counts.
getProductReviewRatingPercentage¶
Wrapped utility for calculating product review rating percentages.
Watchers¶
showResults¶
Resets collection display limit when showing results.
searchTerm¶
Triggers search when term length exceeds 2 characters.
searchByCollection¶
Triggers search when collection filter changes.
isQuickViewOpen¶
Handles focus management when quick view opens/closes.
Computed Properties¶
editorLayout¶
Returns the editor layout configuration.
searchByCollectionsEnabled¶
Checks if search by collections feature is enabled.
isDropdownEnabled¶
Checks if dropdown layout is enabled.
isFlyoutEnabled¶
Checks if flyout layout is enabled.
flyoutModeSide¶
Returns the flyout mode side configuration.
showResults¶
Determines if search results should be displayed.
productListColumnClass¶
Returns CSS classes for product grid columns.
productDisplayType¶
Returns CSS class for product display layout.
suggestedSearchTermsTitle¶
Returns the title for suggested search terms section.
suggestedSearchTermsEnabled¶
Checks if suggested search terms feature is enabled.
suggestedTerms¶
Returns the list of suggested search terms.
suggestedCollectionsTitle¶
Returns the title for suggested collections section.
suggestedCollectionsEnabled¶
Checks if suggested collections feature is enabled.
suggestedCollections¶
Returns the list of suggested collections.
displayedSuggestedCollections¶
Returns limited or full list of suggested collections.
suggestedProductsTitle¶
Returns the title for suggested products section.
suggestedProductsEnabled¶
Checks if suggested products feature is enabled.
suggestedProducts¶
Returns the list of suggested products.
autoCompleteTermsEnabled¶
Checks if autocomplete terms feature is enabled.
matchingProductsTitle¶
Returns the title for matching products section.
matchingProductsEnabled¶
Checks if matching products feature is enabled.
matchingCollectionsTitle¶
Returns the title for matching collections section.
matchingCollectionsEnabled¶
Checks if matching collections feature is enabled.
displayedMatchingCollections¶
Returns limited or full list of matching collections.
shouldDropdownShow¶
Determines if the dropdown should be displayed.
keywordSuggestionsWithSearchTerm¶
Returns keywords that match the current search term.
suggestionsCount¶
Returns the number of suggestions to display.
columnSpacing¶
Returns the column spacing configuration.
Quick View Search dynamically presents products, collections, and additional search terms as the shopper inputs text into the search bar, adapting in real-time to additional input. Enhancing User Experience for Improved Conversions. Craft search experiences to enhance product discovery, provide recommendations, and ultimately elevate conversions and revenue.
--- title: Quick View Methods excerpt: JavaScript methods for controlling Quick View search behavior deprecated: false hidden: false --- All methods below are as if the Smart Search object has a reference variable defined as shown in this code snippet. ```javascript const QuickView = window.Rebuy.SmartSearch.quickView.view; ``` ## Lifecycle Methods ### `created()` Initializes the component, sets up event listeners, debounced handlers, and loads collections if search by collections is enabled. ### `mounted()` Sets up click event listeners for search triggers, adjusts dropdown height, and initializes overlay functionality. ### `destroyed()` Cleans up event listeners, aborts pending requests, and removes DOM event handlers. ## Core Functionality ### `openQuickView(event)` Opens the quick view search interface, sets focus, and triggers search session tracking. ### `closeQuickView()` Closes the quick view, restores body scroll, removes focus trapping, and restores previous active element. ### `clickaway(event)` Handles clicks outside the quick view to close it when appropriate. ## Search Functionality ### `search(searchTerm)` Sets the search term and focuses the search input. ### `debounceQuickSearch(query)` Performs the actual search API call with debouncing, handles both lexical and hybrid search modes. ### `checkTermForKeyword(searchTerm)` Checks if the search term matches any configured keywords and sets redirect URL if found. ### `goToSearchPage()` Redirects to search results page or keyword redirect URL if configured. ### `trackSearchTerm()` Tracks search events and user behavior analytics. ### `onSearchFocus()` Legacy method for search focus handling (currently empty). ## Collection Management ### `getCollections(currentPage, limit)` Fetches collections from the API for search by collection functionality. ### `seeMore()` Expands the displayed collections beyond the limited view. ### `collectionHref(collection)` Generates the URL for a collection page. ## Product Display ### `shouldDisplayQuickViewProductRating(product)` Determines if product ratings should be displayed based on settings. ### `productOnSale(product)` Checks if a product is on sale by comparing prices. ### `productImage(product, variant)` Returns the appropriate product image URL for display. ### `learnMore(product, index)` Handles navigation to product detail page with tracking. ### `learnMoreURL(product)` Generates the URL for product detail page with discovery parameters. ## Cart Functionality ### `shouldShowAddToCart()` Determines if add to cart functionality should be displayed. ### `shouldShowVariantSelector(product)` Checks if variant selector should be shown for a product. ### `selectVariant(product)` Updates the selected variant for a product and refreshes the display. ### `selectOptionsForVariant(product)` Sets the selected options based on the chosen variant. ### `variantAvailable(variant)` Checks if a variant is available for purchase. ### `buttonLabel(product)` Returns the appropriate button text based on product status and settings. ### `buttonAriaLabel(product)` Generates accessibility label for add to cart button. ### `addToCart(product)` Adds the selected product variant to the cart with tracking. ## UI and Layout ### `configureBreakpoints()` Sets responsive breakpoints based on screen width for column layout. ### `adjustDropdownHeight()` Adjusts the dropdown height based on viewport size. ### `productImageRatio()` Sets the aspect ratio for product images based on layout settings. ### `suggestedSearchTermLabel(term)` Generates accessibility label for suggested search terms. ## Utility Methods ### `amount(price)` Formats price as a number with proper decimal formatting. ### `formatMoney(amount)` Formats monetary amounts using the Money utility. ### `placeholderText()` Returns the search input placeholder text from settings. ### `shouldShowPoweredByRebuy()` Determines if "Powered by Rebuy" branding should be displayed. ### `shop()` Returns the current shop domain. ### `shouldPositionAbsolute(type)` Returns CSS classes for absolute positioning based on product layout. ### `skeletonLayout()` Returns the appropriate skeleton loading class based on product layout. ## Wrapped Utility Methods ### `generateImgSrcset` Wrapped utility for generating responsive image srcset attributes. ### `getProductReviewCountHtml` Wrapped utility for generating HTML for product review counts. ### `getProductReviewRatingPercentage` Wrapped utility for calculating product review rating percentages. ## Watchers ### `showResults` Resets collection display limit when showing results. ### `searchTerm` Triggers search when term length exceeds 2 characters. ### `searchByCollection` Triggers search when collection filter changes. ### `isQuickViewOpen` Handles focus management when quick view opens/closes. ## Computed Properties ### `editorLayout` Returns the editor layout configuration. ### `searchByCollectionsEnabled` Checks if search by collections feature is enabled. ### `isDropdownEnabled` Checks if dropdown layout is enabled. ### `isFlyoutEnabled` Checks if flyout layout is enabled. ### `flyoutModeSide` Returns the flyout mode side configuration. ### `showResults` Determines if search results should be displayed. ### `productListColumnClass` Returns CSS classes for product grid columns. ### `productDisplayType` Returns CSS class for product display layout. ### `suggestedSearchTermsTitle` Returns the title for suggested search terms section. ### `suggestedSearchTermsEnabled` Checks if suggested search terms feature is enabled. ### `suggestedTerms` Returns the list of suggested search terms. ### `suggestedCollectionsTitle` Returns the title for suggested collections section. ### `suggestedCollectionsEnabled` Checks if suggested collections feature is enabled. ### `suggestedCollections` Returns the list of suggested collections. ### `displayedSuggestedCollections` Returns limited or full list of suggested collections. ### `suggestedProductsTitle` Returns the title for suggested products section. ### `suggestedProductsEnabled` Checks if suggested products feature is enabled. ### `suggestedProducts` Returns the list of suggested products. ### `autoCompleteTermsEnabled` Checks if autocomplete terms feature is enabled. ### `matchingProductsTitle` Returns the title for matching products section. ### `matchingProductsEnabled` Checks if matching products feature is enabled. ### `matchingCollectionsTitle` Returns the title for matching collections section. ### `matchingCollectionsEnabled` Checks if matching collections feature is enabled. ### `displayedMatchingCollections` Returns limited or full list of matching collections. ### `shouldDropdownShow` Determines if the dropdown should be displayed. ### `keywordSuggestionsWithSearchTerm` Returns keywords that match the current search term. ### `suggestionsCount` Returns the number of suggestions to display. ### `columnSpacing` Returns the column spacing configuration. --- Quick View Search dynamically presents products, collections, and additional search terms as the shopper inputs text into the search bar, adapting in real-time to additional input. Enhancing User Experience for Improved Conversions. Craft search experiences to enhance product discovery, provide recommendations, and ultimately elevate conversions and revenue.