Boa tarde. Preciso alterar tamanho do item adicionado ao carrinho na versão mobile.
Alguém consegue me ajudar?
Acho que isso não vai ser fácil de resolver, porque essas imagens já estão com uma resolução de 64x64:
‘https://cdn.awsli.com.br/64x64/1669/1669182/produto/79771725/b338dc6de8.jpg’
2 curtidas
Entendi José. É que o produto está ficando muito pequena na hora da compra. Eu queria deixar bem grande. Para ficar algo legal.
Você pode tentar aumentar o tamanho da imagem à força com CSS:
.tabela-carrinho img {
max-width: 150px;
max-height: 150px;
width: 150px;
}
Mas a qualidade vai ficar bem ruim.
Ah, e se você for usar esse código, coloca ele no bloco dos códigos do mobile.
3 curtidas
Eu apliquei o comando. Porem realmente José ele perde muito qualidade. Será que consguimos outra solução.
Eu acho que dá para alterar via código, provavelmente via JavaScript. Mas não sei dizer se é algo do seu tema ou uma opção padrão da Loja Integrada.
Precisaríamos ver como essa exibição do produto é criada e fazer ele usar a imagem maior ao invés dessa nanica.
1 curtida
olha da ate para usar outras fotos, mas terá que mudar o caminho da imagem, usando o mesmo caminho da vitrine / home
2 curtidas
É isso Leonardo.
Precisamos criar um script que altere a URL dessas imagens, provavelmente só retirando esse trecho que obriga elas a ficarem com 64x64 de dimensão e atualizar o CSS.
2 curtidas
Será que conseguimos José? Pois notei que somente essa foto do item adicionado ao carrinho fica desse tamanho. Realmente muito pequeno.
Faz um teste inserindo esse código JavaScript, se possível, apenas na página do carrinho.
$(document).ready(function() {
var produtos = $('#corpo > div > div.secao-principal.row-fluid.sem-coluna > div > div.caixa-sombreada > table > tbody > tr > td.sem-borda.conteiner-imagem > div > a > img');
//Alterando endereço da imagem de cada produto
produtos.each(function() {
var endereco = $(this).attr('src');
endereco = endereco.replace('/64x64/', '/');
$(this).attr('src', endereco);
});
});
Depois você insere esse CSS no bloco exclusivo para os códigos do mobile e vai alterando os três valores numéricos até ficar com o tamanhho desejado:
.tabela-carrinho img {
max-width: 200px;
max-height: 200px;
width: 200px;
}
2 curtidas
Parece que o script não foi carregado.
Você salvou ele como JavaScript no rodapé da página do carrinho? Se sim, tenta trocar essa opção, coloca para usar o script em todas as páginas.
1 curtida
Deu certo José. Eu fiz a alteração que você falou e funcionou certinho.
Deixa eu aproveitar e ver outra coisa que eu preciso José. Eu gostaria que o menu de departamentos e do carrinho sumisse quando a pessoa desce a página. Não tenho certeza se isso é possivel.
1 curtida
Você pode ocultar esse menu com esse CSS:
.conteudo-topo .busca-mobile.fixed {
display: none;
}
2 curtidas
Ficou perfeito José. Muito obrigado pela ajuda.
1 curtida
Boa tarde José.
Consegue me ajudar em uma dúvida. Está desalinhado a descrição dos meus produtos na versão mobile.
Boa tarde.
Eu não entendi bem o que você precisa fazer. Você quer deixar as descrições com o mesmo tamanho?
2 curtidas
Exato José. As descrições lado a lado estão desalinhadas no tamanho. Gostaria que ficasse do mesmo tamanho. Esteticamente ficaria melhor.
Não acho que essa seja a solução ideal, mas você pode alinhar os preços na base dessa coluna onde ficam os preços:
#listagemProdutos.listagem .listagem-item .info-produto, .listagem.aproveite-tambem .listagem-item .info-produto {
min-height: 255px;
}
#slick-slide11 > div > div.info-produto > div {
position: absolute;
bottom: 0;
}
Você pode colocar esses CSS no trecho exclusivo para o mobile.
2 curtidas
José eu notei que não acontece com todos os itens o alinhamento da descrição, acredito que seja normal, pois tem uma diferença no tamanho do título do produto.
A alteração que fizemos ficou melhor.
Gostaria que de uma ajuda sua em outra questão. Notei que em alguns celulares o campo busca esta sobrepondo o botão cupom. Consegue me ajudar?
