[Shopify] Custom javascript event hooks

Sometimes you may need to perform certain actions based on what happens in Zakeke (for example on the add to cart). For that, we have some custom events that you can define to perform your action based on those events. In this article, we are going to talk about these custom events.

There are two types of custom event hooks Product Personalizer currently provides.

1. Add additional cart item properties to the cart item added by Zakeke (like adding your own SKU property)
   
2. What do to after the add to cart is completed (like redirecting to a different page rather than the cart one, or add additional products to the cart beside the customized one)
   

1) Add additional cart item properties to the cart item added by Zakeke

Let’s say you want to do some additional properties to the customized cart item in the cart page. You might need to perform some task that query external datastore and/or inspect the design done by using the design done and add some properties based on these (like adding an SKU property which its content is based on how the product was designed). You can simply do that by defining a javascript function named zakekePostprocessProperties in the global scope. That function will be called by Zakeke and will have as input an object with these properties

Name	Description
props	An array of properties added by Zakeke
context	An object containing additional information from the Zakeke env

Now let’s see how you can use this custom function:

<script>

  async function zakekePostprocessProperties(props, context) {

    // Get the id of the customization

    const design = props._customization || props.customization;

    const response = await fetch(`https://api.zakeke.com/v1/designs/${design}/items`, {

      method: 'GET',

      headers: {

        'Content-Type': 'application/json',

        'Authorization': `Bearer ${context.token}`

      }

    });

    if (response.ok) {

      //Your logic to check the content of the response

      //and update the properties accordingly

      const items = await response.json();

      props['custom property'] = 'Your value';

    }

    return props;

  }

</script>

 

2) What do to after the add to cart is completed

Let’s say you want to perform some tasks after Zakeke added the customized product in the cart. In that case, you can define a zakekeAfterAddToCart function. Whenever customers complete their customization and press the Add to Cart button, the “zakekeAfterAddToCart” function gets called. If you define this function, you should also handle the redirecting to the cart page after the function completed its tasks.

Zakeke will pass to that function take as input an object context with the following proprerties:

Name	Description
design	The id of the customization done
total_quantity	The total quantities of the products added to the cart (it takes into consideration also the bulk functionality of Zakeke)
product	Information about the Shopify product begin customized and its metafields

Now let’s see how you can use this custom event:

<script>

  async function zakekeAfterAddToCart(context) {

    // Example of how to add an additional product to the cart beside the customized one based on a metafield

    if (context.product.metafields && context.product.metafields.additiona_cost_variant_id) {

      await fetch("/cart/add.js", {

        "credentials": "include",

        "headers": {

          "Accept": "application/json, text/javascript, */*; q=0.01",

          "Content-Type": "application/x-www-form-urlencoded; charset=UTF-8",

          "X-Requested-With": "XMLHttpRequest",

          "Sec-Fetch-Dest": "empty",

          "Sec-Fetch-Mode": "cors",

          "Sec-Fetch-Site": "same-origin",

          "Pragma": "no-cache",

          "Cache-Control": "no-cache"

        },

        "body": "id=" + context.product.metafields.additiona_cost_variant_id + "&quantity=1&properties%5BisFee%5D=true&properties%5Bcustomized_group%5D=" + context.design,

        "method": "POST",

        "mode": "cors"

      });

    }

    // Redirect to cart page after

    window.location.href = '/cart';

  }

</script>