Documentação

TEMAS – ESTRUTURA E CONTEÚDO

Indice

Os temas padrão (arquitetura antiga)Conteúdo dos pacotes de tema HTMLCSS Modificação de layouts

OS TEMAS PADRÃO (ARQUITETURA ANTIGA)

Abaixo, um exemplo das diferenças entre os temas padrão.

CONTEÚDO DOS PACOTES DE TEMA

Ao descomprimir o pacote do tema padrão baixado, a seguinte estrutura será encontrada:

Antes de publicar os arquivos, observe o seguinte:

HTML

A linguagem de programação do MercadoShops é o VTL (Velocity). Essa linguagem permite a adição de variáveis no HTML. Isso faz com a loja se mantenha dinâmica, ou seja, o layout é variável conforme as configurações feitas no administrador.

Com o código HTML personalizado carregado, o MercadoShops irá substituir as variáveis pelo conteúdo inserido no administrador, uma loja parecida com o CMS.

Os arquivos HTML que podem ser editados são:

VARIÁVEIS

As variáveis são blocos de códigos, que constroem a loja. Ou seja, para inserir o logo da loja, é possível usar a variável “$hasLogo” no HTML.

É possível, também, inserir uma variável com uma entidade (variável que contém informação), ou seja, um atributo adicionado à variável. Por exemplo, para “imprimir” a url da categoria de 1º nível, pode-se usar a variável $categoryLevel1 com a entidade (atributo) .url, assim: $categoryLevel1.url.

Dica: para usar as variáveis, é necessário e adicionar $ no início e respeitar as letras maiúsculas e minúsculas.

VariávelDescriçãoAplicaçãoAdmin
$hasLogo Indica se o logo foi cadastrado no admin #if( $hasLogo )
#end
Logo
$hasOnlyOneCategory Indica se a loja possui uma única categoria #if( $hasOnlyOneCategory )
Todos os produtos
#end
Categorias
$uniqueCategory Indica se a loja tem só uma categoria ativa #if( $uniqueCategory )
Sou a única categoria!
#end
Categorias
$menuItemList Lista os elementos do menu #foreach( $menuItem in $menuItemList)
$menuItem.name
#end
Páginas
$menuItem Mostra nome, url etc. do item do menu. Páginas
$level1CategoryList Lista com todas as categorias do primeiro nível #foreach ( $categoryLevel1 in $level1CategoryList ) #end Categorias
$showContent Mostra conteúdo personalizado (textos, imagens etc.) #if($showContent)
#if($showContentImage)
#foreach ($contentImage in $contentImageList)
#end
#elseif ($showContentText)
$contentText
#end
#end
Página principal
$showContentImage Mostra imagens do conteúdo personalizado Página principal
$showContentText Mostra texto do conteúdo personalizado Página principal
$contentText O texto do conteúdo personalizado Página principal
$contentImageList Lista imagens do conteúdo personalizado (banners) #foreach ($contentImage in $contentImageList)
#end
Página principal
$contentImageMaxHeight Altura que terão as imagens do carrossel.   Página principal
$contentImage Mostra os atributos da imagem (link, url etc.) #if($contentImage.hasLink)
link da imagem
#end
Página principal
$outstandingMaxItemsPerPage Quant. max. de itens destacados por página no carrossel Configurado pelo MS Página principal
$outstandingItemList Lista de itens da posição “Anúncios Destacados”. #foreach ($outstandingItem in $outstandingItemList)
#end
Página principal
$outstandingItem Item destacado Página principal
$galleryProductsTitle Título da galeria de produtos. $galleryProductsTitle Página principal
$galleryItemList Lista de itens a ser exibida na página inicial #foreach ($galleryItem in $galleryItemList)
#end
Página principal
$galleryItem Item a ser exibida na página inicial Página principal
$newsItemsTitle Título da galeria de novos anúncios. $newsItemsTitle Página principal
$newsMaxItemsPerPage Quantidade máxima de itens novos da página do carrossel. Configurado por MS Página principal
$newsItemList Lista de itens da área de novidades. #foreach ($newsItem in $newsItemList)
#end
Página principal
$newsItem Item da área de novidades. Página principal
$showContactFooter Indica se deve ser exibido a informação de contato #if($showContactFooter)
#end
Dados
$showAddres Indica se deve ser exibido o endereço. #if( $showAddres )
$address
#end
Dados
$address Endereço da Loja Dados
$showPhone Indica se deve ser exibido o telefone #if( $showPhone )
$phone
#end
Dados
$phone Telefone da Loja Dados
$shopHasCart Indica se a loja utiliza carrinho de compras ou não. #if( $shopHasCart )
1item ou mais no carrinho
#end
Layout
$searchQuery Exibe a palavra pesquisada pelo visitante. $searchQuery Layout

Para as subcategorias (árvore de navegação), as variáveis podem ser usadas da seguinte forma:

#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
GrupoEntidadeDescriçãoExemplo de Aplicação
MENU ITEM isFirstItem indica se o item é o primeiro do menu $menuItem.isFirstItem
target valor do atributo “href” do elemento $menuItem.target
name nome do elemento $menuItem.name
noFollow indica se deve colocar ou não o atributo rel=”nofollow” $menuItem.noFollow
linkTarget nome do atributo “target” do elemento $menuItem.linkTarget
CATEGORY id identificador da categoria $categoryLevel1.id
url URL da categoria $categoryLevel1.url
name nome da categoria $categoryLevel1.name
hasSubCategories indica se tem categorias de nível inferior $categoryLevel1.hasSubCategories
subCategories lista de categorias de níveis inferiores pertencentes da categoria $categoryLevel1.subCategories
isInSelectedPath indica se a categoria está selecionada ou é antecedente a categoria selecionada $categoryLevel1.isInSelectedPath
BANNER height altura da imagem. $contentImage.height
src nome do atributo “src” $contentImage.src
link link que a imagem direciona $contentImage.link
alt nome do atributo “alt” $contentImage.alt
hasLink indica se a imagem tem um link $contentImage.hasLink
ÍTEM title título do anúncio destacado $outstandingItem.title
url URL do anúncio $outstandingItem.url
hasImages indica se o anúncio tem ou não imagens $outstandingItem.hasImages
imageUrl URL da imagem principal do anúncio. $outstandingItem.imageUrl
currencySymbol símbolo da moeda correspondente ao preço do anúncio $outstandingItem.currencySymbol
entirePrice parte inteira do preço do anúncio $outstandingItem.entirePrice
decimalPrice parte decimal do preço do anúncio $outstandingItem.decimalPrice
itemPrice preço inteiro do anúncio (para países onde não se utilizam centavos) $outstandingItem.itemPrice
subtitle subtítulo do anúncio $outstandingItem.subtitle
showLastAvailable indica se deve ser exibido ou não o texto de “Últimos Disponíveis” $outstandingItem.showLastAvailable
promotion promoção ativa para este item, se existir alguma $outstandingItem.promotion
PROMOTION title titulo do item destacado title
name nome da promoção name
freeShipping indica se o item oferece frete grátis freeShipping
discount_type o valor “PRICE” indica se é uma promoção com desconto no preço do produto. O valor “QUANTITY” indica se é uma promoção com unidades grátis, estilo “pague 2 e leve 3″ discount_type
discountPercent disponível apenas se discount_type=PRICE. Porcentagem de descuento da promoção discountPercent
quantityBuy disponível apenas se discount_type=QUANTITY. Quantidade de unidades a comprar para que la promoção possa ser aplicada (ex: “pague 2…”) quantityBuy
fromDate data de início da promoção, se houver fromDate
to data de finalização da promoção, se houver to

CSS

Com o objetivo de melhorar o desempenho, unificamos todos os CSS em uma única chamada (request).

Como todos os arquivos estão unificados, incluímos em comentários os nomes dos arquivos.

Procurando por “file name”, você poderá entender onde começa e onde termina cada arquivo CSS.

Todos os modelos do MercadoShops têm a seguinte estrutura:

Estilos comuns a todos os temas

Estilos que variam por tema

MODIFICAÇÃO DE LAYOUTS

O conceito da construção do MercadoShops é design modular. Então, para a modificação dos layouts que formam o tema, é necessário ordenar os elementos (por ex.: um botão) dentro dos componentes (por ex.: o campo de busca) que formam o layout. Hierarquicamente:

Tema > Layout > Componente > Elemento.

Os elementos e componentes podem ser ordenados pelo sistema de grid usado pelo MercadoShops. O grid é dividido por colunas. No HTML, existem classes iniciadas por “ch-g”. Os números que dão sequência à classe representam as colunas usadas, por exemplo:

O grid possuí as seguintes classes, dividas por:

Coluna / Fração1 col.2 cols.3 cols.4 cols.5 cols.6 cols.8 cols.10 cols.
1 fração 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 frações - - 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 frações - - - ch-g3-4
75%
ch-g3-5
60%
ch-g3-6
50%
ch-g3-8
37,5%
ch-g3-10
30%
4 frações - - - - ch-g4-5
80%
ch-g4-6
66,67%
ch-g4-8
50%
ch-g4-10
40%
5 frações - - - - - ch-g5-6
83,3%
ch-g5-8
62,5%
ch-g5-10
50%
6 frações - - - - - - ch-g6-8
75%
ch-g6-10
60%
7 frações - - - - - - ch-g7-8
87,5%
ch-g7-10
70%
8 frações - - - - - - - ch-g8-10
80%
9 frações - - - - - - - ch-g9-10
90%

Classes complementar para 1 fração: