Adicionar uma opção de embalagem de presente à página do carrinho

Aviso

Os temas vintage não estão disponíveis na Theme Store. Esses temas não têm os recursos incluídos nos temas da Online Store 2.0 da Shopify, e os temas vintage gratuitos só recebem atualizações para correções de segurança.

Observação

Se você usa um tema gratuito da Shopify, entre em contato com a equipe de Atendimento ao cliente da Shopify para receber ajuda relacionada ao tutorial, que requer 15 minutos para o design. Saiba mais sobre a Política de design da Shopify.

Observação

Esta personalização se aplica a temas vintage da Shopify, e não aos temas da Online Store 2.0.

• Descubra a versão da arquitetura do tema da loja
• Conheça as personalizações para temas da Online Store 2.0.

É possível oferecer um serviço de embalagem de presente aos clientes na página do carrinho da loja virtual. No caso de clientes que querem o pedido já embalado, é possível cobrar uma taxa fixa ou cobrar por produto.

Aviso

A personalização funciona apenas para uma página de carrinho (no URL your-store.com/cart), pois não é compatível com os estilos de carrinhos deslizantes ou pop-up. Para transformar os carrinhos deslizantes ou pop-up em carrinhos no formato Página de carrinho, acesse o editor de temas. Adicione um produto ao carrinho na pré-visualização do tema e clique na aba Página do carrinho para ver as configurações editáveis.

Criar um produto "embalagem de presente"

Primeiro você criará a opção "embalagem de presente" como produto:

1. No admin da Shopify, acesse Produtos.

2. Clique em Adicionar produto.

3. Crie um produto "embalagem de presente" como criaria qualquer outro produto:

   

• Explique na descrição do produto quais materiais serão usados para embalar os itens para presente.
• Atribua a seu produto "embalagem de presente" o preço que você quer cobrar pelo serviço. Caso você queira que a embalagem de presente seja gratuita, defina o preço do produto "embalagem de presente" com o valor 0.
• É possível carregar uma imagem do produto para mostrar aos clientes como ficará o pedido embalado para presente.
• Inclua um estoque para o produto "embalagem de presente" ou ajuste as configurações para que a Shopify não acompanhe o estoque desse produto. Vale lembrar que se a loja tiver vários locais, é preciso desmarcar Acompanhar quantidade para evitar que a Shopify faça o acompanhamento.

1. Clique em Salvar.

Criar um menu

Em seguida, crie um menu que aponte para o produto "embalagem de presente":

Desktop

1. No admin da Shopify, acesse Loja virtual > Navegação.
2. Clique em Adicionar menu.
3. Dê ao menu o nome de Gift wrapping, para que o identificador atribuído a ele seja gift-wrapping.

4. Adicionar o produto "embalagem de presente" ao menu:

   1. Clique em Adicionar item de menu e depois insira o Nome do link para o produto "embalagem de presente".
   2. No campo Link, selecione Produtos e escolha o produto "embalagem de presente" no menu suspenso.
   3. Clique em Adicionar.

5. Clique em Salvar menu.

iPhone

1. No app da Shopify, toque no botão ….
2. Na seção canais de vendas, toque em loja virtual.
3. Toque em Navegação.
4. Clique em Adicionar menu.
5. Dê ao menu o nome de Gift wrapping, para que o identificador atribuído a ele seja gift-wrapping.

6. Adicionar o produto "embalagem de presente" ao menu:

   1. Clique em Adicionar item de menu e depois insira o Nome do link para o produto "embalagem de presente".
   2. No campo Link, selecione Produtos e escolha o produto "embalagem de presente" no menu suspenso.
   3. Clique em Adicionar.

7. Clique em Salvar menu.

Android

1. No app da Shopify, toque no botão ….
2. Na seção canais de vendas, toque em loja virtual.
3. Toque em Navegação.
4. Clique em Adicionar menu.
5. Dê ao menu o nome de Gift wrapping, para que o identificador atribuído a ele seja gift-wrapping.

6. Adicionar o produto "embalagem de presente" ao menu:

   1. Clique em Adicionar item de menu e depois insira o Nome do link para o produto "embalagem de presente".
   2. No campo Link, selecione Produtos e escolha o produto "embalagem de presente" no menu suspenso.
   3. Clique em Adicionar.

7. Clique em Salvar menu.

Criar um snippet de código

Desktop

1. No admin da Shopify, acesse Loja virtual > Temas.
2. Encontre o tema que você quer editar, clique no botão … para abrir o menu de ações e, depois, em Editar código.
3. No diretório Snippets, clique em Adicionar um novo snippet de código.
4. Nomeie o snippet como gift-wrapping e clique em Criar snippet. O arquivo do snippet vai abrir no editor de códigos.
5. Nesta etapa, você colará um código no novo arquivo de snippet gift-wrapping. O código que será colado depende de como você quer cobrar os clientes pelo serviço de embalagem de presente:

iPhone

1. No app da Shopify, toque no botão ….
2. Na seção canais de vendas, toque em loja virtual.
3. Toque em gerenciar temas.
4. Encontre o tema que você quer editar, clique no botão … para abrir o menu de ações e, depois, em Editar código.
5. No diretório Snippets, clique em Adicionar um novo snippet de código.
6. Nomeie o snippet como gift-wrapping e clique em Criar snippet. O arquivo do snippet vai abrir no editor de códigos.
7. Nesta etapa, você colará um código no novo arquivo de snippet gift-wrapping. O código que será colado depende de como você quer cobrar os clientes pelo serviço de embalagem de presente:

Android

1. No app da Shopify, toque no botão ….
2. Na seção canais de vendas, toque em loja virtual.
3. Toque em gerenciar temas.
4. Encontre o tema que você quer editar, clique no botão … para abrir o menu de ações e, depois, em Editar código.
5. No diretório Snippets, clique em Adicionar um novo snippet de código.
6. Nomeie o snippet como gift-wrapping e clique em Criar snippet. O arquivo do snippet vai abrir no editor de códigos.
7. Nesta etapa, você colará um código no novo arquivo de snippet gift-wrapping. O código que será colado depende de como você quer cobrar os clientes pelo serviço de embalagem de presente:

Adicionar uma cobrança de taxa fixa para a embalagem de presente

Cole o seguinte código e salve:

{% if linklists.gift-wrapping.links.size > 0 and
linklists.gift-wrapping.links.first.type == 'product_link' %}

<div
  id="is-a-gift"
  style="clear: left; margin: 30px 0"
  class="clearfix rte"
>
  <p>
    <input
      id="gift-wrapping"
      type="checkbox"
      name="attributes[gift-wrapping]"
      value="yes"
      {% if cart.attributes.gift-wrapping %}
      checked="checked"
      {% endif %}
      style="float: none"
    />
    <label
      for="gift-wrapping"
      style="display:inline; padding-left: 5px; float: none;"
    >
      For {{ linklists.gift-wrapping.links.first.object.price | money }}
      please wrap the products in this order.
    </label>
  </p>
  <p>
    <label style="display:block" for="gift-note"
      >Gift message (free and optional):</label
    >
    <textarea name="attributes[gift-note]" id="gift-note">
{{ cart.attributes.gift-note }}</textarea
    >
  </p>
</div>

{% assign id = linklists.gift-wrapping.links.first.object.variants.first.id
%} {% assign gift_wraps_in_cart = 0 %} {% for item in cart.items %} {% if
item.id == id %} {% assign gift_wraps_in_cart = item.quantity %} {% endif %}
{% endfor %}

<style>
  #updates_{{ id }} { display: none; }
</style>

<script>

  Shopify.Cart = Shopify.Cart || {};

  Shopify.Cart.GiftWrap = {};

  Shopify.Cart.GiftWrap.set = function() {
    var headers = new Headers({ 'Content-Type': 'application/json' });

    var request = {
      method: 'POST',
      headers: headers,
      body: JSON.stringify({ updates: { {{ id }}: 1 }, attributes: { 'gift-wrapping': true } })
    };
    fetch('/cart/update.js', request)
    .then(function() {
      location.href = '/cart';
    });
  }

  Shopify.Cart.GiftWrap.remove = function() {
    var headers = new Headers({ 'Content-Type': 'application/json' });

    var request = {
      method: 'POST',
      headers: headers,
      body: JSON.stringify({ updates: { {{ id }}: 0 }, attributes: { 'gift-wrapping': '', 'gift-note': '' } })
    };
    fetch('/cart/update.js', request)
    .then(function() {
      location.href = '/cart';
    });
  }

  // If we have nothing but gift-wrap items in the cart.
  {% if cart.items.size == 1 and gift_wraps_in_cart > 0 %}
  document.addEventListener("DOMContentLoaded", function(){
    Shopify.Cart.GiftWrap.remove();
  });
  // If we have more than one gift-wrap item in the cart.
  {% elsif gift_wraps_in_cart > 1 %}
  document.addEventListener("DOMContentLoaded", function(){
    Shopify.Cart.GiftWrap.set();
  });
  // If we have a gift-wrap item in the cart but our gift-wrapping cart attribute has not been set.
  {% elsif gift_wraps_in_cart > 0 and cart.attributes.gift-wrapping == blank %}
  document.addEventListener("DOMContentLoaded", function(){
    Shopify.Cart.GiftWrap.set();
  });
  // If we have no gift-wrap item in the cart but our gift-wrapping cart attribute has been set.
  {% elsif gift_wraps_in_cart == 0 and cart.attributes.gift-wrapping != blank %}
  document.addEventListener("DOMContentLoaded", function(){
    Shopify.Cart.GiftWrap.set();
  });
  {% endif %}

  // When the gift-wrapping checkbox is checked or unchecked.
  document.addEventListener("DOMContentLoaded", function(){
    document.querySelector('[name="attributes[gift-wrapping]"]').addEventListener("change", function(event) {
      if (event.target.checked) {
        Shopify.Cart.GiftWrap.set();
      } else {
        Shopify.Cart.GiftWrap.remove();
      }

    });

    document.querySelector('#gift-note').addEventListener("change", function(evt) {
      var note = evt.target.value;
      var headers = new Headers({ 'Content-Type': 'application/json' });

      var request = {
        method: 'POST',
        headers: headers,
        body: JSON.stringify({ attributes: { 'gift-note': note } })
      };

      fetch('/cart/update.js', request);
    });
  });
</script>

{% else %}

<p style="clear: left; margin: 30px 0" class="rte">
  You attempted to add a gift-wrapping script to your shopping cart, but it
  won't work because you don't have a link list with handle
  <code>gift-wrapping</code> which, in turn, contains a link to your
  gift-wrapping product. Please review the steps outlined
  <a
    href="https://help.shopify.com/manual/online-store/themes/os/customize/add-gift-wrap-option"
    target="_blank"
    rel="noopener noreferrer nofollow"
    >here</a
  >.
</p>

{% endif %}

Adicionar uma cobrança multiplicada pelo número de produtos no pedido

Nessa opção, se houver três produtos no pedido, a cobrança da embalagem de presente será multiplicada por três. Cole o seguinte código e salve:

{% if linklists.gift-wrapping.links.size > 0 and
linklists.gift-wrapping.links.first.type == 'product_link' %}

<div
  id="is-a-gift"
  style="clear: left; margin: 30px 0"
  class="clearfix rte"
>
  <p>
    <input
      id="gift-wrapping"
      type="checkbox"
      name="attributes[gift-wrapping]"
      value="yes"
      {% if cart.attributes.gift-wrapping %}
      checked="checked"
      {% endif %}
      style="float: none"
    />
    <label
      for="gift-wrapping"
      style="display:inline; padding-left: 5px; float: none;"
    >
      For {{ linklists.gift-wrapping.links.first.object.price | money }} per
      item, please wrap the products in this order.
    </label>
  </p>
  <p>
    <label style="display:block" for="gift-note"
      >Gift message (free and optional):</label
    >
    <textarea name="attributes[gift-note]" id="gift-note">
{{ cart.attributes.gift-note }}</textarea
    >
  </p>
</div>

{% assign id = linklists.gift-wrapping.links.first.object.variants.first.id
%} {% assign gift_wraps_in_cart = 0 %} {% for item in cart.items %} {% if
item.id == id %} {% assign gift_wraps_in_cart = item.quantity %} {% endif %}
{% endfor %} {% assign items_in_cart = cart.item_count | minus:
gift_wraps_in_cart %}

<style>
  #updates_{{ id }} { display: none; }
</style>

<script>

  Shopify.Cart = Shopify.Cart || {};

  Shopify.Cart.GiftWrap = {};

  Shopify.Cart.GiftWrap.set = function() {
    var headers = new Headers({ 'Content-Type': 'application/json' });

    var request = {
      method: 'POST',
      headers: headers,
      body: JSON.stringify({ updates: { {{ id }}: {{ items_in_cart }} }, attributes: { 'gift-wrapping': true } })
    };
    fetch('/cart/update.js', request)
    .then(function() {
      location.href = '/cart';
    });
  }

  Shopify.Cart.GiftWrap.remove = function() {
    var headers = new Headers({ 'Content-Type': 'application/json' });

    var request = {
      method: 'POST',
      headers: headers,
      body: JSON.stringify({ updates: { {{ id }}: 0 }, attributes: { 'gift-wrapping': '', 'gift-note': '' } })
    };
    fetch('/cart/update.js', request)
    .then(function() {
      location.href = '/cart';
    });
  }

  // If we have nothing but gift-wrap items in the cart.
  {% if cart.items.size == 1 and gift_wraps_in_cart > 0 %}
  document.addEventListener("DOMContentLoaded", function(){
    Shopify.Cart.GiftWrap.remove();
  });
  // If we don't have the right amount of gift-wrap items in the cart.
  {% elsif gift_wraps_in_cart > 0 and gift_wraps_in_cart != items_in_cart %}
  document.addEventListener("DOMContentLoaded", function(){
    Shopify.Cart.GiftWrap.set();
  });
  // If we have a gift-wrap item in the cart but our gift-wrapping cart attribute has not been set.
  {% elsif gift_wraps_in_cart > 0 and cart.attributes.gift-wrapping == blank %}
  document.addEventListener("DOMContentLoaded", function(){
    Shopify.Cart.GiftWrap.set();
  });
  // If we have no gift-wrap item in the cart but our gift-wrapping cart attribute has been set.
  {% elsif gift_wraps_in_cart == 0 and cart.attributes.gift-wrapping != blank %}
  document.addEventListener("DOMContentLoaded", function(){
    Shopify.Cart.GiftWrap.set();
  });
  {% endif %}

  // When the gift-wrapping checkbox is checked or unchecked.
  document.addEventListener("DOMContentLoaded", function(){
    document.querySelector('[name="attributes[gift-wrapping]"]').addEventListener("change", function(event) {
      if (event.target.checked) {
        Shopify.Cart.GiftWrap.set();
      } else {
        Shopify.Cart.GiftWrap.remove();
      }

    });

    document.querySelector('#gift-note').addEventListener("change", function(evt) {
      var note = evt.target.value;
      var headers = new Headers({ 'Content-Type': 'application/json' });

      var request = {
        method: 'POST',
        headers: headers,
        body: JSON.stringify({ attributes: { 'gift-note': note } })
      };

      fetch('/cart/update.js', request);
    });
  });
</script>

{% else %}

<p style="clear: left; margin: 30px 0" class="rte">
  You attempted to add a gift-wrapping script to your shopping cart, but it
  won't work because you don't have a link list with handle
  <code>gift-wrapping</code> which, in turn, contains a link to your
  gift-wrapping product. Please review the steps outlined
  <a
    href="https://help.shopify.com/manual/online-store/themes/os/customize/add-gift-wrap-option"
    target="_blank"
    rel="noopener noreferrer nofollow"
    >here</a
  >.
</p>

{% endif %}

Incluir o snippet no modelo de carrinho

Para incluir o snippet de embalagem de presente no modelo do carrinho:

1. No diretório Seções, clique em cart-template.liquid. Se o tema não incluir cart-template.liquid, clique em cart.liquid no diretório Modelos.

2. Encontre a tag de fechamento </form> no código. Em uma nova linha acima da tag de fechamento </form>, cole o seguinte código:

{% render 'gift-wrapping' %}

1. Clique em Salvar.