Want to sell two or more optional products in one page.

[Anna_Wang1]

I am using the Empire theme now, and regarding the company needs, we would like to add one or more optional products on one page, like the below image. I tried some Apps, but it doesn't work for us. Could you please let me know what I should do. Thanks.

[made4Uo]

Hi @Anna_Wang1,

Based on the image provided, this can be achieve by adding the option product as a variant and change the coding in the product section to add the image, title, price and quantity. You will need to hire a developer to do so

[Anna_Wang1]

Hi, thank you for your reply. I just want to create a really simple one.  Thank you for your help.

testing below
<div class="products-container">
<div class="another-product-1">
<div class="text-left">
<div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
<div class="product-single__prices">
<span class="product-single__price">$795</span>
</div>
</div>
<h1 itemprop="name">Testing</h1>
<div class="swatch swatch-drop">
<div class="swatch-element first-product-swatch available">
<input id="first-size-xs" name="first-product-size" type="radio" value="xs"> <label for="first-size-xs">XS</label>
</div>

</div><button class="btn regular" id="first-addtocart" name="add" style="display: inline-block !important;" type="submit"><span id="AddToCartText">Add to Cart</span></button>
</div>
</div>
</div>

and for the JS part, I really confused. 

<script>
var bundle = document.getElementById("first-size-xs");
if(bundle.checked)
{
$.post('/cart/add.js', {
//quantity: 1,
id: 6931022381156
});
}
</script>

[made4Uo]

Hi @Anna_Wang1 

You need to make sure the id  corresponds to your product id that you want to add. There are more codes you needed by the way, you need the remove code when the user uncheck the box

[Anna_Wang1]

Hi, thanks for your reply. I have updated my code. The id is correct, but it can't be added to the cart. Thank you.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$(document).on('click','.add_to_cart',function(){
var quantity = $(".quantity").val();
quantity = parseInt(quantity);
var id="6836213612609";
$.ajax({
type: 'POST',
url: '/cart/add.js',
dataType: 'json',
data: {id:id,quantity:quantity},
success: function(){
location.href="/cart";
}
});
})
});