Extensión de archivo incorrecta en Prestashop 1.7

A finales del año pasado, estuvimos comentando brevemente la sección de contacto en Prestashop 1.7.

En esta ocasión, vamos a hablar, por ejemplo, de que ocurre cuando un cliente sube un documento con extensión *.odt. en el formulario de contacto.

Simplemente, nos saldrá un error que dice “Extensión de archivo incorrecta“.

Extensión de archivo incorrecta en el formulario de contacto en Prestashop 1.7
Extensión de archivo incorrecta en el formulario de contacto en Prestashop 1.7

Si vamos al fichero:

/modules/contactform/contactform.php

Veremos que dentro de la función “public function sendMessage()” tenemos la siguiente línea de código:

$extension = array('.txt', '.rtf', '.doc', '.docx', '.pdf', '.zip', '.png', '.jpeg', '.gif', '.jpg');

Para añadir la extensión “.odt“, podríamos añadirla dentro del array

$extension = array('.txt', '.rtf', '.doc', '.docx', '.pdf', '.zip', '.png', '.jpeg', '.gif', '.jpg', '.odt');
Añadida nueva extensión en el formulario de contacto en Prestashop 1.7

¿Al intentar subir el fichero con extensión *.odt en el formulario de contacto me aparecerá el error de “Extensión de archivo incorrecta“?

En principio no, pero te en cuenta dos aspectos:

  • Siempre que puedas, es altamente recomendable hacer un override y evitar en todo lo posible editar los ficheros originales (en este caso lo ideal seria hacer un override de la clase del módulo y sobreescribir la función sendMessage)
  • ¿Cómo se hace un override de una clase de un módulo en Prestashop 1.7? -> Buscar en Google 🙂

Por cierto, espero que, en un futuro, exista la opción de permitir nuevas extensiones a la hora de subir los ficheros desde el panel de administración en el panel de Prestashop 1.7

Documento construido bajo Prestashop 1.7.1.2

Print Friendly, PDF & Email

Bloques de texto personalizados en el pie en Prestashop 1.7

No estamos hablando de instalar contentbox/htmlbox en nuestra tienda, estamos hablando simplemente de cambiar de ubicación el módulo de texto que se muestra en la página principal al hook -> displayFooterBefore para que se vea en toda la tienda.

Por defecto el módulo Bloques de texto personalizados (custom_text), se muestra en la página principal, pero no en resto de secciones.

Texto de la página principal en Prestashop 1.7

Para que se vea en todas las secciones, vamos hacer tres cosas:

  • Eliminarlo del displayHome
  • Insertarlo en el displayFooterBefore
  • Colocarlo en la primera posición del displayFooterBefore

Vamos a la pestaña Diseño -> Posiciones de los módulos

Acceder a las posiciones de los módulos en Prestashop 1.7

Buscamos el bloque displayHome y desenganchamos el módulo de esa posición.

Quitar módulo de la página principal en Prestashop 1.7

Ahora en la misma pestaña Diseño-> Posiciones de los módulos, pinchamos el botón superior denominado (Insertar un hook (puede tener un nombre distinto en vuestro caso) )

Insertando modulo en hook en Prestashop 1.7

Y en el formulario seleccionamos:

Módulos -> Bloque de textos personalizados
Mover a -> displayFooterBefore

Insertando módulo en el displayFooterBefore

Por último, vamos a colocarlo en la primera posición del displayFooterBefore, para ello en la misma pestaña de Diseño -> Posiciones de los módulos, buscamos el bloque “displayFooterBefore” y arrastramos el módulo hacia arriba.

Subir módulo a primera posición del displayFooterBefore
Modulo en primera posición del displayFooterBefore

El resultado final es el siguiente:

Documento testeado en Prestashop 1.7.1.2

Seguimos sin tener el Live Edit (que en la 1.7 inicialmente lo desecharon) disponible que teníamos por ejemplo en la 1.6, para mover los módulos de posición “gráficamente” sin hacerlo manualmente, esperemos que en las próximas variantes de Prestashop 1.7.X.X, implementen el Live Edit para Prestashop 1.7

Print Friendly, PDF & Email

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 ->

  • 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 hijo y hemos llamado al fichero padre y hemos sobreescrito 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

Print Friendly, PDF & Email

Cambiar tamaño del logo en Prestashop 1.7

Si en la pestaña Diseño -> Temas y logotipo, intentamos subir un logo, por ejemplo, del siguiente tamaño:

