Adicionar um seletor de data de entrega ao 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 incluir um calendário na página do carrinho para que os clientes especifiquem a data de entrega do pedido.

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.

Incluir jQuery no theme.liquid

Para que a personalização funcione, alguns temas exigem a inclusão de uma tag de script para jQuery no arquivo de layout theme.liquid. Se você usa Boundless, Debut versão 17.2.0 ou mais recente, Express, Narrative ou Venture, talvez seja necessário seguir a próxima etapa:

1. No diretório Layout, clique em theme.liquid.

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

{{ '//ajax.googleapis.com/ajax/libs/jquery/2.2.3/jquery.min.js' | script_tag }}

1. Clique em Salvar.

Criar um snippet de data de entrega

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:

4. Crie o snippet:

   1. Nomeie o novo snippet como delivery-date.
   2. Clique em Criar snippet. O novo arquivo de snippet será aberto no editor de códigos.

5. No novo snippet delivery-date.liquid, cole este código:

{{ '//code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css' | stylesheet_tag }}
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js" defer="defer"></script>

<div style="width:300px; clear:both;">
  <p>
    <label for="date">Pick a delivery date:</label>
    <input id="date" type="text" name="attributes[date]" value="{{ cart.attributes.date }}" />
    <span style="display:block" class="instructions"> We do not deliver during the week-end.</span>
  </p>
</div>

<script>
  window.onload = function() {
      if (window.jQuery) {
        let $ = window.jQuery;

        $(function() {
          $("#date").datepicker({
          minDate: +1,
          maxDate: '+2M',
          beforeShowDay: $.datepicker.noWeekends
        });
      });
    }
  }
</script>

1. Clique em Salvar.

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:

6. Crie o snippet:

   1. Nomeie o novo snippet como delivery-date.
   2. Clique em Criar snippet. O novo arquivo de snippet será aberto no editor de códigos.

7. No novo snippet delivery-date.liquid, cole este código:

{{ '//code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css' | stylesheet_tag }}
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js" defer="defer"></script>

<div style="width:300px; clear:both;">
  <p>
    <label for="date">Pick a delivery date:</label>
    <input id="date" type="text" name="attributes[date]" value="{{ cart.attributes.date }}" />
    <span style="display:block" class="instructions"> We do not deliver during the week-end.</span>
  </p>
</div>

<script>
  window.onload = function() {
      if (window.jQuery) {
        let $ = window.jQuery;

        $(function() {
          $("#date").datepicker({
          minDate: +1,
          maxDate: '+2M',
          beforeShowDay: $.datepicker.noWeekends
        });
      });
    }
  }
</script>

1. Clique em Salvar.

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:

6. Crie o snippet:

   1. Nomeie o novo snippet como delivery-date.
   2. Clique em Criar snippet. O novo arquivo de snippet será aberto no editor de códigos.

7. No novo snippet delivery-date.liquid, cole este código:

{{ '//code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css' | stylesheet_tag }}
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js" defer="defer"></script>

<div style="width:300px; clear:both;">
  <p>
    <label for="date">Pick a delivery date:</label>
    <input id="date" type="text" name="attributes[date]" value="{{ cart.attributes.date }}" />
    <span style="display:block" class="instructions"> We do not deliver during the week-end.</span>
  </p>
</div>

<script>
  window.onload = function() {
      if (window.jQuery) {
        let $ = window.jQuery;

        $(function() {
          $("#date").datepicker({
          minDate: +1,
          maxDate: '+2M',
          beforeShowDay: $.datepicker.noWeekends
        });
      });
    }
  }
</script>

1. Clique em Salvar.

Incluir o snippet na página do carrinho

Para incluir o snippet de data de entrega na página do carrinho:

1. No diretório Seções, clique em cart-template.liquid. Se o tema não incluir esse arquivo, 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 'delivery-date' %}

1. Clique em Salvar.

O campo de entrada para a data de entrega está disponível na página do carrinho. Quando você clica dentro do campo de texto, é exibido um calendário:

O seletor de datas usado nesta personalização é um widget da biblioteca de interface do usuário jQuery. Este post do blog explica como desabilitar datas específicas no calendário do seletor.