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.
Certifique-se de verificar a loja de demonstração antes de comprar. Senha: made4uo
Se você quiser usar a gaveta do carrinho, use este código .
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 página do carrinho (sem gaveta 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 ( este ) ) ; 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, precisamos adicionar o snippet no arquivo main-cart-footer.liquid na pasta Section. Abra o arquivo e encontre o código abaixo. Veja a imagem para posicionamento.
< div class = "largura da página {% if cart == empty %} is-empty {% endif %} " id = "main-cart-footer" data - id = " {{ section.id }} " > |
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 o seu editor de tema, clique em Configurações do tema , na embalagem para presente.
É isso (",) Se isso for muito intenso para você, não hesite em entrar em contato comigo através do "Converse conosco".
0 comentários