Custom JS for an Add To Cart rendered by a script

[Mivy]

I have a script that renders an add to cart button, and I have added an event listener for this. Since the add to cart button is rendered by a script, where would I place my custom JS(that has the event listener) in the liquid pages? I am a newbie in Shopify. 

[GlennRivermint]

Hey Mivy!

I am a little confused with "add to cart button is rendered by a script". This would be my approach, let me know if it helps. Liquid is a server-side templating language, so you can leverage it to render the template, and you know that the script will execute after the ATC button exists.

1. Render add to cart button from .liquid file (server side)
2. Load script within template
3. Attach event listener to add to cart button (client side)

Here is a good explanation if it helps!

[Mivy]

Hi GlennRivermint,

I had been thinking about this same approach:

1. Render add to cart button from .liquid file (server side)
2. Load script within template
3. Attach event listener to add to cart button (client side)

So here is the setup I currently have:

1. I have a script (from our external store), that I am calling and included it in one of our pages.

2. It has its own Add To cart button

3. I created a event listener for that add to cart button.

4. I do not know where to include this event listener/script. 

However, I am not sure which template I should be including my event listener to.  Since I have a custom event listener for that api, should I add it on the same .liquid file I have used for the api? I hope it makes sense.

[GlennRivermint]

Yer that makes sense, can definitely be a bit of a tricky one. Often other sections will have the same ATC functionality (eg Featured Product, Quick Add Modal etc).

It is hard to comment without seeing your codebase, what theme are you starting on?

Can you pass through a website link? Should be able to point you in the right direction 🙂  

[Mivy]

Hi GlennRivermint,

OEM Parts – staging-maddparts is the link. PW is shawyo. The theme that I am using is Dawn.

[GlennRivermint]

Okay great!

Dawn uses Web Components, which are honestly AMAZING! They solve this exact issue by running their code only after the component renders. 

You will noticed when inspecting the code, the ATC button in wrapped in a `product-form` component. To add functionality to this, you will need to look at the `product-form.js` file in the assets folder.

It might be confusing at the start but spend some time getting to know the use. WebComponents are used throughout the site and once you get the hang of them, its hard to go back!

[Mivy]

oh ok! so does this mean, I can add my event listener in this script?

[Mivy]

Also, is it wise to call the script in the templates.json file instead of using the page .liquid files?

[GlennRivermint · Accepted solution]

Absolutely,

If you look at the current website, you will be able to see the examples of an event listener being attached.

For the json template, please refer to the Shopify docs.

It would be worth exploring the docs to get your head around how the platform functions. Best of luck with it!