Documentación

TEMAS: ESTRUCTURA Y CONTENIDO

Índice

Los temas estándares (arquitectura antigua) Contenido de los paquetes de tema HTMLCSS Modificación de layouts

LOS TEMAS ESTÁNDARES (ARQUITECTURA ANTIGUA)

A continuación, se ofrece un ejemplo de las diferencias entre los temas estándares.

CONTENIDO DE LOS PAQUETES DE TEMA

Al descomprimir el paquete de tema estándar que se descargó, se verá la siguiente estructura:

Antes de publicar los archivos, observe lo siguiente:

HTML

El lenguaje de programación de Mercado Shops es VTL (Velocity). Este lenguaje permite la adición de variables en HTML. Esto hace que la tienda se mantenga dinámica; es decir, el layout es variable, conforme las configuraciones hechas en el panel administrador.

Con el código HTML personalizado cargado, Mercado Shops sustituirá las variables por el contenido insertado en el administrador, una tienda parecida a CMS.

Los archivos HTML que pueden ser editados son los siguientes:

Referencias: http://velocity.apache.org/enginedevel/vtl-reference-guide.htlm

VARIABLES

Las variables son bloques de códigos que construyen la tienda; es decir, para insertar el logo de la tienda es posible usar la variable “$hasLogo” en HTML.

Es posible también insertar una variable con una entidad (variable que contiene información), es decir, un atributo añadido a la variable. Por ejemplo, para “imprimir” la URL de la categoría de primer nivel, se puede usar la variable $categorylevel1 con la entidad (atributo) .url, es decir, $categorylevel1.url.

Pista: Para usar las variables es necesario agregar $ y respetar las minúsculas y las mayúsculas.

VariableDescripciónAplicaciónAdmin
$hasLogo Indica si el logotipo fue cargado desde el panel administrador #if( $hasLogo )
#end
Logo
$hasOnlyOneCategory Indica si la tienda posee una única categoría #if( $hasOnlyOneCategory )
Todos los productos
#end
Categorías
$uniqueCategory Indica si la tienda posee una única categoría activa #if( $uniqueCategory )
Soy la única categoría!
#end
Categorías
$menuItemList Enumerar los elementos del menú #foreach( $menuItem in $menuItemList)
$menuItem.name
#end
Páginas
$menuItem Muestra el nombre, URL, etc. del item del menú. Páginas
$level1CategoryList Lista de todas las categorías de primer nivel #foreach ( $categoryLevel1 in $level1CategoryList ) #end Categorías
$showContent Muestra contenido personalizado (textos, imágenes etc.) #if($showContent)
#if($showContentImage)
#foreach ($contentImage in $contentImageList)
#end
#elseif ($showContentText)
$contentText
#end
#end
Página principal
$showContentImage Muestra imágenes de contenido personalizado. Página principal
$showContentText Muestra el contenido de texto personalizado Página principal
$contentText El texto de contenido personalizado Página principal
$contentImageList Lista las imágenes de contenido personalizado (banners) #foreach ($contentImage in $contentImageList)
#end
Página principal
$contentImageMaxHeight Altura máxima que tendrán las imágenes del carrusel./td>   Página principal
$contentImage Muestra los atributos de imagen (Link, URL, etc.) #if($contentImage.hasLink)
link da imagem
#end
Página principal
$outstandingMaxItemsPerPage Cantidad máxima de items por página en el carrousel Configurado por MS Página principal
$outstandingItemList Lista de elementos para la categoría "Anuncios Destacados". #foreach ($outstandingItem in $outstandingItemList)
#end
Página principal
$outstandingItem Item destacado Página principal
$galleryProductsTitle Título de la galería de produtos. $galleryProductsTitle Página principal
$galleryItemList Lista de items exhibida en la página principal #foreach ($galleryItem in $galleryItemList)
#end
Página principal
$galleryItem Item que se mostrará en la página de inicio Página principal
$newsItemsTitle Título de la galería de nuevos anuncios. $newsItemsTitle Página principal
$newsMaxItemsPerPage Número máximo de nuevos items en la página carrusel. Configurado por MS Página principal
$newsItemList Lista de items del área de novedades. #foreach ($newsItem in $newsItemList)
#end
Página principal
$newsItem Item del área de novedades. Página principal
$showContactFooter Indica si se debe mostrar la información de contato #if($showContactFooter)
#end
Datos
$showAddres Indica si se debe mostrar la dirección #if( $showAddres )
$address
#end
Datos
$address Dirección de la tienda Datos
$showPhone Indica si se debe mostrar el teléfono de la tienda #if( $showPhone )
$phone
#end
Datos
$phone Teléfono de la tienda Datos
$shopHasCart Indica si la tienda utiliza carrito de compras o no. #if( $shopHasCart )
1 Item o más en el carro
#end
Datos
$searchQuery Muestra la palabra buscada por el usuario. $searchQuery Datos

Por subcategorías (árbol de navegación), las variables se pueden utilizar de la siguiente manera:

#foreach($categoryLevel1 in $level1CategoryList)
  #if($categoryLevel1.hasSubCategories)
    #foreach($categoryLevel2 in $categoryLevel1.subCategories)
      #if($categoryLevel2.hasSubCategories)
        #foreach($categoryLevel3 in $categoryLevel2.subCategories)

        #end
      #end
    #end
  #end
