Como adicionar exclusão de item do carrinho com efeito jquery no Opencart

  • Olá,

    Um das coisas que particularmente acho ruim no carrinho do OpenCart é a exclusão de produtos. Você precisa selecionar no checkbox qual produto quer excluir e depois clicar no botão “Atualizar”, para só então o produto sair do carrinho:

    Para um usuário inexperiente, ou algum que esteja acostumado com lojas como Submarino, pode acabar estranhando isso, já que as outras excluem o produto apenas clicando, ao invés de selecionar. Algumas lojas ainda deixam isso melhor, usando Ajax com efeito.

    O que vou mostrar nesse post é exatamente como melhorar a experiência do usuário, mudando a forma de exclusão de produto do carrinho. Além de tornar mais intuitivo com um botão “excluir” na frente de cada produto, ainda mostro como adicionar um efeito em Ajax, de uma biblioteca jQuery. Ficaria assim:

    Você precisará editar apenas 2 arquivos:

    • catalog/controller/checkout/cart.php
    • catalog/view/theme/default/checkout/cart.tpl

    OBS: Esse tutorial foi feito usando uma loja opencart nas versões 1.5.1.2 1.5.1.3. Caso tente aplicar os códigos abaixo em uma versão mais nova (ou mais antiga) pode não funcionar. De qualquer forma, se acontecer algum problema deixe no comentário qual a versão de loja você está usando e qual é o código de erro, pois assim posso ajuda-lo mais facilmente.

    Caso você esteja usando as versões 1.5.1.2 ou 1.5.1.3 do OpenCart baixe os arquivos clicando no botão abaixo e envie pelo FTP. Antes de enviar faça o backup desses mesmos arquivos que vai substituir,  pois sempre pode dar algum problema inesperado.

    Os arquivos em download abaixo foi descontinuado e não funciona no vale presente. Baixe a versão em vQmod no final do post que esta mais atualizado.

    Baixar arquivos agora

    Caso você use alguma versão do Opencart mais recente adicione os códigos manualmente como mostrado no video.

    Ver Códigos

    Veja o video

    Download alteração para loja 1.4.9.x

    Se você utiliza o OpenCart versão 1.4.9.x e utiliza o template default sem alterações nos arquivos catalog/controller/checkout/cart.php e catalog/view/theme/default/checkout/cart.tpl, você pode baixar esses mesmos arquivos com a alteração desse post clicando no botão abaixo:

    Baixar arquivos agora

    OBS: Faça backup antes de enviar esses arquivos por cima dos seus.

    Se você quer adicionar as alterações manualmente veja o txt abaixo:

    Ver Códigos

    Download da Alteração para vQmod para lojas 1.5.x:

    Segue a alteração em vQmod (conheça mais sobre o vQmod acessando este link). É só adicionar o aquivo XML que estou passado na pasta “xml” de seu vQmod. Caso tenha dúvidas para instalar o vQmod, acesse aqui.

    Atualizado dia 21/03/2012 funciona no vale presente também:

    Baixar alteração em XML

    Se inscreva em nosso curso de OpenCart que logo abriremos as inscrições.

    Abraço.



    Related Posts Plugin for WordPress, Blogger...




21 Comentarios

  • Cara, muito fera esses tuto de vocês, vou compartilhar eles em meu blog. Obrigado e abraço!

  • Muito obrigado Anderson.

    Abraço!

  • Surgimento é o melhor site com conteúdos e ferramentas para o Opencart. Parabéns!
    Eu uso a versão 1.4.9.5 do Opencart e não pretendo atualizá-la por enquanto. Você poderia criar o arquivo para essa versão ? Eu não entendo nada de PHP, só HTML.
    Abraços.

  • Olá Gabriel,

    Muito obrigado pelo elogio!

    Acabei de atualizar o post com essa mesma alteração para a versão 1.4.9.x

    Abraço.

  • Jeann, não sei nem como te agradecer, ficou perfeito, obrigado mesmo. Tem muita gente leiga que levaria meses pra aprender a remover produtos do carrinho apenas marcando aquela caixa e clicando em atualizar, acredite, eu conheço gente assim. rs..

    Eu tenho um site de informática http://www.helpaki.com que ta no ar pouco mais de 2 anos e meio, se você me ceder permissão eu posso copiar o conteúdo dessa página e publicar lá, com os devidos créditos e link do seu site é claro.

    Mas caso você não queira, eu faço questão de criar um artigo com texto de minha total autoria e indicar a página de seu site para acesso ao conteúdo em questão. O que você me diz ?
    Abraço!

  • Olá Gabriel, fico feliz de ter ajudado.

    Esse detalhe da exclusão eu tbm já vi percebi muitos usuarios apanhando disso na pratica. E tem lojista que recebe ligação porque o cliente trava ao querer retirar o item do carrinho rsrs.

    Pode colocar os arquivos em seu site sem problema. Só peço que de crédito.

    Eu sempre estou atualizando o post e os arquivos baseado no feedback que me dão, por isso talvez seja melhor pra você passar o link do post para a pessoa baixar para evitar comentários do tipo “deu erro x em minha loja …” em seu site. Mas faça da forma como achar melhor.

    Abraço.

  • Me ajudou sim, e muito, afinal, são os detalhes que fazem a diferença!
    Se não for pedir muito, será que você tem como me ajudar em um problema ?
    É o seguinte: aquele “X” em vermelho que fica no módulo carrinho que serveria para remover o produto sem a necessitade de clicar em “Carrinho” e ir para a página do carrinho, não está funcionando, o certo seria você clicar no “X” e aparecer uma janelinha estilo Popup com um alerta perguntando se a pessoa quer remover do carrinho (Confirmar).
     
    Esse erro já estava assim antes de eu alterar os arquivos do carrinho para adicionar o botão remover, fora isso está funcionando perfeitamente.
     
    Então está certo, amanhã mesmo eu vou criar um artigo com meu próprio texto apenas indicando o link dessa página para acesso ao seu conteúdo.

  • Olá Gabriel,

    Pelo que percebi esse erro esta acontecendo nesse arquivo http://webzica.com/catalog/view/javascript/jquery/tab.js. Tente baixar novamente a loja opencart 1.4.9.5 e pegue apenas esse arquivo e jogue por cima desse atual que deverá ficar certo.

    A substituição desse arquivo provavelmente vai corrigir 2 erros de sua loja de uma vez:

    1º problema de excluir produto do carrinho na lateral;
    2º problema com relação as abas na página de detalhe do produto pois percebi que não funciona.

    Eu vi esses erros acontecendo pelo firebug do firefox.

    Abraço.

  • Fiz um back-up do arquivo e testei, baixei o pacote completo da versão 1.4.9.5 mas não deu certo, não alterou em nada, dai baixei a versão 1.4.9.6 pra ver se derrepente funcionava, mas não aconteceu nada também. Não achei nada no Google referente a isso. Tentei com outros arquivos também que era referente ao carrinho, mas nada.
     
    Mas tudo bem, esses 2 recursos não vão fazer tanta falta assim, eu substitui a imagem do “X” vermelho por uma outra pra dirfarçar rs, assim ninguém vai pensar que é um botão de remover e vai ir direto na página do carrinho.
     
    Mas vlw pela força mesmo assim.
    Abraço.

  • Olá Gabriel,

    Estou mandando o arquivo no seu e-mail, adicione ele na pasta catalog/view/javascript/jquery/ e me avise assim que colocar.

    Abraço.

  • Pow Jeann, não sei nem como te agradecer, brigadão mesmo, você é o cara.
    Funcionou perfeitamente, as abas funcionaram, coisa que nunca tinha acontecido antes, ficou com o efeito também quando você clica em comprar vai direto pro carrinho sem necessitade de atualizar a página e o botão de remover, aquele “X” em vermelho funcinou também, nunca tinha funcionado.
     
    Ontem mesmo eu tinha feito um tópico no forum do Opencart sobre isso, e coloquei seu site como referência, que me ajudou em questão do botão que substituia a caixa de marcar para exclusão de produtos do carrinho.

    Vou encerrar o tópico lá com a solução e indicar sua página novamente.
    Quanto a questão da frase do rodapé, não foi nada, são apenas detalhes que passam despercebidos as vezes, e detalhes é uma coisa que eu sempre cuidei muito, afinal, são eles que fazem a diferença :D
     
    Brigado de novo, abraço e bom final de semana!

  • Bom dia Gabriel.

    Que bom que deu certo.

    Obrigado pelo elogio e por citar o blog no forum do OpenCart.

    Abraço.

  • Muito bom! Parabéns mesmo.
    Deu certo pra mim.

  • Olá Junior,

    Muito obrigado pelo elogio.

    Abraço.

  • Realmente o visual fica bem melhor e alguns “leigos” não terão problemas na hora da exclusão..
    Jeann se você me permite, gostaria de deixar um pequeno tutorial referente ao botão excluir.
     
    Se caso alguém preferir, poderá colocar uma imagem no lugar do “X”.
    (OBS: Faça Back-up antes de fazer as alterações).
     
    ATENÇÃO: Foi testado apenas na versão 1.4.9.x Para versões 1.5.1.x basta modificar na linha 40.
    =================
    Após fazer a alteração, abra o arquivo localizado no endereço “catalog/view/theme/NOME DO SEU TEMA/checkout/cart.tpl” com Dreamweaver e na linha 38, modifique conforme mostra nas imagens abaixo..
     
    ANTES da alteração: http://i.imgur.com/L7tz6.png
    DEPOIS da alteração: http://i.imgur.com/12ygH.png
    Não esqueça de colocar a imagem de sua preferência na pasta “catalog/view/theme/NOME DO SEU TEMA/image”
     
    Não esqueça também de colocar o nome correto da imagem e seu formato quando alterar, para não acontecer nenhum problema.
    Exemplo: catalog/view/theme/NOME DO SEU TEMA/image/BOTAO_REMOVER.PNG
     
    Caso queira ver como ficou na minha loja, basta acessar o link da imagem: http://i.imgur.com/8GLy5.png
     
    ==================
    Com esta pequena alteração, além de deixar mais destacado e personalizado seu carrinho de compras, você acaba corrigindo um bug, que é quando você passa o mouse sobre o botão “X” que aparece alguns números e pontos. Basta seguir como no tutorial.
     
    Espero ter ajudado..
    Abraço!

  • Olá Gabriel!

    Muito obrigado pela contribuição. Desculpe a demora para responder. Essa semana passada acumulou muita coisa por causa da Campus Party e acabei não vendo os comentários do blog.

    Abraço!

  • Como observado pelo usuário Davi no fórum OCBR ( http://www.opencartbrasil.com.br/forum/viewtopic.php?f=43&t=2170 ), o módulo não cobre o checkbox dos Vale Presentes.

  • Olá Renato.

    Obrigado por informar desse tópico. Acabei de corrigir esse problema. Baixe a versão do módulo em vQmod que as outras formas vou descontinuar e manterei apenas essa alteração em vQmod.

    Att
    Jeann

  • Muito bom cara, valeu pela força ai

  • Uma contribuição:

    NO meu caso ao colocar mouse sobre o botão remover, era mostrado o [key] do produto (não gostei disso), então removi o codigo [ title="" ], isto deu erro e não excluia o item, enao observei que usa o parametro title lo ajax logo abaixo para fazer referencia ao Key do produto.
    A minha solução:
    Alterei o [ title="" ] por [ alt="" ] e mais abaixo [ data: {remover: $('.remover').eq(posicao).attr('title')} ] por [ data: {remover: $('.remover').eq(posicao).attr('alt')} ], e usei a função [ title ] como [ title="Remover este ítem" ].
    Acho que fica melhor, “na minha opinião”.
    Obs. Isso deve ser feito nas duas a do $product['key'] e a do $voucher['key']

    Abraço a todos.

  • Olá Robert,

    Muito obrigado pela sua contribuição.

    Abraço.

Comente aqui

* Nome, Email e comentário são obrigatórios