[Shopify] Custom javascript event hooks

Sometimes you may need to perform certain actions based on what happens in Zakeke. 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.

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

The fucntion must return back the updated props object

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

<script>

  async function zakekePostprocessProperties(props, context) {

    // Get the content of the customization

    const response = await fetch(`https://api.zakeke.com/v1/designs/${context.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>