Conditionally Render Snippets based on Button Clicks

Conditionally Render Snippets based on Button Clicks

munzah-shah
Shopify Partner
3 0 0

Hello there, 

Can someone help me identify some potential solutions for the following use case:

 

I want to render some liquid snippets conditionally, based on the button clicks. I have two snippet files, let's say: fileA.liquid and fileB.liquid. And I have two buttons and each button serve as a purpose of deciding what will be customer's choice for purchase options. Here's a simplified version of code for my buttons:

 

<div>
<button id="one-time-purchase-btn"> One Time Purchase</button>
<button id="subscribe-btn">Subscribe & Save (Up To 25%)</button>
</div>

 

Based on what user clicks, I want to conditionally render the two snippet files (mentioned above). For example, if user clicks the first button (One Time Purchase), I would like to render fileA.liquid and if customer clicks the second button (Subscribe & Save), I want to render fileB.liquid.

 

I cannot assign JS variables to liquid since that's not possible. So what would be the best way to achieve this functionality? 

 

Thanks In Advance 🙂

 

 

Replies 0 (0)