Intercambiar texto “Añadir al carrito” por “Ya está añadido al carrrito” en Prestashop 1.7

Traducción del idioma de Shakespeare al de Cervantes de un aporte construido por myprestamodules con información ampliada.

La idea es que el texto del botón “Añadir al carrito” se cambie por “Ya está añadido al carrito” o similar cuando el producto que vayamos añadir al carrito se haya añadido con anterioridad al mismo.

Mensaje indicando que el producto ha sido añadido con anterioridad al carrito

Accedemos al fichero:

/themes/classic/templates/catalog/_partials/product-add-to-cart.tpl

Buscamos el siguiente código:

Código a buscar
{l s='Add to cart' d='Shop.Theme.Actions'}

Y vamos a cambiarlo por lo siguiente:

    • 1º – Creamos variable en Smarty que inicializamos a 0

      Variable incializada a 0
    • 2º – Recorremos con un bucle los productos que están en ese momento añadidos al carrito y comprobamos si el producto en cuestión coincide con algunos que tengas en carrito. Si se cumple la condición asignamos a la variable “$in_cart” el valor 1

      Recorrer los productos del carrito
    • 3º – Creamos un condicional que dice si la variable $in_cart tiene valor 1 mostramos un literal, en caso contrario otro.
      Condicional

      El resultado final será el siguiente:

      Resultado final

Estudiando el código de la sección “Su cuenta” de Prestashop 1.7

Sección su cuenta en Prestashop 1.7
Sección su cuenta en Prestashop 1.7

Decir que es una pasada muy rápida y poco exhaustiva, pero espero que os pueda servir de ayuda.

Plantilla de impresión -> TPL

Fichero: /themes/classic/templates/customer/my-account.tpl

Controlador del FrontOffice correspondiente:

Fichero: /controllers/front/MyAccountController.php

En el fichero TPL observamos:

Dentro del block -> page_title  el título de la sección:

{block name=’page_title’}

Texto que podemos cambiar/modificar sin problemas para los diferentes idiomas de la tienda en la pestaña Internacional -> Traducciones -> Modificar Traducciones

Gestión traducciones
Cambiar traducción

Seguimos avanzando en el fichero: /themes/classic/templates/customer/my-account.tpl

En el bloque -> {block name=’page_content’} estamos viendo los enlaces de la sección “Mi cuenta”

{block name=’page_content’}

El enlace que he señalado en la captura corresponde al enlace de información (que es el correspondiente al de la sección de datos personales del cliente):

Enlace Información

Si nos fijamos en el código, vemos el enlace, el texto del enlace y el icono.

El título/texto del enlace lo vemos aquí:

Texto del enlace

Que es  traducible y modificable a todos los idiomas desde la pestaña Internacional -> Traducciones -> Modificar Traducciones al igual que ocurría en el título “Su cuenta”.

El icono que visualizamos encima del texto corresponde al código señalado en la siguiente captura:

Icono

Podemos ver los iconos disponibles aquí: https://material.io/icons y cambiarlo por cualquier otro.

Por ejemplo, puedes añadir el siguiente icono:

Icono
Material icons

Cambiando la instrucción:

Icono anterior

Por:

Icono nuevo

Yo lo he colocado en dicho formato porque es como estaba puesto en el TPL, pero si os fijáis en la captura en la actualidad es recomendable (no obligatorio) ponerlo del siguiente modo:

Otro modo

Finalmente veremos el nuevo icono:

Icono

Si seguimos avanzando dentro del  {block name=’page_content’}, vemos otro bloque denominado:  {block name=’display_customer_account’} que muestra el hook denominado -> displayCustomerAccount

{block name=’display_customer_account’}

Si vamos a la pestaña Diseño -> Posiciones y buscamos el hook -> displayCustomerAccount vemos los módulos que tenemos anclados en dicho hook:

En mi caso particular tengo el módulo Alertas por correo electrónico, por eso me está mostrando un enlace adicional (proveniente de dicho módulo) a los que existen por defecto de forma “fija”.

Mis Alertas

Una vez hemos salido del bloque -> {block name=’page_content’} vemos al final del fichero el bloque -> {block name=’page_footer’} y dentro dicho bloque nos encontramos al bloque  {block name=’my_account_links’}

{block name=’page_footer’}

Aquí estamos mostrando el enlace de “Cerrar sesión” que aparece al final de la misma.

Cerrar sesión

Enlace que corresponde al código que señalo en la siguiente captura:

Enlace cerrar sesión

Una vez hemos observado de forma breve el TPL, vamos a ver el controlador que realmente le da “vida”.

Vamos al fichero:  /controllers/front/MyAccountController.php

Y si nos fijamos dentro de la función “initContent” observamos dos aspectos:

initContent

La variable “logout_url” que usamos en el enlace al cerrar la sesión tiene almacenado el enlace para cerrar la sesión.

Asignación variable para poder usarla en el TPL
Asignación variable para poder usarla en el TPL
Variable

Si seguimos avanzando dentro de la función initContent vemos el siguiente código:

Llamada al método padre y selección plantilla a mostrar
Llamada al método padre y selección plantilla a mostrar

Recordamos que con: parent llamamos al método padre.

Y con $this->setTemplate indicamos el TPL correspondiente a cuando accedemos a la sección de mi cuenta. En este caso tenemos indicado que el tpl es el fichero my-account que se encuentra dentro del directorio customer de la plantilla.

Documento construido bajo Prestashop 1.7.3.0 beta1

Nombre de la categoría en el bloque de productos destacados de Prestashop 1.7

No hablo de cambiar el título dentro de la gestión de traducciones en Prestashop 1.7 sino que automáticamente se muestre el título de la categoría de la cual muestra los productos el módulo en cuestión.

Si recordamos la configuración básica del módulo de productos destacados, entre otras opciones podíamos seleccionar el ID de la categoría para que en el módulo solo se mostraran productos de dicha categoría.

La idea es que el título del bloque depende titularse “Productos destacados” si has dicho que el módulo seleccione los productos de la categoría “Tomates” pues que se titule tomates, o si otro día decides que seleccione los productos de la categoría “EDT” pues que el título del bloque sea “EDT”.  La finalidad es que este cambio se haga de forma automática.

Recuerdo que estoy usando Prestashop 1.7 con la plantilla por defecto (classic).

En el fichero: /modules/ps_featuredproducts/ps_featuredproducts.php dentro de la función: getWidgetVariables

getWidgetVariables

Añadimos la siguiente instrucción:

$category = new Category((int) Configuration::get('HOME_FEATURED_CAT'), $this->context->language->id);
Creación instancia

De esta manera como hemos creado una instancia de la clase Category basándonos en el id de categoría que hemos configurado en el módulo, podemos obtener los datos de la categoría, como puede ser el nombre.

Y después (en la parte del return (dentro de la misma función)) añadimos:


'nombreCat' => $category->name,

Variable Smarty

Recordar que, aunque nosotros hemos editado directamente la clase del módulo, lo aconsejable y recomendable es hacer un override de dicha clase en el directorio /override/classes/module/

El siguiente paso consiste en ir al fichero:

/themes/classic/modules/ps_featuredproducts/views/templates/hook/ps_featuredproducts.tpl

Donde buscamos la siguiente línea de código:

ps_featuredproducts.tpl

Y la dejamos del siguiente modo:

Fichero TPL modificado

Si os fijáis simplemente estamos usando la variable {$nombreCat} que hemos declarado antes en la clase del módulo.

Finalmente, ya podremos ver el nombre de la categoría en el título del bloque.

Nombre de la categoría en el título del bloque de productos destacados de Prestashop 1.7

Documento construido bajo Prestashop 1.7.2.4

Mostrar la imagen de la marca en su sección en Prestashop

En los listados de fabricantes/marcas no vemos la imagen de la marca.

Título y descripción de la marca

Con este tutorial, podrás visualizar la imagen de la marca.

Imagen marca

Para acceder al tutorial, debéis pinchar sobre la siguiente imagen:

Acceder al tutorial para poder visualizar la imagen de la marca
Acceder al tutorial para poder visualizar la imagen de la marca

Eliminar el título de la categoría en Prestashop 1.7

Es una chorrada, pero me lo pregunto un compañero por telegram y como es sencillo, además de que existen diferencias en las rutas de ficheros y en las líneas de código en esta versión de Prestashop respecto a versiones anteriores, lo explicare de forma simple.

Muestro una pequeña captura, para que nos situemos.

Eliminar título de la categoría en Prestashop 1.7

