Ajuda
Fazer login

Adicionar um seletor de data de entrega ao carrinho

É possível incluir um calendário na página do carrinho para que os clientes especifiquem uma data de entrega para o pedido.

Seletor de data de entrega

Nesta página

Incluir o jQuery no seu theme.liquid

Para que essa personalização funcione, alguns temas exigem que uma tag de script para jQuery seja adicionada ao arquivo de layout theme.liquid. Se você usa um tema gratuito da Shopify, 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

Para criar um snippet para o seletor 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 novo snippet:

  4. Crie o snippet:

  5. Dê ao snippet o nome de delivery-date.

  6. Clique em Criar snippet. O novo arquivo de snippet será aberto no editor de código.

  7. No novo snippet delivery-date.liquid, cole o código a seguir:

{{ '//code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css' | stylesheet_tag }}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></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 weekend.</span>
  </p>
</div>


<script>
  document.addEventListener('DOMContentLoaded', function() {
    if (window.jQuery) {
      $(function() {
        $("#date").datepicker({
          minDate: +1,
          maxDate: '+2M',
          beforeShowDay: $.datepicker.noWeekends
        });
      });
    }
  });
</script>
  1. Clique em Salvar.
Dispositivo móvel

  1. No Shopify app, toque no ícone Menu.

  2. Na seção Canais de vendas, toque em Loja virtual.

  3. Toque em Gerenciar temas.

  4. Encontre o tema que você quer editar, toque no botão … para abrir o menu de ações e, depois, em Editar código.

  5. No diretório Snippets, toque em Adicionar novo snippet:

  6. Crie o snippet:

  7. Dê ao snippet o nome de delivery-date.

  8. Toque em Criar snippet. O novo arquivo de snippet será aberto no editor de código.

  9. No novo snippet delivery-date.liquid, cole o código a seguir:

{{ '//code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css' | stylesheet_tag }}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></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 weekend.</span>
  </p>
</div>


<script>
  document.addEventListener('DOMContentLoaded', function() {
    if (window.jQuery) {
      $(function() {
        $("#date").datepicker({
          minDate: +1,
          maxDate: '+2M',
          beforeShowDay: $.datepicker.noWeekends
        });
      });
    }
  });
</script>
  1. Toque 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 Sections, clique em main-cart-items.liquid.

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

{% render 'delivery-date' %}
  1. Clique em Salvar.

Agora você tem um campo de inserção de data de entrega na página do carrinho. Ao clicar no campo de texto, um calendário será exibido:

Seletor de data de entrega

O seletor de data usado nesta personalização é um widget da biblioteca da interface do jQuery.