Insertar Gif animado en Página Principal de Prestashop

7:57:00 a.m. Unknown 0 Comments

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

<img src="url_del_sitio/rutacarpetas/nombre.gif" >

Estructura HTML para llamar la imagen desde el almacenamiento Google Drive

<img src="https://drive.google.com/uc?export=view&id=AQUÍ_ALFANUMÉRICO_GOOGLE_DRIVE" >

Cambiar de imagen cuando se pasa el cursor sobre un producto Prestashop (Onmouseover)

2:02:00 p.m. Unknown 0 Comments

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

       <img class="replace-2x img-responsive" src="{$link->getImageLink($product.link_rewrite, $product.id_image, 'home_default')|escape:'html':'UTF-8'}" alt="{if !empty($product.legend)}{$product.legend|escape:'html':'UTF-8'}{else}{$product.name|escape:'html':'UTF-8'}{/if}" title="{if !empty($product.legend)}{$product.legend|escape:'html':'UTF-8'}{else}{$product.name|escape:'html':'UTF-8'}{/if}" {if isset($homeSize)} width="{$homeSize.width}" height="{$homeSize.height}"{/if} itemprop="image" />

<img class="replace-2x img-responsive" src="{$link->getImageLink($product.link_rewrite, $product.id_image, 'home_default')|escape:'html':'UTF-8'}" onmouseover="this.src='{$link->getImageLink2($product.link_rewrite, $product.id_image , 'home_default')}';" onmouseout="this.src='{$link->getImageLink($product.link_rewrite, $product.id_image, 'home_default')}';" alt="{if !empty($product.legend)}{$product.legend|escape:'html':'UTF-8'}{else}{$product.name|escape:'html':'UTF-8'}{/if}" title="{if !empty($product.legend)}{$product.legend|escape:'html':'UTF-8'}{else}{$product.name|escape:'html':'UTF-8'}{/if}" {if isset($homeSize)} width="{$homeSize.width}" height="{$homeSize.height}"{/if} itemprop="image" />

Centrar menú Horizontal superior (Top Menu) de Prestashop

9:47:00 a.m. Unknown 0 Comments

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.

Centrar Logo de una tienda Prestashop

9:47:00 a.m. Unknown 0 Comments

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.

#header_logo{
     width:100%!important;
}

#header_logo img{
     margin:auto;
}

#header_logo + div{
     position:absolute;
     right:0;
}

@media (max-width: 767px) {
     #header_logo + div{
          position:static;
     }    
}

En el siguiente video puedes ver el paso a paso de esta implementación. Se utilizo un cliente ftp y filezilla para modificar el archivo global.css.

Instalar Prestashop en Servidor Local usando XAMPP

8:52:00 a.m. Unknown 0 Comments