Elección del logo para Prestashop 1.7
Elección del logo para Prestashop 1.7
Subiendo logo en Prestashop 1.7

Vemos que reduce en exceso el tamaño del logo:

Logo muy pequeño en Prestashop 1.7
Logo muy pequeño en Prestashop 1.7

Una solución, es cambiar el tema de las rejillas (grid), vamos al fichero:

/themes/classic/templates/_partials/header.tpl

Y aquí:

<div class="col-md-2 hidden-sm-down" id="_desktop_logo">

El valor “2” col-md lo vamos a variar.
(Para saber cómo funciona el tema de las rejillas, os invito a visitar esta guía: http://librosweb.es/libro/bootstrap_3/capitulo_2/tipos_de_rejillas.html )

En nuestro caso lo hemos cambiado a “6“.

Dejándolo así:

<div class="col-md-6 hidden-sm-down" id="_desktop_logo">

El problema ahora es que el logo se ve mejor, pero el menú horizontal y el buscador ha bajado de golpe y ya no está a la misma altura que el logo…..

El logo ha bajado el menú horizontal y el buscador en Prestashop 1.7

Para solucionar esto, nos vamos al mismo fichero, buscamos esta línea de código:

<div class="col-md-10 col-sm-12 position-static">
<div class="row">
{hook h='displayTop'}
<div class="clearfix"></div>
</div>
</div>

Y vamos a cambiar el: “col-md-10” en nuestro caso por “col-md-6”, dejándolo así:

<div class="col-md-6 col-sm-12 position-static">
<div class="row">
{hook h='displayTop'}
<div class="clearfix"></div>
</div>
</div>

Finalmente, veremos el bloque del logo, menú y buscador de la siguiente forma:

Logo normal en Prestashop 1.7
Logo normal en Prestashop 1.7

Pues si reducimos el navegador, vemos que se ve bien hasta cierto punto…

Logo pequeño en resolución pequeña en Prestashop 1.7
Logo pequeño en resolución pequeña en Prestashop 1.7

¿Cómo podemos hacer un apaño para que cuando la web en resolución mínima no quede mal el logo (en nuestro caso particular)?

Añadimos en nuestro caso en el fichero /themes/classic/assets/css/custom.css 

La siguiente instrucción:

@media (max-width: 767px) {
#header .header-nav .top-logo a img {
max-height: 200px;
}
#header .header-nav {
max-height: 225px;
}
}

La imagen del logo en el CSS (en el theme.css) tiene una altura máxima establecida de 50px nosotros se la cambiamos a 200px.

El bloque que engloba al logo y a los otros elementos cuando la resolución es menor tiene una altura máxima de 50px nosotros se la cambiamos a 225px.

Por supuesto estos cambios solo se aplican en el @media (max-width: 767px) que hemos indicado, aunque con un poco de ingenio podríamos hacerlo para distintas resoluciones con el @media, pero bueno eso ya lo dejo a vosotros.

Evidentemente ha sido un pasaje muy rápido, por lo que es posible que tengáis que hacer más cambios. (De todos modos, tener en cuenta que esto ha sido para Prestashop 1.7.1.1, por lo que quizás en futuras variantes de la 1.7.X.X sea diferente)

Por cierto, si vosotros usáis inspeccionar elemento u firebug, veréis que hace referencia al theme.css, pero para no tocar el css original, simplemente hacemos una sobreescritura de los valores que necesitamos en el fichero custom.css

Por cierto, ¿recordáis que también hicimos unas guías, por si queremos cambiar el logo de ubicación o si queremos eliminar el logo de la cabecera?

Ah se me olvidaba, recordar:

  1. Limpiar cache en la pestaña Parámetros Avanzados -> Rendimiento

    Limpiar cache en Prestashop 1.7
  2. Si los cambios del CSS no los ves, limpia la cache de tu navegador.

Documento construido bajo Prestashop 1.7.1.1

Print Friendly, PDF & Email

Añadir preguntas frecuentes en Prestashop 1.6 y 1.7

En el año 2012, estuvimos hablando de un módulo que nos permitía simular el funcionamiento típico de las preguntas frecuentes al estilo acordeón (El módulo era independiente de los contenidos creados en la pestaña Preferencias -> CMS).

En esta guía, vamos a realizar una pequeña integración en los contenidos que creamos en la pestaña Preferencias -> CMS, para mostrar preguntas y respuestas de forma que inicialmente solo aparezcan las preguntas y cuando hagamos click sobre la pregunta, aparezca la respuesta.

Implementar preguntas frecuentes en Prestashop
Desplegando preguntas frecuentes en Prestashop

Vamos hacer uso de este código: https://gist.github.com/neilgee/9284745#file-faq-html que hemos obtenido en el repositorio de github del usuario neilgee

Esta guía está realizada bajo Prestashop 1.6, pero también funciona en Prestashop 1.7

El código JavaScript:

$(document).ready(function() {
$('.faq_question').click(function() {
if ($(this).parent().is('.open')){
$(this).closest('.faq').find('.faq_answer_container').animate({'height':'0'},500);
$(this).closest('.faq').removeClass('open');
}else{
var newHeight =$(this).closest('.faq').find('.faq_answer').height() +'px';
$(this).closest('.faq').find('.faq_answer_container').animate({'height':newHeight},500);
$(this).closest('.faq').addClass('open');
}
});
});

Lo vamos a introducir en el fichero:

/themes/plantilla/js/cms.js

Código JavaScript CMS

El siguiente paso es introducir la estructura (código html) de las preguntas frecuentes en los contenidos que vayamos a crear en la pestaña Preferencias -> CMS

La estructura tiene la siguiente forma:

<div class="faq_container">
<div class="faq">
<div class="faq_question">Pregunta 1</div>
<div class="faq_answer_container">
<div class="faq_answer">Respuesta a la pregunta 1</div>
</div>
</div>
</div>
<div class="faq_container">
<div class="faq">
<div class="faq_question">Pregunta 2</div>
<div class="faq_answer_container">
<div class="faq_answer">Respuesta a la pregunta 2</div>
</div>
</div>
</div>
<div class="faq_container">
<div class="faq">
<div class="faq_question">Pregunta 3</div>
<div class="faq_answer_container">
<div class="faq_answer">Respuesta a la pregunta 3</div>
</div>
</div>
</div>

Desde el editor gráfico de contenidos que tenemos en la pestaña Preferencias -> CMS, pulsamos en Herramientas  -> Código Fuente (<>) y colocamos el código.

Insertar código HTML en el editor gráfico en Prestashop
Código HTML Prestashop

Por último, vamos agregar el estilo (css) de las preguntas frecuentes en el CSS de Prestashop, en nuestro caso vamos añadir el siguiente código:

/* CSS Preguntas Frecuentes */
.faq_question {
margin: 0px;
padding: 8px;
display: inline-block;
cursor: pointer;
font-weight: bold;
}
.faq_answer_container {
height: 0px;
overflow: hidden;
padding: 0px;
background:#fff
}
.faq.open .faq_question {
color: #fff;
}
.faq {
background: #e1e1e1;
border-bottom: 3px solid #fff;
}
.faq.open {
background: #635858;
border:none;
}

en el fichero:

/themes/plantilla/css/cms.css

El código javaScript entre otras cosas lo que hace es que cuando pinchamos sobre la pregunta, a la respuesta se le asigna una altura, ya que por defecto la altura (height) de la respuesta (.faq_answer_container) es 0px;

¿Funciona en Prestashop 1.7?

Este “tip” funciona en Prestashop 1.7, te nombro algunas diferencias.

Te recomiendo meter el “CSS“, en el fichero:

/themes/classic/assets/css/custom.css

El javascript, en el fichero:

/themes/classic/assets/js/custom.js

Y en referencia el código html que en Prestashop 1.6 lo insertamos en la pestaña Preferencias -> CMS, en Prestashop 1.7 tal como tenemos comentado en nuestra guía de ubicación de las pestañas en Prestashop 1.7, se encuentra en la pestaña Diseño -> Página  

Preferencias -> CMS en Prestashop 1.7

Continúa leyendo Añadir preguntas frecuentes en Prestashop 1.6 y 1.7

Print Friendly, PDF & Email

Ocultar ficha técnica en Prestashop 1.7

Depende cambiar la ubicación de la ficha técnica en la ficha del producto, en esta ocasión vamos simplemente a ocultarla de la ficha del producto, porque no queremos que se vea en la ficha del producto, pero si queremos que siga funcionando como ficha técnica a nivel del filtro de navegación por facetas, y a nivel del comparador de productos.

En este documento, vamos a realizar la mini guía bajo Prestashop 1.6 y Prestashop 1.7

Ocultar ficha técnica en Prestashop 1.6 en la ficha del producto.
Ocultar ficha del producto en la ficha del producto en Prestashop 1.7

