How do you extract the product card JavaScript from the Refresh theme?

If you haven't read the article "How do you extract the product card CSS from the refresh theme?", please click the link. This article is a continuation of that one.

The CSS has been successfully added to the custom code. Next, you will be guided through the steps to configure and add JavaScript from your theme into the custom code section.

The method for retrieving the JS URL is the same as for retrieving CSS. Some of the common locations where the JavaScript is sourced from include

Inside the <body> section tag

Inside <main> -> <div>

Inside <main> -> <div> -> <div>

Note:

For example, when the code is retrieved, it appears like this:

//store-for-mozilla-mac.myshopify.com/cdn/shop/t/3/assets/cart.js?v=25986244538023964561747021649

replace the code with

https://store-for-mozilla-mac.myshopify.com/cdn/shop/t/3/assets/cart.js

Repeat this method to collect all the required JavaScript files. Once all the JS is retrieved from that section, you'll also get several CSS bundles, as shown in the example below:

Once collected, we'll place the JavaScript into the custom code section. However, you need to insert the JS URL into the predefined function so it can run properly in the Sledge app. Here's an example of the code.

loadScript('https://store-for-mozilla-mac.myshopify.com/cdn/shop/t/3/assets/quick-add.js')

Paste the JS code into the custom code section as shown in the image below, then click the Save button in the top-right corner (indicated by the red arrow)

before:

after

The purpose of adding the JS URL is to bring the JavaScript functionality from your theme into the Sledge app. Once the JS functions are successfully running in Sledge, one of the expected results is the cart drawer appearing on the right side

Here’s an example

The tutorial is complete, but the product card layout still appears disorganized in the customizer.

To fix the preview in the customizer, please click How can you fix the appearance of the product card in the preview customizer when it's using HTML, CSS, and JavaScript from your theme?