Colapse no campo de descrição do produto

CMS Personalização
,
#1

Pessoal, gostaria de aplicar um colapse na descrição do produto, para que esta só apareça quando o comprador clicar sobre a descrição.
Porém gostaria de manter visível a especificação do produto.

#2

Bom dia, a princípio não recebemos nenhuma sugestão sobre isso. Caso queira tentar, aqui você consegue mexer na descrição dos produtos.

#3

@Matheus
Eu te pergunto:
No caso eu deveria colocar um evento para escutar esse clique na descrição, enquanto ele estiver hidden.
Apos o evento de clique ele mostra o conteúdo da variável (Descrição).
Acho que seria isso?

#4

Pode ser, mas como ai você está mexendo diretamente no html, pode ter soluções mais fáceis.

#5

Vou fazer uma função aqui e mando para você ver se ficou boa. Farei em JS pois preciso manipular a DOM para escutar esse evento e mostrar o conteúdo (eventListners).
Não sei se vou conseguir, pois tem muita coisa no código de vocês que nem faço ideia do que se trata. Muito avançado para mim ainda.
MAs vou tentar fazer o código aqui. Tentar capturar num getElementByAd ou ByClass e escutar um evento mouseup .
Mas preciso enviar para você ver se não vai travar o restante do código…rsrsrsr

#6

Aluizio, você viu que da pra vc fazer as modificações localmente e testar diretamente na sua máquina antes de publicar? Não sei se seria o caso, só uma sugestão!

3 curtidas
#7

Obrigado @Carlos, iria sugerir isso mesmo. Nesse caso @anon32448718 não teria problema algum, pois se travar, ele irá informar na hora.

2 curtidas
#8

@Carlos, muito obrigado pela dica. Realmente muito valiosa.
Com elas acredito que posso fazer alterações mais profundas no código sem medo de travar a coisa toda.
Retorno depois para dar um feed back para vocês sobre as alterações efetuadas e os resultados.
Isso se eu conseguir né. Pois tem o fato da expectativa e da realidade.
@Matheus obrigado, também pela sempre presente ajuda.

2 curtidas
#9

@Matheus fiz a aplicação do colapse na descrição do produto funcionou. acho que ficou legal. vou colocar aqui para você dar uma conferida e ver se é viável subir a alteração.

colapse
colapse922×264 50.7 KB

alteração efetuada no arquivo: template\pages@\sections\product-description.ejs

#10

O código não apareceu por que você precisa escapar colocando 3 aspas antes e 3 aspas depois do código

#11

Você mexeu só com html né, falei com você que era mais fácil @Matheus. Por isso falamos que na E-Com Plus a personalização é mais tranquila, porque você paga no html na maioria das vezes, se quiser fazer algo maior, dai sim você paga em javascript

#12

@Matheus foi simples sim. Só parar para raciocinar.
As vezes fico meio bitolado com todo código que vejo no bootcamp e confundo tudo.
“”" 

    <a href="#description" data-toggle="collapse" name="description"># <%= _.dictionary('productDescription') %></a>

    </p>

  <div id="description" class="container collapse" class="html-clearfix">"""
#13

Só uns detalhes:

  1. O ideal seria especificar outros atributos do link:
<a data-toggle="collapse" href="#description" role="button" aria-expanded="false" aria-controls="description">
  # <%= _.dictionary('productDescription') %>
</a>

Mesmo que funcione sem, estes atributos são importantes para acessibilidade.

  1. O atributo class ficou duplicado na div e acho que não precisa de .container aqui (não fará diferença):
<div id="description" class="collapse html-clearfix">

Uma sugestão adicional, como é um call to action agora (não só uma âncora como anteriormente), talvez seja melhor estilizar o link como botão também:

<a class="btn btn-secondary" data-toggle="description" href="#description" role="button" aria-expanded="false" aria-controls="description">
  # <%= _.dictionary('productDescription') %>
</a>

Sugeri com cor secundária para não atrair a atenção que deve ser voltada ao CTA principal (botão comprar).

1 curtida
#14

a class .container eu apenas mantive, pois ela já constava na div anteriormente.
Achei ótimas muito eficientes as suas sugestões, vou implementar aqui.
Concordo com você com o call to action .
Muito obrigado @leonardo

1 curtida
#15

Na verdade o .container por padrão é no elemento pai:

    <div class="container">
      <p class="lead">
        <a href="#description" name="description">#</a>
        <%= _.dictionary('productDescription') %>
      </p>
      <div class="html-clearfix">
        ...
      </div>
    </div>

Acredito que você esteja substituindo o <div class="html-clearfix"> pelo collapse, neste caso o .container pode continuar apenas na div pai…

Por nada :+1: