Hola amigos, en esta ocasión explicaré como implementar la herramienta Fancybox, para visualizar las imágenes de una manera más elegante en las paginas cms de una tienda Prestashop.
Con este tutorial básicamente lograremos visualizar las imágenes de las paginas cms tal como se pueden ver las imágenes en las paginas de producto de nuestra tienda, algo como lo que se muestra en la siguiente imagen.
Es posible que ya lo hayan probado, sucede que cuando agrego una imagen con su respectivo link a una pagina cms, si doy clic a esta, me mostrara la imagen original en una pestaña nueva o en su defecto en la misma, sacándome de la tienda. Logrando nuestro cometido podremos obtener galerías de imágenes con la opción de pasar todas como si fuera un "slider".
Los cambios que debemos hacer son pocos, primero ubicaremos el archivo global.js, este se encuentra ubicado en la carpeta js que a su vez esta ubicada en carpeta de la plantilla que estés utilizando.
Ruta de ejemplo con plantilla por defecto: themes/default-bootstrap/js/global.js
Teniendo el archivo global.js abierto ubicaremos la siguiente línea: $(document).ready(function(){
Justo dentro de esta función copiaremos y pegaremos el siguiente código
Teniendo esto listo nos dirigimos, desde el backoffice, a la página cms donde queremos insertar las imágenes, en vista código fuente y utilizamos una estructura como esta para hacer el llamado de las imágenes.
O bien si ya tienes imágenes insertadas con su link respectivo agrégale la clase fancybox class="fancybox" y con esto bastará.
A continuación dejo el código para crear una galería de 3x3, te invito a que lo mejores y le des tu toque. También puedes ver este mismo tutorial en video para que lo entiendas mejor, lo dejo al final.
<div class="section">
<div class="container">
<div class="row">
<div class="col-md-12"><!-- Títutlo de la Galeria -->
<h1 class="text-center">Gallery</h1>
</div>
</div>
<!-- Fila 1 de 3 imagenes -->
<div class="row"><!-- <div class="col-md-4"><a href="URL_DE_LA_IMAGEN" class="fancybox" title="TÍTULO QUE SE DESEE DAR A AL IMAGEN (NO OBLIGATORIO)"> <img class="URL_DE_LA_IMAGEN_LA_MISMA" style="width: 290px; height: 218px; margin-left: auto; margin-right: auto; " /></a></div>
-->
<div class="col-md-4"><a href="https://img-cdn.prestashop.com/logo.png" class="fancybox" title="Camiseta efecto desteñido de manga corta"> <img class="img-responsive" src="https://img-cdn.prestashop.com/logo.png" style="width: 290px; height: 218px; margin-left: auto; margin-right: auto;" alt="logo.png" /></a></div>
<div class="col-md-4"><a href="https://img-cdn.prestashop.com/logo.png" class="fancybox" title="Camiseta efecto desteñido de manga corta"> <img class="img-responsive" src="https://img-cdn.prestashop.com/logo.png" style="width: 290px; height: 218px; margin-left: auto; margin-right: auto;" alt="logo.png" /></a></div>
<div class="col-md-4"><a href="https://img-cdn.prestashop.com/logo.png" class="fancybox" title="Camiseta efecto desteñido de manga corta"> <img class="img-responsive" src="https://img-cdn.prestashop.com/logo.png" style="width: 290px; height: 218px; margin-left: auto; margin-right: auto;" alt="logo.png" /></a></div>
</div>
<!-- Fila 2 de 3 imagenes -->
<div class="row">
<div class="col-md-4"><a href="https://img-cdn.prestashop.com/logo.png" class="fancybox" title="Camiseta efecto desteñido de manga corta"> <img class="img-responsive" src="https://img-cdn.prestashop.com/logo.png" style="width: 290px; height: 218px; margin-left: auto; margin-right: auto;" alt="logo.png" /></a></div>
<div class="col-md-4"><a href="https://img-cdn.prestashop.com/logo.png" class="fancybox" title="Camiseta efecto desteñido de manga corta"> <img class="img-responsive" src="https://img-cdn.prestashop.com/logo.png" style="width: 290px; height: 218px; margin-left: auto; margin-right: auto;" alt="logo.png" /></a></div>
<div class="col-md-4"><a href="https://img-cdn.prestashop.com/logo.png" class="fancybox" title="Camiseta efecto desteñido de manga corta"> <img class="img-responsive" src="https://img-cdn.prestashop.com/logo.png" style="width: 290px; height: 218px; margin-left: auto; margin-right: auto;" alt="logo.png" /></a></div>
</div>
<!-- Fila 3 de 3 imagenes -->
<div class="row">
<div class="col-md-4"><a href="https://img-cdn.prestashop.com/logo.png" class="fancybox" title="Camiseta efecto desteñido de manga corta"> <img class="img-responsive" src="https://img-cdn.prestashop.com/logo.png" style="width: 290px; height: 218px; margin-left: auto; margin-right: auto;" alt="logo.png" /></a></div>
<div class="col-md-4"><a href="https://img-cdn.prestashop.com/logo.png" class="fancybox" title="Camiseta efecto desteñido de manga corta"> <img class="img-responsive" src="https://img-cdn.prestashop.com/logo.png" style="width: 290px; height: 218px; margin-left: auto; margin-right: auto;" alt="logo.png" /></a></div>
<div class="col-md-4"><a href="https://img-cdn.prestashop.com/logo.png" class="fancybox" title="Camiseta efecto desteñido de manga corta"> <img class="img-responsive" src="https://img-cdn.prestashop.com/logo.png" style="width: 290px; height: 218px; margin-left: auto; margin-right: auto;" alt="logo.png" /></a></div>
</div>
<div class="section">
<div class="container">
<div class="row">
<div class="col-md-12"><hr /></div>
Hola Amigos, en este artículo explicaremos como cambiar la plantilla básica con la cual viene Blogger cuando abrimos uno. La idea entonces es cambiar esta por una con un diseño más robusto y profesional.
Lo primero que haremos será buscar una plantilla al gusto y que se adapte al tema de nuestro blog. Existen muchos sitios donde se pueden descargar estas plantillas de forma gratuita, en este caso recomendaremos Gooyaabi Templates, puedes ingresar a este sitio dando clic en el enlace.
Estando en este sitio puedes ingresar a free blogger templates, allí selecciona la plantilla que mas te guste, puedes mirar una demostración de esta y luego descargarla.
Cuando completes la descarga, obtendrás un archivo comprimido, dentro de este encontrarás varios ficheros, de los cuales nos importará solo uno, el que tenga la extensión XML.
Nos dirigimos entonces a la cuenta Blogger que deseamos personalizar, buscamos la opción "Plantilla".
Dentro de esta opción podemos observar dos recuadros, que corresponden a la vista de la plantilla actual en versión escritorio y móvil.
En la parte superior derecha podemos encontrar un botón llamado " Crear copia de seguridad / Reestablecer" damos clic a este.
Como bien nos dice este botón podemos hacer una copia de seguridad de la plantilla actual o ir haciendo copias cada vez que se hagan cambios de código en la nueva plantilla, esto se logra dando clic en el botón "Descargar Plantilla".
Para cargar la nueva plantilla damos clic en el botón "seleccionar archivos", buscamos el fichero con extensión .xml, que corresponde a la plantilla que bajamos, finalizamos con el botón "Subir".
Después de que se complete la carga, podrás observar en los dos recuadros que mencionamos anteriormente la vista previa en versión escritorio y móvil, significando esto que fue un cambio exitoso.
Lo que queda de aquí en adelante es que acomodes todos los widgets que te permite usar blogger y termines de personalizar tu blog.
En el siguiente video podrás ver todo el proceso antes descrito.
¿Para que queremos digitalizar una firma? En el medio publicitario algunos de nuestros clientes en ocasiones nos lo piden para usarla como logo por ejemplo para marca personal, para un sello, para ponerla en piezas como afiches, plegables, vallas publicitarias, publicaciones en internet, también para firmar diplomas o cartas digitalmente, son muchas las aplicaciones que puede tener la firma digital.
Para digitalizar una firma existen muchos métodos, en esta ocasión explicaremos el método que usamos nosotros.
Sucede mucho que nuestros clientes envían su firma por WhatsApp o por correo electrónico, siendo esta una foto que tomaron con su celular o escanearon. Nuestra sugerencia es que soliciten que la firma sea hecha en un papel totalmente blanco, es decir que esté limpio, sin renglones y que no tenga mucha textura, esto nos será de gran utilidad para que el trabajo final sea de mejor calidad.
Necesitaremos dos programas de la Suite de Adobe que son Photoshop e Ilustrator. En Photoshop retocaremos lo mejor posible la imagen, la convertiremos a escala de grises y luego con ayuda de la herramienta Niveles eliminaremos por completo la textura del papel y le daremos fuerza a lo que está escrito con la tinta del bolígrafo. Una vez realizadas estas modificaciones en Photoshop pasamos a abrir nuestra firma modificada en lllustrator, donde finalmente esta dejará de ser una imagen y la convertiremos en un vector para que de esta manera la podamos usar en cualquier tipo de pieza gráfica, digital o impresa sin que se nos pixele, ademas le podremos cambiar el color siempre que lo necesitemos y realizar ajuste con nodos.
De esta forma nuestro cliente estará feliz con un trabajo relativamente sencillo pero de gran utilidad.
En el siguiente video podrás ver el paso a paso de este proceso, espero que te guste y nos dejes tus comentarios y dudas.
Si te gusta y te sirve este tutorial recuerda darnos like, comparte y suscribirte al canal de Youtube, constantemente subimos videos como este .
Con este video entenderás como insertar gifs animados en la pagina principal de Prestashop, usando el configurador de temas.
Puedes usar las carpetas de la tienda para guardar las imágenes o un almacenamiento externo como Google drive.
Estructura HTML para llamar la imagen desde el almacenamiento de la tienda
En este tutorial explicaremos como implementar el efecto Onmouseover en los productos listados de una tienda Prestashop. Después de realizar este cambio, podremos observar cómo cambia de imagen el producto cuando pasamos con el cursor sobre él.
Para empezar hay que tener en cuenta que debemos tener acceso total a los archivos de la tienda. Los archivos a modificar serán:
Link.php: ubicado en la carpeta classes.
product-list.tpl: ubicado en la carpeta de la plantilla a modificar
Es recomendable hacer una copia de estos archivos antes de modificarlos, con el fin de recuperar el funcionamiento de la tienda si se presenta algún error de código o si se desea volver a tener el funcionamiento original.
En el archivo Link.php se debe agregar una función que logre hallar la url de la segunda imagen asociada a cada producto, esta por orden se ubicará después de la funcion getImageLink que es la que encuentra la url de la imagen por defecto y la llamaremos getImageLink2. A continuación se presenta el código de la función.
public function getImageLink2($name, $ids, $type = null)
{
if(isset($ids))
{
$over_image = Db::getInstance()->getRow('SELECT id_image FROM '._DB_PREFIX_.'image WHERE id_product = '.(int)($ids).' AND position = 2');
if($over_image)
$id_image = array_shift($over_image);
else
return '0';
}
if ($this->allow == 1) {
$uri_path = __PS_BASE_URI__.($id_image).($type ? '-'.$type : '').$theme.'/'.$name.'.jpg';
} else {
$uri_path = _THEME_PROD_DIR_.Image::getImgFolderStatic($id_image).$id_image.($type ? '-'.$type : '').$theme.'.jpg';
}
return $this->protocol_content.Tools::getMediaServer($uri_path).$uri_path;
}
Para la modificación del archivo product-list.tpl, Se debe ubicar el div class="product-image-container" dentro encontraremos un fragmento de código como este
Con estos cambios basta para aplicar el efecto onmouseover sobre los productos, en el siguiente video te puede dar una guía mas gráfica de lo que se debe hacer el paso a paso.
Cuéntanos si este tutorial te sirvió y pregúntanos con toda confianza si necesitas ayuda.
Hola Amigos, en este ocación explicaremos como centrar el menú superior ( Top menú - Menú Horizontal - menú Principal) de una tienda Prestashop.
Este modificación la realizaremos a través de FTP por lo que es esencial tener un cliente activo y un gestor de archivos instalado, en este caso usaremos FILEZILLA el cual es un software libre y lo puedes descargar en este enlace https://filezilla-project.org/download.php?type=client
También es recomendable que desactives el cache de tu tienda y trabajes en una ventana incógnita para que no te veas afectado o afectada por el cache del navegador y de esta forma poder ver todas las modificaciones de forma inmediata para cuando refresques el front Office de tu tienda.
Para lograrlo dirígete al back office de tu tienda, ve a parámetros avanzados , luego a rendimiento y allí seleccionas recompilar las plantillas cuando los archivos sean modificados. En la sección CCC desactiva todo los campos que estén activados, para terminar esta parte guarda estos cambios.
Ahora si, nos dirigimos a los archivos de la tienda desde Filezilla, abrimos la carpeta Themes (plantillas) aquí seleccionamos la plantilla que deseemos modificar. Encontraremos una cartpeta llamada CSS y dentro de esta una llamada Modules, en esta carpeta encontraremos todos las hojas de estilos de los módulos instalados en la tienda y que están asociados a la plantilla que estemos modificando. Buscaremos entonces el modulo blocktopmenu, este es el módulo por defecto que trae prestashop para controlar el menú superior,dentro de esta carpeta encontraremos de nuevo otra carpeta llamada CSS, ingresamos a esta y allí abrimos el archivo superfish-modified.css, puede usar cualquier editor de código, incluso puedes usar un blog de notas, en nuestro caso recomendamos usar el Notepad ++, este es un excelente editor de código totalmente gratis. Pegaremos entonces las siguientes lineas de código, puede ser al principio del fichero.
ul.sf-menu {text-align:center;}
ul.sf-menu li {
float:none;
display:inline-block;}
Guardamos los cambios desde el editor en el que estemos, vamos al navegador y refrescamos el front office de la tienda y seguramente si seguiste bien todo los pasos descritos podrás ver el Menú superior centrado, recuerda muy bien que el cache tanto de la tienda como la del navegador puede hacer que no veamos estos cambios de forma inmediata, por lo que puedes vaciar el cache del navegador y también vaciar manualmente el de la tienda, para esto puedes ir de nuevo a parámetros avanzados>rendimiento desde el back office, encontraras un botón en la parte superior que se llama Vaciar Cache.
En el siguiente video puedes observar el paso a paso para la implementación de este fragmento de código, te puede ser de mucha ayuda. Recuerda que te puede suscribir a este canal de YouTube, constantemente subimos videos como este.
Si se desea centrar el logo de la tienda Prestashop por gusto y con el fin de personalizar un poco más esta, basta con aplicar una pequeña modificación en las hojas de estilo de la tienda, específicamente en el archivo global.css que se encuentra en la carpeta CSS de la plantilla que se esta usando. Teniendo este archivo abierto, se pega al final el siguiente fragmento de código.
Utilizar un servidor local es muy útil en los momentos en que se quiere realizar pruebas de funcionamiento o modificaciones sobre una plataforma web sin necesidad de subir esta a un hosting pago, por esta misma razón no se depende de una conexión a internet mientras estemos trabajando sobre este tipo de servidor, basta solo con tener instalado este en un equipo personal .
En este tutorial se explica como instalar Prestashop en un servidor local utilizando XAMMP uno de los muchos programas que sirven para convertir nuestro equipo en un servidor web de acceso local.
Antes de empezar descarga los programas necesarios, en los siguientes links puedes encontrarlos XAMMP PRESTASHOP
Sigue las indicaciones paso a paso del siguiente video para lograrlo.
