Blog

Optimizar la velocidad de carga en Prestashop

La velocidad de carga de una web se ha convertido en uno de los parámetros más importantes para el posicionamiento en buscadores, por ello vamos a ver en este artículo algunos puntos que como gestores de una tienda online debemos revisar para mejorar el tiempo de carga de nuestra tienda.

Si habéis llegado hasta aquí, probablemente ya hayáis comprobado la velocidad de carga de vuestra tienda, si no, es el momento de revisarla, para ello podemos usar la herramienta de Google: PageSpeed Insights.

Google PageSpeed

Tras introducir la URL de tu tienda, podrás ver un listado de las mejoras necesarias tanto para la navegación desde dispositivos móviles como para ordenadores.

Los principales motivos por los que una tienda online con Prestashop tenga una velocidad de carga lenta son los siguientes:

  • Mostrar contenidos cargados mediante enlaces externos.
  • No tener optimizados los CSS, JS ni HTML, deben estar minimizados y unificados.
  • No tener optimizadas las imágenes.
  • No tener habilitada la comprensión ni el tiempo de expiración de la caché.
  • Tener instalados módulos que no están siendo usados.
  • La plantilla no está optimizada.

Seguro que en Google PageSpeed te habrá mostrado algunos de estos avisos, por lo que vamos a configurar nuestro prestashop para solucionarlos.

Lo primero es configurar el rendimiento de nuestro Prestashop:

Configurar el rendimiento de nuestro Prestashop:

  1. Apartado de rendimiento de Prestahsop
  2. Modificación del archivo .htaccess

1. Apartado  de Rendimiento de Prestahsop

Nos dirigimos a nuestro gestor de prestashop o backoffice a:
Parametros avanzados –>Rendimiento

– En el apartado SMARTY, debemos marcar la opción: NUNCA RECOMPILAR LOS ARCHIVOS DE PLANTILLA.

Configuración de smarty

Esta opción afecta a la velocidad de la tienda directamente, sin embargo, también hay que contemplar en qué momento activamos esta opción ya que si se realiza algún cambio en algún archivo debemos activar FORZAR COMPILACIÓN para que se muestre.

También es recomendable si la tienda aún está terminándose de desarrollar o en una fase de cambios importantes poner la opción RECOMPILAR LAS PLANTILLAS CUANDO LOS ARCHIVOS SEAN MODIFICADOS y una vez finalizados marcar que nunca recompile.

Pero si en la tienda ya no se van realizar grandes cambios optamos por la primera opción para mejorar la velocidad, recordando que si se hacen modificaciones en los archivos .tpl, hay que recompilar.

A continuación dejaremos marcada la opción de caché de Prestahsop:

Caché prestashop

– En el apartado CCC (COMBINACIÓN, COMPRESIÓN Y CACHE), activaremos todas las opciones para que comprima todo el código (HTML, CSS y JS) en un archivo y cargue mucho más rápido. Con esta opción se solucionaría el aviso de Minimizar los archivos CSS, JS y HTML.

Minimizar HTML, CSS, JS

– En el apartado CIFRADO, activaremos el cifrado RJINDAEL. Si modificamos esta opción las cookies serán reiniciadas, este cifrado es más rápido.

Cifrado Rjindael– En el apartado Caché, activamos «uso de caché» y se nos mostrarán una serie de opciones:

Configuración cache prestashop

Podemos probar qué sistema de caché es mejor para nuestro prestahsop, ya que no hay uno indicado como el mejor, para ello podemos usar nuestro navegador web Chrome y ver nuestra tienda, una vez en ella, pulsamos el botón derecho de nuestro ratón y le damos a la opción INSPECCIONAR,y se nos dividirá la página en dos: la parte de nuestra tienda y el inspector. En él buscamos la opción NETWORK

Tiempo de descarga

En este ejemplo, en «time» hay un excelente tiempo de carga de una imagen JPEG, pero si aún así quisiéramos probar, o no fuera nuestro caso, escogeríamos otro sistema de caché, iríamos a nuestro gestor y editaríamos la configuración de:

Configuración de Memchache:

Memcache

Volveríamos a Chrome, actualizamos la página con F5 y volveríamos a consultar el inspector–>Network columna «time».

Configuración de APC:

APC cache

Volveríamos a Chrome, actualizamos la página con F5 y volveríamos a consultar el inspector–>Network columna «time».

Y quedarnos con el que mejor tiempo de descarga tenga.

2.Modificar nuestro archivo .htaccess

Lo primero es revisar que tenemos activadas las URL amigables, vamos a: Preferencias –> SEO+ URLs

URL amigables en Prestashop

Una vez confirmado, y en caso de no tenerlas las activaríamos, nos vamos a la carpeta que contiene nuestro Prestashop y en su raíz nos encontraremos con el archivo .htaccess

En el archivo debemos incluir la fecha de caducidad para los archivos del tipo: javascript, imágenes, css y texto. Copiamos y pegamos el siguiente código.

<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/gif "access plus 1 month"
ExpiresByType image/jpeg "access plus 1 month"
ExpiresByType image/png "access plus 1 month"
ExpiresByType text/css "access plus 1 week"
ExpiresByType text/javascript "access plus 1 week"
ExpiresByType application/javascript "access plus 1 week"
ExpiresByType application/x-javascript "access plus 1 week"
ExpiresByType image/x-icon "access plus 1 year"
ExpiresByType image/svg+xml "access plus 1 year"
ExpiresByType image/vnd.microsoft.icon "access plus 1 year"
ExpiresByType application/font-woff "access plus 1 year"
ExpiresByType application/x-font-woff "access plus 1 year"
ExpiresByType application/vnd.ms-fontobject "access plus 1 year"
ExpiresByType font/opentype "access plus 1 year"
ExpiresByType font/ttf "access plus 1 year"
ExpiresByType font/otf "access plus 1 year"
ExpiresByType application/x-font-ttf "access plus 1 year"
ExpiresByType application/x-font-otf "access plus 1 year"
</IfModule>

Después añadiremos también el siguiente código en el archivo .htaccess para la compresión de prestashop mediante el llamado mod deflate.

FileETag INode MTime Size
<IfModule mod_deflate.c>
   <IfModule mod_filter.c>
      AddOutputFilterByType DEFLATE text/html text/css text/javascript application/javascript application/x-javascript
   </IfModule>
</IfModule>

En caso de que al modificar el archivo .htaccess vieramos que nuestro prestahsop no hace correctamente la redirección, volveríamos a Preferencias –> SEO + URLs y desactivamos y activamos las URls amigables para que regenere el .htaccess

Eliminar contenidos cargados mediante enlaces externos:

Otro de los avisos que nos podía mostrar Google PageSpeed, era que se están mostrando recursos como; imágenes, fuentes, css, módulos, etc., enlazados a recursos externos a nuestra web. Por ejemplo, redes sociales, chats, etc. La única posibilidad es eliminarlo si no es posible cargarlos desde nuestra propia web.

Por ejemplo,si usamos un banco de contenidos y utilizamos una imagen, como éstos funcionan almacenando las imágenes que queramos en nuestra sesión y nos dan un enlace para ponérselo a nuestras imágenes, estaríamos cargando esa imagen desde otro servidor,otro sitio externo a nuestra web. Cada vez que nuestra tienda quiere mostrar esa imagen, llama a ese banco de contenidos, por eso decimos que es un recurso que carga externamente. Si Google PageSpeed nos muestra este aviso, deberíamos coger esas imágenes, optimizarlas y subirlas a nuestro servidor y prestashop para que cargue internamente y mucho más rápido.

Optimizar imágenes:

Nos refierimos a la reducción de peso de nuestras imágenes sin pérdidas de calidad visual. Existen multitud de herramientas gratuitas para ello por ejemplo RIOT, también por supuesto podemos usar herramientas de pago como Photoshop o Firework.

Módulos instalados sin uso:

Es bastante habitual que cuando se instalen las plantillas o prestashop se empiecen a instalar módulos por si nos hicieran falta. En sí es un error porque ahora, que Google PageSpeed nos avisa que tenemos una tienda lenta, tenemos que revisarlos y desinstalar todos aquellos que no estén en uso.

Por ejemplo, los módulos de estadísticas de prestahsop, si nosotros usamos otros sistemas de estadística como google analytics, no necesitamos estos módulos, se deberían desinstalar.

Para ello vamos a Módulos y Servicios — > Módulos

Buscamos el que queremos quitar y desinstalamos:

Módulos Prestahsop

También se da el caso de HOOKs que no están siendo mostrados por la plantilla que usamos y que contiene módulos, que por lo cuál no se están usando. Es importante no solo desactivar, sino desinstalar.

Siempre estarán ahí si quieres instalarlos en el futuro pero no afectarán a la carga de la tienda.

Limpieza de Prestahsop:

Es importante hacer una copia de seguridad antes de nada, para ello vamos a: Parámetros Avanzados –> Copia BD

Debe realizarse por un usuario avanzado para tras hacer la copia, editar en la Base de datos las tablas, por ejemplo referentes a estadísticas.

Con estas pautas esperamos haberos ayudado para mejorar la velocidad de carga de vuestra tienda con Prestashop pero si no fueran suficientes, podéis consultarnos por nuestros Clouds Optimizados para Prestashop  a través de nuestro sistemas de tickets si ya eres cliente o a través de nuestro formulario de contacto si aún no lo eres.

Subir productos a nuestra tienda online con PrestaShop

En este artículo vamos a ver como subir un producto a nuestra tienda on-line, con PrestaShop,  y su configuración básica. ¡Empezamos!

Vamos al menú lateral izquierdo del gestor: Catálogo –> Productos

Menú lateral

Veremos el listado de los productos que ya tengamos, para crear uno nuevo vamos al botón de añadir nuevo:

Añadir nuevo

Y rellenamos los campos de la pestaña INFORMACIÓN:

Pestaña de información

Nombre: Este nombre será el visible en las miniaturas, es importante que contemples distintas nomenclaturas para no poner siempre por ejemplo: Pantalon chino. Mejor poner Pantalón easy Model. Por ejemplo o el modelo marca algo que sea diferenciador de los demaás pantalones chinos que vayas a subir.
Referencia: es importante para la gestión de los productos un identificador único.
Activado: Si si queremos que ya se pueda ver públicamente.
Visible: Toda la tienda:
Opciones: marcar las que nos iteresen.
Condición: Nuevo (pondrá una marca en el producto)
Descripción Corta: Pondremos una breve descripción.
Descripción: Es una descripción más extensa que aparecería en la pestaña «Más información» de la ficha del producto.
Etiquetas: Para ayudar a las busquedas en google, yahoo, etc, para SEO, es bueno poner aquí palabras por las que se buscaría en los buscadores. Por ejemplo: Pantalón chino algodón, etc.

Siguiente pestaña PRECIO:

Pestaña Precios

Rellenamos el precio si lo tenemos con IVA y guardamos.

Precio con IVASi tuviéramos el precio sin IVA, lo pondríamos en la casilla sin IVA y automáticamente se rellena la casilla de recio con IVA, aplicándole un 21% de IVA si ya lo tienes configurado así en la tienda.
También podemos indicar un producto rebajado. Para ello, marcaríamos la casilla descuento o rebajas y configuraríamos el descuento un poco más bajo.

Configurar descuentos

Recordar siempre darle a guardar y permanecer a cada sección o se perderían los cambios.
Una vez dado al botón de añadir precio especifico puedes configurar muchas opciones, pero la general es que se aplique a todo el mundo y para que se active hay que ponerle la fecha de comienzo y fin, así como la opción de «Aplicar un descuento» que puede ser en porcentajes, es lo más habitual, o en euros:

Configurar descuentos 2

Y guardar.

Siguiente pestaña ASOCIACIONES:
En «Asociar categorias» desplegamos y buscamos la categoría a la que pertenece:

Pestaña de asociaciones

Si marcamos la primera categoría (la padre), el producto aparecerá en la home como destacado, sino, sólo aparecerá en la sección marcada.
También tenemos la opción «accesorios» que se mostraría en la ficha de productos como los productos relacionados, por ejemplo a un pantalón puedes mostrar cinturones, solo habría que buscarlo y listo. También si te interesa comercialmente indicar el fabricante.

Asociación de otros productos

Siguiente sección COMBINACIONES:

Combinaciones

En este apartado configuramos los distintos colores, tallas etc, que pueda tener un producto. Para ello, nosotros previamente hemos configurado en Catálogo–> Atributos de productos , las posibilidades a escoger.
Señalamos los atributos, le damos al botón AÑADIR y se mostrarán al lado:

Combinaciones

En esta pestaña podríamos configurar un precio distinto si tuviésemos dos colores y uno de ellos, por ejemplo, tuviera otro precio. Rellenamos también el campo de Cantidad por defecto, para que prestashop también pueda ayudarnos a controlar el stock.
Y pulsamos el botón GENERAR COMBINACIONES, puede tardar un momento en hacer el listado, pero finalmente te lo muestra ya configurado.

Le damos a Guardar y permanecer:

Combinaciones

Finalmente le damos a la siguiente pestaña IMÁGENES:

Imágenes de productos

Pulsamos el botón añadir y buscamos la imagen que queremos que muestre. Y una vez seleccionado se muestra en la lista, hay que pulsar el botón SUBIR ARCHIVOS:

Subir imágenes en prestashop

Podemos añadir tantas como queramos y ponerlas en un orden preciso.
Tras darle a subir, parece no hacer nada pero está subiéndolas, espera un momento y se te mostrará el mensaje de que se ha subido correctamente y verás el listado de las imágenes.

Listado de imágenes de productos en prestashop

Marca la que quieras para la portada, y ordenarlas arrastrando en la columna posición al orden en que quieras que se muestren.
Luego le damos a guardar y ya puedes ver tu ficha de producto perfectamente configurada.

Cómo configurar PrestaShop para enviar correos mediante SMTP

En lugar de usar la función php mail para que PrestaShop envíe correo, podemos usar de forma recomendable el envío por SMTP. Hacerlo es muy fácil y ayudará a que tu correo llegue al buzón de entrada en lugar de al buzón de spam.

 

En aquihaydominios.com os damos libertad para crear las cuentas de correos que necesitéis con vuestro dominio, si aún no la tienes revisa este otro post sobre Cómo crear una cuenta de correo en tu panel de control Plesk, para revisar ese correo además de por webmail tienes la posibilidad de configurarlo en tu móvil(windows phone, android, etc.) y en tus otras cuentas de correo de gmail o thunderbird.

Usaremos a modo de ejemplo info@tudominio.com usar para que Prestashop envíe correos.

Así que…  ¡empezamos!

1. Nos registramos en nuestro panel de gestión de PrestaShop.

Panel de gestión

2. Hacemos clic en: Párametros Avanzados –> Correo electrónico

Menú

3. En el área CORREO ELECTRÓNICO, veremos que por defecto viene marcada la opción:
«Usar la función mail() de PHP. Recomendado en la mayoría de los casos»
Marcaremos la opción:
«Establecer mis propios parámetros SMTP. Solo para usuarios AVANZADOS»

Selección SMTP

Veremos que se despliega otra área también llamada CORREO ELECTRÓNICO donde tenemos que poner los datos de nuestra cuenta de correos.

Panel

Rellenamos los campos con la información que tenemos de nuestro proveedor de servicios de correo, en este caso los de aquihaydominios.com son:

  • Dominio para los emails: No es necesario rellenarlo
  • Servidor SMTP: localhost (Aunque por defecto te salga smtp o alguna otra cosa, bórralo ya que nuestras cuentas usan mail. Si tu cuenta no fuera de aquihaydominios.com tendrás que consultarlo con tu proveedor de hosting)
  • Nombre de usuario SMTP: dirección de email, por ejemplo: info@tudominio.com
  • Contraseña: La misma que hayas usado para crear la cuenta de correo
  • Cifrado: Ninguno
  • Puerto: 587 (habitualmente usan 25, esto depende de tu buzón de correo, si has creado tu cuenta en el panel Plesk de aquihaydominios.com, tienes que poner 587)

Quedaría así:

prestashop-smtp-configurar

 

Recuerda GUARDAR

 

Una vez tenemos configurado nuestro correo por SMTP, debemos hacer una prueba, debajo de nuestra configuración, existe otro área: COMPRUEBE LA CONFIGURACIÓN DE SU EMAIL

Recuerda que «info@tudominio.com» es quien envía el correo a «otraCuenta@gmail.com» por lo que debes rellenar el campo «Enviar un mail de prueba a»  con la otra cuenta de correo: «otraCuenta@gmail.com» y dale al botón de «enviar un correo electrónico de prueba»

Enviar correo prueba

Debe llegarte a tu otraCuenta@gmail.com un correo de prueba.

Si te llega el aviso es que todo está bien configurado para que tu PrestaShop envíe correo electrónico como si desde info@tudominio.com fuera.

Recuerda que para que además te lleguen las alertas de pedidos debes tener tu módulo mailalert configurado.

Si no te llega nada en un tiempo prudencial revisa con tu proveedor de correo los datos configurados.

Cómo configurar WordPress para enviar correos mediante SMTP

En lugar de usar la función php mail para que WordPress envíe correo, podemos usar de forma recomendable el envío por SMTP. Lo puedes hacer fácilmente con un plugin. Hacerlo es muy fácil y ayudará a que tu correo llegue al buzón de entrada en lugar de al buzón de spam.

