oculatar y mostrar texto en descripciones.

[ZeroCl]

Hola comunidad, a ver si me pueden dar una mano. 

 

Lo que necesito hacer es insertar un boton que sea "mostrar mas" y que al mostrar mas diga "ocultar" en la descripción de los productos.

 

La idea es poner texto como por ejemplo, información del fabricante: el fabricante es blabla .. y un boton que diga "mostrar mas" para los que deseen leer un poco mas pueden ver mas info y a los que no les interesa no texto sin interesa para ellos y no este tan saturado el producto. 

 

Un amigo me paso dos archivos en uno .css y uno .js y me dijo lo siguiente: 

 

to hide the content using HTML and CSS, you need to find the CSS file for your layout. Inside CSS stylesheet, you need to create an identificator, if you know how? And then using a <div> container, you put a HTML marks at the beginning and ending of the text you want to hide via source code. If you do not know this I will explain later - first please locate the CSS file inside administration of PrestaShop. I suppose this might get some time, but without access to the stylesheet, there is no point explaining.

 

Alguien me puede dar un poco de luz al tema?

 

 

desde ya muchas gracias!!!! 

 

 

[Sergio Ruiz]

Aqui: https://codepen.io/maxds/pen/jgeoA tienes un Ejemplo con JavaScript y CSS

[ZeroCl]

Ok, la pregunta es como cargo esa información en prestashop como instalo el Js y el css para que funcionen? 

[ZeroCl]

Aqui: https://codepen.io/maxds/pen/jgeoA tienes un Ejemplo con JavaScript y CSS

 

Disculpa que te pregunte pero donde debo incluir los archivos que me han enviado para que funcionen? lo mismo con el link que me has dado me genera un codigo que ya no se que hacer con el. 

 

Gracias por tu tiempo. 

 

Saludos

[ZeroCl]

Nadie que me pueda dar una mano?

[Sergio Ruiz]

Disculpa que te pregunte pero donde debo incluir los archivos que me han enviado para que funcionen? lo mismo con el link que me has dado me genera un codigo que ya no se que hacer con el. 

 

Gracias por tu tiempo. 

 

Saludos

En el enlace que te he pasado https://codepen.io/maxds/pen/jgeoA tienes un Documento CSS

.morecontent span {
    display: none;
}
.morelink {
    display: block;
}

Un documento JS:

$(document).ready(function() {
    // Configure/customize these variables.
    var showChar = 100;  // How many characters are shown by default
    var ellipsestext = "...";
    var moretext = "Show more >";
    var lesstext = "Show less";
    

    $('.more').each(function() {
        var content = $(this).html();
 
        if(content.length > showChar) {
 
            var c = content.substr(0, showChar);
            var h = content.substr(showChar, content.length - showChar);
 
            var html = c + '<span class="moreellipses">' + ellipsestext+ ' </span><span class="morecontent"><span>' + h + '</span>  <a href="" class="morelink">' + moretext + '</a></span>';
 
            $(this).html(html);
        }
 
    });
 
    $(".morelink").click(function(){
        if($(this).hasClass("less")) {
            $(this).removeClass("less");
            $(this).html(moretext);
        } else {
            $(this).addClass("less");
            $(this).html(lesstext);
        }
        $(this).parent().prev().toggle();
        $(this).prev().toggle();
        return false;
    });
});

Un documento HTML

 

 

  <span class="more">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </span>
    <br><br>
    <div class="more">
      Morbi placerat imperdiet risus quis blandit. Ut lobortis elit luctus, feugiat erat vitae, interdum diam. Nam sit amet arcu vitae justo lacinia ultricies nec eget tellus. Curabitur id sapien massa. In hac <a href="#">habitasse</a> platea dictumst. Integer tristique leo consectetur libero pretium pretium. Nunc sed mauris magna. Praesent varius purus id turpis iaculis iaculis. Nulla <em>convallis magna nunc</em>, id rhoncus massa ornare in. Donec et feugiat sem, ac rhoncus mauris. Quisque eget tempor massa.
    </div>

El documento HTML viene a ser la descripcion.

 

 

El javascript y el css si no quieres incrustarlo o meterlo a mano, puedes usar algún modulo como el htmlbox: https://mypresta.eu/modules/front-office-features/html-box.html

 

Es un ejemplo base,  tienes que adaptarlo a lo tu necesites.

Edited April 10, 2017 by Sergio Ruiz (see edit history)

[ZeroCl]

El tema de incrustarlos es justamente mi problema, no se en que archivos de prestashop debo agregar el codigo js. y css para que me funcione. 

 

Debo crear y ponerlos dentro de algun archivo en especial o con incrustarlos directamente en: /public_html/themes/leo_bicmart/assets/js/theme.js?

y el css en /public_html/themes/leo_bicmart/assets/css/theme.css ¿? deberian ya funcionar ... 

 

Gracias.