So I am working on setting up a Shopify store for the company I work for, we sell travel books. On the Shopify theme I am using Bold's Product Options app so that we can include all of our book option variants (we only have one option of 'Volume' with between 1 - 6 variants depending on how many volumes of that particular book we have) in a bundle option that is sold for one flat fee. The problem I'm having with the Bold Product Options app is that when you create the option based on your variants it can only effect the price, not the inventory, of that product. This is great for individual books - you select volume 1 & 2 the price increases from $10 to $20, but for our bundles that are at a consistent price it doesn't work, it keeps adding $10 for each volume added to the bundle. So instead of getting 3 books for $25 you get three books for $55 dollars. I looked into the code and it looks like the problem is a .price-change class that is added to each input checkbox for each volume. When I remove this using Google Chrome's editor the bundle goes through with the item selected and the price doesn't increase. My question is how can I remove this class from the plugin? What I would like to do is make a custom product.liquid template strictly for bundles and put some jQuery in there to remove that class. The bundle options are pulled from a third party server - the only code I see in the liquid template is...
<!-- Bold Apps: Product Options --> {% include 'shappify-options' %}
And when I look at the source code is shows...
<!-- Bold Apps: Product Options --> <div style='display:none' id='shappify_custom_options_401405627'></div><script async src="//secure.apps.shappify.com/apps/options/generate_options.php?shop=tsgtestsite.myshopify.com&product_id=401405627"></script>
I've tried adding this jQuery code at the bottom of the product template but it doesn't remove the class...
<script>
$( document ).load(function() {
$("div.shappify_check_option input").removeClass("price-change");
});
</script>
Here's an screenshot of what the code looks like when I show it in the editor next to the html output...
[1]: https://i.sstatic.net/4Fb9X.png
If you have any suggestions or any experience with this before I would really appreciate how to solve this problem. All I need to do is remove this dark class.
Thanks!
try this,
$( document ).ready(function() {
$('.shappify_check_option input').removeClass('price_change')
)};
Hope it helps