Lo primero que necesitamos es crear una cuenta de correo en nuestro dominio para enviar los correos. (Si ya tienes una la puedes usar también y saltarte este paso)

Para ello nos vamos a nuestro Plesk y pulsamos en la pestaña Correo, y luego más abajo en Crear dirección de email

SMTP1

 

En la siguiente pantalla Introducimos:
El nombre de la Dirección de email (no es necesario que tenga acceso al panel).
La Contraseña.
El acceso al Buzón sí que es necesario (se dejan los tamaños predeterminados por defecto).
Y se pulsa en Aceptar.

SMTP2

 

Accede a tu escritorio de WordPress para instalar el plugin: WP-Mail-SMTP

 

Accede al panel de WordPress y en el apartado Plugins pulsamos en Añadir nuevo. Y buscamos lo siguiente: WP-Mail-SMTP. Y le damos a instalar el plugin de Callum Mcdonald. Hay muchos plugins para esto, pero este tutorial trata sobre la configuración de este plugin en concreto que es ligero, simple y cumple su cometido.

SMTP3

 

También puede encontrarse para su descarga e instalación manual aquí: https://es.wordpress.org/plugins/wp-mail-smtp/


ACTUALIZACIÓN 06/07/2017:

Recientemente nos hemos encontrado WordPress donde dicho plugin no funciona correctamente con las versiones más recientes de WordPress. En esos casos hemos probado el plugin Postman SMTP y ha funcionado correctamente. La configuración es la misma. Se puede descargar desde WordPress o desde https://wordpress.org/plugins/postman-smtp/


Una vez instalado, en el listado de nuestros plugins, buscamos WP-Mail-SMTP y pulsamos en Settings, o alternativamente nos vamos en el panel de WordPress a Ajustes->Email. En ambos casos llegaremos a la pantalla de configuración del plugin.

En ella:
Dejamos From Email y From Name en blanco.
En Mailer seleccionamos .
Return Path en blanco.
En SMTP Host ponemos localhost.
En SMTP Port ponemos 587.
En Encryption seleccionamos No encryption.
En Autentification seleccionamos Yes: Use SMTP Autentification.
En Username ponemos el nombre del correo que creamos en Plesk seguido de @ y el nombre del dominio (smtp@midominio.es en nuestro ejemplo).
Y en Password la contraseña que elegimos para ese correo en Plesk.
Finalmente pulsamos en Guardar cambios y ya estará todo listo.

SMTP4

Cómo cambiar la imagen no disponible de PrestaShop

Hace tiempo, en versiones anteriores de PrestaShop, si querías cambiar la imagen no disponible de los productos debías preparar todos los tamaños y subirlo por FTP. Ahora, la cosa ha cambiado y para mejor, ya solo tienes que hacer lo siguiente:

  1. Ve a Localización y en pulsa en Modificar en el idioma de la imagen que quieras subir. Como sabrás, podrás tener una imagen de no disponible en cada idioma. Es lógico, por si queremos incluir algún texto.
  2. Haz clic en «Añadir archivo» donde pone «Imagen para mostrar en enlaces rotos» y listo!

U_yzlsk5q5SHV9PQNoHpayrMbQ_2Zh0BCk8uqVopGGA

Cómo crear páginas CMS en PrestaShop

PrestaShop nos da la posibilidad de crear una serie de contenidos que no cambiarán con frecuencia pero que es necesario y bueno tener en nuestra tienda.

No solo nos referimos a los contenidos básicos y estándares de «Condiciones de Compra» o «Políticas de Privacidad», sino también a crear contenidos de ayuda al cliente que quiere conocer los costes previos del transporte, aprender cómo se compra on-line y por supuesto a los contenidos en los que contamos al cliente Quienes Somos, Cómo llegamos hasta aquí, Cuál es la filosofía de nuestra empresa y todos aquellos contenidos informativos que creemos que el cliente puede necesitar para conocernos mejor.

Así que para crear un contenido CMS en PrestaShop, accedemos a nuestro panel de gestión y vamos a:

Preferencias > CMS y hacemos clic.

CMS en Prestashop

Y veremos la pantalla dividida en Categoría y en Contenidos, generalmente no necesitaremos modificar la categoría así que nos iremos a la zona de contenido y haremos clic en el icono de añadir uno nuevo:

Crear Nuevo ContenidoSe nos abre la siguiente pantalla:

Pasos para crear contenido

Y veremos los pasos a seguir:

1 – Introducir el título de la página que verá el cliente.
2 – Si quieres crear una ruta en concreto, tienes que escribir aquí el nombre de la página en minúsculas, sin acentos, sin espacios y con guiones separando las palabras. Sino tomará por defecto el título que pongas. Si no tienes conocimientos avanzados de este tema, te recomiendo que dejes que PrestaShop la ponga por defecto.
Ruta amigable3 – Aquí escribiremos el contenido de nuestra página.
Funciona como cualquier editor de texto, tienes una serie de iconos con las mismas funciones que los de cualquier editor de texto como word. Si pasas el ratón por encima te muestra su función: negrita, cursiva, subrayado, alineación a la izquierda, centrado o derecha, etc.
EditorTextoPara aplicar cualquiera de estos iconos, seleccionamos el texto y pulsamos el icono correspondiente.

También tenemos la posibilidad de poner un enlace:

– Seleccionamos el texto
– hacemos clic sobre el icono enlazar
Poner un link– Y rellenamos el campo de la dirección a donde queremos que vaya:
Campos a rellenar para link

En este ejemplo, en el campo URL, pondríamos la ruta, por ejemplo: http://facebook.com

Otra opción que necesitamos es meter imágenes, el último icono es para ello, así que colocamos el ratón dónde vayamos a querer la imagen y luego hacemos clic en el botón de la imagen:

Incluir una imagen

Y se nos abre esta pantalla:

Buscar imagen

En Descripción de la imagen ponemos la respuesta a ¿qué es la imagen? de manera breve.
Las dimensiones salen por defecto y tienes la posibilidad de editarlo luego de manera visual.

Le damos al icono carpeta para buscar la imagen, mostrará las miniaturas de las imágenes que ya están arriba, en tu alojamiento. La selecciona y automáticamente te la escribirá en el campo URL.
Si no la tienes previamente subida, al darle al icono de la carpeta y ver todas las imágenes ya subidas, tendrás que hacer clic en el icono de subir/añadir archivo y se mostrará la siguiente ventana:

Subir archivo

Arrastra tu archivo hasta esta ventana y pulsa luego el botón regresar a la lista, volverás a la pantalla de las imágenes en miniatura, la seleccionas y PrestaShop anota automáticamente la ruta, le das a Ok y listo, verás la foto en tu contenido.

Si quieres editar el tamaño de la imagen, solo tendrás que hacer clic con el ratón en alguno de los selectores o cuadraditos de la imagen y mantener pulsado mientras arrastras para que se haga más pequeño o más grande.

EditarTamaño

Si quieres alinear la imagen seleccionala con un clic de ratón sobre ella y luego utiliza los mismos botones que para alinear el texto:Alinear Imagen

Ten presente que siempre toma de referencia el lugar dónde inicialmente pusiste el ratón para poner la imagen.

En cualquier caso que haya que editar en modo avanzado se puede ver el código desde el mismo gestor y hacer las correcciones necesarias, pero esto ya es para usurarios avanzados, pues si se edita lo que no hay que editar, puede inutilizar el contenido e incluso dañar la imagen de la web o su funcionalidad.

Una vez que hemos terminado el contenido, nos quedan opciones por ver de:

Pasos para crear contenido

4 – Si tenemos una web multilingüe, escogemos el idioma en el que vamos a poner el contenido.

5 – Si queremos que los motores de búsqueda revisen y anoten éste contenido, lo pondremos en sí. Si no lo dejamos como está.

6 – Lo pondremos en SÍ, para que el contenido quede publicado.

7 – Guardar y previsualizar, no te sacará de la pantalla de edición pero guardará los cambios y te mostrará como queda el contenido. Y Guardar, guardará todo, te sacará de edición. Son botones independientes, puedes darle al que quieras, siempre quedará guardado el contenido.

Para finalizar siempre podrás volver a editar desde Preferencias > CMS y haciendo clic sobre el contenido.

Cualquier duda, ¡consultanos en los comentarios!

Solución a problemas de seguridad en PrestaShop con securitypatch

Recientemente PrestaShop ha anunciado unos problemas de seguridad que son importantes corregir. Para ello se requiere una actualización de seguridad de PrestaShop al menos a la última versión de la rama. Es decir, si tienes un PrestaShop 1.4 debes actualizarlo a la 1.4.11.1, si tienes un PrestaShop 1.5 a la 1.5.6.3. Las versiones 1.6 están todas corregidas desde la versión 1.6.0.14.

Hay otra opción muy simple que es instalar el módulo oficial de PrestaShop securitypatch