Para eliminar el título de la categoría cuando estamos viendo la categoría en Prestashop 1.7  y suponiendo que estemos trabajando con la plantilla por defecto, una de las posibles opciones es editar el fichero:

/themes/classic/templates/catalog/listing/category.tpl

Tener en cuenta, que si vuestra plantilla no es la que lleva Prestashop por defecto, no estaremos hablando de la carpeta “classic“, sino de la carpeta de vuestra plantilla.

Fichero category.tpl

Dentro de: Continúa leyendo Eliminar el título de la categoría en Prestashop 1.7

[DOC] Eliminar enlace “Todos los productos” en productos destacados en Prestashop

Documento para eliminar el enlace situado en la parte inferior del módulo de productos destacados que vemos en la página principal de Prestashop.

Enlace -> Todos los productos

Para acceder al documento, debéis pinchar en la siguiente imagen:

Quitar enlace "Ver todos los productos"
Quitar enlace “Ver todos los productos”

Cambiar ubicación de las pestañas del producto en Prestashop 1.7

En este manual de Prestashop, vamos a comentar cambiar de ubicación el bloque donde se muestran las pestañas de la descripción del producto, detalles del producto, etc…. de la ficha del producto en Prestashop 1.7

Por defecto, estas pestañas se ven de la siguiente forma:

Pestañas del producto en Prestashop 1.7

La idea final es que se muestren de la siguiente forma:

Cambiando de ubicación el bloque de las pestañas en Prestashop 1.7

Una de las posibles soluciones, es acceder al fichero:

/themes/classic/templates/catalog/product.tpl

Fichero product.tpl

Buscamos este bloque:


{block name='product_tabs'}
<div class="tabs">
<ul class="nav nav-tabs">
{if $product.description}
<li class="nav-item">
<a class="nav-link{if $product.description} active{/if}" data-toggle="tab" href="#description">
{l s='Description' d='Shop.Theme.Catalog'}
</a>
</li>
{/if}
<li class="nav-item">
<a class="nav-link{if !$product.description} active{/if}" data-toggle="tab" href="#product-details">
{l s='Product Details' d='Shop.Theme.Catalog'}
</a>
</li>
{if $product.attachments}
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#attachments">
{l s='Attachments' d='Shop.Theme.Catalog'}
</a>
</li>
{/if}
{foreach from=$product.extraContent item=extra key=extraKey}
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#extra-{$extraKey}">{$extra.title}</a>
</li>
{/foreach}
</ul>

<div class="tab-content" id="tab-content">
<div class="tab-pane fade in{if $product.description} active{/if}" id="description">
{block name='product_description'}
<div class="product-description">{$product.description nofilter}</div>
{/block}
</div>

{block name='product_details'}
{include file='catalog/_partials/product-details.tpl'}
{/block}

{block name='product_attachments'}
{if $product.attachments}
<div class="tab-pane fade in" id="attachments">
<section class="product-attachments">
<h3 class="h5 text-uppercase">{l s='Download' d='Shop.Theme.Actions'}</h3>
{foreach from=$product.attachments item=attachment}
<div class="attachment">
<h4><a href="{url entity='attachment' params=['id_attachment' => $attachment.id_attachment]}">{$attachment.name}</a></h4>
<p>{$attachment.description}</p
<a href="{url entity='attachment' params=['id_attachment' => $attachment.id_attachment]}">
{l s='Download' d='Shop.Theme.Actions'} ({$attachment.file_size_formatted})
</a>
</div>
{/foreach}
</section>
</div>
{/if}
{/block}

{foreach from=$product.extraContent item=extra key=extraKey}
<div class="tab-pane fade in {$extra.attr.class}" id="extra-{$extraKey}" {foreach $extra.attr as $key => $val} {$key}="{$val}"{/foreach}>
{$extra.content nofilter}
</div>
{/foreach}
</div>
{/block}
</div>

Y lo vamos a dejar encima del bloque (lo buscamos lógicamente):


{block name='page_footer_container'}

<footer class="page-footer">{block name='page_footer'}
<!-- Footer content -->
{/block}</footer>{/block}

Es decir:


{block name='product_tabs'}

<div class="tabs">
<ul class="nav nav-tabs">
{if $product.description}
<li class="nav-item">
<a class="nav-link{if $product.description} active{/if}" data-toggle="tab" href="#description">
{l s='Description' d='Shop.Theme.Catalog'}
</a>
</li>
{/if}
<li class="nav-item">
<a class="nav-link{if !$product.description} active{/if}" data-toggle="tab" href="#product-details">
{l s='Product Details' d='Shop.Theme.Catalog'}
</a>
</li>
{if $product.attachments}
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#attachments">
{l s='Attachments' d='Shop.Theme.Catalog'}
</a>
</li>
{/if}
{foreach from=$product.extraContent item=extra key=extraKey}
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#extra-{$extraKey}">{$extra.title}</a>
</li>
{/foreach}
</ul>

<div class="tab-content" id="tab-content">
<div class="tab-pane fade in{if $product.description} active{/if}" id="description">
{block name='product_description'}
<div class="product-description">{$product.description nofilter}</div>
{/block}
</div>

{block name='product_details'}
{include file='catalog/_partials/product-details.tpl'}
{/block}

{block name='product_attachments'}
{if $product.attachments}
<div class="tab-pane fade in" id="attachments">
<section class="product-attachments">
<h3 class="h5 text-uppercase">{l s='Download' d='Shop.Theme.Actions'}</h3>
{foreach from=$product.attachments item=attachment}
<div class="attachment">
<h4><a href="{url entity='attachment' params=['id_attachment' => $attachment.id_attachment]}">{$attachment.name}</a></h4>
<p>{$attachment.description}</p
<a href="{url entity='attachment' params=['id_attachment' => $attachment.id_attachment]}">
{l s='Download' d='Shop.Theme.Actions'} ({$attachment.file_size_formatted})
</a>
</div>
{/foreach}
</section>
</div>
{/if}
{/block}

{foreach from=$product.extraContent item=extra key=extraKey}
<div class="tab-pane fade in {$extra.attr.class}" id="extra-{$extraKey}" {foreach $extra.attr as $key => $val} {$key}="{$val}"{/foreach}>
{$extra.content nofilter}
</div>
{/foreach}
</div>
{/block}
</div>

{block name='page_footer_container'}
<footer class="page-footer">
{block name='page_footer'}
<!-- Footer content -->
{/block}
</footer>
{/block}

 

Cambia de ubicación de las pestañas en Prestashop 1.7

Recordar, limpiar la cache en la pestaña Parámetros Avanzados -> Rendimiento

Borrar cache Prestashop 1.7

Documento realizado bajo Prestashop 1.7.1.2

Por otro lado, recordar que en Prestashop 1.7, podemos editar los ficheros de la plantilla, sin necesidad de editar los ficheros originales.

Editar plantilla sin que se pierdan los cambios en Prestashop 1.7

En este manual para Prestashop, vamos hacer cambios en un fichero *.tpl de la plantilla, sin tener que editar el fichero *.original.

En el directorio:

/themes/

Creamos un directorio llamado /modificaciones/

Directorio modificaciones

Dentro, vamos a crear:

  • config (un directorio con este nombre)
    Dentro del directorio config que hemos creado un fichero llamado:
    theme.yml

    theme.yml

    En este fichero, añadimos lo siguiente:

    parent: classic
    name: modificaciones
    display_name: Tema Hijo
    version: 6.6.6
    assets:
    use_parent_assets: true
    

    En parent -> indicamos que la plantilla padre es la classic, que es la plantilla por defecto de Prestashop 1.7
    En name -> Indicamos el nombre de la plantilla, que recordamos que en nuestro caso el directorio de la plantilla se llama “modificaciones”
    En display_name -> Nombre público de la plantilla
    En version -> Versión de la plantilla  (Nosotros hemos colocado 6.6.6, pero ustedes pueden colocar la numeración que quieran)
    use_parent_assets -> true

  • preview.png -> imagen que se usa para mostrar la plantilla en el panel.

    Imagen previsualización plantilla en Prestashop

Por ejemplo, vamos a sobreescribir el fichero “/templates/catalog/product.tpl” de la plantilla classic” y ocultar la descripción corta de los productos en Prestashop 1.7

Creamos el siguiente fichero:

/themes/modificaciones/templates/catalog/product.tpl

Fichero que vamos a crear

Y al inicio del fichero, añadimos:

{extends file=’parent:catalog/product.tpl’}

Y después añadimos la siguiente línea:


{block name='product_description_short'}
{* <div id="product-description-short-{$product.id}" itemprop="description">{$product.description_short nofilter}</div> *}
{/block}

El código del fichero, quedara así:


{extends file='parent:catalog/product.tpl'}

{block name='product_description_short'}
{* <div id="product-description-short-{$product.id}" itemprop="description">{$product.description_short nofilter}</div> *}
{/block}

Sobreescribiendo
Sobreescribiendo

Depende editar el fichero: “/themes/classic/templates/catalog/product.tpl” hemos creado uno nuevo en la plantilla hija y hemos llamado al fichero padre y hemos sobrescrito el bloque que muestra la descripción corta del producto y  hemos comentado la descripción corta.

Continúa leyendo Editar plantilla sin que se pierdan los cambios en Prestashop 1.7

Bloque de pestañas del producto encima del de políticas en Prestashop 1.7

Cuando hablo del bloque de Políticas, nos estamos refiriendo al módulo “Confianza de Cliente” que vemos en la ficha del producto en Prestashop 1.7

Confianza del Cliente en Prestashop 1.7
Confianza del Cliente en Prestashop 1.7

Este bloque lo vemos habitualmente encima del de pestañas, donde vemos información como la de la descripción completa, destalles del producto, ficha técnica etc…

Cambiar posición del bloque de confianza debajo del bloque de pestañas en Prestashop 1.7

¿Y si queremos mostrarlo a la inversa?

Módulo de confianza debajo del bloque de pestañas en Prestashop 1.7

Lo primero, que tenemos que entender es que el módulo “Confianza de Cliente”, esta anclado en el hook: displayReassurance

Hook en displayReassurance en Prestashop 1.7

Si vamos al fichero/themes/classic/templates/catalog/product.tpl, y buscamos la siguiente línea: (En Prestashop 1.7.1.0 sobre la línea 143/145)

{block name='hook_display_reassurance'}
{hook h='displayReassurance'}
{/block}

Vemos que estamos imprimiendo el hook: “displayReassurance” aquí: “{hook h=’displayReassurance’}

Por lo tanto, lo que vamos a mover no es el módulo de confianza del cliente, vamos a mover el hook donde imprime dicho módulo.

En definitiva, movemos el “Bloque Entero”, cortando esta parte del código:

{block name='hook_display_reassurance'}
{hook h='displayReassurance'}
{/block}

Y la vamos a pegar donde se cierra el “{block name=’product_tabs’} y el <div class=”tabs”>” (En Prestashop 1.7.1.0 sobre la línea 211/212)

{block name='product_tabs'}
<div class="tabs">
...............
..............
{/block}
</div>
Bloque de confianza ha sido cambiado posición en la ficha del producto en Prestashop 1.7

Cambiar ficha técnica de ubicación en el producto en Prestashop 1.6

Imaginemos que queremos que la ficha técnica que hemos definido en el producto, se muestre encima del botón “imprimir” de la ficha del producto.

Ubicación de la ficha técnica en Prestashop

 Por defecto, la ficha se muestra en la parte inferior de la ficha del producto.

Ubicación real de la ficha del producto en Prestashop

Para cambiar la ficha de ubicación, vamos al fichero:

“/themes/default-bootstrap/product.tpl”

Buscamos el siguiente bloque de instrucciones:

{if isset($features) && $features}
<!-- Data sheet -->
<section class="page-product-box">
<h3 class="page-product-heading">{l s='Data sheet'}</h3>
<table class="table-data-sheet">
{foreach from=$features item=feature}
<tr class="{cycle values="odd,even"}">
{if isset($feature.value)}
<td>{$feature.name|escape:'html':'UTF-8'}</td>
<td>{$feature.value|escape:'html':'UTF-8'}</td>
{/if}
</tr>
{/foreach}
</table>
</section>
<!--end Data sheet -->
{/if}


Código de la ficha técnica del producto en Prestashop

Y vamos a colocar el código, justo debajo de la siguiente instrucción:

{if isset($HOOK_EXTRA_RIGHT) && $HOOK_EXTRA_RIGHT}{$HOOK_EXTRA_RIGHT}{/if}
Código de la ficha técnica cambiado de ubicación en Prestashop

Continúa leyendo Cambiar ficha técnica de ubicación en el producto en Prestashop 1.6