Opção de embrulho para presente (gaveta do carrinho) - Upsell

16 de dezembro de 2022

Compatibilidade: SOMENTE todos os temas GRATUITOS do Shopify 2.0 . Funciona da versão inferior até a versão 11

Você pode adicionar uma nota no Shopify 2.0 e também adicionar qualquer produto para upsell no carrinho. Isso funciona no tema Dawn e em qualquer tema do Shopify 2.0, até mesmo no tema Atualizar. Se o seu produto tiver diversas variantes, ele adicionará apenas a primeira variante.

Por favor, certifique-se de verificar o loja de demonstração antes de comprar. Senha: made4uo

Se você quiser usar a página do carrinho, use este código . Não use o código junto.

NOTA: O código do embrulho para presente para a página do carrinho e a gaveta do carrinho são iguais, mas com posicionamento diferente.

O que você está comprando:

Adicione um produto com apenas um clique de um botão apenas na gaveta do carrinho (sem página do carrinho)
O código está usando ajax que atualiza a gaveta do carrinho
Escolha qualquer produto que desejar
O design pode depender do tema do Shopify em uso
O código pode não funcionar em conjunto com um aplicativo

O que torna nosso código melhor:

Não usamos bibliotecas externas, com isso dito, nosso código não terá nenhum efeito mínimo no desempenho de velocidade do seu site
Não deixamos nem adicionamos códigos para anunciar em nosso site
Nosso código é compatível com dispositivos móveis

Quaisquer problemas relacionados ao código serão corrigidos sem custo adicional, excluindo solicitações de customização de código. Basta entrar em contato conosco em "Converse conosco". Estamos a apenas um botão de distância.

Para iniciar:

1. Vá para Admin store > Loja Online > Temas > Ações > Editar código.

2. Abra a pasta Snippet e crie um novo snippet, chame-o de “embrulho para presente”.

3. Em seguida, cole o código abaixo. Clique em SALVAR.

{ % atribuir produto = configurações. embrulho_produto_presente % }
 { % atribuir variante_id = produto. variantes . primeiro . eu ia % }
 { % se produto ! = em branco % } 
{ % se carrinho ! = vazio % }
 < div class = "giftWrapContainer" >
 < presente - embrulho
 dados - carrinho - type = " {{ settings.cart_type }} " 
dados - variante - id = " {{variant_id}} "
 dados - remover - link = "carrinho/trocar?id= {{ variant_id }} &quantity=0"
 dados - adicionar - link = "carrinho/adicionar?id= {{ variant_id }} &quantidade=1"
 > 
< div class = "cartCheckbox" name = " {{ settings.attribute_name }} " >
 < input type = "checkbox" name = "atributos[ {{ settings.attribute_name }} ]" id = "drawerCheckbox" > 
< label for = "drawerCheckbox" > { { configurações. checkbox_label } } </ label >
 </div> _ _
 { % se configurações. mostrar_nota % } 
< div class = "cart__note campo giftWrapNote" >
 < label for = "attributeNote" > { { configurações. note_label } } </ label >
 < área de texto
 formulário = "carrinho" 
class = "campo de área de texto__input"
 id = "atributoNota"
 nome = "atributos[ {{settings.note_label}} ]"
 espaço reservado = " {{ 'sections.cart.note' | t }} "
 > { { carrinho. nota } } </ textarea > 
</div> _ _
 { % fim se % }
 < tipo de script = "application/json" id = "cartItems" >
 { { carrinho. itens | json } }
 </roteiro> _ 
</ embrulho para presente >
 </div> _ _
 { % fim se % }
 { % fim se % }
 <estilo> _
 . giftWrapContainer {
 posição : relativa ;
 largura : 100 %; 
largura máxima : 35rem ;
 margem inferior : 4rem ;
 }
 . carrinhoCheckbox {
 posição : relativa ;
 margem inferior : 1rem ;
 }
 . está vazia . giftWrapContainer {
 Mostrar nenhum ;
 } 
