App Scripts

Zid App Scripts allow merchants to inject custom JavaScript directly into their storefront through the Partner Dashboard. This enables dynamic user interactions and personalized experiences.

This documentation outlines the process of injecting global scripts and implementing event-specific scripts that respond to user actions in real-time.

Global and Customer Object Scripting

Zid’s API supports two types of global objects for advanced scripting:

Global Object: Loads upon page initialization and can include custom JS utility files.

Customer Object: Contains details of the currently logged-in customer. If no user is logged in, the object remains empty.

Global Object Parameters:

Parameter	Description
`window.customer`	Contains details of the logged-in customer. Empty if no user is logged in.

Customer Object Blueprint:

Parameter	Description
`id`	Unique identifier for the customer
`name`	Full name of the customer
`mobile`	Mobile number of the customer
`email`	Email address of the customer

These global objects enable dynamic interactions and personalized user experiences.

Event-Driven Scripting

Zid supports event-driven scripting, allowing JavaScript execution in response to specific storefront events. These events trigger JavaScript functions to track user interactions and enhance engagement.

Supported Events:

Purchase Event

Product View Event

Add to Cart Event

Remove from Cart Event

Start Checkout Event

(Please note that productCart refers to the product in the cart, and productViewd refers to the viewed product. The unconventional spelling is consistent with the codebase.)

1. Purchase Event

Parameter	Description
transactionItems	List of products the user purchased.
id	Order Id
product id	Product Id
name	Product Name
sku	Product Sku code
category	Product Category Name
price	Product Price
quantity	Product Quantity
currency	currency
total	Product Total

2. Product View Event

Parameter	Description
productViewd	Single product details object.
id	Product Id
name	Product Name
category	Product Category Name
price	Product Price
position	Display Order

3. Add to Cart Event

Parameter	Description
productCart	Single product cart object.
id	Product Id
name	Product Name
category	Product Category Name
price	Product Price
position	Display Order
list	Name of page
quantity	Product Quantity

4. Remove from Cart Event

Parameter	Description
productCart	Single product cart object.
id	Product Id
name	Product Name
category	Product Category Name
price	Product Price
position	Display Order
list	Name of page
quantity	Product Quantity

5. Start Checkout Event Parameters

Parameter	Description
`cart_id`	Unique identifier for the shopping cart.
`cart_total`	Total value of the cart.
`currency`	Currency used for the transaction.
`items`	List of items in the cart, each represented by its own object.
`item_id`	Unique identifier for each product in the cart.
`item_name`	Name of the product.
`item_price`	Price of the product.
`item_quantity`	Quantity of the product in the cart.
`item_category`	Category of the product.
`user_id`	Unique identifier of the user (if logged in).
`session_id`	Unique identifier for the session (if user is not logged in).
`cart_discount`	Any discount applied to the cart.
`shipping_cost`	Estimated shipping cost for the cart.
`checkout_step`	Current step in the checkout process (e.g., shipping, payment, confirmation).
`payment_method`	Selected payment method (if chosen).

Script Injection for App Partners

Custom Snippets allow you to inject scripts into stores where your app is installed, enabling enhanced functionality, better store customization, and seamless integration. This feature provides flexibility to optimize the merchant experience without requiring them to manually modify their store’s code.

How to Enable Custom Snippets

Before publishing, always test your changes in a development store to ensure smooth functionality. Optimize scripts for performance to prevent any impact on storefront loading times.

Open the Partner Dashboard and navigate to the General Settings of your app.

Click on Add Snippet and enter your JavaScript or CSS snippet in the provided field.

Define the snippet’s placement and configure any required parameters.

Submit your changes for review and approval. You can modify or remove the snippet from your app at any time.

Global and Customer Object Scripting#

Global Object Parameters:#

Customer Object Blueprint:#

Event-Driven Scripting#

1. Purchase Event#

2. Product View Event#

3. Add to Cart Event#

4. Remove from Cart Event#

5. Start Checkout Event Parameters#

Script Injection for App Partners#

How to Enable Custom Snippets#

Global and Customer Object Scripting

Global Object Parameters:

Customer Object Blueprint:

Event-Driven Scripting

1. Purchase Event

2. Product View Event

3. Add to Cart Event

4. Remove from Cart Event

5. Start Checkout Event Parameters

Script Injection for App Partners

How to Enable Custom Snippets