Colocar Imagem do Produto na Tela de Checkout

Código CSS/HTML
1

Boa tarde Senhores,

gostaria de colocar a imagem do produto na tela do checkout, vi no fórum o seguinte código:

No entanto minha imagem ficou com o status ‘undefined’, alguém ai saberia me ajudar ?

erro img produto
erro img produto1104×271 7.26 KB

2

o código que coloquei foi esse aqui:

image

3

pode compartilhar o link da sua loja para avaliar?

4
5

Tava procurando pela comunidade e não achei de jeito nenhum (tava com preguiça de fazer). O código em questão está um pouco errado e a formatação ainda está bem antiga.
Segue ele funcional!

Agora que vi que esqueci de tirar o debug, pode remover a linha do console.log (mesmo o tópico sendo de 30 mil anos atrás)

<script>
$(document).ready(function(){
    if (window.location.href.indexOf("checkout") > -1) {

        var UrlImages = Array.prototype.map.call(
            $('img'),
            function(e) { return e.src; }
        );
        
        var images = UrlImages.filter(function(e) { return e.includes('produto'); });    
        var imagesFormated = images.map(function(e) {
            var newSrc = e;
            newSrc = newSrc.replace(/\/(\d{2,4})x(\d{2,4})\//, '/500x500/');
           // console.log("teste: " + newSrc);
            return '<img src="' + newSrc + '" />';
        });

        $('[data-produto-id]').each(function (i, a) {
            $(this).before('<td class="sem-borda conteiner-imagem"><div class="imagem">' + imagesFormated[i] + '</div></td>');
        });

        $('table.table.tabela-carrinho.borda-alpha thead tr th:nth-child(1)').before('<th><h6>Imagem</h6></th>');
        $('table.table.tabela-carrinho.borda-alpha tbody .bg-dark td:nth-child(1)').before('<td>&nbsp;</td>');

    }
});
</script>>

<style>
/* Tamanho das imagens - Altere os pixels de acordo com o que preferir*/
.resumo-compra .tabela-carrinho img {
    max-height: 85px !important;
    max-width: 85px !important;
}
</style>
2 curtidas