#end
ENTIDADES
GrupoEntidadDescripciónEjemplo
MENU ITEM isFirstItem Indica si el item es el primero del menú $menuItem.isFirstItem
target Valor del atributo "href" del item $menuItem.target
name Nombre del ítem $menuItem.name
noFollow Indica si debe o no poner el atributo rel="nofollow" $menuItem.noFollow
linkTarget Nombre del atributo "target" del elemento $menuItem.linkTarget
CATEGORY id Identificador de categoría $categoryLevel1.id
url URL de categoría $categoryLevel1.url
name Nombre de categoría $categoryLevel1.name
hasSubCategories Indica si existen categorías de nivel inferior $categoryLevel1.hasSubCategories
subCategories Lista de categorías de nivel inferior $categoryLevel1.subCategories
isInSelectedPath Indica si se ha seleccionado la categoría o se precede la categoría seleccionada $categoryLevel1.isInSelectedPath
BANNER height Altura de imagen $contentImage.height
src nome do atributo “src” $contentImage.src
link Link de imagen $contentImage.link
alt Valor del atributo "Alt" $contentImage.alt
hasLink Indica si la imagen tiene un link $contentImage.hasLink
ÍTEM title Título de anuncio destacadoo $outstandingItem.title
url URL de anuncio $outstandingItem.url
hasImages Indica si el anuncio posee imagen $outstandingItem.hasImages
imageUrl URL de imagen principal de anuncio. $outstandingItem.imageUrl
currencySymbol Símbolo de la moneda correspondiente al precio del anuncio. $outstandingItem.currencySymbol
entirePrice Parte entera del precio del anuncio $outstandingItem.entirePrice
decimalPrice Parte decimal del precio del anuncio $outstandingItem.decimalPrice
itemPrice Precio entero del anuncio (para países en los que no se utiliza centavos) $outstandingItem.itemPrice
subtitle Subtítulo del anuncio $outstandingItem.subtitle
showLastAvailable Indica si se muestra o no el texto "Último Disponible" $outstandingItem.showLastAvailable
promotion Promoción activa para ese ítem, de existir alguna $outstandingItem.promotion
PROMOTION title Título de ítem destacado title
name Nombre de promoción name
freeShipping Indica si el producto ofrece envío gratis freeShipping
discount_type El valor "PRICE" indica si se trata de una promoción con descuento en el precio. El valor "QUANTITY" indica si se trata de una promoción con unidades gratis, estilo "Pague 2 y obtenga 3" discount_type
discountPercent Disponible sólo con el valor "discount_type=PRICE". Porcentaje de descuento de promoción. discountPercent
quantityBuy Disponible sólo con el valor "discount_type=QUANTITY". Cantidad de unidades a comprar para que la promoción pueda ser aplicada. quantityBuy
fromDate Fecha de inicio de la promoción fromDate
to Fecha de fin de la promoción to

CSS

Con el objetivo de mejorar el desempeño, unificamos todos los CSS en una única llamada (request). Debido a que todos los archivos están unificados, incluimos en los comentarios los nombres de los archivos.

Buscando por “file name” (nombre de archivo), podrá entender dónde empieza y termina cada archivo CSS.

Todos los modelos de Mercado Shops tienen la siguiente estructura:

Estilos que varían según el tema

MODIFICACIÓN DEL LAYOUT

El concepto de construcción de Mercado Shops es diseño modular. Entonces, para la modificación de los layout que forman el tema, es necesario ordenar los elementos (por ejemplo, un botón) dentro de los componentes (por ejemplo, el campo de búsqueda) que forman el layout. Por orden de jerarquía:

Tema > Layout > Componente > Elemento.

Los componentes pueden ser ordenados por el sistema de grilla usado por Mercado Shops. La grilla está dividida en columnas. En HTML, existen clases que comienzan con “ch-g”. Los números que siguen a la clase representan las columnas usadas, por ejemplo:

La grilla posee las siguientes clases divididas de la siguiente manera:

Columna / Fracción1 col.2 cols.3 cols.4 cols.5 cols.6 cols.8 cols.10 cols.
1 fracción ch-g1
100%
ch-g1-2
50%
ch-g1-3
33,33%
ch-g1-4
25%
ch-g1-5
20%
ch-g1-6
16,66%
ch-g1-8
12,5%
ch-g1-10
10%
2 fracciones - - ch-g2-3
66,67%
ch-g2-4
50%
ch-g2-5
40%
ch-g2-6
33,33%
ch-g2-8
25%
ch-g2-10
20%
3 fracciones - - - ch-g3-4
75%
ch-g3-5
60%
ch-g3-6
50%
ch-g3-8
37,5%
ch-g3-10
30%
4 fracciones - - - - ch-g4-5
80%
ch-g4-6
66,67%
ch-g4-8
50%
ch-g4-10
40%
5 fracciones - - - - - ch-g5-6
83,3%
ch-g5-8
62,5%
ch-g5-10
50%
6 fracciones - - - - - - ch-g6-8
75%
ch-g6-10
60%
7 fracciones - - - - - - ch-g7-8
87,5%
ch-g7-10
70%
8 fracciones - - - - - - - ch-g8-10
80%
9 fracciones - - - - - - - ch-g9-10
90%

Clases suplementarias para una fracción: