/* * Produtos similares (mesmo modelo, cores diferentes) da PDP. * Carrossel (slick) montado por similar-products.js dentro de * #similar-products, logo abaixo do skeleton de Cor. Setas só existem no * desktop (arrows:false no mobile, no slick() do JS) - no mobile a * navegação é só por swipe. * * Debugado ao vivo em www.redley.com.br - causas confirmadas: * * 1) "button.slick-prev.slick-arrow { rotate: 180deg }" em * style_site_novo_v.3.4.2.44.css é global (não escopado), então já * girava a seta prev sozinho. Meu "transform: translateY(-50%) * rotate(180deg)" somava um SEGUNDO giro de 180deg (rotate individual * + rotate do transform = 360deg, ou seja, sem giro nenhum - por isso a * prev saía apontando pro lado errado) e, como a propriedade individual * "rotate" é aplicada ANTES do "transform", também invertia o sentido * do translateY(-50%), desalinhando a seta verticalmente (~16px). * Corrigido com "rotate: none !important" pra neutralizar a regra * global, centralização por margin-top (não sofre com a ordem * rotate->transform) e o giro da prev feito só via scaleX(-1). * * 2) 1º/último item "vazando" no desktop: algo no site (fora deste repo - * não achado em nenhum .css versionado, então deve vir do template * remoto "REDLEY-STYLES-2022") aplica "padding-left: 40px" no * .slick-track. Isso empurra a track inteira 40px pra direita sem * diminuir a largura visível da lista, cortando o último slide e * sobrando uma tira do próximo. Zerado aqui com !important; e * "centerMode:false / centerPadding:'0'" no slick() do JS por * segurança, caso a causa real seja um default global de centerMode. * * 3) Fundo opaco nas setas mesmo com "background-color: transparent": a * regra ".carrossel button.slick-arrow" em * style_site_novo_v.3.4.2.44.css seta * "background-color: rgba(255,255,255,.427) !important" (o da * PDP tem a classe "carrossel"). Não é a foto do produto, é essa regra * global vencendo - tem UM elemento a mais no seletor dela * (".carrossel button.slick-arrow") do que o nosso original * (".similar-products__list .slick-arrow"), então mesmo com !important * dos dois lados ela ganhava por especificidade. Igualada aqui * adicionando "button" no seletor. * * 4) "left/right: -18px" nas setas não pegava: "button.slick-arrow.slick- * prev/.slick-next { left/right: 0 !important }" em product-gallery.css * (desktop) também estava sem escopo - valia pra QUALQUER slick-arrow * da página, não só o da galeria de fotos. Como usa !important, vencia * mesmo sem ganhar por especificidade/ordem. Corrigido escopando essa * regra a .product-photo__images em product-gallery.css. */ #similar-products, .similar-products { display: block; width: 100%; clear: both; margin-top: 20px; margin-bottom: 20px; } /* Seletor nativo de Cor da VTEX (".topic Cor productid-X numopt-N", 1 swatch só - Cor não é uma variação real de SKU, é sempre fixa por produto) fica redundante agora que o carrossel de produtos similares já mostra as outras cores com foto. Selector genérico (sem o "productid-X numopt-N", que muda por produto) pra cobrir qualquer PDP. */ .topic.Cor { display: none !important; } .similar-products__title { display: block; width: 100%; font-size: 0.875rem; font-weight: 700; margin: 0 0 10px; text-align: left; text-transform: none; } .similar-products__list { margin: 0; padding: 0; list-style: none; position: relative; width: 100%; } .similar-products__list .slick-list { overflow: hidden; } .similar-products__list .slick-track { padding: 0 !important; /* slick.1.8.1.css (core) põe "margin-left/right: auto" no .slick-track - serve pra nada quando a track é mais larga que a lista (a maioria dos casos), mas quando sobra só 1-2 produtos irmãos a track fica mais estreita que a lista e esse auto centraliza ela, em vez de manter grudada na esquerda como as outras. */ margin-left: 0 !important; margin-right: 0 !important; } .similar-products__item { box-sizing: border-box; padding: 0 3px; } .similar-products__link { display: block; border: 2px solid transparent; transition: border-color 0.2s ease-in-out; } .similar-products__link:hover { border-color: #000; } /* * width/height fixos (via aspect-ratio) em vez de height:auto - a Search * API mistura fotos retrato (a maioria, ~1400x1937) com quadradas * (1000x1000) pro MESMO grupo de produtos irmãos (visto ao vivo na * sandália Kenner Rakka Mono: alguns irmãos vêm 1400x1937, outros * 1000x1000). Com height:auto cada slide ficava com uma altura diferente * (carrossel "desalinhado") e, pior, o item ainda sem imagem carregada * colapsava pra 0 de altura - como as imagens são "loading=lazy", o * browser não considerava um elemento de 0px de altura "visível" e nunca * disparava o carregamento (carrossel ficava vazio até algum scroll/ * resize forçar um reflow). aspect-ratio reserva a altura ANTES da * imagem carregar (corrige as duas coisas de uma vez) e object-fit:cover * corta as quadradas pra caber no formato retrato, em vez de esticar. */ .similar-products__image { width: 100%; aspect-ratio: 1400 / 1937; object-fit: cover; display: block; } /* Desktop - miniaturas pequenas (mesma proporção da Kenner) e setas sobrepostas na imagem, sem fundo */ @media screen and (min-width: 768px) { #similar-products, .similar-products { margin-top: 40px; } .similar-products__list { width: 300px; } .similar-products__item { padding: 0; } .similar-products__list button.slick-arrow { position: absolute; top: 50%; transform: none; rotate: none !important; z-index: 3; width: 26px; height: 26px; margin-top: -13px; padding: 0; border: 0; cursor: pointer; color: transparent; background-color: transparent !important; background-image: url(https://redley.vteximg.com.br/arquivos/next.png); background-repeat: no-repeat; background-position: center; background-size: 20px auto; } .similar-products__list button.slick-prev { left: -22px; transform: scaleX(-1); } .similar-products__list button.slick-next { right: -22px; } /* Fim do carrossel (1º/último slide) - mantém a seta visível, só mais apagada, pra dar o feedback de que não dá mais pra clicar */ .similar-products__list button.slick-arrow.slick-disabled { opacity: 0.35; cursor: default; pointer-events: none; } }