Layout

Layout principal de la tienda.

Layout

El template principal de la tienda se encuentra en el archivo inc/layout/index.php.

En general, en dicho archivo se ubica el header y el footer del sitio, junto con el código que permite incluir el template de la página activa.

Objeto $_front

El objeto $_front expone varios métodos útiles al momento de generar el layout de la página:

Método

Descripción

metatags()

Genera meta tags dinámicamente para la página activa (título, descripción, keywords, etc)

assetURL(BASE)

URL base para cargar assets del template a través del CDN de VentasPop.

css()

Array de hojas de estilo a incluir en la página activa.

js()

Array de scripts a incluir en la página activa.

head()

Scripts adicionales para el <head> de la página.

foot()

Scripts adicionales para cargar antes de </body>.

id()

ID de la página activa.

Código de ejemplo

<!DOCTYPE html>
<html lang="es">
	<head>
		<?php $_front->metatags(); ?>

		<link href="<?=$_front->assetURL(BASE)?>css/global.css" type="text/css" rel="stylesheet" />
	
	    <?php foreach($_front->css() as $css): ?>
		<link href="<?=$_front->assetHost()?>css/<?=$css?>" type="text/css" rel="stylesheet" />
	    <?php endforeach; ?>
	
		<?=$_front->head()?>
	</head>

	<body class="pag<?=$_front->id()?>">
		
		<?php $_reporter->display(); ?>
		
		<div id="top">
			<div class="container clearfix">
				<ul>
					<li><a href="<?=HOST?>">Home</a></li>
					<li><a href="<?=HOST?>carrito">Carrito</a></li>
				</ul>
				
				<form action="<?=HOST?>buscar" method="get" id="search">
					<input type="text" name="query" placeholder="BUSCAR" autocomplete="off" />
					<button type="submit" name="search" value="1"><i class="fa fa-search"></i></button>
				</form>
			</div>
		</div>
		
		<header id="header" class="container">
			<h1><a href="<?=HOST?>"><img src="<?=$_front->thumbor($_shop->get('logo'))?>" alt="<?=$_shop->get('name')?>" /></a></h1>
		</header>
		
		<nav id="nav">
			<ul class="container clearfix">
				<?=Category::menu()?>
				<?=Page::menu()?>
			</ul>
		</nav>
		
		<main id="main" class="container clearfix">
			<?php 
				
				if($_front->cache() === false || !$_cache->start($_front->cache())) {
					require_once $_front->content();
					echo $_front->pageFoot();
					if($_front->cache() !== false)
						$_cache->end();
				}

			?>
		</main>
		
		<footer id="footer">
			<div class="container clearfix">
					
				<ul id="pages">
					<?=Page::menu()?>
					<li><a href="<?=HOST?>contacto">Contacto</a></li>
				</ul>
					
				<a href="http://ventaspop.com" class="copyright"><img src="http://ventaspop.com/images/ventaspop-icon.svg" alt="VentasPop" /> VentasPop - Ecommerce Profesional</a>
			</div>
		</footer>
		
	    <script src="<?=$_front->assetURL(BASE)?>js/global.js"></script>
	    <?php foreach($_front->js() as $js): ?>
	    <script src="<?=$_front->assetHost()?>js/<?=$js?>"></script>
	    <?php endforeach; ?>
		
		<?=$_front->foot()?>
		
	</body>
</html>

El bloque compuesto por las líneas 45 a 54 activa la cache y carga el template correspondiente a la página activa.

En todos los themes se recomienda cargar el script js/global.js (línea 69). Para su correcto funcionamiento, el tag <body> debe incluir la clase pag<?=$_front->id()?>.

PreviousCampos personalizados desde el BONextMenúes

Last updated

Was this helpful?