Insignias personalizadas en tarjetas de producto Classic

diegoonline38

¡Hola a todos!

Estoy intentando añadir unas insignias personalizadas a las tarjetas de producto en mi tienda, que usa el tema Classic en un tema hijo. La idea es mostrar, por ejemplo, 'Más Vendido' o 'Eco' si un producto tiene una característica específica o alguna etiqueta. He modificado themes/mi-tema-hijo/templates/catalog/_partials/miniatures/product.tpl para intentar mostrar estas insignias, pero no consigo que aparezcan de forma consistente. A veces, si fuerzo la compilación de Smarty, se ven, pero si no, nada.

Aquí tenéis el fragmento de código que estoy usando dentro del thumbnail-container:

<div class="product-miniature js-product-miniature" data-id-product="{$product.id_product}" data-id-product-attribute="{$product.id_product_attribute}">
    <div class="thumbnail-container">
        {if $product.custom_badge == 'bestseller'}
            <span class="badge badge-bestseller">¡Más Vendido!</span>
        {/if}
        <a href="{$product.url}" class="thumbnail product-thumbnail">
            <img
                src="{$product.cover.bySize.home_default.url}"
                alt="{if !empty($product.cover.legend)}{$product.cover.legend}{else}{$product.name}{/if}"
                data-full-size-image-url="{$product.cover.bySize.large_default.url}"

Mi problema es que {$product.custom_badge} parece no existir o no se pasa correctamente. ¿Alguna idea de cómo puedo hacer esto de forma robusta?

ramon92

Hola @diegoonline38,

Esa es una buena idea para destacar productos. El problema que veo con tu código es que la variable {$product.custom_badge} no es algo que PrestaShop pase automáticamente a la plantilla product.tpl en el objeto $product. El objeto $product solo contiene los datos 'básicos' del producto que se cargan por defecto.

Para que funcione, tendrías que asegurarte de que esa información (si es 'Más Vendido' o 'Eco') se añade al objeto $product antes de que se renderice la plantilla. Una forma más sencilla sería basarlo en características o etiquetas que ya estén asociadas al producto y que sí se pasan. ¿Qué versión de PrestaShop estás usando? Y, ¿has configurado el tema hijo correctamente para que tu product.tpl sea el que se cargue?

Milo

Hola @diegoonline38 y @ramon92,

@ramon92 tiene razón, la variable {$product.custom_badge} no es estándar en el array $product que se pasa a las miniaturas. La forma más limpia de implementar esto es utilizando las características del producto, que ya están disponibles en el objeto $product dentro de product.tpl.

PrestaShop 8.0.1 (y versiones anteriores del tema Classic) pasa el array de características del producto como {$product.features}. Podemos iterar sobre ellas para encontrar la que nos interese y mostrar la insignia. Asegúrate de que las características 'Tipo de producto' y 'Calidad' (o las que uses) estén creadas y asignadas a tus productos en el Back Office.

Aquí te muestro cómo podrías modificar tu product.tpl en el tema hijo. Recuerda que después de cualquier cambio en las plantillas Smarty, debes ir a Parámetros Avanzados > Rendimiento y asegurarte de que la opción 'Compilación de las plantillas' esté en 'Recompilar las plantillas si han sido actualizadas' o 'Forzar compilación' para ver los cambios inmediatamente, y luego volver a 'Nunca recompilar los ficheros de plantilla' para entornos de producción.

<div class="product-miniature js-product-miniature" data-id-product="{$product.id_product}" data-id-product-attribute="{$product.id_product_attribute}">
    <div class="thumbnail-container">
        {if $product.features}
            {foreach from=$product.features item=feature}
                {if $feature.name == 'Tipo de producto' && $feature.value == 'Más Vendido'}
                    <span class="product-badge badge-bestseller">¡Más Vendido!</span>
                {elseif $feature.name == 'Calidad' && $feature.value == 'Ecológico'}
                    <span class="product-badge badge-eco">Eco</span>
                {/if}
            {/foreach}

Este código itera sobre {$product.features}. Si encuentra una característica con el nombre 'Tipo de producto' y valor 'Más Vendido', muestra la insignia de best-seller. Lo mismo para 'Calidad' y 'Ecológico'. Puedes ajustar los nombres de las características y los valores según tu configuración. Luego, con CSS simple, puedes posicionar product-badge como position: absolute dentro del thumbnail-container.

diegoonline38

¡Funciona perfecto, @Milo! Muchísimas gracias por la explicación detallada y el snippet de código. Tenía la lógica un poco desviada intentando crear una variable que no existía.

He implementado tu solución usando las características de producto y he ajustado el CSS para que las insignias queden en la esquina superior izquierda. La parte de la compilación de Smarty también era clave. Ahora sí que se ven todas las insignias correctamente y de forma consistente. ¡Problema resuelto!