Cargando

Ir a contenido

X

 


Maintenance CSS en el Prestashop

Vamos en este tutorial a explicar y trabajar un poco con el CSS correspondiente al mantenimiento de nuestra tienda, que aunque no llevará un gran protagonismo no podemos descuidarla.


Escrito por el feb 02 2014 05:26


La página de mantenimiento de un site es un aspecto muy importante, ya que existen momentos en los cuales por diversos motivos (problemas de proveedor, actualización de código fuente, entrada en vigencia de nuevas regulaciones comerciales) en los cuales debemos suspender momentáneamente nuestra página, sin embargo lo que el usuario y potencial cliente vean deben reflejar toda la profesionalidad de quien está detrás.

maintenance.css

Al momento de entrar en el modo mantenimiento en nuestra tienda en línea Prestashop, nuestros usuarios verán lo siguiente si estamos utilizando el tema por defecto:

prestashop_cssmant.jpg


Esto dista mucho de ser algo personalizado, sin embargo gracias al archivo maintenance.css podemos modificarlo y personalizarlo, para que cumpla con nuestra imagen.

Veamos el contenido de dicho archivo:

*, body{margin:0;padding:0}
body
{
font-family:90%/1em 'Lucida Grande', Verdana, sans-serif
}
#maintenance
{
width:450px;
margin:35px auto 0 auto;
padding:12px 0;
background:#fff;
text-align:center;
text-transform:none;
font-weight:normal;
letter-spacing:0;
color: #C73178
}
#message
{
width:450px;
margin-top:35px;
padding:12px 15px;
border-top:1px dotted #666;
border-bottom:1px dotted #666;
background:#F9E3EE;
text-align:justify;
font:90%/1em 'Lucida Grande', Verdana, sans-serif;
text-transform:none;
font-weight:normal;
letter-spacing:0;
color:#C73178
}
#message img
{
padding:30px
}


Al evaluar el código nos damos cuenta que tenemos 3 grandes selectores, los cuales son los que dan la estructura a nuestra página de mantenimiento, veamos ahora la siguiente imagen para poder ubicar visualmente cada selector:



prestashop_cssmant2.jpg


Notamos que el selector #maintenance es el contenedor general dentro del cual tenemos #message img que regula la imagen del mensaje y luego tenemos #message que es el texto con el mensaje que queremos mostrar.

maintenace.tpl

Los archivos CSS de Prestashop controlan archivos .tpl que son plantillas Smarty, el uso de plantillas mejora y facilita el trabajo, para ello debemos conocer la plantilla maintenance.tpl veamos el código que la comprende:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="{$lang_iso}"
lang="{$lang_iso}">
<head>
<title>{$meta_title|escape:'htmlall':'UTF-8'}</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-
8" />
{if isset($meta_description)}
<meta name="description"
content="{$meta_description|escape:'htmlall':'UTF-8'}" />
{/if}
{if isset($meta_keywords)}
<meta name="keywords"
content="{$meta_keywords|escape:'htmlall':'UTF-8'}" />
{/if}
<meta name="robots" content="{if
isset($nobots)}no{/if}index,follow" />
	 <link rel="shortcut icon" href="{$img_dir}favicon.ico" />
	 <link href="{$css_dir}maintenance.css" rel="stylesheet"
	 type="text/css" />
</head>
<body>
<div id="maintenance">
	 <p><img src="{$content_dir}img/logo.jpg" alt="logo" /><br /><br
	 /></p>
	 <p id="message">
	 <img src="{$content_dir}img/admin/tab-tools.gif"
	 style="margin-right:10px; float:left;" alt="" />{l s='In
	 order to perform site maintenance, our online shop has been
	 taken offline temporarily. We apologize for the
	 inconvenience, and ask that you please try again later !'}
	 </p>
	 <span style="clear:both;">&nbsp;</span>
</div>
</body>
</html>


Como vemos cada uno de los selectores del CSS está presente en este archivo por lo que cada cambio que hagamos tendrá su efecto en esta sección.

Por ejemplo en la sección del mensaje:

<p id="message">
<img src="{$content_dir}img/admin/tab-tools.gif" style="margin-
right:10px; float:left;" alt="" />{l s='In order to perform site
maintenance, our online shop has been taken offline temporarily.
We apologize for the inconvenience, and ask that you please try
again later !'}
</p>

Podemos cambiarla por lo siguiente:

<p id="message">
<img src="{$content_dir}img/admin/tab-tools.gif" style="margin-
right:10px; float:left;" alt="" />{l s='This site is under
maintenance. Please contact the following
ABC Store Online Limited
33 W. 111 Street, New York, NY 10001,
USA
Phone: (212) 210-2100 '}
</p>

Luego podemos modificar el CSS con lo siguiente:

#maintenance
{
width:750px;
margin:35px auto 0 auto;
padding:12px 0;
background:#fefefe;
text-align:center;
text-transform:none;
font-weight:bold;
letter-spacing:0;
color: #3FCA66
}

#message
{
width:450px;
margin-top:35px;
padding:12px 15px;
border-top:1px dotted #666;
border-bottom:1px dotted #666;
background:#2EE6F3;
text-align:justify;
font:90%/1em 'Lucida Grande', Verdana, sans-serif;
text-transform:none;
font-weight:normal;
letter-spacing:0;
color:#000
}

#message img
{
padding:10px
}


Con estos pequeños cambios que resaltamos en negritas, sumado al cambio hecho en la plantilla .tpl, podemos lograr algo similar a la siguiente imagen:



prestashop_cssmant3.jpg


Como vemos esta poderosa herramienta unida a nuestra creatividad nos ayuda a conseguir resultados bastante interesantes.

Con esto finalizamos el tutorial y con esto obteniendo el conocimiento de cómo modificar nuestra página en mantenimiento y con lo cual nuestros clientes sabrán que cuando no estemos al aire, igual nuestra calidad será la misma.
¿Te ha gustado y ayudado este Tutorial?
Puedes premiar al autor pulsando este botón para darle un punto positivo
  • -
  • 0

Tutoriales Relacionados


Sin comentarios, sé el primero!

No esperes más y entra en Solvetic
Deja tus comentarios y aprovecha las ventajas de la cuenta de usuario ¡Únete!
10
VOTA
5
100%
4
0%
3
0%
2
0%
1
0%

  Información

  •   Publicado feb 02 2014 05:26
  •   Actualizado feb 03 2014 01:14
  •   Visitas 1.8K
  •   Nivel
    Avanzado