Novedades Tiendas Online: div reemplaza tablas HTML

Los productos e-Commerce de arsys.es mejoran día a día para adaptarse a tus necesidades. Por eso, desde el 25 de mayo de2011, las nuevas Tiendas Online incluyen una novedad a tener en cuenta: los elementos DIVs para estructurar una página. Esta novedad no solo permite mejorar el rendimiento y la estructura de tu Tienda Online, sino también su visualización en los Smartphones.

Si has diseñado tu Tienda utilizando el editor estándar de tu interfaz de administración, no notarás ningún cambio. Pero si has utilizado código CSS propio, existe una posibilidad de que haya un impacto en la ejecución de dicho código en la nueva versión.

Hasta ahora, las Tiendas Online utilizaban elementos de tabla HTML para diseñar tu site.

Por ejemplo, para  la barra de menú alineada a la derecha, escribíamos tdNavbarRight (elemento de barra de navegación alineado a la derecha) y para una barra alineada a la izquierda indicábamos tdNavbarLeft.

Pero desde ahora, las Tiendas Online han eliminado los siguientes elementos:

  • table.Middle
  • td.NavbarLeft
  • td.NavbarRight
  • td.ContentArea

y  han sido reemplazados por

  • div.Middle o .Middle
  • div.NavbarLeft o .NavBarLeft
  • div.NavbarRight o .NavBarRight
  • div.ContentArea o .ContentArea

Consecuencias sobre el diseño de tu Tienda Online

Si has creado tu diseño gráfico con las herramientas estándares de la interfaz de administración de tu Tienda, no hay de qué preocuparse. Su diseño será igual antes. Pero, si has adaptado tu diseño utilizando código propio CSS, tendrás que revisar el código después de la actualización.

Por ejemplo, aquí tienes código CSS que puede ser utilizado para esconder la columna de la izquierda:

<style type="text/css">
  td.NavbarLeft {
    display: none;
  }
</style>

En las nuevas Tiendas Online, la escritura de este código cambiará porque la variable td.NavbarLeft habrá cambiado de nombre. Para estar seguro de que tus modificaciones aparezcan de nuevo, revisa el código y reemplaza el “viejo” nombre del elemento de tabla por el “nuevo” DIV. En el caso anterior, la nueva escritura sería

<style type="text/css">
  div.NavbarLeft, #NavBarLeftFix {
    display: none;
  }
</style>

Con estos cambios, tu Tienda Online recupera su diseño original

Caso Particular: Internet Explorer 7

En Internet Explorer 7, se han creado “copias” especiales para los 3 nuevos elementos DIVs:

  • #NavBarLeftFix
  • #NavBarRightFix
  • #ContentAreaFix

En el caso del elemento div.Middle, una copia especial no es necesaria en Internet Explorer 7.