Pessoal, tudo bem? Sou novo por aqui mas estou quebrando a cabeça já faz alguns dias com uma funcionalidade que uma cliente pediu.
Se trata de um site de comidas congeladas saudáveis onde o cliente pode ir e montar um kit personalizado escolhendo vários produtos dentro de uma página só. Até aí tudo bem! Consegui listar todos os produtos na mesma página e vincular via checkbox para que o cliente escolha e altere o valor total dentro ali do campo da página. Porém, não consigo por nada nesse mundo fazer o produto ir direto para o Carrinho de compra!
Eu não sei onde eu estou errando, vou colar aqui o código fonte para que me auxiliem por favor.
<script>
function updateTotalValue() {
var sopasCheckboxes = document.getElementsByName("sopas");
var sucosCheckboxes = document.getElementsByName("sucos");
var pratosCheckboxes = document.getElementsByName("pratos");
var totalValue = 0;
// Calcular o valor total das sopas selecionadas
for (var i = 0; i < sopasCheckboxes.length; i++) {
if (sopasCheckboxes[i].checked) {
var price = parseFloat(sopasCheckboxes[i].getAttribute("data-price"));
totalValue += price;
}
}
// Calcular o valor total dos sucos selecionados
for (var i = 0; i < sucosCheckboxes.length; i++) {
if (sucosCheckboxes[i].checked) {
var price = parseFloat(sucosCheckboxes[i].getAttribute("data-price"));
totalValue += price;
}
}
// Calcular o valor total dos pratos selecionados
for (var i = 0; i < pratosCheckboxes.length; i++) {
if (pratosCheckboxes[i].checked) {
var price = parseFloat(pratosCheckboxes[i].getAttribute("data-price"));
totalValue += price;
}
}
// Atualizar o valor total na página
var totalValueElement = document.getElementsByClassName("price-item--regular");
totalValueElement[0].innerText = "R$ "+ (totalValue/100).toFixed(2);
}
function addToCart(productId) {
var formData = {
items: [{ id: productId, quantity: 1 }]
};
console.log(formData);
fetch('/cart/add.js', {
credentials: 'same-origin',
headers: {
'Content-Type': 'application/json',
'X-Requested-With':'xmlhttprequest' /* XMLHttpRequest is ok too, it's case insensitive */
},
method: 'POST',
body: JSON.stringify(formData)
})
.then(response => {
return response.json();
})
.then(data => {
// Tratar a resposta da API do Shopify, se necessário
console.log(data);
})
.catch(error => {
// Tratar erros, se necessário
console.error('Error:', error);
});
}
function removeFromCart(productId) {
var formData = {
updates: { [productId]: 0 }
};
fetch('/cart/update.js', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(formData)
})
.then(response => {
return response.json();
})
.then(data => {
// Tratar a resposta da API do Shopify, se necessário
console.log(data);
})
.catch(error => {
// Tratar erros, se necessário
console.error('Error:', error);
});
}
function handleCheckboxChange(checkbox, productId) {
if (checkbox.checked) {
addToCart(productId);
} else {
removeFromCart(productId);
}
}
</script>
<form onsubmit="event.preventDefault(); addToCart();" class="form" data-type="add-to-cart-form">
<p>Tipos de sopas:</p>
{% for product in collections['sopas'].products %}
<label class="produto-item-kit">
<input style="" type="checkbox" name="sopas" value="{{ product.title }}" data-price="{{ product.price }}" data-product-id="{{ product.id }}" onchange="updateTotalValue();handleCheckboxChange(this, '{{ product.id }}')">
<img style="" src="{{ product.featured_image | img_url: '100x100' }}">
<div style="">
<p><b>{{ product.title }}</b> - {{ product.price | money }}</p>
<a href="#" onclick="openModal('{{ product.featured_image.src }}', '{{ product.title }}')">
Ver detalhes
</a>
</div>
</label>
{% endfor %}
<!-- Tipos de sucos -->
<p>Tipos de sucos:</p>
{% for product in collections['sucos'].products %}
<label class="produto-item-kit">
<input type="checkbox" name="sucos" value="{{ product.title }}" data-price="{{ product.price }}" data-product-id="{{ product.id }}" onchange="updateTotalValue();handleCheckboxChange(this, '{{ product.id }}')">
<img style="" src="{{ product.featured_image | img_url: '100x100' }}">
<div style="">
<p><b>{{ product.title }}</b> - {{ product.price | money }}</p>
<a href="#" onclick="openModal('{{ product.featured_image.src }}', '{{ product.title }}')">
Ver detalhes
</a>
</div>
</label>
{% endfor %}
<!-- Tipos de pratos -->
<p>Tipos de pratos:</p>
{% for product in collections['pratos'].products %}
<label class="produto-item-kit">
<input type="checkbox" name="pratos" value="{{ product.title }}" data-price="{{ product.price }}" data-product-id="{{ product.id }}" onchange="updateTotalValue();handleCheckboxChange(this, '{{ product.id }}')" >
<img style="" src="{{ product.featured_image | img_url: '100x100' }}">
<div style="">
<p><b>{{ product.title }}</b> - {{ product.price | money }}</p>
<a href="#" onclick="openModal('{{ product.featured_image.src }}', '{{ product.title }}')">
Ver detalhes
</a>
</div>
</label>
{% endfor %}
<button type="submit" name="add" class="product-form__submit button button--primary btn-block">
<span>Adicionar ao carrinho</span>
<div class="loading-overlay__spinner hidden">
<svg aria-hidden="true" focusable="false" role="presentation" class="spinner" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg"><circle class="path" fill="none" stroke-width="6" cx="33" cy="33" r="30"></circle></svg>
</div>
</button>
</form>
desconsiderem a parte do modal pois ainda não foi implementada. A questão é que pra fazer um teste do que estava acontecendo de errado eu tive que ao selecionar um checkbox executar a função que adiciona no carrinho automaticamente, daí consegui listar o seguinte erro na hora do /cart/add.js
{
status: 404,
message: 'Erro de carrinho',
description: 'Impossível encontrar variante'
}
alguém aqui já passou por isso? o ID não é de variante, é pra ser ID do produto, mas é essa mensagem que aparece.
