Product Addons Feature in Shopify without App (Mono Theme)

[LemonMedia]

Hi everyone, I want to add addons feature in some of the products. 

Design: I have thought of a design like this in shown in the screenshot. When someone checks those checkboxes then adds the main product in the cart then those products also adds. Condition is this that if someone doesn't adds that main product in the cart then the checkbox will not add those product in the cart.

What I've created yet:

I've created a product metafield with product reference where I've selected the products that I want as addon.


Coding Part :

Created a snippet named addon.liquid.
Code of addon.liquid: 

<link rel="stylesheet" media="all" href="{{ 'addon.css' | asset_url }}" async>
{% assign productMetafields = all_products[product.metafields.custom.addon] %}
<h2>Addons</h2>
<div class="addon_container">
<div class="product_addon">
<img class="addon_img" | src="{{productMetafields.featured_image | img_url: '650x650'}}" />
<h2 class="addon_product_title" {{ block.shopify_attributes }}>
{{ productMetafields.title | escape }}
</h2>
<div class="no-js-hidden addon_price" id="price-{{ productMetafields.id }}" role="status" {{ block.shopify_attributes }}>
{%- render 'price', product: product, product_save_amount: true, product_save_type: dollar, use_variant: true, show_badges: true, price_class: 'price--large' -%}
</div>
<input id="addon" type="checkbox" name="properties[Addon]" value="Yes">
</div>

<div class="product_addon">
{% assign productMetafields2 = all_products[product.metafields.custom.addon2] %}
<img src="{{productMetafields2.featured_image | img_url: 'medium' | width: '300px' | height: '300px'}}" />
<h2 class="addon_product_title" {{ block.shopify_attributes }}>
{{ productMetafields2.title | escape }}
</h2>
<div class="no-js-hidden addon_price" id="price-{{ productMetafields2.id }}" role="status" {{ block.shopify_attributes }}>
{%- render 'price', product: product, product_save_amount: true, product_save_type: dollar, use_variant: true, show_badges: true, price_class: 'price--large' -%}
</div>
<input id="addon" type="checkbox" name="properties[Addon]" value="Yes">
</div>
</div>


Front End Part : 

In which part I need help?

When someone checks those checkboxes then adds the main product in the cart then those products also adds. Condition is this that if someone doesn't adds that main product in the cart then the checkbox will not add those product in the cart.


Can someone help me in this part like how can i get this feature? Any reference, blogs would be hightly appreciated.

Thanks !

[jtaylormatchles]

Time to write some javascript. If you are in Dawn, you can use product-form.js to see where it calls the the ajax api to add to cart. It'll be up to you to track the state of the page and the add on products that are selected. 

You'll have to change the post slightly to pass it an array of items to add.

However I'm confused by this statement you make: 
"Condition is this that if someone doesn't adds that main product in the cart then the checkbox will not add those product in the cart."

Clicking the "add to cart" will always add the main product to the cart. The only way it wouldn't is if you also have a property field you have created, say "Color" which is a required field. The form validation built in should prevent it from posting until you've done that.

So, there's really no way to click the add button and only add the "options" to the cart, unless you intentionally change the page to behave that way.

[LemonMedia]

<div class="related-products-wrapper">
{%assign addon_products = product.metafields.custom.addon.value %}
<h3>Addons:</h3>
<div class = "related-product-list">
{% for addon_product in addon_products %}
<a href = "{{shop.url | append: "/products/" | append: addon_product.handle }}">
<div class = "related-product">
<div class = "related-product-image">
<img src="{{addon_product.featured_image | img_url: 'medium' }}" />
</div>
<div class = "related-product-name">{{addon_product.title}}</div>
<div class = "related-product-price">{{addon_product.price | money}}</div>
</div>
<input type="checkbox" style="margin: auto; width: 100%; padding: 15px;" value={{ addon_product.id }}>
<form action="/cart/add" method="post" id="product-form- {{ addon_product.id }}{{ product.id }}">
<input type="hidden" name="id" value="{{ addon_product.variants.first.id }}">
<div>
<button type="submit" name="add">Add to cart</button>
</div>
</form>
</a>
{% endfor %}
</div>
</div>

Add to cart is working but only for one product. I want it as if someone checks the checkbox then that product will become a bundle like and automatically add with the main product and want the pricing also to change in only addons products. 

Please suggest somethin, how can I achieve this?

[jtaylormatchles]

I gave you the answer above, but I'm not going to write the code for you. 

[jtaylormatchles]

This also went live today:
Cart Transform Function API overview (shopify.dev)

[MRamzan]

Product Add-ons in product page without App: