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

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 Conteúdo > Menus.

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. Toque em Conteúdo > Menus.

3. Clique em Adicionar menu.

4. Dê ao menu o nome de Gift wrapping, para que o identificador atribuído a ele seja gift-wrapping.

5. 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.

6. Clique em Salvar menu.

Android

1. No app da Shopify, toque no botão ….

2. Toque em Conteúdo > Menus.

3. Clique em Adicionar menu.

4. Dê ao menu o nome de Gift wrapping, para que o identificador atribuído a ele seja gift-wrapping.

5. 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.

6. 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.