Directives are markers on a Document Object Model (DOM) element which enable you to interact with the Store Builder Library (SBL) through HTML. You can use directives to pull product and order information from your store, and display the information on your website.

Product-Level Directives

Product directives retrieve information regarding a specific product to display on your website. Each directive typically requires the following:

• The SBL script
• A path to the specific product following “data-fsc-item-path=…”
• The attribute you hope to retrieve following “data-fsc-item-…”

This information fills the element that the directive is applied to. In the opening tag, include the path and attribute you want to retrieve.

<span data-fsc-item-path="example-product1" data-fsc-item-display>
	<-- Text here will contain information that is pulled from your Store -->
</span>

Product directives retrieve information based on your store's configuration. When the page loads, it makes a request against Builder. This returns a JSON response that displays information including:

• Payment information
• Country
• Order total
• All products associated with the storefront

You can also return information on a product that is unassociated with the SBL.

1. In the console, type in fastspring.product.add(“ “)
2. Within the parentheses, type in the product path of the applicable product.
3. Run the script. The product will be added to the items list and reflected in the products list.

List of Product-Level Directives

Product Path

• data-fsc-item-path: This is the determinate directive. It gives the SBL the product path that you want to work with.

Product Attribute

• data-fsc-item-display: Product display name.
• data-fsc-item-image: Product image path.
• data-fsc-item-description-summary: Short description of the product.
• data-fsc-item-description-full: Long description of the product.
• data-fsc-item-description-action: Call to action associated with the product. This is used to populate action buttons.
• data-fsc-item-selected: Boolean; true adds the item to the order session.
• data-fsc-item-path-element: Product path.
• data-fsc-item-pid: Product ID code.

Product Quantity

• data-fsc-item-quantity: Prodcut quantity in the order. The default value is 1 and 'selected=false'. See data-fsc-item-selected for more information.
• data-fsc-item-quantity-value: Value setter used with data-fsc-action=”Update”. Include input and output tags.
• data-fsc-item-quantityEditable: Boolean; true allows customers to edit the product quantity in their cart.
• data-fsc-item-removable: Boolean; true allows customers to remove the product from their cart.

Product Discount

• data-fsc-item-unitDiscountValue: Numeric discount value for each unit.
• data-fsc-item-discountPercentValue: Discount percentage for each unit.
• data-fsc-item-discountTotal: Total discount for the line item.
• data-fsc-item-discountTotalValue: Numeric discount price total for the product.

Product Price

• data-fsc-item-price: Product price. The SBL will convert the price to the currency associated with the customer's IP address.
• data-fsc-item-priceValue: Numeric value of the price.
• data-fsc-item-priceTotal: Customer-facing price display. This includes the currency symbol.
• data-fsc-item-priceTotalValue: Price total for the selected quantity.
• data-fsc-item-unitPrice: Customer-facing unit price after discounts. This includes the currency symbol.
• data-fsc-item-unitPriceValue: Numeric value of unit price.
• data-fsc-item-total: Price total after discounts are applied.
• data-fsc-item-totalValue: Numeric price total after applying discounts.

Order-Level Directives

Order-level directives retrieve information regarding current order sessions. Each directive requires the following:

• SBL script
• The attribute you would like to retrieve following “data-fsc-order-”

This information fills the associated element. In the opening tag, include the path and attribute you would like to retrieve. In the example below, the directive retrieves the order total.

<span data-fsc-order-total>
	<-- Text here will be filled -->
</span>

Order-level directives do not return personal information, such as email addresses, phone numbers, and credit card information.

List of Order-Level Directives

Order Price

• data-fsc-order-discountTotal: String; total discount amount.
• data-fsc-order-discountTotalValue: Number; total discount amount.
• data-fsc-order-total: String; total order amount.
• data-fsc-order-totalValue: Number; total order amount.
• data-fsc-order-promocode: Promocode associated with the order, if any.
• data-fsc-promocode-value: HTML directive that enables you to set an input as the promo code.

OrderTax

• data-fsc-order-taxType: Tax type that is currently applied to the order.
• data-fsc-taxid-value: Add a Tax ID to the order to exclude VAT. This requires a data-fsc-order-taxId input and an action button containing
  data-fsc-action=”TaxId”
• data-fsc-order-tax: Customer-facing tax amount.
• data-fsc-order-taxRate: Percentage of tax.
• data-fsc-order-taxValue: Number; tax amount.
• data-fsc-order-totalWithTax: String; order total including tax.
• data-fsc-order-totalWithTaxValue: Number; order total including tax.

Order Localization

• data-fsc-order-currency: 3-digit currency code.
• data-fsc-order-country: Country from which the order was processed. This is based on the customer's IP address.
• data-fsc-order-language: Language of the order. This may be based on the customer's browser settings, or your store settings.

Smart Display

Smart display attributes can display or hide information based on the product's status in the shopping cart. You can configure these with the data-fsc-smartdisplay attribute.

In the example below, the SBL adds a button to your website depending on the status of the applicable product. The "Add to Cart" text displays on a button if the Phot.io Main App product is not in the cart. The "Remove From Cart" text displays on the button if the Phot.io Main App product is in the cart.

<button data-fsc-item-path-value="phot-io-main-app" data-fsc-action="Add" data-fsc-item-path="phot-io-main-app" data-fsc-item-selection-smartdisplay-inverse>Add to Cart</button>

<button data-fsc-item-path-value="phot-io-main-app" data-fsc-action="Remove" data-fsc-item-path="phot-io-main-app" data-fsc-item-selection-smartdisplay>Remove from Cart</button>