Product level directives are markers on a DOM element that allow you to interact with the FastSpring Store Builder Library through HTML. They are used to retrieve information about a single product. These directives typically require three parts:
- The Store Builder Library Script
- A path to a specific product – “data-fsc-item-path=…”
- The attribute you are wanting to retrieve – “data-fsc-item-…”
These fill the element that the directive is applied to. In the opening tag you will provide the path and the attribute you want to retrieve. An example will look like this:
<span data-fsc-item-path="furious-falcon" data-fsc-item-display>
<-- Text here will be filled -->
</span>Product Level Directives
- Product Path Directive:
- data-fsc-item-path – This is the determinate directive. It gives Store Builder Library the path for the product you want to work with.
- Product Attribute Directives:
- data-fsc-item-display – Product display name
- data-fsc-item-image – Product image path
- data-fsc-item-description-summary – Product’s short description
- data-fsc-item-description-full – Product’s long description
- data-fsc-item-description-action – Product’s call to action (use to populate action buttons
- data-fsc-item-selected – Is this product added to Order? – Boolean
- data-fsc-item-path-element – This is stored product path
- data-fsc-item-pid – This is the product ID code
- Product Quantity Directives:
- data-fsc-item-quantity – Quantity of this product in order. Note: Default is 1, but ‘selected=false’, see data-fsc-item-selected
- data-fsc-item-quantity-value – Used in conjunction with ‘closest’ data-fsc-action=”Update” Note: This is a value ‘setter’ – used with input or select tags
- data-fsc-item-quantityEditable – Boolean value for whether product can be edited in order
- data-fsc-item-removable – Boolean value for whether product can be removed from order
- Product Discount Directives:
- data-fsc-item-unitDiscountValue – Numeric discount value for each unit
- data-fsc-item-discountPercentValue – Discount percentage for each unit
- data-fsc-item-discountTotal – Discount ‘Pretty’ price total for product
- data-fsc-item-discountTotalValue – Numeric discount price total for product
- Product Price Directives:
- data-fsc-item-price – ‘Pretty’ price with currency symbol
- data-fsc-item-priceValue – Price numeric value
- data-fsc-item-priceTotal – ‘Pretty’ price with currency symbol (no discounts) – (quantity x priceValue)
- data-fsc-item-priceTotalValue – Total price for the quantity of the single product – (quantity x priceValue)
- data-fsc-item-unitPrice – Pretty unit price after discounts – (quantity x priceValue – unitDiscountValue)
- data-fsc-item-unitPriceValueNumberic value of unit price – (quantity x priceValue – unitDiscountValue)
- data-fsc-item-total – Total after any discounts
- data-fsc-item-totalValue – Numberical price total after any discounts
- Advanced Product Directives:
- data-fsc-smartdisplay – Allows for dynamic buttons/information ie button says “Add to cart” first but then “Checkout” after clicked.
- data-fsc-autoapply – When applied to quantity input element, no submit button click event needed for xhr update, will xhr update on keyup and change events.
- data-fsc-item-data-fsc-driver-item-path-value – Allows an upsell to replace the original item in a cart (must be configured as an upsell.