Como adicionar vários produtos ao carrinho com um único botão no Shopify
Como lojista no Shopify, você está constantemente competindo com centenas de outros vendedores que podem ter os mesmos produtos em estoque que você. Por isso, você precisa sempre buscar formas de tornar a compra mais conveniente para seus clientes.
Permitir que os clientes adicionem vários produtos ou a coleção inteira ao carrinho com um único botão é uma excelente forma de facilitar o processo de compra para eles. O Shopify permite isso? Vamos descobrir.
Como adicionar vários produtos ao carrinho com código
Para adicionar vários produtos ao carrinho, você pode usar a Cart API do Shopify. A plataforma não oferece suporte nativo para adicionar vários produtos de uma vez por padrão, mas existem soluções personalizadas comprovadas. Você pode usar o formulário de pedido com o input ‘updates’ como campo de quantidade, ou usar o endpoint moderno /cart/add.js com um array de items. Aqui está um exemplo de código que você pode usar para isso.
Se você não estiver em uma página de coleção, defina qual coleção usar no formulário de pedido.
Use a seguinte instrução assign e substitua ‘your-collection-handle-here’ pelo handle da sua coleção:
{% comment %}
{% assign collection = collections.your-collection-handle-here %}
Use the assign statement outside of this comment block at the top of your template.
{% endcomment %}
{% paginate collection.products by 100 %}
<form action="/cart" method="post">
{% if collection.products_count > 0 %}
<div>
<h1>{% if template contains 'page' %}{{ page.title }}{% else %}{{ collection.title }}{% endif %}</h1>
<input type="submit" value="Add to the cart" />
</div>
{% else %}
<h1>{% if template contains 'page' %}{{ page.title }}{% else %}{{ collection.title }}{% endif %}</h1>
{% endif %}
{% if template contains 'page' and page.content.size > 0 %}
<div class="rte">
{{ page.content }}
</div>
{% elsif collection.description.size > 0 %}
<div class="rte">
{{ collection.description }}
</div>
{% endif %}
{% if collection.products_count > 0 %}
<table>
<tbody>
{% for product in collection.products %}
{% if product.available %}
{% for variant in product.variants %}
{% if variant.available %}
<tr class="{% cycle 'pure-table-odd', '' %}">
<td>
<a href="{{ variant.url | collection }}">
<img src="{{ variant.image | default: product.featured_image | img_url: 'small' }}" alt="{{ variant.title | escape }}" />
</a>
</td>
<td>
<a href="{{ variant.url | collection }}">
{{ product.title }}{% unless variant.title contains 'Default' %} - {{ variant.title }}{% endunless %}{% unless variant.sku == blank %} - {{ variant.sku }}{% endunless %}
</a>
</td>
<td>
{{ variant.price | money }}
</td>
<td style="text-align:right;">
<input name="updates[{{ variant.id }}]" onfocus="this.select()" class="quantity field" min="0" {% unless variant.inventory_management == blank or variant.inventory_policy == 'continue' %} max="{{ variant.inventory_quantity }}" {% endunless %} type="text" value="0" tabindex="1" />
</td>
</tr>
{% endif %}
{% endfor %}
{% endif %}
{% endfor %}
</tbody>
</table>
<div>
<input type="submit" value="Add to the cart" />
</div>
{% else %}
<p>There are no products in this view.</p>
{% endif %}
</form>
{% endpaginate %}
{% if collection.products_count > 0 %}
<script>
jQuery(function($) {
$('table .quantity:first').focus();
$('[max]').change(function() {
var max = parseInt($(this).attr('max'), 10);
var value = parseInt($(this).val(), 10) || 0;
if (value > max) {
alert('We only have ' + max + ' of this item in stock');
$(this).val(max);
}
});
});
</script>
{% endif %}Como alternativa, você pode usar a abordagem moderna da Cart API com JavaScript para adicionar vários itens de uma vez usando o endpoint /cart/add.js com um array de items, o que permite adicionar vários produtos com quantidades diferentes em uma única requisição.
Usando um app
Se programar não é o seu forte, você também pode usar um app para permitir que seus clientes adicionem vários produtos ao carrinho de uma só vez. Isso é particularmente útil para lojas B2B, negócios de atacado e lojas que oferecem bundles de produtos.
Existem vários tipos de apps disponíveis na Shopify App Store para esse objetivo. Alguns apps focam em pedidos em massa com recursos como upload de CSV e regras de quantidade, enquanto outros são especializados em bundles de produtos com opções de mix-and-match. Entre as opções populares estão apps como SellUp, Bundler e diversos apps de multi-buy que permitem exibir add-ons de produto logo acima do botão de adicionar ao carrinho do produto principal.
Esses apps permitem que seus clientes adicionem vários produtos ao carrinho com apenas um clique, o que melhora drasticamente o valor médio do pedido, ou “AOV”. Ter um upsell com uma única marcação também torna o processo fluido e sem atrito.
Ao escolher um app, procure recursos que atendam às suas necessidades: capacidade de pedidos em massa, criação de bundles, automação de descontos, gestão de estoque e compatibilidade com dispositivos móveis. A maioria dos apps oferece testes gratuitos, o que facilita testar qual solução funciona melhor para a sua loja.
