1. Plantilla del formulario que se mostrará en la página
2. Controlador del servidor que recibe la petición desde el formulario y se encarga de realizar el envío del correo
3. Plantilla del correo que se enviará al cliente y al administrador

Durante el tutorial vamos a seguir un ejemplo que será añadir un nuevo campo para que el cliente introduzca su ciudad.

Añadir nuevo campo en el formulario

Para empezar vamos a añadir un nuevo ‘input’ en nuestro formulario de contacto. Para esto hay que editar el fichero ‘~/theme/default/contact-form.tpl‘, en caso de tener activado el tema por defecto, o sion el mismo fichero dentro de la carpeta del tema que esté activo. Deberemos añadir las siguientes líneas para que aparezca el nuevo campo:

<p class="text">
 <label for="provincia">Provincia</label>
 <input type="text" id="provincia" name="provincia" value="" />
</p>

Este campo tendremos que añadir en el lugar del formulario que consideremos oportuno. El siguiente paso será editar el controlador para que recoja el valor introducido.

Modificar controlador ContactController

En el controlador deberemos recuperar el valor introducido por el usuario en el formulario y añadirlo en la lista de parámetros que se van a enviar en el correo final. Para ello debemos editar el fichero “~/Controllers/front/ContactController.php‘ en dos pasos:

1. Recuperar el valor introducido. En este caso lo hemos llamado ‘provincia’:

   $provincia = Tools::getValue('provincia');

2. Añadir el nuevo valor a los parámetros con el que se rellenará el correo. Esto se hará añadiendo un nuevo campo en el array ‘mail_var_list‘ con el valor que hemos recogido en el punto anterior:

   $mail_var_list = array(
    '{provincia}' => $provincia,
    '{email}' => $from,
    '{message}' => Tools::nl2br(stripslashes($message)),
    '{id_order}' => $id_order,
    '{order_name}' => $order->getUniqReference(),
    '{attached_file}' => isset($_FILES['fileUpload'], $_FILES['fileUpload']['name']) ? $_FILES['fileUpload']['name'] : ''
   );

NOTA: estos cambios se deben hacer después de comprobar que el formulario no está vacío en la línea 117:

if (!empty($contact->email))

Dentro de esta sentencia debermos modificar los campos que tiene nuestro formulario como se indica en este punto.

Editar plantilla del correo que se envía al usuario

El último paso será editar la plantilla del correo que se el envía finalmente al usuario para que le aparezca la información del nuevo campo.

Para esto hay que editar el fichero de la plantilla del correo ‘contact.html’ y también el fichero ‘contact.txt’ para cada uno de los idiomas que tengamos configurados en la tienda. Estos ficheros los podemos encontrar en la carpeta ‘~/mails/‘. En esta carpeta existirá una carpeta por cada uno de los idiomas que estén isntalados. Debemos escoger los idiomas con lo que trabajamos y editar los ficheros indicados para cada uno. En este ejemplo vamos a añadírselo a la plantilla en castellano.

Por tanto vamos a editar primero el fichero ‘~/mails/es/contact_form.html‘ añadiendo estas líneas en el lugar de la tabla donde queramos que aparezca la información:

<tr>
      <td align="left">Provincia: {provincia}</td>
</tr>

El último paso será editar la plantilla de correo en texto plano ‘~/mails/es/contact_form.txt‘ añadiendo la siguiente línea:

Provincia: {provincia}

Con estas dos modificaciones ya aparecerá el nuevo campo en el correo que le llega al cliente tras rellenar el formulario de contacto.

Plantillas correo enviado al administrador

Cuando un cliente rellena un formulario de contacto la información le llegará al admistrador en un correo y al cliente en otro. Estos correos son diferentes. El que le llega a los clientes lo hemos configurado con las plantillas del ejemplo anterior. Ahora para editar la plantilla del correo que se envía al dueño de la tienda hay que hacer esos mismos cambios pero en los fichero ‘~/mails/es/contact.html‘ y ‘~/mails/es/contact.txt‘. Con esto el administrador también recibirá la información del nuevo campo.

Realizando estas modificaciones ya podrás ver el nuevo campo en el formulario  de contacto y el valor que el cliente rellené aparecerá en el correo que se le envía tanto a él como al administrado de la tienda.

Espero que os sea de ayuda el tutorial. Para cualquier duda, queja o sugerencia dejadnos vuestros comentarios.

The post Prestashop, añadir nuevo campo al formulario de contacto appeared first on Blog Developando.

Para añadir nuevas opciones en el menú superior debemos acceder al área de administración de la tienda Prestashop e iremos a la opción ‘Modulos->Módulos‘ del menú superior. Con esto iremos a la ventana donde se gestionan los módulos instalados en la tienda.

Una vez ahí, debemos buscar el módulo que queremos configurar. Para ello podemos filtar por ‘Menú horizontal superior‘ o ‘blocktopmenu‘. Una vez encontrado el módulo del menú debemos hacer clic en la opción ‘Configure‘:

Prestashop blocktopmenu

Seleccionar páginas creadas para añadirse al menú superior

La siguiente pantalla muestra los enlaces configurados en el menú.En la columna de la derecha aparece el listado de las pestañas que actualmente se están mostrando en el menú superior, y en la de la izquierda las páginas que podríamos añadir en dicho menú.

Para añadir o quitar alguna página del menú debemos seleccionarla y hacer clic en uno de los dos botones que aparece ‘Añadir‘ o ‘Eliminar‘, dejando como hemos dicho en la columna de la derecha las páginas que queremos que aparezcan el menú superior.

Prestashop blocktopmenu

En la imagen anterior tendríamos un ejemplo de menú en el que aparecerán 4 páginas como se muestra en la siguiente captura de pantalla:

Prestashop menú superior

Crear enlaces personalizados en el menú superior

En esta misma ventana tenemos otra opción de configuración que consiste en añadir enlaces personalizados. Para estos enlaces deberemos introducir una etiqueta, la url del enlace e indicar si queremos que se abran en una ventana nueva o no.

Prestashop blocktopmenu

 Al darle a ‘Añadir‘ tendremos el nuevo enlace creado. Todos los enlaces que creemos los podemos administrar en la tabla que aparece justo debajo del formulario de creación. Desde esta tabla podremos eliminar o modificar la configuración de cualquiera de los enlaces:

Tabla enlaces creados

Finalmente para añadir el nuevo enlace deberemos volver al principio del tutorial y seleccionar en la columna de la izquierda el nombre del nuevo enlace creado, en este ejemplo ‘Formulario Contacto‘, y hacer clic en ‘Añadir‘.

Añadir enlace menú superior

Hecho esto el enlace ya aparecerá en la columna de los enlaces mostrados y únicamente habría que hacer clic en el botón ‘Guardar‘ para ver la nueva opción en el menú superior de la tienda.

The post Prestashop, añadir nuevas pestañas en el menú superior ‘blocktopmenu’ appeared first on Blog Developando.

Para ello podemos seguir dos procedimientos. El primero de ellos será cambiar la configuración del módulo homeslider desde el panel de administración. Y la segunda será editando el fichero php que contiene la plantilla de dicho módulo.

Vamos a comenzar por el primer método gracias al cual no hay que editar ningún fichero de nuestro servidor.

Indicar las páginas donde no mostrar el módulo homeslider

Para ello, desde la página de administración de Prestashop, debemos ir a la opción ‘Módulo -> Posiciones‘ del menú superior. Haciendo esto accederemos a la página de configuración de las posiciones de los diferentes módulos instalados en la tienda virtual.

Debemos buscar la configuración del módulo del homeslider. Para ello buscar el nombre ‘Imagen de control deslizante para su página web‘. Una vez encontrado hacemos clic en el icono de edicion que aparece a la derecha del módulo:

Módulo homeslider Prestashop

En la siguiente pantalla podremos configurar las ‘Excepciones‘ o páginas donde no queremos que esté visible el módulo homeslider. Para ello debemos seleccionar la página en la que queremos que no sea visible y hacer clic sobre el botón añadir:

Módulo homeslider Prestashop