Para Prestashop 1.6, usando la plantilla por defecto, editamos el fichero:

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

Buscamos el siguiente código:

{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}

Y comentamos el código en Smarty

{* {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 comentado en Prestashop 1.6

En Prestashop 1.7, editamos el fichero:

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

Y nos encontramos una llamada al fichero:

/themes/classic/templates/catalog/_partials/product-details.tpl

En esta parte del código del fichero  “/themes/classic/templates/catalog/product.tpl

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

Este código, no lo vamos a tocar, vamos a ir al fichero:

/themes/classic/templates/catalog/_partials/product-details.tpl

Y buscamos este bloque:

{block name='product_features'}
{if $product.features}
<section class="product-features">
<h3 class="h6">{l s='Data sheet' d='Shop.Theme.Catalog'}</h3>
<dl class="data-sheet">
{foreach from=$product.features item=feature}
<dt class="name">{$feature.name}</dt>
<dd class="value">{$feature.value}</dd>
{/foreach}
</dl>
</section>
{/if}
{/block}

Y aquí podemos comentarlo el código (Smarty)

{* {block name='product_features'}
{if $product.features}
<section class="product-features">
<h3 class="h6">{l s='Data sheet' d='Shop.Theme.Catalog'}</h3>
<dl class="data-sheet">
{foreach from=$product.features item=feature}
<dt class="name">{$feature.name}</dt>
<dd class="value">{$feature.value}</dd>
{/foreach}
</dl>
</section>
{/if}
{/block} *}
Código de la ficha técnica oculto en Prestashop 1.7

Uno de los problemas que nos podemos encontrar, es que en otra parte del código de la plantilla estemos usando el {include file=’catalog/_partials/product-details.tpl’}, para asegurarnos de que realmente este cambio solo se esta aplicando a la ficha del producto y no a otra parte de la plantilla que este usando dicho include, depende comentar el código, podemos usar las variables globales y hacer un condicional que solo muestre el código si no estas en la ficha del producto.

Es decir, dejar el código así:

{if $page.page_name !='product'}
{block name='product_features'}
{if $product.features}
<section class="product-features">
<h3 class="h6">{l s='Data sheet' d='Shop.Theme.Catalog'}</h3>
<dl class="data-sheet">
{foreach from=$product.features item=feature}
<dt class="name">{$feature.name}</dt>
<dd class="value">{$feature.value}</dd>
{/foreach}
</dl>
</section>
{/if}
{/block}
{/if}
Condicional -> Muestro el código solo si no estoy en la ficha del producto

———

Por último, recordar limpiar la cache en la pestaña Parámetros Avanzados -> Rendimiento.

Print Friendly, PDF & Email

Descripción de la categoría al final del listado en Prestashop 1.7

En este tutorial, vamos a realizar un miniTip para mostrar la descripción de la categoría donde estamos situados debajo del listado de productos.

Por defecto, vemos la descripción junto con la imagen y el título de la categoría en Prestashop 1.7 de la siguiente forma:

Descripción de la categoría en Prestashop 1.7

Nuestra intención es ver la descripción (solo vamos a mover la descripción) justo debajo del listado de productos, tal como podemos ver en la siguiente imagen:

Descripción debajo del listado de productos en Prestashop 1.7

El primer paso es irnos al fichero:

/themes/classic/templates/catalog/listing/product-list.tpl

Y vamos añadir un nuevo bloque que luego vamos a usar en otro fichero.

En fichero actual (a final del todo), justo antes de cerrar las siguientes etiquetas:

{/block}

Añadimos un bloque:

<section>{block name='descripcionfinalc'}{/block}</section>

Hemos llamado al “bloque” -> descripcionfinalc

Nuevo Bloque Smarty Prestashop

Ahora, vamos a usar ese bloque dentro del fichero:

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

Si nos fijamos, (obviando los comentarios del fichero), la primera línea funcional de código es el extend, que tenemos:

{extends file='catalog/listing/product-list.tpl'}

De un modo u otro estamos heredando la estructura de la plantilla a la que hacemos referencia, por eso antes hemos añadido un nuevo bloque que ahora vamos a usar realmente en el fichero:

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

En nuestro caso, hemos añadido la siguiente instrucción:

(Llamamos al bloque y dentro del bloque mostramos la descripción de la categoría)

{block name='descripcionfinalc'}
{if $category.description}
<div id="category-description" class="text-muted">{$category.description nofilter}</div>
{/if}
{/block}

Estamos usando el bloque que hemos definido en la plantilla base y dentro del bloque estamos mostrando la descripción de la categoría actual.

Este bloque lo vamos a ver en última posición, porque antes en la plantilla base (/themes/classic/templates/catalog/listing/product-list.tpl) hemos definido que estaba al final 🙂

Lo primero que quiero decir, que estamos haciendo un ejemplo muy rápido y por tanto puede contener y contiene erratas, la ideal es que entendáis el funcionamiento de los bloques.

Documento basado en Prestashop 1.7.1.1

Print Friendly, PDF & Email

Ver página de mantenimiento sin desactivar la tienda en Prestashop 1.7

En este ejemplo, vamos a realizar una pequeña guía (lo siento si se cuela alguna errata), que permitirá que nosotros podamos ver la página de mantenimiento, pero sin desactivar la tienda.

La idea es qué. mediante una dirección alternativa, nosotros podamos ver la página de mantenimiento para tener más facilidad a la hora de personalizarla.

Teníamos una guía pequeña para crear una página PHP en Prestashop 1.7, simplemente es importante leerla antes de seguir leyendo este artículo.

Lo primero, que vamos hacer es ver donde está la función que ejecuta la página de mantenimiento en Prestashop.

La función, la podemos encontrar en el fichero:

/classes/controller/FrontController.php

Aquí:

protected function displayMaintenancePage()
{
if ($this->maintenance == true || !(int) Configuration::get('PS_SHOP_ENABLE')) {
$this->maintenance = true;
if (!in_array(Tools::getRemoteAddr(), explode(',', Configuration::get('PS_MAINTENANCE_IP')))) {
header('HTTP/1.1 503 Service Unavailable');
header('Retry-After: 3600');
$this->registerStylesheet('theme-error', '/assets/css/error.css', ['media' => 'all', 'priority' => 50]);
$this->context->smarty->assign(array(
'shop' => $this->getTemplateVarShop(),
'HOOK_MAINTENANCE' => Hook::exec('displayMaintenance', array()),
'maintenance_text' => Configuration::get('PS_MAINTENANCE_TEXT', (int) $this->context->language->id),
'stylesheets' => $this->getStylesheets(),
));
$this->smartyOutputContent('errors/maintenance.tpl');
exit;
}
}
}

Lo que vamos hacer es sobreescribir la función en un nuevo controlador que habilitara el acceso a la página de mantenimiento desde una dirección alternativa.

En el fichero “NadieController.php” que lo vamos a guardar en el directorio: “/controllers/front

Vamos a dejarlo de la siguiente forma:

< ?php
class NadieControllerCore extends FrontController
{
public $php_self = 'nadie';
public function init()
{
parent::init();
$this->displayMaintenancePage();
}
protected function displayMaintenancePage()
{
header('HTTP/1.1 503 Service Unavailable');
header('Retry-After: 3600');
$this->registerStylesheet('theme-error', '/assets/css/error.css', ['media' => 'all', 'priority' => 50]);
$this->context->smarty->assign(array(
'shop' => $this->getTemplateVarShop(),
'HOOK_MAINTENANCE' => Hook::exec('displayMaintenance', array()),
'maintenance_text' => Configuration::get('PS_MAINTENANCE_TEXT', (int) $this->context->language->id),
'stylesheets' => $this->getStylesheets(),
));
$this->smartyOutputContent('errors/maintenance.tpl');
exit;
}
}

Analizamos:

public function init()
{
parent::init();
$this->displayMaintenancePage();
}

Sobrescribimos función init, llamamos a la función padre y por último ejecutamos la función que hemos de mostrar la página de mantenimiento.

Si os fijáis en la función: “displayMaintenancePage” hemos quitado la condicional:

if ($this->maintenance == true || !(int) Configuration::get('PS_SHOP_ENABLE')) {
$this->maintenance = true;
if (!in_array(Tools::getRemoteAddr(), explode(',', Configuration::get('PS_MAINTENANCE_IP')))) {

Ahora ya podemos ver la página de mantenimiento desde la siguiente dirección:

tutienda.com/index.php?controller=nadie

Si queremos personalizar la dirección, visita el siguiente enlace: URL amigable en nueva página

Continúa leyendo Ver página de mantenimiento sin desactivar la tienda en Prestashop 1.7

Print Friendly, PDF & Email

Disponible en español la guía de usuario de Prestashop 1.7

Me acaba de informar Jesús Ruiz, que ya tenemos disponible la guía oficial de usuario de Prestashop 1.7 en Español

Por lo que veo, la traducción se la ha currado Jesús de nuevo u al menos ha vuelto a colaborar 🙂

Muy importante, revisar la documentación, antes de ir preguntando dudas por los foros 🙂

Podéis acceder desde aquí:

http://doc.prestashop.com/pages/viewpage.action?pageId=54263818

 

Print Friendly, PDF & Email

Crear página PHP en Prestashop 1.7

Lo primero es que no estamos hablando de crear páginas de contenidos en la pestaña Preferencias -> CMS (Diseño -> Páginas)

Empecemos  🙂

Aunque se puede hacer mediante módulo, nosotros lo vamos hacer a mano, que si bien no es lo más indicado, supongo que a más de alguno os puede venir bien.

Hace unos 5 años hicimos un ejemplo basado en Prestashop 1.5, ahora lo vamos hacer basado en Prestashop 1.7

El primer paso es crearnos un controlador, al que vamos a llamar “NadieController.php

Lo vamos a guardar en el directorio “/controllers/front”

¿Qué contenido va a tener el fichero “NadieController.php”?

<?php
class NadieControllerCore extends FrontController
{
public $php_self = 'nadie';
public function initContent()
{
$this->context->smarty->assign(
array(
'variableSmarty1' => 'Prueba 1',
'variableSmarty2' => 'Prueba 2',
)
);
parent::initContent();
$this->setTemplate('nadie');
}
}
  • Identificación página
    Entre otras cuestiones, no permite identificar a la página, como también por ejemplo cuando accedemos al controlador vía web, el valor del parámetro. (mismo nombre que la página, si el controlador es “nadieController…”, aquí indicamos ‘nadie’)

    public $php_self = 'nadie';
    
  • Heredamos de FrontController
    class NadieControllerCore extends FrontController
    
  • Función que viene del FrontController, y que se ejecuta nada más ejecutar el controlador.
    public function initContent()
    
  • Preparamos variables para usarlas en el TPL (plantilla)
    $this->context->smarty->assign(
    array(
    'variableSmarty1' => 'Prueba 1',
    'variableSmarty2' => 'Prueba 2',
    )
    
  • Llamada al método padre:
    parent::initContent();
    
  • Asignamos nombre de la plantilla
    “nadie” tiene que estar en “/themes/tuplantilla/templates/” (con extensión tpl), es decir “nadie.tpl
    En setTemplate, escribimos el nombre de la plantilla (nadie.tpl) sin necesidad de colocar la extensión.

    $this->setTemplate('nadie');
    

Una vez preparado el Controlador, vamos a crear el fichero “nadie.tpl” o mejor dicho la plantilla de impresión.

Nuestro contenido será el siguiente:

{extends file='page.tpl'}
{block name='page_title'}
<span class="sitemap-title">{l s='Pagina Nadie' d='Shop.Theme'}</span>
{/block}
{block name='page_content_container'}
<section>
{$variableSmarty1}
{$variableSmarty2}
</section>
{/block}

Bloque estructura – (plantilla)

{extends file='page.tpl'}

Bloque Titulo:

{block name='page_title'}
<span class="sitemap-title">{l s='Pagina Nadie' d='Shop.Theme'}</span>
{/block}
Bloque Titulo

Bloque Contenido:

{block name='page_content_container'}
<section>
{$variableSmarty1}
{$variableSmarty2}
</section>
{/block}

Estamos mostrando el contenido del valor de las variables “variableSmarty1” y “variableSmarty2” que antes habíamos declarado en el controlador.

Imprimiendo variables Smarty

 

Por último, vamos a definir los metatitulos, metadescripción y url amigable de la página de “Nadie”

Vamos a la pestaña Parámetros de la tienda -> Tráfico & SEO, y en el botón “+” añadimos nuestra página.

Nueva página

Nos saldrá un formulario donde seleccionamos la página “nadie”

Definiendo metas y urls amigables para una nueva página en Prestashop

Y definimos el metatitulo, metadescripción, url amigable, etc..

Definiendo datos SEO para la página de Nadie

Ahora para entrar a la dirección, podemos entrar así:

tutienda.com/nadie

Depende así:

tutienda.com/index.php?controller=nadie

Además veremos que aparece el metatitulo y metadescripción, tal como hemos configurado:

Mostrando titulo y descripción SEO

Y con esto y un bizcocho, terminamos por hoy.

Bizcocho de Prestashop

Documento realizado bajo Prestashop 1.7.1.0

Print Friendly, PDF & Email