Directives

Display store information on your website.

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

Product Quantity

Product Discount

Product Price

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

OrderTax

Order Localization

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>

Did this page help you?