Dynamic comparison developer API

Interacting with modal and products

By default, the app embed adds a floating button that can be enabled on all (or a subset) of pages of your store. When clicked, the modal opens to show the compared products.

However, you might want to create a custom integration, such as:

• Showing a custom button to open the dialog
• Creating a link on a menu to open the comparison
• Adding or removing manually products to the compared list

To interact with the API, you must first retrieve the global dynamic compare instance:

const dynamicCompareInstance = document.querySelector('sc-dynamic-compare');

Once you have the instance, you can call the following methods to interact with the API:

• openModal: open the dynamic comparison modal. The app will automatically re-renders the products.
• closeModal: close the dynamic comparison modal.
• containsProduct: accept a product handle and returns true or false if the product is in the compared list.
• getCount: get the number of products being dynamically compared.
• getHandles: get the list of product handles being compared.
• addProduct: accept a product handle to be added to the comparison list.
• removeProduct: accept a product handle to be removed from the comparison list.
• toggleProduct: add a product to the comparison list if not in it, or remove it if already in the comparison list.
• clearProducts: remove all the products from the comparison list and close the modal automatically.

Here are a few examples of how you can interact with it:

const dynamicCompareInstance = document.querySelector('sc-dynamic-compare');

dynamicCompareInstance.addProduct('foo');
dynamicCompareInstance.addProduct('bar');
dynamicCompareInstance.openModal();

Creating a custom "add to compare" button

By default, the app injects a button with a checkbox and the text "Add to compare." This works well in most cases, but you may prefer to display it differently—for example, with a custom icon that matches your brand or in a specific position on your product cards. To customize this, follow these steps:

1. Disable the default button:

Go to the "Dynamic Compare" app embed settings and turn off the "Show add to compare" option. This ensures the app no longer injects the default button into your product cards.

2. Customize your product cards:

Edit your product cards' Liquid code to include your custom design. To simplify the process, the app provides the web component sc-add-to-compare that handles all the functionality for adding and removing products from the comparison list.

To implement it:

1. Wrap your custom code with the sc-add-to-compare custom element.
2. Add the product-handle attribute to specify the product.
3. Ensure the button includes a checkbox. If you don't want the checkbox to be visible, you can add the hidden HTML attribute.

This approach allows you to seamlessly integrate the "add to compare" feature into your product cards while maintaining full control over its appearance and placement.

<sc-add-to-compare product-handle="{{ product.handle }}">
  <input type="checkbox" hidden />
  <!-- YOUR CUSTOM BUTTON -->
</sc-add-to-compare>

In CSS, you can use the :checked pseudo-element to style your button differently depending on whether the product is added to the dynamic list or not.