Tutoriales - Diseñador web freelance: Javi Niguez / Wordpress y Prestashop

Cómo editar plantillas de correo electrónico en Prestashop 1.7

Editar plantillas de correo electrónico en Prestashop ¿Quieres enviar correos electrónicos de marca? Primero, necesitas preparar el contenido adecuado y plantillas llamativas. Los diseños predeterminados no impresionarán ni animarán a sus clientes a visitar su sitio web. Lee este artículo para averiguar cómo editar plantillas de correo electrónico en PrestaShop 1.7.Existen plantillas de correo electrónico predeterminadas en PrestaShop.

¿Cuándo reciben tus clientes estos correos electrónicos?

Creando una cuenta en el sitio web.
Suscribirse a un boletín de noticias.
Realizando una compra.
Con una confirmación de pago
Recibiendo una confirmación de envío y en algunos otros casos.

Siempre tienes plantillas preparadas, pero si quieres que estos correos electrónicos se vean más únicos, que entreguen más información a un cliente y que se ajusten mejor al aspecto general de tu tienda, sólo tienes que modificarlos. Por lo tanto, consideremos en detalle cómo cambiar las plantillas de los correos electrónicos en PrestaShop 1.7.

Editar plantillas de correo electrónico en Prestashop 1.7

La mejor manera de hacerlo es usando el panel de administración. Necesitas iniciar sesión y proceder a la sección Mejorar a:

Internacional => Traducciones

Aquí verás el bloque de Modificar Traducciones. Para editar las plantillas de correo electrónico, selecciona las siguientes posiciones en los menús desplegables:

El tipo de traducción: Traducciones de correo electrónico
Selecciona el tipo de contenido del correo electrónico: Cuerpo (en caso de que quieras editar el asunto del correo electrónico sólo tienes que elegir el asunto)
El tema: Núcleo (no hay tema seleccionado)
Tu idioma: Elige el idioma requerido (en nuestro caso es el español).

Y luego haz clic en el botón Modificar.

Aquí encontrarás las plantillas de los correos electrónicos. Echemos un vistazo a cómo puedes editar, por ejemplo, el correo electrónico de registro. Haz clic en E-mails del núcleo y selecciona la plantilla de la cuenta.

La pestaña Ver versión HTML muestra cómo el destinatario del correo electrónico verá el mensaje.

Puedes hacer cambios en la plantilla de correo electrónico en la pestaña Editar versión HTML. Aquí puedes cambiar la estructura de la plantilla de correo electrónico y su contenido usando el editor WYSIWYG. Ten cuidado cuando edites la plantilla usando el editor, ya que puedes eliminar accidentalmente el diseño necesario. Si estás familiarizado con el HTML, te recomendamos desactivar el editor WYSIWYG y trabajar directamente con el código de la plantilla. Puede hacerlo haciendo clic en el icono del código fuente – «<>» (ver la imagen de abajo).

También puedes editar sólo el contenido del correo electrónico sin riesgo alguno para cambiar el diseño de la plantilla del correo electrónico. Para ello, ve a la pestaña Ver/Editar versión TXT.

No olvides guardar todos los cambios y probar el correo electrónico para asegurarte de que todo se ha realizado correctamente. De la misma manera, puedes editar fácilmente cualquier otra plantilla de correo electrónico de esta lista.

Conclusión editar plantillas de correo electrónico en Prestashop 1.7

Como ves, es muy fácil modificar las plantillas de correo de prestashop 1.7, ahora intenta darle una imagen más profesional y unos textos que llamen la atención de tus clientes 🙂 Si te ha gustado este artículo, te recomiendo leer Slider de ancho completo en Prestashop 1.7.

Cómo crear un slider de ancho completo en Prestashop 1.7

