Refresh Shopify Cart’s UI on Updates via Convert

Intended audience

This guide is intended for developers working on e-commerce stores that meet the following criteria:

• have access to Gorgias Convert

Introduction

This tutorial explains how to refresh your Shopify cart’s UI when updates are triggered by the Convert addon.

When a product is added to a shopper’s cart via Gorgias Convert — for example, when the shopper clicks the “Add to Cart” button in the chat — the Shopify cart content is updated. However, this update is not automatically reflected in your store’s UI.

Because Shopify themes vary widely, the exact method of updating the cart must be implemented by your website. To facilitate this, we provide an event that is dispatched after the cart is updated by Convert. You can listen for this event to implement your custom UI logic, such as updating the cart icon counter or refreshing the cart drawer.

Step 1: Initialize GorgiasBridge

Gorgias provides access to the GorgiasBridge API by attaching it to the browser's window object. However, we need to ensure the API is fully initialized before calling any of its methods.

Place the following code snippet close to where you create the Shopify cart or checkout object:

var initGorgiasBridgePromise = (window.GorgiasBridge) 
		? window.GorgiasBridge.init() 
		: new Promise(function (resolve) {
				const timer = setTimeout(() => reject(), 500);
				window.addEventListener('gorgias-bridge-loaded', function () {
						clearTimeout(timer);
						resolve();
				})
		});

initGorgiasBridgePromise.then(async () => {
	// Cart updates subscription will happen here
})

We will populate the then block in the steps below.

🚧

When using GorgiasBridge in a <script></script> tag in your HTML, always use the init().then(...) pattern. This ensures your script runs only after the GorgiasBridge has been downloaded and initialized.

Step 2: Subscribe to Cart Updates

We provide a helper function to subscribe to cart update events:

window.GorgiasBridge.subscribeToCartUpdated(function() {
  // Your custom code goes here
  console.log('Gorgias - Cart has been updated!')
})

This function allows you to run any custom behavior when Gorgias updates the cart, such as refreshing the UI or updating any relevant cart elements on your site.

Example: Cart’s icon counter UI Refresh

Here’s a basic example of how you might refresh the cart UI after a cart update:

async function refreshCartUI() {
  const cart = await fetchCart() // GET /cart.js
  const cartIconCounter = document.getElementById('cart-icon-counter')
  cartItemsCounter.innerHTML = cart.item_count
}

window.GorgiasBridge.subscribeToCartUpdated(refreshCartUI)

In this example, when the cart is updated, the refreshCartUI function is called, fetching the latest cart data and updating the cart’s icon counter in your store’s UI.