Vtex

Vicom Studio

Librerías Jquery

Estructura HTML Básica

Nota: Cambiar Titulo_de_tienda. Cambiar nombre_de_tienda en subtemplates y contentPlaceHolders por el nombre de la tienda o prefijo elegido

Nota: Poner CSS en el subtemplate "head" y los archivos de Javascript en el Footer

Nota: Los scripts para html5 y css3 de IE deben estar en el template principal no en subtemplates

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:vtex="http://www.vtex.com.br/2009/vtex-common" xmlns:vtex.cmc="http://www.vtex.com.br/2009/vtex-commerce" lang="en-us"> <head> <meta charset="utf-8"/> <meta http-equiv="X-UA-Compatible" content="IE=edge"/> <meta name="viewport" content="width=device-width, initial-scale=1"/> <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> <title>Titulo_de_tienda</title> <!-- Include Head --> <vtex:metaTags/> <vtex:template id="nombre_de_tienda-head" /> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> </head> <body> <!--HEADER--> <vtex:template id="nombre_de_tienda-header" /> <!--/HEADER--> <vtex:contentPlaceHolder id="nombre_de_tienda-contentPlaceHolder" /> <!--FOOTER--> <vtex:template id="nombre_de_tienda-footer" /> <!--FOOTER--> </body> </html>

Scripts de Footer

<!-- Include all compiled plugins (below), or include individual files as needed --> <script src="/arquivos/bootstrap.min.js"></script> <script src="/arquivos/jquery.jcarousel.js"></script> <script src="/arquivos/lojavazia-general.js"></script> <script src="/arquivos/jquery.colorbox.min.js"></script> <script src="/arquivos/general-scripts.js"></script>

Etiquetas VTEX generales

<!-- Search Bar --> <vtex.cmc:fullTextSearchBox/> <!-- Información Básica del Carrito, es obligatorio si se usa "BuyInPage" --> <vtex.cmc:AmountItemsInCart /> <!-- Muestra información del carrito: items, cantidades, precios y botón para quitar del carrito --> <vtex.cmc:miniCart/> <!-- Breadcrumb --> <vtex.cmc:breadCrumb /> <!-- Boletín de Noticias --> <vtex.cmc:newsletterOptIn/>

Controles customizados

No se pueden usar controles de VTEX dentro de los controles customizados.

Es contenido como en los content place holder

<vtex.cmc:nombreControl />

Ejemplo Subtemplate HEAD

Nota: Cambiar nombre_de_tienda

<!-- Fonts --> <link href='http://fonts.googleapis.com/css?family=Gudea:400,700' rel='stylesheet' type='text/css'/> <link href="//netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome.min.css" rel="stylesheet" type="text/css" /> <!-- CSS --> <link href="/arquivos/bootstrap.min.css" rel="stylesheet"/> <link href="/arquivos/nombre_de_tienda-main.css" rel="stylesheet"/> <!-- Favicon --> <link rel="shortcut icon" href="/arquivos/nombre_de_tienda-favicon.ico"/>

Favicon

Se puede colocar en un subtemplate, para que aparezca en el checkout deben nombrarse de la siguietne forma: nombre_de_tienda-favicon.ico, ej. masluz-favicon.ico o tottomexico-favicon.ico

<link rel="shortcut icon" href="/arquivos/nombre_de_tienda-favicon.ico"/>

Armado de URL por jQuery

<script type="text/javascript"> var slug = function(str) { str = str.replace(/^\s+|\s+$/g, ''); // trim str = str.toLowerCase(); // remove accents, swap ñ for n, etc var from = "ãàáäâẽèéëêìíïîõòóöôùúüûñç·/_,:;"; var to = "aaaaaeeeeeiiiiooooouuuunc------"; for (var i=0, l=from.length ; i<l ; i++) { str = str.replace(new RegExp(from.charAt(i), 'g'), to.charAt(i)); } str = str.replace(/[^a-z0-9 -]/g, '') // remove invalid chars .replace(/\s+/g, '-') // collapse whitespace and replace by - .replace(/-+/g, '-'); // collapse dashes return str; }; $('.treeview li span.label').each(function(){ cat = $(this).html(); cat = cat.substring(10); cat = slug(cat); console.log(cat); }); </script>

Fuentes bootstrap

https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/fonts/ ../fonts/