Welcome To FastSpring Examples



Table of Contents

HTML Directives [+]

There are three basic categories to SBL HTML directives: Product Level Directives, Order Level Directives, and Actions. The Product and Order level directives are mainly "read/get/attribute" style directives. The Action portion of the HTML Directives allow "writing/setting" information.

  • Product Level Directives [+]

    Utilize Product Level Directives in order to retrieve information about a single product. These directives usually require three things:

    1. The script for the SBL in the page head tags
    2. A path to a specific product - data-fsc-item-path="..."
    3. The attribute you are trying to retrieve - "data-fsc-item-..."
    These fill text in a span tag. In the opening tag you will provide the path data-fsc-item-path="item-path", and also the attribute you want to retrieve. An example of what this will look like is:

    <span data-fsc-item-path="furious-falcon" data-fsc-item-display>
    	<-- Text here will be filled -->
    </span>
    
    

  • Order Level Directives [+]


  • Actions [+]

    • Add - Product level action which adds item to cart - only changes selected from false to true - does not effect quantity. Note: Requires product path as defined by fsc-item-path-value
    • Remove - Removes PRODUCT from cart - sets quantity to 1 and selected to false Note: Requires product path defined by fsc-item-path-value
    • Update - Allows you to specify the quantity of an item. Note: Requires product path defined by fsc-item-path-value and the nearest input/select field
    • Promocode - Allows application of a coupon through a script or page element Note: Requires an input for data-fsc-promocode-value and a button for data-fsc-action
    • TaxId - Allows application of a VAT exemption code Note: Requires an input for data-fsc-order-taxId and a button for data-fsc-action. Use fastspring.builder.taxId
    • Reset - Allows for the cart to be completely emptied Note: Does not require anything else. Can just put data-fsc-action="Reset" in button
    • Checkout - Action for immediate checkout Note: Does not require anything else. Can just put data-fsc-action="Checkout" in button or can be chained with "Add" and an item path.
    • Replace - Used on an upsell to replace current item in cart with upsell Note: Only works on upsells and requires data-fsc-item-path-value to the upsell product
    • Chained Actions - Allows you to chain several action together on a single button click. Note: Will require any html directives of included actions.

Methods - JavaScript Functions [+]

Callbacks - JavaScript Functions [+]

  • data-data-callback - A JavaScript function you should provide, which will be invoked when new JSON ("order object") is obtained from the server. This function must accept 1 parameter, an object.
  • data-error-callback - A JavaScript function you should provide, which will be invoked when an error is received from the backend. This function must accept 2 parameters, an error code and an error string.
  • data-before-requests-callback - A JavaScript function you should provide, which will be invoked before the request is performed. No parameters are passed to this function.
  • data-after-requests-callback - A JavaScript function you should provide, which will be invoked after the request is performed. No parameters are passed to this function.
  • data-before-markup-callback - A JavaScript function you should provide, which will be invoked before the markup is performed. No parameters are passed to this function.
  • data-after-markup-callback - A JavaScript function you should provide, which will be invoked after the markup is performed. No parameters are passed to this function.
  • data-validation-callback - An optional JavaScript function you can provide, which must accept a JSON object consisting of an array with field validation results. This makes it easier to display user-friendly field validation error messages.
  • data-popup-webhook-received - A JavaScript function you may provide, which will be invoked when the webhook event is received from the Popup store. This function must accept 1 parameter, an object. To setup webhooks, login to Dashboard and navigate to Integrations > Webhooks. At least one event will always fire on successful order containing basic order information.
  • data-popup-closed - A JavaScript function you may provide, which will be invoked when popup is closed. The function must accept an object which will contain the internal FastSpring order ID (key: id) and a customer-facing order reference (key: reference). The order id will only be passed upon successful order completion. If the popup is closed before the order is completed, "null" will be passed.