Podéis ampliar información en el blog de PrestaShop, en el artículo: Actualización de seguridad por PrestaShop

Cualquier duda por supuesto, puedes preguntar en los comentarios 🙂

PrestaShop 1.6 no muestra los atributos tras actualizar

Si has actualizado PrestaShop a PrestaShop 1.6 y no se muestran los atributos o combinaciones, puede ser por varios motivos. Te enseñamos a solucionar algunos casos.

Si además de no mostrarse los atributos, cuando vas a un producto que tiene atributos, se ven los atributos pero no los valores y al intentar crear un atributo nuevo te da el error «Unknown column ‘position’ in ‘field list«la solución pasa por crear el campo position en ps_attributeps_attribute_group. Puedes hacerlo desde phpmyadmin con:

-- Crear campo position en PrestaShop con MySql
ALTER TABLE `ps_attribute_group` ADD `position` TINYINT(3) NOT NULL DEFAULT '1' ;
ALTER TABLE `ps_attribute` ADD `position` TINYINT(3) NOT NULL DEFAULT '1' ;

Por otro lado, asegúrate que en classes/helper/HelperList.php la siguiente línea usa Tootls::getValue en lugar de getIsset:

//classes/helper/HelperList.php
$position_group_identifier = Tools::getIsset($this->position_group_identifier) ? Tools::getValue($this->position_group_identifier) : $this->position_group_identifier;

Dependiendo de tu versión, puede que ya lo tengas implementado, si no es necesario que lo cambies.

Por último, asegúrate que Configuration::get(‘PS_COMBINATION_FEATURE_ACTIVE‘) devuelve 1 o true. Para ello desde phpmyadmin nuevamente puedes lanzar:

-- Consultar tabla configuration en PrestaShop con MySql
SELECT * FROM `ps_configuration` where name = 'PS_COMBINATION_FEATURE_ACTIVE'

Related Posts by Zemanta, un plugin de posts relacionados en WordPress

zemanta

Hoy os voy a hablar de un plugin llamado Related Posts by Zemanta que me gusta mucho para activar posts relacionados, he probado muchísimos, pero me quedo con este. ¿Y por qué es bueno tener posts relacionados en tus artículos? Porque conseguirás que la experiencia de un usuario no acabe en la lectura del primer post. Colocando posts relacionados en la parte inferior del post, conseguirás que hagan clic en otro post y no salgan de tu blog tan rápido. Además de ser bueno para ti, también lo será para los usuarios ya que les ayudará a encontrar artículos que puedan ser de su interés. Además podrás contabilizar los clics de tus usuarios gracias a las estadísticas integradas:

Estadísticas Zemanta

También puedes personalizar el diseño, además de traer varios temas para elegir, también puedes hacer uso de CSS, sin abrir la hoja de estilos:

CSS

Tienes la posibilidad de cambiar el tamaño de las imágenes y de incluir solo las categorías que te interesen. Y por último, comentar también, que el diseño es responsive y se adaptará perfectamente a cualquier dispositivo móvil:

Responsive Zemanta

 

Cómo añadir CSS en nuestra web

estilos-cssEn nuestro artículo anterior hicimos referencia a qué son y para qué sirven los estilos CSS. Para poder hacer uso de ellos debemos empezar por incluirlos en nuestros archivos HTML. A continuación, veremos tres formas diferentes para incluir CSS en un documento HTML.

1- Incluir CSS en el mismo documento HTML

Esto se hace en el HEAD del documento, es decir, entre las etiquetas <head></head>. Este método se emplea cuando se define un número pequeño de estilos o cuando se quieren incluir estilos específicos en una determinada página HTML que completen los estilos que se incluyen por defecto en todas las páginas del sitio web.

El principal inconveniente es que si se quiere hacer una modificación en los estilos definidos, es necesario modificar una a una todas las páginas que incluyen el estilo que se va a modificar.

En nuestra página html quedarían incluidos así:

 

<!DOCTYPE html >
<html lang="es">
<head>

<title>Estilos CSS - Ejemplo</title>
<style type="text/css">
p { color:green; font-size: 13px }
</style>
</head>
<body>
<p>Un párrafo de Ejemplo.</p>
</body>
</html>

 

2- Inlcuir CSS en un archivo externo

En este caso, todos los estilos CSS se incluyen en un archivo de tipo CSS. El cual se enlaza al HTML mediante la etiqueta <link>. Un archivo de tipo CSS no es más que un archivo simple de texto cuya extensión es .css. Se pueden enlazar a las páginas HTML tantos archivos CSS como sean necesarios.