En esta imagen podemos ver como hemos configurado que el módulo homeslider no sea visible en las páginas: contact, newproducts, pagina, stores, product y category. Por tanto, ahora cuando accedamos a cualquiera de estas página ya no estár el módulo de imagen de control deslizante en la parte superior.

Editar plantilla módulo homeslider

El problema del paso anterior es tener que añadir una excepción por cada página en la que no queramos que aparezca el módulo homeslider. Editando el fichero de configuración de la plantilla del módulo podemos configurar que únicamente se muestre en la página incial.

Para ello debemos modificar el fichero ‘modules/homeslider/homeslider.tpl‘ añadiendo dos línea:

• Añadir esta lína al principio del fichero:

  {if $page_name == 'index'}

• Añadir esta línea al final del fichero:

  {/if}

Con estos cambios el módulo homeslider no deberá mostrarse en otra página que no sea la de inicio.

The post Prestashop, mostrar módulo homeslider sólo en la página de inicio appeared first on Blog Developando.

Panel de administración de las categorias

Lo primero que hay que saber es cómo se accede a la pantalla de administración de las categorías de productos en la tienda Prestashop.

Para ello, desde el ‘backoffice’ o web de administración, hay que acceder en el menú superior a la opción ‘Catálogo -> Categorías‘ como se muestra en la siguiente imagen:

Prestashop administrar categorías

Haciendo clic en la opción ‘Categorías‘ accederemos a una ventana como la siguiente, en la que aparecerá un listado con las categorías que actualmente están creadas en la tienda virtual Prestashop:

Prestashop administrar categorías

En esta ventana observamos un listado con las categorías creadas y si están configuradas para ser mostradas o no en nuestro sitio web. Para cambiar la configuración de cualquier categoría hay que hacer clic sobre la fila que se quiera editar. También se puede eliminar cualquier categoría haciendo clic sobre el botón ‘Borrar‘ que aparece al final de cada fila de tabla de categorías.

Crear nueva categoría

En la parte superior de la ventana anterior debemos hacer clic en el botón ‘Añadir Nuevo‘, lo que nos llevará a una ventana con un formulario donde se deben rellenar todos los datos de la nueva categoría:

• Nombre de la categoría.
• Indicar si la categoría debe ser mostrada o no.
• Seleccionar una categoría padreque en la que deba ser incluida.
• Indicar si es la categoría raíz.
• Descripción de la categoría que será mostrada al acceder a ella
• Imagen asociada a la nueva categoría
• Diferentes etiquetas ‘meta’ que serán añadidas en el ‘head’ de la página de detalle de la categoría.
• Url amigable que se le asociará a la nueva categoría.
• Adiministrar que grupos de usuarios pueden acceder a la vista de esta categoría

Una vez rellenados todos los campos habría que hacer clic en el botón ‘Guardar‘ y ya estaría creada la nueva categoría. El siguiente paso sería asociar algún producto a la nueva categoría de la tienda Prestashop.

Crear nueva categoría desde el detalle de un producto

También es posible crear una nueva categoria en Prestashop directamente desde la pantalla de detalle de un producto. Para ello debemos acceder a la opción del menú vertical de la izquierda denominada ‘Asociaciones‘. Esto nos lleva al detalle de las categorías existentes, seleccionado cuál es la del producto que se está editando. Se podrán asociar las categorías que se quieran a un mismo prodcuto, indicando finalmente la categoría por defecto del mismo.

Para crear una nueva categoría desde esta sección se debe hacer clic en el botón ‘Crear una nueva categoría’, teniendo que rellenar el formulario como en el caso anterior:

Prestashop crear categoría productos

Si tenéis alguna duda no dudéis en poneros en contacto con nosotros, y si el tutorial os ha sido útil os agradeceríamos vuestros comentarios.

The post Prestashop, crear nueva categoría de productos appeared first on Blog Developando.

Para crear o modificar estas páginas hay que acceder desde el panel de administración de la tienda Prestashop a la configuración del ‘módulo CMS‘ desde la pestaña ‘Herramientas->CMS‘:

Prestahop editar página CMS

En la ventana que se abre veremos una tabla con las página creadas en el ‘bloque CMS’. Podremos crear nuevas, modificar o eliminar las páginas que ya existen.

