The Buy the Look (BTL) Template
The Buy the Look templates support displaying the data shown below:
1 - Product images*: One image is shown for each product.
2 - Product name*
3 or 5 - Price*: You may configure which currency symbol to show in the popup.
* This data is required.
3 - Discount Price: If used, this will replace the price. The original price will still be shown in red with a strike-through, to indicate it is no longer the actual price. (Can also be configured to hide the original price entirely.)
4 - Description: Not visible then the window opens up. Will appear when the user clicks the "More Info" links (link text can be configured to show something else).
6 - Look title: The title for the entire "Buy The Look" window. This is not part of the product data.
7 - Look description: The description for the entire "Buy the Look" window. This is not part of the product data.
8 - Hero image: The image for the entire "Buy the Look" window. This is not part of the product data.
9 - Items counter: This will automatically be display the number of products that have been selected by the user so far. For a product to be counted, all of its properties need to be specified in the product form, and the quantity needs to be larger than 1. The "Items:" label can be configured to display something else.
10 - Total price: Will automatically display the total price of the products that have been selected by the user so far. For a product to be counted, all of its properties need to be specified in the product form, and the quantity needs to be larger than 1. The "Total:" label can be configured to display something else.
Buy the Look Template Set
The normal BTL template: displayed when the user clicks a product link.
The success window template: displayed when the user has clicked add to cart in the normal BTL window, and items were successfully added to cart. The message can be configured, and the buttons are fully styleable (including changing the labels).
The error window template: displayed if something goes wrong when trying to add the products to the cart. The message can be configured, and the button is fully styleable (including changing the label).
How The BTL Can Be Styled
The Window Itself
The BTL window can be styled the same way the DPW can. See "DPW Style and Customization", "The Window Itself".
This includes the look title, look description, product name, price, discount price, items string, total price string and description. These can of course be styled independently, and the same way text elements can be styled in the DPW templates. See "DPW Style and Customization", "Text Elements".
Hero Image and Product images
The Hero image and Product images can be styled the same way the images can be styled in the DPW. See "DPW Style and Customization", "Product Images". Both Hero image and product images are left aligned as default, but can be configured to be right aligned instead as shown on the image below.
Icon: When a product has been selected (that is, when all properties in the form have been selected, and quantity set to a value larger than 0), a checkmark icon will appear in the upper left corner of the product image. The default icon is a green circle with a white checkmark inside. This can be replaced by a custom icon.
The overlay can be styled the same way it can for the DPW. See "DPW Style and Customization", "Overlay".
How The BTL Product Form Can Be Configured
The product forms for the products in the BTL can be configured the same way the product form can be configured for the DPW (this includes the quantity input field and the "add to cart" button). See "DPW Style and Customization", "How the Product Window Behavior Can be Configured".
How The BTL Behavior Can Be Configured
Behavior When The Buy The Look Opens
The window can open up in one of two states:
- Open with a specific product variant selected.
- The properties will be pre-selected in the product form.
- The product may be added to the cart right away.
- Show the master product (not a specific variant).
- The properties in the product form won't be pre-selected.
- The user can't add to cart until he/she selects everything in the product form, thereby selecting a specific product variant
- Data should be structured so it makes sense to display the master product (e.g. there should be images for the master product).
The quantity will always default to 0 for all products when opening Buy The Look.
Behavior When Clicking Add To Cart Without Products Selected
The standard behavior is to disable the add to cart button so nothing happens when clicking it. With a bit of custom development it is possible to instead display a popup or message within the product window saying that all at least one product must be added to the look, when the user clicks add to cart.
Behavior When Selecting A Variant That Is Out Of Stock
Standard behavior is to display a (configurable) message across the product image. The quantity input element for this product is disabled so it isn't possible to add it to the look. Note that currently we do not support filtering out or indicating in the product form that a variant is out of stock. The customer won't know that a variant is out of stock until he selects it!
Behavior When All Variants of A Product Are Out Of Stock
A (configurable) message is displayed across the product image. All input fields for the product are disabled, making it impossible to select another variant and to add it to the look.
Behavior When Changing An Input Field in A Product Form
Each time the value of an input field is changed, up to 5 things will be updated:
- If a new variant is selected, the data for this product variant will be shown
- If the quantity field was changed the "Items" counter, displaying the total number of items added to the look, is updated.
- The total price will be updated (even if it is just, say, a color drop down that is changed, since different variants of the same product could have different prices).
- The presence of the checkmark indicating that a product is added to the look is updated if the quantity of a product changes to or from 0.
- The add to cart button is disabled or enabled, respectively, if the the total number of products added to the look changes to or from 0.
Behavior When Adding To Cart
Immediately after clicking the add to cart button, the button is disabled, meaning that the user can't (accidentally) add the products multiple times. The window will hang until the communication with the customer's shopping cart system is done (no progress indicator is currently supported). It will then trigger either a success or error window, depending on whether the add-to-cart operation finished successfully or not.