Si se quieren incluir los estilos del ejemplo anterior en un archivo CSS externo, se deben seguir los siguientes pasos:

  1. Crea un archivo de texto con el siguiente contenido: p { color:green; font-size: 13px }
  2. Guarda el archivo de texto con el nombre estilos.css.
  3. En el HTML debes enlazar el archivo CSS mediante la etiqueta <link>:


<!DOCTYPE html >
<html lang="es">
<head>
<title>Ejemplo de estilos CSS en un archivo externo</title>
<link rel="stylesheet" type="text/css" href="/css/estilos.css" media="screen" />
</head>

<body>
<p>Un párrafo de Ejemplo.</p>
</body>
</html>

Cuando el navegador carga la página HTML, antes de mostrar sus contenidos también descarga los archivos CSS externos enlazados mediante la etiqueta <link> y aplica los estilos a los contenidos de la página.

Normalmente, la etiqueta <link> incluye cuatro atributos cuando enlaza un archivo CSS:

rel: indica el tipo de relación que existe entre el recurso enlazado (en este caso el archivo CSS) y la página HTML. Para los archivos CSS, siempre se utiliza el valor stylesheet.

type: indica el tipo de recurso enlazado. Sus valores están estandarizados y para los archivos CSS su valor siempre es text/css.

href: indica la URL del archivo CSS que contiene los estilos. La URL indicada puede ser relativa o absoluta y puede apuntar a un recurso interno o externo al sitio web.

media: indica el medio en el que se van a aplicar los estilos del archivo CSS.  En este caso es solo para «screen». Pero también se pueden enlazar estilos especificos para imprimir utilizando «print».

Este es el modo más correcto y utilizado de añadir estilos CSS.

El principal motivo es que se puede incluir un mismo archivo CSS en multitud de páginas HTML, por lo que nos permite tener  los mismos estilos en todas las páginas que forman un sitio web.

Este método simplifica el mantenimiento de un sitio al máximo, ya que un solo cambio en un solo archivo CSS permite modificar de forma rápida y sencilla los estilos de todas las páginas HTML que enlazan ese archivo.

Aunque generalmente se emplea la etiqueta <link> para enlazar los archivos CSS externos, también se puede utilizar la etiqueta <style>. La forma alternativa de incluir un archivo CSS externo se muestra a continuación:

<!DOCTYPE html >
<html lang="es">
<head>
<title>Ejemplo de estilos CSS en un archivo externo</title>
<style type="text/css" media="screen">
@import '/css/estilos.css';
</style>
</head>

<body>
<p>Un párrafo de Ejemplo.</p>
</body>
</html>

En este caso, para incluir en la página HTML los estilos definidos en archivos CSS externos se utiliza una regla especial de tipo @import. Las reglas de tipo @import siempre preceden a cualquier otra regla CSS (con la única excepción de la regla @charset).

La URL del archivo CSS externo se indica mediante una cadena de texto encerrada con comillas simples o dobles o mediante la palabra reservada url(). De esta forma, las diferentes formas de incluir la hoja de estilos del ejemplo anterior serían así:


@import '/css/estilos.css';
@import "/css/estilos.css";
@import url('/css/estilos.css');
@import url("/css/estilos.css");

3- Incluir CSS en los elementos HTML

La tercer forma de incluir estilos CSS en documentos HTML es hacer sobre las etiquetas de html.

Ejemplo:

<!DOCTYPE html >
<html lang="es">
<head>
<title>Ejemplo de estilos CSS en un archivo externo</title>
</head>

<body>
<p style="color:green; font-size: 13px">Un párrafo de Ejemplo.</p>
</body>
</html>

Esta forma de incluir CSS directamente en los elementos HTML solamente se utiliza en determinadas situaciones en las que se debe incluir un estilo muy específico para un solo elemento concreto o en los html que se usan en plantillas de e-mails. Resulta un método muy dificultoso para realizar modificaciones en un futuro, ya que se deberían hacer una a una por etiqueta.

Hemos mencionado la técnica que nos parece mejor (caso 2), pero no hay que dejar de lado las demás, ya que cada caso puede ser particular y conocer todas las opciones con las que contamos nos permitirá saber cual se adapta mejor para cada situación. Nosotros utilizamos las tres de forma combinada para obtener el mayor provecho según sea necesario.

Si quieres puedes compartir con nosotros tus experiencias con cada método!

Saludos!