Javascript Event API

If you need to customize parts of the purchase process to meet a specific need, Giftship offers a Javascript API to allow you to get data programatically. There are two main components to this API – methods, and events.

Events

Events are triggered when a certain action occurs with the app. You can register event listeners in your theme, or the custom javascript section within Giftship in order to listen for these events, and run custom actions based on your needs. The following code provides an example of each of the available events.

<script>


      /**
       * This event is triggered whenever the app loads. You can then detect which page you are on using the get page method outlined in the next section
       */
      document.addEventListener('giftship.loaded', function() {

        const currentPage = window.GSSDK.page.get();
        console.log("Giftship loaded - current page is: ", currentPage);

      });

      /**
       * This event is triggered whenever Giftship needs to repaint the page, or re-initialize for any reason.
       * This occurs when an upsell is added on the cart page, or, when a discount code is added during the multiple shipping address process.
       */
      document.addEventListener('giftship.reloaded', function() {

        const currentPage = window.GSSDK.page.get();
        console.log("Giftship loaded - current page is: ", currentPage);

      });

      /**
       * This event is triggered when the multi-address shipping rate page has sorted the items in your cart by address,
       * and is ready to start loading shipping rates.
       */
      document.addEventListener('giftship.shipping.ready', function() {

        const shipments = window.GSSDK.shipments.get();
        console.log("Shipping rates are about to start loading", shipments);

      });

      /**
       * This event is triggered when a value on the form changes
       */
      document.addEventListener('giftship.shipping.rate-loaded', function(event) {

        const rates = event.detail.rates;
        const address = event.detail.address;

        console.log("Shipping rate loaded with the following details: ", address, address, event.detail.index);

      });

      /**
       * This event is triggered when a value on the form changes
       */
      document.addEventListener('giftship.shipping.rates-complete', function() {

        console.log("All shipping rates are now loaded");

      });


      /**
       * This event is triggered when the step details are loaded, such as products
       */
      document.addEventListener('giftship.builder.step-loaded', function(event) {

        console.log("Builder step has loaded", event.detail);

      });
   
      /**
       * This event is triggered when the navigation is loaded
       */
      document.addEventListener('giftship.builder.navigation-loaded', function(event) {

        console.log("Builder navigation has loaded", event.detail);

      });
   
      /**
       * This event is triggered when the contents of the builder change, or when the items are loaded
       */
      document.addEventListener('giftship.builder.contents-loaded', function(event) {

        console.log("Builder contents have loaded", event.detail);

      });

      /**
       * This event is triggered when the current step status is updated, such as when a step is completed.
       */
      document.addEventListener('giftship.builder.step-status-updated', function(event) {

        console.log("Builder step status has updated", event.detail);

      });

      /**
       * This event is triggered when the cart has been updated with bundled products, if configured to do so before the checkout button is clicked.
       */
      document.addEventListener('giftship.bundle-updated', function(event) {

        console.log("The cart has been updated with bundled products.", event.detail);

      });

      /**
       * This event is triggered when the datepickers value is updated.
       */
      document.addEventListener('giftship.datepicker.updated', function(event) {

        console.log("The datepicker has changed", event.detail);

      });

</script>

Methods

Methods can be used to get details from Gift Card Pro, and set form values programatically. The above example includes these methods, which are used within the event listeners. Methods should only be used once the page is fully loaded, which can be detected by the “gcp-page-loaded” event. The following methods are available:

// Gets page data
window.GSSDK.page.get();

// Gets shipment groups - only applies on multi-address shipping page after the giftship.shipping.ready event has fired.
window.GSSDK.shipments.get();