@ogeid
If you want to add another product then it's possible without an app.
What wouldn't be possible is to add an extra option and charge for it.
You'd very likely need to have an AJAX cart on your store for this to work, I am not sure whether it'd work without it (I could be wrong though).
Ok, so the workflow would basically be:
1. Create a HTML checkbox input on your product-template.liquid
2. Listen for ATC clicks at theme.js
3. If the checkbox is ticked, add both the current product (plus its quantity) & the other product (plus the quantity of the main product).
I'd go even further and also add a field at the customize page to choose which product to add as an add-on.
Something like this:
Using something like cartJS would potentially make it easier as well.
Kind regards,
Diego
I was able to find a very simple code solution that seems to be working. I placed it below the product description with an Add-to-Cart button. The value number in the for input field is the add-on product variant id.
<div class="product-single__description rte">
{{ product.description }}
<br/> <br/>
<div class=add-on-product-style>
{% for tag in product.tags %}
{% if tag == 'add-on-anchor' %}
<form method="post" action="/cart/add">
<input type="hidden" name="id" value="35639764123804" />
<input type="hidden" value="4" id="quantity" name="quantity" />
Optional Anchor Bolt Set +$16.00
<input type="submit" value="Add to cart" class="btn" />
<input type="hidden" name="return_to" value="back" />
</form>
{% endif %}
{% endfor %}
</div>
</div>
This is how it looks on the product page. I still need to add some styling, but this is without any styling:
The add-on shows in the cart just like any other product:
I'll keep searching if I can find a way to do it with a checkbox.
Yes, I was actually able to get a checkbox to work.
I first did a version that used the "tags" to identify the add-ons, which doesn't require any apps, but then decided to use a metafields instead. I installed Metafields Guru app which is free (for now).
Basically, I just needed something to identify which products should feature an add-on and which add-on.
In the metafields for the product, I list the SKU of the add-ons
In the product-template.liquid change/add the following:
1. add brackets to the id:
<select name="id[]" id="ProductSelect-{{ section.id }}" class="product-form__variants no-js">This will allow you to add multiple products with the Add to Cart button.
2. Add the following code before {% endfrom %}
<! -- Add-on Item Start -->
{% for metafield in product.metafields.details.addon %}
{% for product in collections.all.products %}
{% for variant in product.variants %}
{% if metafield == variant.sku %}
<div class="add-on-product-container">
<a href="{{ product.url }}"><img src="{{ product.featured_media | img_url: 'x50' }}" class="add-on-image"></a>
<span class="add-on-element"><strong>Optional: {{ product.title }}</strong><span>
<span class="add-on-element">+ {{ product.price | money }}<span>
<span class="add-on-element"><input class="add-on-product-checkbox" type="checkbox" name="id[]" value="{{ variant.id }}" /></span>
</div>
{% endif %}
{% endfor %}
{% endfor %}
{% endfor %}
{% for metafield in product.metafields.details.addon2 %}
{% for product in collections.all.products %}
{% for variant in product.variants %}
{% if metafield == variant.sku %}
<div class="add-on-product-container">
<a href="{{ product.url }}"><img src="{{ product.featured_media | img_url: 'x50' }}" class="add-on-image"></a>
<span class="add-on-element"><strong>Optional: {{ product.title }}</strong><span>
<span class="add-on-element">+ {{ product.price | money }}<span>
<span class="add-on-element"><input class="add-on-product-checkbox" type="checkbox" name="id[]" value="{{ variant.id }}" /></span>
</div>
{% endif %}
{% endfor %}
{% endfor %}
{% endfor %}
<! -- Add-on Item End -->
{% endform %}
I did two for loops to add either one or two add-ons, depending what is needed for the product.
3. Add the add-on SKU to the products metafields:
that's it.
Here's how it looks with one add-on:
Here is the 2 add-on example:
In the cart the product and add-on show as separate items:
Still need to line up the text and add photos of the add-ons, but other than that it works fine. The add-on quantity always matches the product quantity, so if you have a product that require multiples of one add-on, you need to make product sets.
Hope this helps,
Diego
Community Blog Articles
Are you ready to take your business to the next level? Look no further than the latest ...
By SarahF_Shopify Apr 15, 2024
We’re keeping the ball rolling to make sure you’re always ahead of the game. So buckle ...
By JasonH Apr 8, 2024
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024