FROM CACHE - pt-br_header

Adicionando um produto no Carrinho via Javascript

GTW_Agencia
Visitante
3 0 0

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.

4 RESPOSTAS 4

BrunoRode
Turista
18 0 1

Para que os produtos escolhidos pelo cliente sejam adicionados diretamente ao carrinho de compras, é preciso adicionar um botão de adicionar ao carrinho que execute uma ação quando clicado.

Uma maneira de fazer isso é usando a linguagem de programação JavaScript para criar uma função que adiciona os produtos escolhidos ao carrinho quando o botão é clicado. Você pode adicionar um botão "Adicionar ao Carrinho" na página de seleção de produtos e, em seguida, configurar a função JavaScript para adicionar os produtos selecionados ao carrinho quando o botão for clicado.

O código para essa função JavaScript pode variar dependendo da estrutura e do código específico da sua loja, mas aqui está um exemplo básico de como a função pode ser escrita:


function adicionarAoCarrinho() {
// Seleciona todos os checkboxes dos produtos
var checkboxes = document.querySelectorAll('input[type="checkbox"]');

// Cria uma array para armazenar os IDs dos produtos selecionados
var produtosSelecionados = [];

// Adiciona o ID de cada produto selecionado à array
checkboxes.forEach(function(checkbox) {
if (checkbox.checked) {
produtosSelecionados.push(checkbox.value);
}
});

// Adiciona os produtos selecionados ao carrinho usando a API do Shopify
fetch('/cart/add.js', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
items: produtosSelecionados
})
})
.then(function(response) {
// Redireciona o usuário para a página do carrinho após adicionar os produtos
window.location.href = '/cart';
})
.catch(function(error) {
console.error(error);
});
}


Você precisará personalizar esse código para atender às necessidades específicas do seu site, como selecionar os produtos corretos com base nos checkboxes selecionados. Depois de configurar a função, basta adicioná-la ao botão "Adicionar ao Carrinho" para que os produtos selecionados sejam adicionados diretamente ao carrinho quando o botão for clicado.

 

GTW_Agencia
Visitante
3 0 0

Olá @BrunoRode obrigado pela resposta. Mas como eu adicionei ali no final, quando executa essa função 

// Adiciona os produtos selecionados ao carrinho usando a API do Shopify
fetch('/cart/add.js', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
items: produtosSelecionados
})
})
.then(function(response) {
// Redireciona o usuário para a página do carrinho após adicionar os produtos
window.location.href = '/cart';
})
.catch(function(error) {
console.error(error);
});
}

 

Retorna um erro 

{ status: 404, message: 'Erro de carrinho', description: 'Impossível encontrar variante' }

 

Montar o script que verifica todos os checkbox é tranquilo, eu até fiz dessa forma já, mas o erro ao executar o comando para inserir o produto no carrinho permanece.

BrunoRode
Turista
18 0 1

Esse erro geralmente ocorre quando a variante do produto não é encontrada no banco de dados ou o ID da variante está incorreto. Para solucionar o problema, você pode tentar o seguinte:

1. Verifique se o ID da variante está correto. Certifique-se de que está usando o ID correto da variante do produto que deseja adicionar ao carrinho.

2. Verifique se a variante do produto está ativa e visível na sua loja Shopify. Você pode verificar isso indo para a página do produto e verificando se a variante está visível.

3. Verifique se a variante do produto está disponível para compra. Algumas variantes podem estar fora de estoque ou ter opções de compra limitadas.

4. Verifique se você tem permissão para adicionar produtos ao carrinho. Em alguns casos, pode haver restrições em sua conta que impedem a adição de produtos ao carrinho.

 

Se nenhuma dessas soluções funcionar, entre em contato com o suporte da Shopify para obter assistência adicional.

 

GTW_Agencia
Visitante
3 0 0

Então @BrunoRode a questão é que não se tratam de variantes e sim dos produtos em si. Eu estou listando todos os produtos em uma única página para criar um "pacote personalizado" onde a pessoa clica e é adicionado automaticamente ao carrinho.