Si queremos modificar una de las creadas debemos hacer click sobre el icono de la página que queramos modificar:

Prestahop editar página CMS

Y finalmente editar el contenido de la página y hacer click en el botón ‘Guardar‘ que aparece en la parte superior:

Prestahop editar página CMS

Con estos sencillos paso podremos configurar nuestra página en el módulo bloque CMS de una tienda Prestashop.

The post Prestashop: crear, modificar o eliminar páginas del bloque CMS appeared first on Blog Developando.

• Bloque reasegurados
• Bloque enlaces CMS
• Bloque información de contacto
• Bloque categorías
• Bloque redes sociales
• Bloque mi cuenta

Este es el estilo y la información que viene en el pie de página o ‘footer’ en una tienda por Prestashop por defecto.

Pîe de página o footer Prestashop

Desde la configuración de módulos en el escritorio de administración de la tienda Prestashop se pueden activar o desactivar estos módulos. 

También podemos configurar la información que se muestra en cada una de estos módulos de la tienda en el pie de página.

Configurar enlaces bloque CMS

Acceder al listado de módulos y buscar ‘Bloque CMS‘ y hacer clic en ‘Configure’, lo que nos llevará a una vista con el listado de enlaces que se estén mostrando, pudiendo seleccionar o deseleccionar las diferentes opciones:

Prestashop Bloque enlaces CMS

Prestashop configurar Bloque enlaces CMS

Quitar bloque enlaces información

También se pueden quitar los enlaces que aparecen bajo el encabezado “Información” en el pie de página que se muestra en la siguiente imagen:

Bloque CMS información

Si queremos que estos enlaces no aparezcan debemos acceder a la configuración del ‘Bloque CMS’ como en el caso anterior y ahora hacer deseleccionar la casilla con el texto “Muestra varios enlaces e informaciones en el Footer” como se indica a continuación:

Bloque CMS información

Una vez hecho esto habría que hacer clic en el botón ‘Guardar‘ para aplicar los cambios y que no aparezca esta información en el footer.

Configurar bloque Social

Debemos buscar el módulo ‘Bloque social‘ o ‘Block Social’ y hacer clic en la opción ‘Disable’ para que no aparezca en la página, o ‘Configure’ para cambiar las propiedades de las cuentas de Facebook y Twitter de nuestra tienda Prestashop:

Prestashop configurar bloque redes sociales

Prestashop configurar bloque redes sociales

The post Prestashop, configurar información módulo en el pie de página appeared first on Blog Developando.

Insertar el nuevo Hook en la base de datos

Para ello debemos ejecutar manualmente la siguiente sentencia SQL:

INSERT INTO `ps_hook` (`name`, `title`, `description`)
               VALUES ('menuTopHook', 'Menu Top Hook', 'Menu horizontal top');

¿Cómo se utiliza el nuevo hook en un módulo?

Para utilizar el nuevo ‘Hook’ en un módulo Prestashop debemos editar la clase del módulo y añadir un método público y estático que referencie al nuevo ‘Hook’.

La nomenclatura de estos métodos comienza por la palabra ‘hook’ seguido del nombre que se haya configurado para le nuevo hook.

En este ejemplo deberemos añadir el siguiente método:

public function hookMenuTopHook($params)
{
}

Resgistrar el nuevo Hook dentro de la congifuración del módulo

Un módulo debe definir todos los hooks en los que puede situarse. Por tanto, ahora deberemos indicar que a los que estuviesen ya configurados también le estamos añadiendo el nuevo. Esto se hace con el siguiente código:

public function install()
{
    return parent::install() && $this->registerHook('MenuTopHook');
}

Llamadas a un Hook en Prestashop

Llamada directa al Hook

Ejecutamos la llamada directa al ‘Hook’ pasando a la función ‘hookExec‘ el nombre con el que se ha creado el ‘Hook’ y una matriz de parámetros de configuración:

$params = array(
    'parametro_1' => 'valor_1',
    'parametro_2' => 'valor_2',
);
Module::hookExec('MenuTopHook', $params);

Crear un método de acceso directo

