Dynamic comparison developer API

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();