Slider de ancho completo en Prestashop 1.7. Todo el mundo sabe que en la plantilla de Prestashop 1.7 la parte de contenido tiene un ancho fijo, es por eso que el slider de la página principal también tiene un ancho fijo. A nadie le gustan las limitaciones, por eso vamos a hacer que el slider tenga un ancho completo. De hecho, hay algunas maneras de resolver este problema, pero me gustaría considerar las más interesantes.

Formas para crear un slider de ancho completo en Prestashop 1.7

1. Crear un hook personalizado

Es necesario crear un hook fuera del contenedor (es decir, el bloque con .container) y sacar el slider en él. La manera mas normal para crear tus propios hooks personalizados lo puedes leer en el artículo sobre Hooks personalizados en Prestashop 1.7 de Victor Ródenas. Así que primero, creamos un hook personalizado (por ejemplo, displayHomeFullWidthSlider) y colocamos la salida del módulo en el hook.

A continuación, abre el archivo de la plantilla «themes/classic/templates/layouts/layout-both-columns.tpl» y busca el bloque <div class=»container»>. Antes de este bloque ponemos el código de salida del hook {hook h=»displayHomeFullWidthSlider»}. De esta manera se considera que es la más flexible y adecuada.

2. Crear ancho completo mediante css

Esta forma es adecuada para aquellos a los que no les gusta crear ganchos personalizados. Se basa en estilos CSS. Tenemos que hacer lo siguiente en la página de inicio en la parte de contenido (excepto el slider): hacer el mismo ancho que tiene el bloque con .container mientras que el bloque con .container debe ser 100% ancho. Así que necesitamos abrir el archivo de estilos (por ejemplo, «themes/classic/assets/css/theme.css») y añadir el siguiente código:

body.page-index #wrapper .container {
max-width: 100%;
width: 100%;
padding-left: 0;
padding-right: 0;
}
body.page-index #wrapper .featured-products,
body.page-index #wrapper .banner,
body.page-index #wrapper #custom-text{
margin-left: auto;
margin-right: auto;
padding-left: 15px;
padding-right: 15px;
}
@media (min-width: 992px) {
body.page-index #wrapper .featured-products,
body.page-index #wrapper .banner,
body.page-index #wrapper #custom-text{
max-width: 940px;
}
}
@media (min-width: 1200px) {
body.page-index #wrapper .featured-products,
body.page-index #wrapper .banner,
body.page-index #wrapper #custom-text{
max-width: 1140px;
}
}
@media (max-width: 991px) {
body.page-index #wrapper .featured-products,
body.page-index #wrapper .banner,
body.page-index #wrapper #custom-text{
max-width: 100%;
}
}

Cabe mencionar que si aparecen nuevos módulos en la página de inicio en la parte de contenido, deben ser aplicados con los estilos descritos anteriormente para que queden centrados como el resto de módulos. Además, ambas formas implican que ha aparecido un desplazamiento horizontal que puede ser eliminado si añade el siguiente código en el archivo de estilos:

.carousel-control .icon-prev {
margin-left: 0;
}
.carousel-control .icon-next {
margin-right: 0;
}

Como resultado, obtenemos un slider de ancho completo así:

Si te ha gustado este artículo puedes leer como Instalar Prestashop 1.7 Manualmente En Local y aprender a instalar Prestashop para poder empezar a crear tu tienda online 🙂

instalar prestashop 1.7 manualmente en local

Cómo instalar PrestaShop 1.7 manualmente

Instalar prestashop 1.7 manualmente. En este tutorial nos vamos a centrar en instalar Prestashop 1.7 de forma manual en tu ordenador de forma local, así antes de subir tu tienda a tu hosting podrás realizar todas las pruebas que necesites, y dejar tu tienda totalmente preparada para comenzar a vender.

No te voy hacer esperar más, comencemos con la instalación de prestashop 1.7 manualmente.

1: Instalación de servidor Apache y un entorno MySQL con soporte PHP

Primero, para que Prestashop funcione, necesitas un servidor Apache y un entorno MySQL con soporte PHP. Por lo tanto, la opción que te recomiendo instalar para habilitarlas en una máquina tanto Windows como Mac OS es XAMPP.

