Prestashop 3 – Maquetación de layouts principales de la plantila

Si deseas ver el video en HD (https://vimeo.com/36694126)

Si deseas descargar el video:
Prestashop 3 – Maquetación de layouts principales de la plantila

En este video vamos a ver como realizar la maquetación de los
divs principales que maneja la plantilla (cms.template-help.com/prestashop_32937/)

1. Renombrar id=page por id=wrapper3
2. Maquetar el wrapper2 y wrapper1
3. En punto (1) y (2) hacen uso de dos archivos de la plantilla (header.tpl y footer.tpl)

Archivo: header.tpl

[php]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="{$lang_iso}">
<head>
<title>{$meta_title|escape:’htmlall’:’UTF-8′}</title>
{if isset($meta_description) AND $meta_description}
<meta name="description" content="{$meta_description|escape:html:’UTF-8′}" />
{/if}
{if isset($meta_keywords) AND $meta_keywords}
<meta name="keywords" content="{$meta_keywords|escape:html:’UTF-8′}" />
{/if}
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
<meta name="generator" content="PrestaShop" />
<meta name="robots" content="{if isset($nobots)}no{/if}index,follow" />
<link rel="icon" type="image/vnd.microsoft.icon" href="{$img_ps_dir}favicon.ico?{$img_update_time}" />
<link rel="shortcut icon" type="image/x-icon" href="{$img_ps_dir}favicon.ico?{$img_update_time}" />
<script type="text/javascript">
var baseDir = ‘{$content_dir}’;
var static_token = ‘{$static_token}’;
var token = ‘{$token}’;
var priceDisplayPrecision = {$priceDisplayPrecision*$currency->decimals};
var priceDisplayMethod = {$priceDisplay};
var roundMode = {$roundMode};
</script>

{if isset($css_files)}
{foreach from=$css_files key=css_uri item=media}
<link href="{$css_uri}" rel="stylesheet" type="text/css" media="{$media}" />
{/foreach}
{/if}

{if isset($js_files)}
{foreach from=$js_files item=js_uri}
<script type="text/javascript" src="{$js_uri}"></script>
{/foreach}
{/if}

{$HOOK_HEADER}
</head>

<body {if $page_name}id="{$page_name|escape:’htmlall’:’UTF-8′}"{/if}>
{if !$content_only}
{if isset($restricted_country_mode) && $restricted_country_mode}
<div id="restricted-country">
<p>{l s=’You cannot place a new order from your country.’} <span>{$geolocation_country}</span></p>
</div>
{/if}

<!– Header –>
<div id="header">
<h1 id="logo">
<a id="header_logo" href="{$link->getPageLink(‘index.php’)}" title="{$shop_name|escape:’htmlall’:’UTF-8′}">
<img src="{$img_ps_dir}logo.jpg?{$img_update_time}" alt="{$shop_name|escape:’htmlall’:’UTF-8′}" {if $logo_image_width}width="{$logo_image_width}"{/if} {if $logo_image_height}height="{$logo_image_height}" {/if} />
</a>
</h1>
<div id="header_right">
{$HOOK_TOP}
</div>
</div>

<div id="columns">
<!– Left –>
<div id="left_column">
{$HOOK_LEFT_COLUMN}
</div>

<!– Center –>
<div id="center_column">
{/if}
[/php]

Archivo: footer.tpl

[php]
{if !$content_only}
</div>

<!– Right –>
<div id="right_column">
{$HOOK_RIGHT_COLUMN}
</div>
</div>

<!– Footer –>
<div id="footer">{$HOOK_FOOTER}</div>
</div><!– final de id=wrapper3 –>

</div><!– final de id=wrapper2 –>
</div><!– final de id=wrapper1 –>

{/if}
</body>
</html>
[/php]

juliopari

Si te ha interesado este artículo y deseas un apoyo o asesoría en algún requerimiento, envíame un mensaje a: (info@juliopari.com) o sino a través de Linkedin: https://www.linkedin.com/in/juliopari/