How can I add two products on one product page?

[taveced27]

Hi would like to add 2 product in a product page .

the main product and a accessory of the porduct hidden . when i try of doing that i have alway error with the variant . 

Can you say me how to do that ?  

[EasifyApps-Zoe]

Hi @taveced27,

Could you share screenshots of your current setup and provide detailed requirements and expectations? If possible, sharing your website link would be helpful 🤗.

[taveced27]

hi,

It is is like that . 

<div class="product-form__info-item product-optional" data-controller="product-optional">
<div div="product-form__info-content">
<input
data-product-optional-target="id"
type="hidden"
name="items[1][id]"
id="8564601684311"
value="8564601684311"
disabled="disabled"
>
<input data-action="change->product-optional#handle" type="checkbox" id="addProductCheckbox">
<label for="8564601684311">
<span> {{ 'collection.product.fil_assortis' | t }} - Le fil français </span
><span style="color: gray;">(€2,60 )</span>
</label>
</div>
<div class="product-form__info-content" id="quantitySelector" style="display:none;">
<div class="quantity-selector quantity-selector--product">
<button
type="button"
class="quantity-selector__button"
data-action="decrease-picker-quantity"
aria-label="{{ 'cart.items.decrease_quantity' | t }}"
title="{{ 'cart.items.decrease_quantity' | t }}"
>
{% render 'icon', icon: 'minus' %}
</button>
<input data-product-optional-target="quantity" type="text" class="quantity-selector__value" inputmode="numeric" size="3"
name="items[1][quantity]" value="1" max="7316" data-action="input->product-optional#handleQuantity"
id="quantitySelectorinput" disabled="disabled"
data-title="Fil assorti à vos tissus - Le fil français">

<button
type="button"
class="quantity-selector__button"
data-action="increase-picker-quantity"
aria-label="{{ 'cart.items.increase_quantity' | t }}"
title="{{ 'cart.items.increase_quantity' | t }}"
>
{% render 'icon', icon: 'plus' %}
</button>
</div>
</div>
<textarea
style="display: none;"
id="option"
name="properties[option 1]"
disabled="disabled"
data-product-optional-target="message">Fil assorti à vos tissus - Le fil français</textarea>
<br>

</div>
{%- endif -%}
<script>
// Écouteur d'événements pour la case à cocher
const checkbox = document.getElementById('addProductCheckbox');
const quantitySelector = document.getElementById('quantitySelector');
const option = document.getElementById('option');
const inputhide = document.getElementById('8564601684311');
const quantitySelectorinput = document.getElementById('quantitySelectorinput');

checkbox.addEventListener('change', function() {
if (checkbox.checked) {
quantitySelector.style.display = 'block';
option.removeAttribute('disabled');
inputhide.removeAttribute('disabled');
quantitySelectorinput.removeAttribute('disabled');

} else {
quantitySelector.style.display = 'none';
option.setAttribute('disabled', 'disabled');
inputhide.setAttribute('disabled', 'disabled');
quantitySelectorinput.setAttribute('disabled', 'disabled');

}});

</script>

i try to do like this webshop https://klafoutis.com/products/micro-eponge-de-bambou-ecru but it doesn't work for me . 

I have always the variant error when i click on add a product .

i have try différent type of code 

[taveced27]

The main problem is that i have a error 404 variante not found . I don t know why.