Adicionar um seletor de data de entrega ao carrinho
Esta página foi impressa em Apr 17, 2024. Para a versão mais recente, acesse https://help.shopify.com/pt-BR/manual/online-store/themes/customizing-themes/add-date-picker.
Observação
Se você usa um tema gratuito da Shopify , entre em contato com o Atendimento ao cliente da Shopify para solicitar ajuda com o tutorial, que requer 15 minutos para o design. Para saber mais, consulte o Atendimento para temas .
É 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 um tema gratuito da Shopify Online Store 2.0, talvez seja necessário seguir a próxima etapa:
No diretório Layout , clique em theme.liquid
.
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 }}
Clique em Salvar .
Criar um snippet de data de entrega Para criar um snippet para o seletor de data de entrega:
No admin da Shopify, acesse Loja virtual > Temas .
Encontre o tema que você quer editar, clique no botão … para abrir o menu de ações e, depois, em Editar código .
No diretório Snippets , clique em Adicionar um novo snippet :
Crie o snippet:
Nomeie o novo snippet como delivery-date
.
Clique em Criar snippet . O novo arquivo de snippet será aberto no editor de códigos.
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 weekend.</span>
</p>
</div>
<script>
window . onload = function () {
if ( window . jQuery ) {
let $ = window . jQuery ;
$ ( function () {
$ ( " #date " ). datepicker ({
minDate : + 1 ,
maxDate : ' +2M ' ,
beforeShowDay : $ . datepicker . noWeekends
});
});
}
}
</script>
Clique em Salvar .
No app da Shopify , toque no botão … .
Na seção canais de vendas , toque em loja virtual .
Toque em gerenciar temas .
Encontre o tema que você quer editar, clique no botão … para abrir o menu de ações e, depois, em Editar código .
No diretório Snippets , clique em Adicionar um novo snippet :
Crie o snippet:
Nomeie o novo snippet como delivery-date
.
Clique em Criar snippet . O novo arquivo de snippet será aberto no editor de códigos.
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 weekend.</span>
</p>
</div>
<script>
window . onload = function () {
if ( window . jQuery ) {
let $ = window . jQuery ;
$ ( function () {
$ ( " #date " ). datepicker ({
minDate : + 1 ,
maxDate : ' +2M ' ,
beforeShowDay : $ . datepicker . noWeekends
});
});
}
}
</script>
Clique em Salvar .
No app da Shopify , toque no botão … .
Na seção canais de vendas , toque em loja virtual .
Toque em gerenciar temas .
Encontre o tema que você quer editar, clique no botão … para abrir o menu de ações e, depois, em Editar código .
No diretório Snippets , clique em Adicionar um novo snippet :
Crie o snippet:
Nomeie o novo snippet como delivery-date
.
Clique em Criar snippet . O novo arquivo de snippet será aberto no editor de códigos.
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 weekend.</span>
</p>
</div>
<script>
window . onload = function () {
if ( window . jQuery ) {
let $ = window . jQuery ;
$ ( function () {
$ ( " #date " ). datepicker ({
minDate : + 1 ,
maxDate : ' +2M ' ,
beforeShowDay : $ . datepicker . noWeekends
});
});
}
}
</script>
Clique em Salvar .
Incluir o snippet na página do carrinho Para incluir o snippet de data de entrega na página do carrinho:
No diretório Seções , clique em main-cart-items.liquid
.
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' %}
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 selador de datas usado nesta personalização é um widget da biblioteca de interface do usuário jQuery .