En el siguiente artículo podrás crear una página de categorías para que puedas tener una estructura personalizada en tu tienda online con PrestaShop 1.7.
Dependiendo del proyecto en el que estamos trabajando a veces necesitamos que una sola categoría específica tenga una estructura distinta de la que viene por defecto en PrestaShop 1.7 (ya sabes la página de categorías con los filtros en columna izquierda), por ahora para realizar esto en PrestaShop tenemos que conocer un algo de código y crear el archivo tpl en nuestro tema.
Identificar la categoría a personalizar
Primero debemos conocer el ID de la categoría que necesitamos personalizar, esto lo podemos conocer desde el back-office de PrestaShop, ir a la opción Catálogo > Categorías.
Para esto ejemplo voy a personalizar la categorías Clothes
Crear el template de la categoría
El segundo paso es ingresar a la raíz de nuestro PrestaShop desde nuestro servidor, cPanel o sftp e ir la siguiente ruta: /public_html/themes/classic/templates/catalog/listing/
Una vez nos encontremos en la carpeta listing solo debemos crear una nuevo fichero llamado category-IDdetucategoría.tpl, en mi caso sería category-3.tpl, ya que estoy modificando la categoría Clothes.
Personalizar la estructura de la Categoría en PrestaShop
Como tercer y último paso debemos personalizar la estructura de nuestra categoría, ya que si intentamos visualizar nuestra categoría desde el front-office veremos una página en blanco, ya que nuestro fichero (category-3.tpl) se se encuentra vacío.
Para personalizar nuestra página podemos utilizar los layouts y templates que ya existen en PrestaShop y dependiendo de lo que queremos mostrar será importante tener conocimientos en Smarty y HTML.
Como ejemplo, si abrimos nuestro fichero category-3.tpl, ingresamos algunos de los siguientes códigos y guardamos, estaremos modificando la estructura de la categoría:
Layout fullwidth sin columna izquierda o derecha.
{extends file='layouts/layout-both-columns.tpl'}
{block name='left_column'}{/block}
{block name='right_column'}{/block}
{block name='content_wrapper'}
<div id="content-wrapper">
{hook h="displayContentWrapperTop"}
{block name='content'}
{/block}
{hook h="displayContentWrapperBottom"}
</div>
{/block}
Layout configurado en nuestras páginas de categorías.
Es posible que solo necesitemos modificar alguna parte de nuestra estructura ya configurada, por ejemplo: Two Columns, small left column – Two columns with a small left column (la vista predeterminada en PrestaShop).
Si ingresamos el siguiente código en nuestro archivo category-3.tpl podemos modificar alguna sección en nuestra categoría de nuestro layout configurado en PrestaShop.
{extends file='catalog/listing/product-list.tpl'}
{block name='product_list_header'}
{include file='catalog/_partials/category-header.tpl' listing=$listing category=$category}
{/block}El siguiente código muestra la misma vista de la categoría a personalizar que el código anterior, pero te permite modificar de forma más específica la sección category-header.tpl.
{extends file='catalog/listing/product-list.tpl'}
{block name='product_list_header'}
<div id="js-product-list-header">
{if $listing.pagination.items_shown_from == 1}
<div class="block-category card card-block">
<h1 class="h1">{$category.name}</h1>
<div class="block-category-inner">
{if $category.description}
<div id="category-description" class="text-muted">{$category.description nofilter}</div>
{/if}
{if $category.image.large.url}
<div class="category-cover">
<img src="{$category.image.large.url}" alt="{if !empty($category.image.legend)}{$category.image.legend}{else}{$category.name}{/if}">
</div>
{/if}
</div>
</div>
{/if}
</div>
{/block}
Con esto ya estamos listos para personalizar la estructura de cualquier categoría específica de nuestra tienda online con los layouts de PrestaShop y/o módulos, yo lo he utilizado en algunos proyectos, te indico una muestra de lo que podemos conseguir:
Espero que esta información te sea útil y si tienes alguna duda me puedes contactar a través del formulario de contacto.