- API reference
- UI components
Apr 01, 2023
SearchResultsItemBase component
On this page
The base component class for both SearchResultsGridItem and SearchResultsListItem classes.
Properties
| Name | Data type | Description |
|---|---|---|
| minPrice read-only |
Number | The min price of a product. For example if a product has 2 variants and their prices are $9 and $10, this property returns 9. |
| maxPrice read-only |
Number | The max price of a product. Take the above example this property returns 10. |
| minDiscountedPrice read-only |
Number | The min discounted price of a product. For example if a product has 2 variants and their discounted prices are $4 and $5, this property returns 4. |
| maxDiscountedPrice read-only |
Number | The max discounted price of a product. Take the above example this property returns 5. |
| maxDiscountedPrice read-only |
Number | The max discounted price of a product. Take the above example this property returns 5. |
| priceVaries read-only |
Boolean | true if the min price differs to the max price; otherwise false. |
| displayMinPrice read-only |
String | The display min price of a product. For example if a product has 2 variants and their prices are $9 and $10, this property returns $9. |
| displayMaxPrice read-only |
String | The display max price of a product. Take the above example this property returns $10. |
| displayMinDiscountedPrice read-only |
String | The min discounted price of a product. For example if a product has 2 variants and their discounted prices are $4 and $5, this property returns $4. |
| displayMaxDiscountedPrice read-only |
String | The max discounted price of a product. Take the above example this property returns $5. |
| displayPrice read-only |
String | The display price of a product. If a variant matches with the search query or the filter conditions, the price of the matching variant is used; otherwise the price of the first variant is used. e.g. $100. |
| displayDiscount read-only |
String | The display discount of a product. If a variant matches with the search query or the filter conditions, the discount of the matching variant is used; otherwise the discount of the first variant is used. e.g. $10. |
| displayDiscountedPrice read-only |
String | The display discounted price of a product. If a variant matches with the search query or the filter conditions, the discounted price of the matching variant is used; otherwise the price of the first variant is used. e.g. $90. |
| displayLongPrice read-only |
String | The display price of a product with currency name. If a variant matches with the search query or the filter conditions, the price of the matching variant is used; otherwise the price of the first variant is used. e.g. $100 USD. |
| displayLongDiscount read-only |
String | The display discount of a product with currency name. If a variant matches with the search query or the filter conditions, the discount of the matching variant is used; otherwise the discount of the first variant is used. e.g. $10 USD. |
| displayLongDiscountedPrice read-only |
String | The display discounted price of a product with currency name. If a variant matches with the search query or the filter conditions, the discounted price of the matching variant is used; otherwise the price of the first variant is used. e.g. $90 USD. |
| image read-only |
Object | {width: 800, height: 800, url: "//233412507_600x.jpg"}The active product image object. If show alt image on hover is enabled, this property returns the hoverImage object on hover or the default No image image object. |
| selectedImage read-only |
Object | {width: 800, height: 800, url: "//233412507_600x.jpg"}The selected product image object. If a variant matches with the search query or the filter conditions, this property returns the variant image object. If the variant does not have an image, the first product image object is returned. |
| hoverImage read-only |
Object | {width: 800, height: 800, url: "//233412507_600x.jpg}The hover product image object. If show alt image on hover is enabled, this property returns the hoverImage object on hover; otherwise null. |
| imageUrl read-only |
String | "//233412507_600x.jpg"The active product image URL. If show alt image on hover is enabled, this property returns the hoverImageUrl property on hover or the default No image image URL. |
| selectedImageUrl read-only |
String | "//233412507_600x.jpg"The selected product image URL. If a variant matches with the search query or the filter conditions, this property returns the variant image URL. If the variant does not have an image, the first product image URL is returned. |
| hoverImageUrl read-only |
String | "//233412507_600x.jpg"The hover product image URL. If show alt image on hover is enabled, this property returns the hoverImageUrl property on hover; otherwise null. |
| originalImageUrl read-only |
String | "//233412507.jpg"The active product original image URL. If show alt image on hover is enabled, this property returns the originalHoverImageUrl property on hover or the default No image image URL. |
| originalSelectedImageUrl read-only |
String | "//233412507.jpg"The selected product original image URL. If a variant matches with the search query or the filter conditions, this property returns the variant image URL. If the variant does not have an image, the first product image URL is returned. |
| originalHoverImageUrl read-only |
String | "//233412507.jpg"The hover product original image URL. If show alt image on hover is enabled, this property returns the originalHoverImageUrl property on hover; otherwise null. |
| scaledImageUrl read-only |
String | "//233412507_{size}.jpg"The active product image URL with {size} variable. This property is usually used to build srcset attribute for an img tag. If show alt image on hover is enabled, this property returns the scaledHoverImageUrl property on hover or the default No image image URL. |
| scaledSelectedImageUrl read-only |
String | "//233412507_{size}.jpg"The selected product image URL {size} variable. This property is usually used to build srcset attribute for an img tag. If a variant matches with the search query or the filter conditions, this property returns the variant image URL. If the variant does not have an image, the first product image URL is returned. |
| scaledHoverImageUrl read-only |
String | "//233412507_{size}.jpg"The hover product dynamic image URL {size} variable. This property is usually used to build srcset attribute for an img tag. If show alt image on hover is enabled, this property returns the scaledHoverImageUrl property on hover; otherwise null. |
| pluginData read-only |
Object | {product: {...}, isHover: false, result: {...}, owner: {...}}The data object that is passed to USF plugins. |
| collection read-only |
String | "dress"The name of the current collection or null if user is on the search page. |
| productUrl read-only |
String | "/collections/dresses/my-dress" or "/products/my-dress"The absolute URL to the product. |
| available read-only |
Number | The aggregrated total number of available inventory or -2147483648 if inventory of this product is not tracked. |
| hasDiscount read-only |
Boolean | true if the selected variant or product has a discount otherwise false. |
| isSoldOut read-only |
Boolean | true if the variant or product is sold-out otherwise false. |
| price read-only |
Number | The product price after discount. |
| compareAtPrice read-only |
Number | The product price before discount. |
| discount read-only |
Number | The product discount. |
| selectedVariant read-only |
Object | The selected variant if a variant matches with the search query or the filter conditions; otherwise null. |
| selectedVariantForPrice read-only |
Object | The selected variant for displaying the prices. Unlike the selectedVariant property, this returns the first variant if the search term or filter conditions do not match any variants. So this property is always not null. |
| isHover read-only |
Boolean | true if the user is hovering the mouse over the product item; otherwise false. |
| loc read-only |
Object | {...}The localization object storing localized strings. |
| result read-only |
Object | {...}The search results object. |
| product read-only |
Object | {...}The product object. |
Methods
| Name | Description |
|---|---|
| onItemClick | This event handler is invoked when a user clicks on a grid view or a list view item. |
| onItemHover | This event handler is invoked when a user hovers mouse over a grid view or a list view item. |
| onItemLeave | This event handler is invoked when the mouse leaves a grid view or a list view item. |
| getImageUrl | getImageUrl('600px')Returns the image URL with the corresponding image size. |
| getSelectedImageUrl | getSelectedImageUrl('600px')Returns the selected image URL with the corresponding image size. |
| getHoverImageUrl | getHoverImageUrl('600px')Returns the hover image URL with the corresponding image size. |
| getMetafield | getMetafield('my-namespace', 'my-key')Returns the corresponding product metafield with the given namespace and key parameters. |
| setSelectedVariantId | setSelectedVariantId(variantId)Selects a variant. After calling this method, the active image should be the variant image. |
14 Days Risk Free Trial. No credit card required. Cancel anytime.
© Sobooster - Privacy Policy