Quick View Methods
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: '' deprecated: false hidden: false metadata: title: '' description: '' robots: index next: description: >- All methods below are as if the Smart Search object has a reference variable defined as shown in this code snippet. ```javascript title="Smart Search (Quick View) reference" 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.