Adicionar um seletor de data de entrega ao carrinho

Esta página foi impressa em Apr 27, 2024. Para a versão mais recente, acesse https://help.shopify.com/pt-BR/manual/online-store/themes/themes-by-shopify/vintage-themes/customizing-vintage-themes/add-date-picker.

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

Seletor de data de entrega

Nesta página

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

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

Seletor de data de entrega

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.

Tudo pronto para começar a vender com a Shopify?

Experimente de graça