<th-address-check>
The th-address-check component provides an input form which is connected to the Thirstie API to validate the delivery address and determine if product coverage is available for the user's selected address. Status/error messages are displayed below the input form.
This component updates the location state in ThirstieClient so that it is available to other components, for example Product Detail Pages or a Product Listing Page. This component should be placed on every PDP and landing page.
Note that the user will have the opportunity to specify the apartment number during checkout, but they will not have to re-enter the complete address.
Usage
<th-address-check></th-address-check>Properties
placeholder String
"Enter a Delivery Address" (default)
Placeholder text to display in input
textColor String
Text color for entered address after availability check is completed and the input box is closed.
States / Error Messages
Success
If the address is in a coverage area so that products are availble, then the input element is replaced by a display of the selected address, with the option to change the address.
The status message is blank.
Not In Coverage
If the user enters a valid address but the address is not in a coverage area, then the error message will indicate using the --th-c-alertWarningPrimary color. In this case the use state will not be updated with the location.
No items currently available for your location.
Changing Address
If the consumer has added items to the shopping cart and subsequently tries to change the delivery address, then the items will be removed from the shopping cart. In that case the status message will give the warning Items will be removed from your cart.
This language can be customized in the changeAddressMsg configuration variable, see Styling & Customization.
<th-zipcode-check>
The th-zipcode-check component provides an input form which is connected to the Thirstie API to validate the delivery zip code and determine if product coverage is available for the zip code. Status/error messages are displayed below the input form.
This component updates the location state in ThirstieClient so that it is available to other components, for example Product Detail Pages or a Product Listing Page. This component should be placed on every PDP and landing page.
NOTE: the user will be required to enter a street address and (optionally) any apartment number during checkout. The full delivery address must be in the zip code originally provided.
Usage
<th-zipcode-check></th-zipcode-check>Properties
label String
"Enter Delivery Zip Code to Check Price" (default)
Text to display in input
labelColor String
--th-c-greysLightGrey (default)
Text color
buttonContent String
"Check" (default)
Text to display in button
buttonColor String
brand primary contrasting color (default)
Button text color
buttonBgColor String
brand primary color (default)
Button color
States / Error Messages
Success
If the zip code is valid and in a coverage area so that products are availble, then the input element is replaced by a display of the selected zip code, with the option to "Change Delivery Zip."
The status message is blank.
Invalid Zip
If the user does not enter a valid zip code, then the error message will indicate using the --th-c-alertWrongPrimary color
Invalid zip code. Please enter a valid zip code.
Not In Coverage
If the user enters a valid zip code but the zip code is not in a coverage area, then the error message will indicate using the --th-c-alertWarningPrimary color
No items currently available for your location.
<th-availability-wrapper>
Provides a wrapper around arbitrary page content for either a address or zip code entry availability check component. The availability component will be minified as a "sticky" label under the header. The component serves to provide a reminder to the user what address has been selected, or that the address must be provided to determine product availability and pricing.
Provides a label to show as a prompt when the entry form is minified on scroll activity. Clicking the minified label will scroll to top of the page and expose the availability form.
Usage
<th-availability-wrapper header-height="66">
<!-- use the slot to provide scrollable content -->
<slot name="page-content">
<div>
<th-product-container></th-product-container>
</div>
</slot>
</th-availability-wrapper>Properties
headerHeight Number
The top-offset value in pixels to place the availability entry and minified label.
promptMessage String
"Enter delivery location to check availability" (default)
Message to show on the minified label.
<th-product-add-to-cart>
Displays a stand-alone product card, with "Add to Cart" CTA button. The CTA button is only active if the user has entered a valid address or zip code (see availability components), with optional messages guiding the user.
Usage
<th-product-add-to-cart product-line-id="1042216" pdp-link="/pdpdemo" cta-label="Buy Now"></th-product-add-to-cart>Properties
product-line-id String (required)
The Thirstie Product Line Id of the product to be displayed.
pdp-link String (required)
The routing link to direct to if the user clicks the "Other variants available" link
ctaLabel String (optional)
"Add to Cart" (default)
locationLabel String (optional)
"Enter Location" (default)
Label shown on inactive button if the user has not yet provided a delivery address or zip code.
unavailableLabel String
"Product not available" (default)
Label shown on inactive button if the user has yet provided a delivery address or zip code, but the product is not available for that location.
noImage Boolean
Do not show product image (default=False)
Show only product name, price and add to cart CTA button.
showLink Boolean
Always show link to PDP (default=False)
Displays link under add to cart CTA button, with text "Variations exist". See linkText property to customize text.
linkText String
"Variations exist" (default)
Custom text to show on link to PDP.
<th-product-card>
Displays a card with product information for a specific Product Line Id and a CTA button to navigate to a PDP. In most cases you won't use this component directly. <th-product-add-to-cart> may be more suitable for most use cases.
Usage
<th-product-card></th-product-card>Properties
productName String
Name of the product
price String
image String
containerSizes Array
productLineId String
handleSelect Function
<th-plp>
A container component which displays a grid of product cards with product information and a CTA button to navigate to PDPs.
This component manages retrieving the product listing information from the Thirstie API and updating state in ThirstieClient.
Usage
<th-plp></th-plp>Properties
productName String
price String
image String
containerSizes Array
productLineId String
handleSelect Function
Emits Events
pl-select: product line id of selected card
<th-pdp>
A container component which displays product detail with Add to Cart capability.
Usage
<th-pdp></th-pdp>Properties
productLineId String
The Thirstie Product Line ID, which identifies specific product line. A product line will have one or more product SKUs (for example 375mL and 750mL bottle sizes), each identified by a Thirstie Product Key (TPK)
showFAQ Boolean
(optional) If yes, display collapsible FAQ component.
showRecommendations Boolean
(optional) If yes, will display additional products caurosel.
**
Customization
thirstieAppConfig
| Configuration Variable | Description |
|---|---|
| pdpFAQName | Custom title for FAQ section on the <th-pdp> and <th-pdp-commerce> PDP components. |
| faqContent | Custom content for the FAQ section on the <th-pdp> and <th-pdp-commerce> PDP components. |
| discoverMoreLabel | Custom title for "Show Recommendations" section, <th-pdp> only. |
<th-pdp-commerce>
This component exposes a single product line with variant SKUs (i.e., different bottle sizes), with add-to-cart and other required e-commerce capabilities for use in a custom Product Detail Page (PDP).
Usage
<th-pdp-commerce product-line-id="10694">
<div slot="additional-content">
<!-- This slot could host external content such as user reviews and other UGC -->>
</div>
</th-pdp-commerce>Properties
productLineId Number
The Thirstie Product Line Id identifies all SKUs of the same product. Different bottle sizes will have different SKUs.
maxNumberRetailers Number
The maximum number of retailers to show in the retailer selection list. Thirstie recommendations showing at least 3 retailers.
Customization
thirstieAppConfig
| Configuration Variable | Description |
|---|---|
| pdpFAQName | Custom title for FAQ section on the <th-pdp> and <th-pdp-commerce> PDP components. |
| faqContent | Custom content for the FAQ section on the <th-pdp> and <th-pdp-commerce> PDP components. |