Te recomiendo leer este articulo para poder hacer este paso: Cómo instalar XAMPP en Windows.

2: Comprueba los requisitos del sistema para PrestaShop 1.7

Segundo, antes de comenzar la instalación, asegúrate de que tu servidor cumple con las siguientes configuraciones de servidor:

· Sistema: Unix, Linux o Windows.
· Servidor web: Apache Web Server 2.2 o cualquier versión posterior.
· PHP: (captura de abajo)

· MySQL: 5.0 mínimo, se recomienda 5.6 o posterior.
· RAM: No hay requisitos específicos, pero cuanta más memoria tenga, mejor. Se recomienda establecer la asignación de memoria por script (memory_limit) en un mínimo de 256M.

PrestaShop también es compatible con el servidor Web IIS 6.0 o posterior de Microsoft, y nginx 1.0 o posterior.

3: Descarga para instalar prestashop 1.7 manualmente

A continuación, puedes desde el siguiente enlace descargar prestashop, principal, descarga la última versión estable que haya en el momento.

4: Extrae los archivos del archivo comprimido descargado

5: Instalación en el servidor (instalar prestashop 1.7 manualmente)

Mueve los archivos al directorio “htdocs” en la carpeta que hayas creado, y sige el nombre del dominio; “localhost/nombre-de-carpeta” PrestaShop realizará el resto:

6: Selecciona el idioma de instalación

Esta es la pantalla de inicio de la instalación de prestashop, sellecciona el idioma para comenzar el proceso de instalación de prestashop en local.

7: Acepta las condiciones de instalación

En esta pantalla haz clic en «acepto los términos y condiciones arriba indicados«.

8: Revisa las extensiones PHP necesarias en tu servidor

9: Rellena la información de tu tienda

10: Configura tu base de datos

Puedes crear una nueva base de datos o utilizar la principal, Usuario y contraseña root y sobre todo, no te olvides de añadir el servidor localhost.

11: Instalación de Prestashop 1.7

Una vez hayas hecho clic en el botón siguiente, verás como empieza la instalación de Prestashop 1.7 en tu hosting local.

12: Instalación finalizada de Prestashop 1.7

Si todo te ha ido bien ya tendrás instalado prestashop 1.7 en tu hosting local, recuerda borrar la carpeta Install, y ya podrás acceder a la administración de tu tienda online.

Si te ha gustado este artículo, te recomiendo leer Cómo instalar XAMPP en Windows 10, así podrás instalar prestashop 1.7 o wordpress en tu ordenador Windows

Cómo instalar XAMPP en Windows 10

Cómo instalar XAMMP en Windows 10 de forma fácil

Instalar XAMPP en Windows 10. Siempre es una buena práctica probar tu página web o tienda online en un servidor local antes de publicarla en el servidor real. Y para crear un entorno de servidor local en tu ordenador Windows, puedes usar XAMPP.

XAMPP es una solución completamente gratuita y de código abierto que te ofrece un increíble servidor web local en el que trabajar. La instalación de XAMPP te libera de aprender y recordar comandos para ejecutar Apache, MySQL, etc. Simplemente le proporciona un panel de control para gestionar todos los componentes incluidos.

Una vez que tengas XAMPP instalado en tu PC puedes instalar cualquier CMS, incluyendo WordPress, Prestashop, Magento… en tu PC local.

Así que, sin más, comencemos con la guía paso a paso de cómo instalar XAMPP en Windows 10. Y estoy seguro de que al final de este post, tendrás tu propio entorno local de pruebas en Windows 10.

Paso 1: Descargar e instalar XAMPP

Para descargar e instalar XAMPP, vaya a la página de descargas de apachefriends (enlace oficial para descargar XAMPP). Verás XAMPP listo para descargar en plataformas como Windows, Linux, Mac OS X. Ya que estamos discutiendo Cómo instalar XAMPP en Windows 10, por lo tanto, elegiremos la opción Windows como se muestra a continuación.

