Toggle Icon on Add to Cart Button onclick

webg1rl
Tourist
6 0 1

Hello,

I would like to include a product add-on box on our product pages without an app.  It's simply a box with a short description and a plus icon, and when clicked, the item is added to the cart.  However, the visitor stays on the current page, so they may not know it has been added. I would like the plus icon to change to a checkmark once added.  It would also be fine if a message appeared that said "added to cart".  I have found methods to toggle an icon and the suggested method here works in our Debut theme:  

https://stackoverflow.com/questions/45494301/changing-font-awesome-icon-onclick-function/45494610

My problem is, I do not know how to integrate this method with the current button form.  Here is my code for the box:

 

<div class="add-on-container">
<span style="color: #000;" data-mce-style="color: #000;"><strong>Add 1-Year of Supplies (optional):</strong></span> <button class="popup-toggle" onclick="togglePopup()">What's in the pack?</button> <br>
<div class="add-on-wrapper">
<div class="flexbox-container">
<div style="width: 120px !important;"><img alt="Replenishment Pack - ALP" src="//cdn.shopify.com/s/files/1/0027/1613/9581/files/alp-pack-sm.jpg?v=1602235119" class="box-left"></div>
<div style="padding: 5px; width: 100%;">
<strong>Replenishment Pack - ALP</strong><br>Want a full year of supplies? We recommend the Replenishment Pack - ALP (Automatic Lure Pump).<br><strong>+$39.99</strong><form method="post" action="/cart/add/7824295067709">
<input type="hidden" value="{{ product.variants.first.id }}"> <input type="submit" class="plus-add" id="collection_add" value="+"> <input type="hidden" name="return_to" value="back">
</form>
</div>
<br style="clear: both;" data-mce-style="clear: both;">
</div>
</div>
</div>
<div id="popup-1" class="popup">
<div class="overlay"></div>
<div class="content">
<div class="close-btn" onclick="togglePopup()">×</div>
<br>
<h1>Replenishment Pack - ALP</h1>
 
<div style="text-align: left;" class="one-half-column-left">
<h2>Kit Includes:</h2>
<ul>
<li>2 X Rat and Mouse Lure Pumps</li>
<li>2 X CO2 cartridges</li>
<li>1 X Set of Lure Taster Card</li>
</ul>
</div>
<div class="one-half-column-right"><img width="300" class="aligncenter" src="https://cdn.shopify.com/s/files/1/0027/1613/9581/files/alp-pack-med.jpg?v=1602235876"></div>
</div>
</div>

 

It looks like this: 

Product-Addon.jpg

I don't think I need to include the CSS because it's using Shopify's button code and I've just used CSS to style the box.

I am still somewhat new to the forum and have only posted a few times, so I apologize if I am missing anything important.  Any suggestions would be really, really appreciated.  I have been working on this for quite a while and not really making any progress!

0 Likes