. giftWrapNote {
 margem - topo : 5rem ;
 }
 </ estilo >
 <roteiro> _
 classe GiftWrap estende HTMLElement {
 construtor ( ) {
 super ( ) ; 
esse . caixa de seleção = isto . querySelector ( "entrada" ) ; 
esse . caixa de seleção . addEventListener ( " alterar " , isto.checkboxListener.bind ( isto ) ) ;
 
esse . carrinhoItems = este . querySelector ( "#cartItems" ) . textoConteúdo ;
 esse . nota = documento. querySelector ( "nota do carrinho" ) ; 
esse . iniciar ( ) ;
 }
 checkboxListener ( ) {
 if ( esta . caixa de seleção . verificada == verdadeiro ) {
 esse . adicionar Item ( ) 
sessãoArmazenamento. setItem ( "verificar" , "verdadeiro" ) ;
 } outro {
 esse . remover item ( )
 sessãoArmazenamento. removeItem ( "verificar" ) ;
 }
 } 
iniciar ( ) {
 if ( sessãoStorage.getItem ( "verificar" ) ) {
 esse . caixa de seleção . verificado = verdadeiro
 } outro { 
esse . caixa de seleção . verificado = falso
 }
 esse . ocultarBtn ( ) ;
 }
 ocultarBtn ( ) {
 deixe giftItem = '' ; 
if ( este . conjunto de dados . cartType == 'gaveta' ) {
 giftItem = documento. querySelector ( `quantidade - popover [ dados - variante - id = "${this.dataset.variantId}" ] ` ) ; 
} outro {
 giftItem = documento. querySelector ( `quantidade - popover [ dados - quantidade - variante - id = "${this.dataset.variantId}" ] ` ) ;
 } 
if ( giftItem ) giftItem. mais próximo ( 'quantidade-popover' ) . estilo . exibir = 'nenhum' ;
 }
 adicionar Item ( ) { 
if ( este . conjunto de dados . cartType == 'gaveta' ) {
 buscar ( janela. Shopify . rotas . root + este . conjunto de dados . addLink ) 
. então ( ( resposta ) => resposta. texto ( ) )
 . então ( ( textoderesposta ) => { 
consthtml = newDOMParser ( ) . parseFromString ( respostaText , 'texto/html' ) ;
 seletores const = [ 'cart-drawer-items' , '.cart-drawer__footer' ] ; 
for ( const seletor de seletores ) {
 const targetElement = documento. querySelector ( seletor ) ;
 const fonteElement = html. querySelector ( seletor ) ; 
if ( targetElement && sourceElement ) {
 elementoalvo. substituirCom ( sourceElement ) ;
 }
 }
 esse . ocultarBtn ( )
 } ) 
. pegar ( ( e ) => {
 console. erro ( e ) ;
 } ) ;
 } outro { 
buscar ( janela. Shopify . rotas . root + este . conjunto de dados . addLink )
 . então ( ( resposta ) => resposta. texto ( ) ) 
. então ( ( textoderesposta ) => {
 consthtml = newDOMParser ( ) . parseFromString ( respostaText , 'texto/html' ) ; 
const fonteQty = html. querySelector ( 'itens do carrinho' ) ;
 documento. querySelector ( 'itens do carrinho' ) . innerHTML = sourceQty. HTML interno ;
 esse . ocultarBtn ( )
 } ) 
. pegar ( ( e ) => {
 console. erro ( e ) ;
 } ) ;
 }
 }
 remover item ( ) { 
if ( este . conjunto de dados . cartType == 'gaveta' ) {
 buscar ( janela. Shopify . rotas . root + este . conjunto de dados . removeLink ) 
. então ( ( resposta ) => resposta. texto ( ) )
 . então ( ( textoderesposta ) => { 
consthtml = newDOMParser ( ) . parseFromString ( respostaText , 'texto/html' ) ;
 seletores const = [ 'cart-drawer-items' , '.cart-drawer__footer' ] ; 
for ( const seletor de seletores ) {
 const targetElement = documento. querySelector ( seletor ) ;
 const fonteElement = html. querySelector ( seletor ) ; 
if ( targetElement && sourceElement ) {
 elementoalvo. substituirCom ( sourceElement ) ;
 }
 }
 } )
 . pegar ( ( e ) => { 
console. erro ( e ) ;
 } ) ;
 } outro {
 buscar ( janela. Shopify . rotas . root + este . conjunto de dados . removeLink ) 
. então ( ( resposta ) => resposta. texto ( ) )
 . então ( ( textoderesposta ) => { 
consthtml = newDOMParser ( ) . parseFromString ( respostaText , 'texto/html' ) ;
 const fonteQty = html. querySelector ( 'itens do carrinho' ) ; 
documento. querySelector ( 'itens do carrinho' ) . innerHTML = sourceQty. HTML interno ;
 } )
 . pegar ( ( e ) => {
 console. erro ( e ) ;
 } ) ; 
}
 }
 }
 elementos personalizados. define ( "embrulho para presente" , GiftWrap ) ;
 </roteiro> _

4. A seguir, adicionaremos nossas configurações para permitir a personalização. Abra settings_schema.json na pasta Config e role para baixo até encontrar o último "]." Antes do colchete de fechamento, adicione o código abaixo.

 , {
 "nome" : "Embrulho para presente" , 
"configurações" : [
 {
 "tipo" : "produto" ,
 "id" : "produto_embrulho_presente" ,
 "label" : "Produto a ser adicionado com caixa de seleção"
 } ,
 {
 "tipo" : "texto" , 
"id" : "checkbox_label" ,
 "label" : "Etiqueta da caixa de seleção" ,
 "default" : "Por favor inclua a embalagem para presente."
 } ,
 {
 "tipo" : "texto" ,
 "id" : "nome_atributo" , 
"default" : "Embrulho para presente" ,
 "label" : "Nome do atributo"
 } ,
 {
 "tipo" : "caixa de seleção" ,
 "id" : "variáveis_múltiplas" ,
 "label" : "Múltiplas variantes"
 } , 
{
 "tipo" : "caixa de seleção" ,
 "id" : "show_note" ,
 "label" : "Mostrar nota" ,
 "padrão" : verdadeiro
 } ,
 {
 "tipo" : "texto" , 
"id" : "note_label" ,
 "label" : "Etiqueta da nota" ,
 "default" : "Por favor, forneça mais instruções."
 }
 ]
 }

5. Em seguida, você deve abrir “cart-drawer.liquid” na pasta Snippet. Encontre o código abaixo. Veja a imagem para referência de posicionamento.

Atualizar papel de presente com tema

Para uma versão mais recente , você pode ter o código abaixo.

Gaveta do carrinho

6. Em seguida, insira o código abaixo.

{% render 'gift-wrap' %}

A última coisa a fazer é atribuir seu produto para embrulho para presente. Vá para sua editor de temas, clique Configurações do tema , o Embrulho para presente. Em seguida, atribua o produto para embrulho.

É isso (",) Se isso for muito intenso para você, não hesite em entrar em contato comigo através do "Converse conosco".