Paso 2: Ejecutar el instalador para instalar XAMPP

1. Asistente para instalar XAMPP en Windows 10

Durante el proceso de instalación, es posible que aparezcan ventanas emergentes de advertencia. Pero es posible hacer clic en ‘Sí’ para iniciar el proceso de instalación. Poco después de hacer clic en el archivo descargado, se abrirá el asistente de instalación de XAMPP. Ahora haz clic en el botón «Siguiente» para continuar.

2. Selecciona los componentes

A continuación, debes comprobar los componentes que deseas instalar y puedes desmarcarlos o dejarlos como están. Puedse ver que hay algunas opciones que son de color gris claro. Estas son las opciones necesarias para ejecutar el software y se instalarán automáticamente. Ahora haz clic en el botón «Siguiente» para continuar.

3. Selecciona la carpeta de instalación

Ahora debes elegir la carpeta donde quieres instalar el XAMPP. Puedes elegir la ubicación por defecto o puedes elegir cualquier ubicación de tu elección y hacer clic en el botón «Siguiente» para seguir con el proceso.

4. Bitnami para XAMPP

Ahora verás una ventana que te mostrará información sobre Bitnami. Simplemente haz clic en el botón «Siguiente» para seguir adelante. Sin embargo, si deseas saber más sobre el Bitnami, puedes marcar la casilla que dice: ‘Aprende más sobre Bitnami para XAMPP’.

Básicamente Bitnami es para instalar aplicaciones de código abierto como WordPress, Joomla, etc. en tu XAMPP recién instalado.

5. Listo para instalar XAMPP en Windows 10

Ahora verás otra ventana con el mensaje «La instalación está lista para comenzar a instalar XAMPP en tu ordenador» como se muestra a continuación. Sólo tiene que pulsar el botón «Siguiente» para continuar.

6. Bienvenido a XAMPP

Ahora sólo hay que tener paciencia y esperar a que se complete la instalación.

7. Instalación Completa

Una vez finalizada la instalación, se te preguntará si deseas iniciar el panel de control ahora o no, mostrando el mensaje «¿Desea iniciar el panel de control ahora? Marca la casilla y haz clic en el botón «Finalizar» para ver si XAMPP funciona correctamente.

Paso 3: Selecciona el idioma de instalación de XAMPP

Tan pronto como hayas hecho clic en el botón Finalizar en el último paso del proceso de instalación de XAMPP, se te pedirá que selecciones el idioma preferido entre inglés y alemán. Depende de ti el idioma que elijas. A continuación, haz clic en el botón «Guardar» para confirmar el idioma seleccionado. A partir de ahora, estoy eligiendo el idioma inglés.

Paso 4: XAMPP está ahora instalado, ejecútalo.

Si todo el proceso de instalación de XAMPP ha sido correcto, el panel de control se abrirá sin problemas. Ahora haz clic en el botón ‘Start’ correspondiente a Apache y MySQL.

Eso es todo. Has instalado XAMPP correctamente en Windows 10. O digamos que has instalado con éxito XAMPP localmente. Una vez que inicies los módulos, verás que el estado es verde. Mientras que, a la derecha, puede ver el número de ID de proceso y los números de puerto que cada módulo está utilizando.

Conclusiones de instalar XAMPP en Windows 10

Ahora ya sabes lo fácil que es instalar XAMPP para probar e instalar tu sitio WordPress o Prestashop localmente antes de ir al servidor en producción. Sin duda, la mayor ventaja de instalar XAMPP es que no tienes que preocuparte por el número de intentos que haces o el tipo de experimentos que realizas en tu sitio. Puedes probar lo que quieras libremente sin la tensión de perder a tus usuarios. Sin embargo, si encuentras algún error al instalar XAMPP en tu máquina Windows, házmelo saber en los comentarios de abajo. Haré todo lo posible para ayudarte a resolver los errores.