Modulo de texto después de los productos en una categoria

[Deconautica]

En estos momentos mis categorías están con una pequeña descripción y luego ya aparecen todos los artículos que están asignados en esa categoría.

Me gustaría poder añadir una descripción mas amplia después de los artículos a la venta. ¿Como podria hacerlo?

[Prestafan33]

Ja, ja, ja. ¿Puedes creer que llevaba un rato pensando precisamente en lo mismo, en la forma de crear una descripción corta y otra larga para las categorías, para poner una antes y otra después del listado de productos?

No sé si existirá algún módulo para añadirlo. A mí de momento se me ocurren 2 formas, dependiendo de lo "puesto" que estés en programación.

Si tienes suficientes conocimientos, lo suyo sería extender la clase Category para añadirle un campo nuevo, y también claro está modificar el controlador y la vista para poder manejarlo todo desde el backend. Y luego añadirlo en la vista del front-end.

Si no sabes mucho de programación se me ocurre una forma bastante sencilla: dentro de la descripción de la categoría pones un div o span con el id que quieras (por ejemplo <div id="intro">, y metes ahí la descripción corta. Luego editas el archivo de plantilla de categorías del tema y réplicas la descripción antes y después del listado de los productos. En la que va antes filtras la cadena con una regex y te quedas sólo con el contenido del div intro. Y en la que va después, con el resto. Si las regex tampoco son lo tuyo puedes incluso poner en ambas la misma descripción y usar luego unas reglas CSS para ocultar en una el div intro y en la otra el resto.

[Prestafan33]

En mi caso lo he solucionado de momento. Cuento cómo por si te sirve: aunque mi primera intención era intentar la solución que comenté en primer lugar (extender la clase Category para añadirle un nuevo atributo), por una cuestión de plazos no podía dedicarle demasiado tiempo a ese asunto ahora mismo.

Así que al final opté simplemente por modificar la plantilla /catalog/listing/category.tpl de mi tema, dupliqué la sección que muestra la descripción, colocándola en el bloque que se muestra bajo los productos, y a continuación en el bloque superior sustituí la descripción por una variable con su mismo contenido, pero limpiando el html con la función strip_tags y truncando luego a 400 caracteres. De esta forma creo un pequeño resumen para la parte superior. Detrás de ese resumen coloco un enlace "leer más" con un ancla a la descripción completa del final. Y finalmente, detrás de la descripción completa, otro enlace "volver arriba" para devolver al principio del listado de productos.

No es la mejor solución, pero queda resultón, es sencillo y sobre todo rápido de hacer. Permite al usuario ver los productos nada más acceder a la categoría, y también conformarse con el resumen o consultar toda la descripción si lo desea.

 

[Charlykanel]

On 9/21/2019 at 12:36 AM, Prestafan33 said:

En mi caso lo he solucionado de momento. Cuento cómo por si te sirve: aunque mi primera intención era intentar la solución que comenté en primer lugar (extender la clase Category para añadirle un nuevo atributo), por una cuestión de plazos no podía dedicarle demasiado tiempo a ese asunto ahora mismo.

Así que al final opté simplemente por modificar la plantilla /catalog/listing/category.tpl de mi tema, dupliqué la sección que muestra la descripción, colocándola en el bloque que se muestra bajo los productos, y a continuación en el bloque superior sustituí la descripción por una variable con su mismo contenido, pero limpiando el html con la función strip_tags y truncando luego a 400 caracteres. De esta forma creo un pequeño resumen para la parte superior. Detrás de ese resumen coloco un enlace "leer más" con un ancla a la descripción completa del final. Y finalmente, detrás de la descripción completa, otro enlace "volver arriba" para devolver al principio del listado de productos.

No es la mejor solución, pero queda resultón, es sencillo y sobre todo rápido de hacer. Permite al usuario ver los productos nada más acceder a la categoría, y también conformarse con el resumen o consultar toda la descripción si lo desea.

 

Hola Prestafan33 

Me interesa mucho la solución que le has dado al tema de los textos debajo de los productos en la pagina de categoría. Me podrías indicar cual es el código exacto que has puesto para hacerlo?

Gracias!

[Prestafan33]

Te pongo el código resumido (donde pongo [...] es que va más código de la plantilla del tema, pero eso no lo he tocado). El archivo es /themes/nombre-del-tema/templates/catalog/listing/category.tpl:

{block name='product_list_header'}
  <div class="block-category card card-block">
    <h1 class="h1">{$category.name}</h1>
    <div class="row">
      <div class="category-description-resume">
        {$category_description_clean = strip_tags($category.description,'<p><br>')}
        {$category_description_clean|truncate:400 nofilter}
      </div>
      {if $category_description_clean|count_characters:true > 400}
      	<a href="#category_description_full" rel="category_description_full">{l s='Read more' d='Shop.Theme.Catalog'}</a>
      {/if}
    </div>
  </div>
[...]

{/block}

[...]

{block name='product_list_bottom' append}
  <div class="block-category card card-block" id="category_description_full">
    <h6 class="h1">{$category.name}</h1>
    <div class="row">
      <div class="category-description-full">
        {$category.description nofilter}
      </div>
      <a href="#wrapper" rel="wrapper" class="hidden-sm-down">{l s='Back to top' d='Shop.Theme.Catalog'}</a>
    </div>
  </div>
{/block}

En mi caso tuve que hacer un pequeño apaño con el id="category_description_full", porque el tema tiene la cabecera flotante, de modo que si lo dejaba donde está indicado en el código, parte de la descripción quedaba tapada por ese header superpuesto, así que tuve que poner ese ID por encima del bloque de 'pagination' para que el scroll se situara de forma correcta. Para no liar más la madeja, y como eso ya depende del tema que uses, no lo he contemplado en el código que pongo.

Otro detalle que se me olvidaba: Si quieres que al pulsar el enlace "leer más" el salto no sea brusco, sino que haya un desplazamiento de la página progresivo, puedes poner en el CSS:

html {
  scroll-behavior: smooth;
}

 

Edited September 26, 2019 by Prestafan33 (see edit history)

[Charlykanel]

57 minutes ago, Prestafan33 said:

Te pongo el código resumido (donde pongo [...] es que va más código de la plantilla del tema, pero eso no lo he tocado). El archivo es /themes/nombre-del-tema/templates/catalog/listing/category.tpl:

{block name='product_list_header'}
  <div class="block-category card card-block">
    <h1 class="h1">{$category.name}</h1>
    <div class="row">
      <div class="category-description-resume">
        {$category_description_clean = strip_tags($category.description,'<p><br>')}
        {$category_description_clean|truncate:400 nofilter}
      </div>
      {if $category_description_clean|count_characters:true > 400}
      	<a href="#category_description_full" rel="category_description_full">{l s='Read more' d='Shop.Theme.Catalog'}</a>
      {/if}
    </div>
  </div>
[...]

{/block}

[...]

{block name='product_list_bottom' append}
  <div class="block-category card card-block" id="category_description_full">
    <h6 class="h1">{$category.name}</h1>
    <div class="row">
      <div class="category-description-full">
        {$category.description nofilter}
      </div>
      <a href="#wrapper" rel="wrapper" class="hidden-sm-down">{l s='Back to top' d='Shop.Theme.Catalog'}</a>
    </div>
  </div>
{/block}

En mi caso tuve que hacer un pequeño apaño con el id="category_description_full", porque el tema tiene la cabecera flotante, de modo que si lo dejaba donde está indicado en el código, parte de la descripción quedaba tapada por ese header superpuesto, así que tuve que poner ese ID por encima del bloque de 'pagination' para que el scroll se situara de forma correcta. Para no liar más la madeja, y como eso ya depende del tema que uses, no lo he contemplado en el código que pongo.

Otro detalle que se me olvidaba: Si quieres que al pulsar el enlace "leer más" el salto no sea brusco, sino que haya un desplazamiento de la página progresivo, puedes poner en el CSS:

html {
  scroll-behavior: smooth;
}

 

Muchas gracias por la solución! lo he estado probando y funciona perfectamente!

[Prestafan33]

Me alegro que te haya servido. 😋