En este punto crearemos un método que lo utilizaremos de acceso directo. Así cada vez que llamemos al ‘Hook’ únicamente tendremos que hacer una llamada a este método, y nos quedará un código más limpio.

El método que hay que crear debe ser como el siguiente:

class HookCore extends ObjectModel
{
    // resto de hooks
    static public function actualizarMenu($menu)
    {
        $params = array('boton' => $boton);
        return Module::hookExec('actualizarMenu', $boton);
    }
    // resto de hooks
}

Ahora desde el núclero de Prestashop podremos realizar llamadas a este ‘Hook’ utilizando una línea como la siguiente:

Hook::actualizarMenu(new Boton('miBoton'));

The post Prestashop, crear un nuevo Hook en tienda virtual appeared first on Blog Developando.

Legal o moralmente este enlace debería permanecer ahi ya que estamos trabajando con una herramienta que nos han proporcionado de manera gratuita y que en su licencia indica que se debería mantener la referencia al origen de la misma. Pero el propio Prestashop nos ofrece la opción de ocultar esta firma. Por tanto en este tutorial explicaremos como ocultar ese enlace en nuestras páginas en 4 sencillos pasos.

Búsqueda y configuración del módulo ‘Bloque CMS’

Esto se configurará en el módulo “Bloque CMS” de Prestashop. Para llegar a este bloque hay que acceder en el menú superior de la vista de adminstración de nuestra tienda al menú ‘Módulos -> Módulos‘ como se indica en la siguiente image:

Ocultar Powered by Prestashop

El segundo paso será buscar el módulo ‘Bloque CMS‘. Para ello escribir el nombre del módulo en el buscador de módulos y seleccionar el módulo entre la lista de módulos sugeridos por Prestashop:

Quitar Powered by Prestashop

En el listado de módulos ahora aparecerá el módulo ‘Bloque CMS’ con los diferentes enlaces de las acciones que se pueden realizar sobre este módulo Prestashop. Debemos hacer clic en el enlace ‘Configure‘, y esto nos llevará a la vista de configuración del bloque de CMS:

Quitar Powered by Prestashop

Ocultar enlace ‘Powered by prestashop’ o ‘creado por prestashop’

En esta nueva vista veremos que al final del todo aparece un checkbox que por defecto estará seleccionado con la etiqueta ‘Mostrar creado por Prestashop‘. Pues deseleccionado este checkbox conseguiremos que el enlace de ‘Creado por Prestashop’ no aparezca en el pie de página de nuestra tienda virtual Prestashop:

Quitar Powered by Prestashop

Configurar firma personalizada para la tienda virtual

También sería posible añadir una firma con nuestro nombre o el de la  empresa editando el fichero ‘footer.tpl‘, que se encuentra en la carpeta raíz del tema ‘Prestashop‘ que se esté utilzando. Para configurar la firma debemos  añadirla al final del fichero ‘footer.tpl’ de la siguiente manera:

<div id="footer" class="grid_9 alpha omega clearfix">
 {$HOOK_FOOTER}
 {if $PS_ALLOW_MOBILE_DEVICE}
 <p class="center clearBoth">
 Desarrollado por <a href='http://www.developando.com' alt='Visitar developando.com' target='_blank'>developando</a>
 </p>
 {/if}
</div

The post Prestashop, eliminar ‘Powered by Prestashop’ del pie de página appeared first on Blog Developando.

En este tutorial lo que se va a configurar es dicha ‘URL amigable‘ en Prestashop 1.5. Las ‘URLs amigables’ se configuraran en la pestaña ‘Preferencias -> SEO y URLs‘ dentro de la herramienta de administración de la tienda. Desde ahí se gestionan todas las ‘URLs amigables’ que tiene la tienda. Para agregar una nueva habría que hacer click sobre el botón ‘Añadir nuevo‘.

En la nueva ventana debería aparecer la opción de la nueva página que hemos creado en la lista desplegable. Si seguimos el pasado tutorial en esta lista debería aparecer una opción llamada ‘mipagina’. Pero al no haber configurado el controlador no va a aparecer. Por tanto, ahora hay que seguir estos pasos para que aparezca en esta lista nuestra página y podamos configurar la ‘URL amigable‘.

1.- Crear controlador para la nueva página Prestashop

Para crear el controlador hay que crear el fichero ‘PaginaController.php‘ dentro de la carpeta ‘~/controllers/front/‘.

Este controlador habrá que configurarlo para que cargue todas las hojas de estilo y ficheros necesarios para que funcione la nueva página. En este tutorial se muestra una configuración básica, en la que no se incluyen hojas de estilo ni nigún otro fichero adicional en la carga de la página. Por tanto el contenido del fichero ‘~/controllers/front/PaginaController.php‘ sería el siguiente, en él únicamente se configura el fichero que contiene la plantilla con al estructura y el contenido que contiene la nueva página, esta plantilla fue creada en el pasado tutorial.

<?php
class PaginaControllerCore extends FrontController{
 
   public $php_self = 'pagina';
 
   public function setMedia(){
      parent::setMedia();
   }
 
   public function init(){
      parent::init();
   }
 
   public function initContent(){
      parent::initContent();
      $this->setTemplate(_PS_THEME_DIR_.'pagina.tpl');
   }
}

2 – Cambiar La página creada en el pasado tutorial

En el fichero ‘pagina.php‘ que habíamos creado en el pasado tutorial, y que está en el raíz de nuestra tienda Prestashop, debemos cambiar el contenido que tenía por las siguientes líneas que harán la llamada al nuevo controlador que acabamos de crear:

<?php
require(dirname(__FILE__).'/config/config.inc.php');
Tools::displayFileAsDeprecated();
 
Tools::redirect('index.php?controller=pagina'.((count($_GET) || count($_POST)) ? '&'.http_build_query(array_merge($_GET, $_POST), '', '&') : ''), __PS_BASE_URI__, null, 'HTTP/1.1 301 Moved Permanently');

Ahora al hacer la llamada a la pagina se ejecutará la lógica definida en el controlador y se mostrará después el contenido que se haya definido.

Este tutorial está probado en una versión 1.5 de Prestashop. En versiones anteriores estas páginas creadas deben tener este otro formato:

<?php
require(dirname(__FILE__).'/config/config.inc.php');
include(dirname(__FILE__).'/header.php');
$smarty->display(_PS_THEME_DIR_.'pagina.tpl');
include(dirname(__FILE__).'/footer.php');

Para verificar qué formato debes utilizar según la versión de Prestashop utilizada, recomendamos mirar cómo están definidos otros ficheros de este estilo para otras páginas, y después crear el nuestro cogiendo uno de los dos formatos que hemos descrito anteriormente.

3.- Asignar URL amigable a la página creada

Ahora ya podemos volver a la pestaña ‘Preferencias -> SEO y URLs‘ dentro de la web de administración de nuestra tienda Prestashop. En la lista desplegable de las páginas ya aparecerá la opción ‘pagina‘.

NOTA: si no apareciese esta página en la lista, borrar el fichero ‘~/cache/class_index.php‘ que está dentro del raíz de la tienda y volver a entrar de nuevo en el menú de administración de ‘SEO URLs’ y ya aparecerá.

Una vez encontrada la página que queremos en el desplegable la seleccionamos y configuramos los valores con el título y las palabras clave que se van a aplicar a la página:

Prestashop url amigable nueva página

El último parámetro se llama ‘enlace reescrito‘, y será el que se debe añadir en la url para poder acceder a la página creada previamente.

Por ejemplo si rellenamos ese valor con ‘pagina‘, cuando los usuarios accedan a ‘http://dominio/mipagina’ van a ver el contenido de ‘http://dominio/pagina.php’, que es lo que se ha configurado con este tutorial.

The post Crear Url amigable para páginas que no son del core en Prestashop appeared first on Blog Developando.

• Preferencias > Imágenes > Calidad de la imagen:  Seleccionar la opción “Usar png si la imagen base está en formato png”

QUITAR FONDO BLANCO LOGO PRESTASHOP

• Después de ello, vuelve a subir el logo en Preferencias > temas
• Al pulsar en guardar, el logo ya aparece con el fondo transparente.

The post Logo con fondo transparente en Prestashop appeared first on Blog Developando.