optimized templates, UI

This commit is contained in:
Julien Chanséaume
2014-07-31 14:22:15 +02:00
committed by Julien Chanseaume
parent 27e0596ca7
commit 09c124c6ae
5 changed files with 200 additions and 135 deletions

View File

@@ -1,39 +1,52 @@
{extends file='layout.tpl'} {extends file='layout.tpl'}
{block name="init"}
{$category_id={category attr="id"}}
{/block}
{* Body Class *} {* Body Class *}
{block name="body-class"}page-category{/block} {block name="body-class"}page-category{/block}
{* Page Title *} {* Page Title *}
{block name='no-return-functions' append} {block name='no-return-functions' append}
{loop name="category.seo.title" type="category" current="yes"} {if $category_id}
{loop name="category.seo.title" type="category" id=$category_id limit="1"}
{$page_title = {$META_TITLE}} {$page_title = {$META_TITLE}}
{/loop} {/loop}
{/if}
{/block} {/block}
{* Meta *} {* Meta *}
{block name="meta"} {block name="meta"}
{loop name="category.seo.meta" type="category" category="{category attr="id"}"} {if $category_id}
{loop name="category.seo.meta" type="category" id=$category_id limit="1"}
{include file="includes/meta-seo.html"} {include file="includes/meta-seo.html"}
{/loop} {/loop}
{/if}
{/block} {/block}
{* Feeds *} {* Feeds *}
{block name="feeds"} {block name="feeds"}
{if $category_id}
<link rel="alternate" type="application/rss+xml" title="{intl l='All products in'} {category attr='title'}" href="{url path="/feed/catalog/{lang attr="locale"}/{category attr="id"}"}" /> <link rel="alternate" type="application/rss+xml" title="{intl l='All products in'} {category attr='title'}" href="{url path="/feed/catalog/{lang attr="locale"}/{category attr="id"}"}" />
{/if}
{/block} {/block}
{* Breadcrumb *} {* Breadcrumb *}
{block name='no-return-functions' append} {block name='no-return-functions' append}
{if $category_id}
{$breadcrumbs = []} {$breadcrumbs = []}
{loop name="category_path" type="category-path" category="{category attr="id"}"} {loop name="category_path" type="category-path" category=$category_id}
{$breadcrumbs[] = ['title' => {$TITLE}, 'url'=> {$URL nofilter}]} {$breadcrumbs[] = ['title' => {$TITLE}, 'url'=> {$URL nofilter}]}
{/loop} {/loop}
{/if}
{/block} {/block}
{* Content *} {* Content *}
{block name="main-content"} {block name="main-content"}
{$category_id={category attr="id"}}
{$limit={$smarty.get.limit|default:8}} {$limit={$smarty.get.limit|default:8}}
{$product_page={$smarty.get.page|default:1}} {$product_page={$smarty.get.page|default:1}}
{$product_order={$smarty.get.order|default:'alpha'}} {$product_order={$smarty.get.order|default:'alpha'}}
@@ -43,7 +56,7 @@
{if #category_display_detail# && $category_id} {if #category_display_detail# && $category_id}
<section class="category-description"> <section class="category-description">
{loop name="category.description" type="category" id={$category_id} } {loop name="category.description" type="category" id={$category_id} limit="1" }
<h1 id="main-label" class="page-header">{category attr="title"}</h1> <h1 id="main-label" class="page-header">{category attr="title"}</h1>
{loop name="category.image" type="image" source="category" id={$ID} width=218 height=146 resize_mode="borders"} {loop name="category.image" type="image" source="category" id={$ID} width=218 height=146 resize_mode="borders"}
<p><img itemprop="image" src="{$IMAGE_URL}" alt="{$TITLE}"></p> <p><img itemprop="image" src="{$IMAGE_URL}" alt="{$TITLE}"></p>
@@ -80,7 +93,7 @@
{/if} {/if}
{ifloop rel="product_list"} {ifloop rel="product_list"}
{assign var="amount" value="{count type="product" category="$category_id"}"} {assign var="amount" value="{count type="product" category=$category_id}"}
<div class="toolbar toolbar-top" role="toolbar"> <div class="toolbar toolbar-top" role="toolbar">
<div class="sorter-container"> <div class="sorter-container">
<span class="amount">{if ($amount > 1)}{intl l="%nb Items" nb="{$amount}"}{else}{intl l="%nb Item" nb="{$amount}"}{/if}</span> <span class="amount">{if ($amount > 1)}{intl l="%nb Items" nb="{$amount}"}{else}{intl l="%nb Item" nb="{$amount}"}{/if}</span>

View File

@@ -1,39 +1,48 @@
{extends file="layout.tpl"} {extends file="layout.tpl"}
{block name='init'}
{assign var="content_id" value={content attr="id"}}
{/block}
{* Body Class *} {* Body Class *}
{block name="body-class"}page-content{/block} {block name="body-class"}page-content{/block}
{* Page Title *} {* Page Title *}
{block name='no-return-functions' append} {block name='no-return-functions' append}
{$content_id={content attr="id"}} {if {$content_id}}
{loop name="content.seo.title" type="content" id=$content_id} {loop name="content.seo.title" type="content" id={$content_id} limit="1"}
{$page_title = {$META_TITLE}} {$page_title = {$META_TITLE}}
{/loop} {/loop}
{/if}
{/block} {/block}
{* Meta *} {* Meta *}
{block name="meta"} {block name="meta"}
{loop name="content.seo.meta" type="content" id=$content_id} {if $content_id}
{loop name="content.seo.meta" type="content" id=$content_id limit="1"}
{include file="includes/meta-seo.html"} {include file="includes/meta-seo.html"}
{/loop} {/loop}
{/if}
{/block} {/block}
{* Breadcrumb *} {* Breadcrumb *}
{block name='no-return-functions' append} {block name='no-return-functions' append}
{if $content_id}
{$breadcrumbs = []} {$breadcrumbs = []}
{loop type="content" name="content-breadcrumb" id=$content_id} {loop type="content" name="content-breadcrumb" id=$content_id limit="1"}
{loop name="folder_path" type="folder-path" folder="{$DEFAULT_FOLDER}"} {loop name="folder_path" type="folder-path" folder="{$DEFAULT_FOLDER}"}
{$breadcrumbs[] = ['title' => {$TITLE}, 'url'=> {$URL}]} {$breadcrumbs[] = ['title' => {$TITLE}, 'url'=> {$URL}]}
{/loop} {/loop}
{$breadcrumbs[] = ['title' => {$TITLE}, 'url'=> {$URL}]} {$breadcrumbs[] = ['title' => {$TITLE}, 'url'=> {$URL}]}
{/loop} {/loop}
{/if}
{/block} {/block}
{block name="main-content"} {block name="main-content"}
{if $content_id}
<div class="main layout-col-2-left"> <div class="main layout-col-2-left">
<article id="content-main" class="col-main" role="main" aria-labelledby="main-label"> <article id="content-main" class="col-main" role="main" aria-labelledby="main-label">
{loop name="blog.content" type="content" current="yes"} {loop name="blog.content" type="content" id=$content_id limit="1"}
<h1 id="main-label" class="page-header">{$TITLE}</h1> <h1 id="main-label" class="page-header">{$TITLE}</h1>
{if $CHAPO} {if $CHAPO}
<div class="chapo"> <div class="chapo">
@@ -52,10 +61,15 @@
{/if} {/if}
{/loop} {/loop}
</article> </article>
<aside class="col-left" role="complementary" itemscope itemtype="http://schema.org/WPSideBar"> <aside class="col-left" role="complementary" itemscope itemtype="http://schema.org/WPSideBar">
{include file="includes/asides/articles.html"} {include file="includes/asides/articles.html"}
</aside> </aside>
</div><!-- /.layout --> </div><!-- /.layout -->
{else}
<div class="main">
<article id="content-main" class="col-main" role="main" aria-labelledby="main-label">
{include file="includes/empty.html"}
</article>
</div><!-- /.layout -->
{/if}
{/block} {/block}

View File

@@ -1,29 +1,38 @@
{extends file="layout.tpl"} {extends file="layout.tpl"}
{block name="init"}
{$folder_id={folder attr="id"}}
{/block}
{* Body Class *} {* Body Class *}
{block name="body-class"}page-folder{/block} {block name="body-class"}page-folder{/block}
{* Page Title *} {* Page Title *}
{block name='no-return-functions' append} {block name='no-return-functions' append}
{$folder_id={folder attr="id"}} {if $folder_id}
{loop name="folder.seo.title" type="folder" id=$folder_id} {loop name="folder.seo.title" type="folder" id=$folder_id limit="1"}
{$page_title = {$META_TITLE}} {$page_title = {$META_TITLE}}
{/loop} {/loop}
{/if}
{/block} {/block}
{* Meta *} {* Meta *}
{block name="meta"} {block name="meta"}
{loop name="folder.seo.meta" type="folder" id="{folder attr="id"}"} {if $folder_id}
{loop name="folder.seo.meta" type="folder" id=$folder_id limit="1"}
{include file="includes/meta-seo.html"} {include file="includes/meta-seo.html"}
{/loop} {/loop}
{/if}
{/block} {/block}
{* Breadcrumb *} {* Breadcrumb *}
{block name='no-return-functions' append} {block name='no-return-functions' append}
{if $folder_id}
{$breadcrumbs = []} {$breadcrumbs = []}
{loop name="folder_path" type="folder-path" folder="{folder attr="id"}"} {loop name="folder_path" type="folder-path" folder=$folder_id}
{$breadcrumbs[] = ['title' => {$TITLE}, 'url'=> {$URL}]} {$breadcrumbs[] = ['title' => {$TITLE}, 'url'=> {$URL}]}
{/loop} {/loop}
{/if}
{/block} {/block}
{block name="feeds"} {block name="feeds"}
@@ -33,10 +42,9 @@
{* Content *} {* Content *}
{block name="main-content"} {block name="main-content"}
<div class="main"> <div class="main">
<div class="col-main contents-list" role="main" aria-labelledby="main-label">
<div class="col-main" role="main" aria-labelledby="main-label"> {if $folder_id}
{loop name="folder" type="folder" id=$folder_id limit="1"}
{loop name="folder" type="folder" id="{folder attr="id"}"}
<h1 id="main-label" class="page-header">{$TITLE}</h1> <h1 id="main-label" class="page-header">{$TITLE}</h1>
{if $CHAPO} {if $CHAPO}
<div class="folder-chapo"> <div class="folder-chapo">
@@ -56,15 +64,14 @@
{loop name="folder_content" type="content" folder="$ID"} {loop name="folder_content" type="content" folder="$ID"}
<li class="item"> <li class="item">
<article> <article>
{ifloop rel="content_thumbnail"}
<a href="{$URL}" tabindex="-1" class="content-image"> <a href="{$URL}" tabindex="-1" class="content-image">
{loop name="content_thumbnail" type="image" width="369" height="247" content=$ID limit="1"} {loop name="content_thumbnail" type="image" width="369" height="247" content=$ID limit="1"}
<img src="{$IMAGE_URL}" alt="{$TITLE}"> <img src="{$IMAGE_URL}" alt="{$TITLE}">
{/loop} {/loop}
{elseloop rel="content_thumbnail"}
{images file='assets/img/280x196.png'}<img src="{$asset_url}" alt="{$TITLE}">{/images}
{/elseloop}
<span class="mask"></span> <span class="mask"></span>
</a> </a>
{/ifloop}
<div class="content-info"> <div class="content-info">
<h3 class="name"><a href="{$URL}">{$TITLE}</a></h3> <h3 class="name"><a href="{$URL}">{$TITLE}</a></h3>
@@ -82,7 +89,7 @@
{/ifloop} {/ifloop}
{elseloop rel="folder_content"} {elseloop rel="folder_content"}
<div class="folder-warning"> <div class="folder-warning">
{intl l="No Content in this folder."} {intl l="No Contents in this folder."}
</div> </div>
{/elseloop} {/elseloop}
</div> </div>
@@ -95,7 +102,26 @@
</small> </small>
{/if} {/if}
{/loop} {/loop}
{else}
{ifloop rel="folders"}
<ul>
{loop name="folders" type="folder"}
<li class="item">
<article>
<div class="content-info">
<h2 class="name"><a href="{$URL}">{$TITLE}</a></h2>
{if $CHAPO}
<div class="short-description">
{$CHAPO}
</div>
{/if}
</div>
</article>
</li>
{/loop}
</ul>
{/ifloop}
{/if}
</div> </div>
</div> </div>
{/block} {/block}

View File

@@ -0,0 +1,10 @@
{if ! $title_empty}
{$title={intl l="The page cannot be found"}}
{/if}
<h1 id="main-label" class="page-header">{$title}</h1>
{if ! $message_empty}
<div class="description">
{$message_empty nofilter}
</div>
{/if}

View File

@@ -1,18 +1,24 @@
{extends file="layout.tpl"} {extends file="layout.tpl"}
{block name="init"}
{$product_id={product attr="id"}}
{$pse_count=1}
{$check_availability={config key="check-available-stock" default="1"}}
{/block}
{* Body Class *} {* Body Class *}
{block name="body-class"}page-product{/block} {block name="body-class"}page-product{/block}
{* Page Title *} {* Page Title *}
{block name='no-return-functions' append} {block name='no-return-functions' append}
{loop name="product.seo.title" type="product" id="{product attr="id"}" limit="1" with_prev_next_info="1"} {loop name="product.seo.title" type="product" id=$product_id limit="1" with_prev_next_info="1"}
{$page_title = {$META_TITLE}} {$page_title = {$META_TITLE}}
{/loop} {/loop}
{/block} {/block}
{* Meta *} {* Meta *}
{block name="meta"} {block name="meta"}
{loop name="product.seo.meta" type="product" id="{product attr="id"}" limit="1" with_prev_next_info="1"} {loop name="product.seo.meta" type="product" id=$product_id limit="1" with_prev_next_info="1"}
{include file="includes/meta-seo.html"} {include file="includes/meta-seo.html"}
{/loop} {/loop}
{/block} {/block}
@@ -20,7 +26,7 @@
{* Breadcrumb *} {* Breadcrumb *}
{block name='no-return-functions' append} {block name='no-return-functions' append}
{$breadcrumbs = []} {$breadcrumbs = []}
{loop type="product" name="product_breadcrumb" id="{product attr="id"}" limit="1" with_prev_next_info="1"} {loop type="product" name="product_breadcrumb" id=$product_id limit="1" with_prev_next_info="1"}
{loop name="category_path" type="category-path" category="{$DEFAULT_CATEGORY}"} {loop name="category_path" type="category-path" category="{$DEFAULT_CATEGORY}"}
{$breadcrumbs[] = ['title' => {$TITLE}, 'url'=> {$URL}]} {$breadcrumbs[] = ['title' => {$TITLE}, 'url'=> {$URL}]}
{/loop} {/loop}
@@ -30,30 +36,26 @@
{* Content *} {* Content *}
{block name="main-content"} {block name="main-content"}
{if $product_id}
{$product_id={product attr="id"}}
{$pse_count=1}
{$check_availability={config key="check-available-stock" default="1"}}
<div class="main"> <div class="main">
{loop name="product.details" type="product" id="{product attr="id"}" limit="1" with_prev_next_info="1"} {loop name="product.details" type="product" id=$product_id limit="1" with_prev_next_info="1"}
<article id="product" class="col-main" role="main" itemscope itemtype="http://schema.org/Product"> <article id="product" class="col-main" role="main" itemscope itemtype="http://schema.org/Product">
{$pse_count=$PSE_COUNT} {$pse_count=$PSE_COUNT}
<!-- Use the meta tag to specify content that is not visible on the page in any way --> {* Use the meta tag to specify content that is not visible on the page in any way *}
{loop name="brand.feature" type="brand" product="{$ID}"} {loop name="brand.feature" type="brand" product="{$ID}"}
<meta itemprop="brand" content="{$TITLE}"> <meta itemprop="brand" content="{$TITLE}">
{/loop} {/loop}
{* {* Add custom feature if needed
{loop name="isbn.feature" type="feature" product="{$ID}" title="isbn"} {loop name="isbn.feature" type="feature" product="{$ID}" title="isbn"}
{loop name="isbn.value" type="feature_value" feature="{$ID}" product="{product attr="id"}"} {loop name="isbn.value" type="feature_value" feature="{$ID}" product="{product attr="id"}"}
<meta itemprop="productID" content="isbn:{$TITLE}"> <meta itemprop="productID" content="isbn:{$TITLE}">
{/loop} {/loop}
{/loop} {/loop}
*} *}
<section id="product-gallery"> <section id="product-gallery">
{ifloop rel="image.main"} {ifloop rel="image.main"}
<figure class="product-image"> <figure class="product-image">
@@ -108,7 +110,7 @@
<h1 class="name"><span itemprop="name">{$TITLE}</span><span id="pse-name" class="pse-name"></span></h1> <h1 class="name"><span itemprop="name">{$TITLE}</span><span id="pse-name" class="pse-name"></span></h1>
{if $REF}<span itemprop="sku" class="sku">{intl l='Ref.'}: <span id="pse-ref">{$REF}</span></span>{/if} {if $REF}<span itemprop="sku" class="sku">{intl l='Ref.'}: <span id="pse-ref">{$REF}</span></span>{/if}
{loop name="brand_info" type="brand" product="{$ID}"} {loop name="brand_info" type="brand" product="{$ID}" limit="1"}
<p><a href="{$URL}" title="{intl l="More information about this brand"}"><span itemprop="brand">{$TITLE}</span></a></p> <p><a href="{$URL}" title="{intl l="More information about this brand"}"><span itemprop="brand">{$TITLE}</span></a></p>
{/loop} {/loop}
@@ -206,7 +208,6 @@
{strip} {strip}
{capture "additional"} {capture "additional"}
{ifloop rel="feature_info"} {ifloop rel="feature_info"}
<ul> <ul>
{loop name="feature_info" type="feature" product="{$ID}"} {loop name="feature_info" type="feature" product="{$ID}"}
{ifloop rel="feature_value_info"} {ifloop rel="feature_value_info"}
@@ -220,14 +221,13 @@
{/ifloop} {/ifloop}
{/loop} {/loop}
</ul> </ul>
{/ifloop} {/ifloop}
{/capture} {/capture}
{/strip} {/strip}
{strip} {strip}
{capture "brand_info"} {capture "brand_info"}
{loop name="brand_info" type="brand" product="{$ID}"} {loop name="brand_info" type="brand" product="{$ID}" limit="1"}
<p><strong><a href="{$URL}">{$TITLE}</a></strong></p> <p><strong><a href="{$URL}">{$TITLE}</a></strong></p>
{loop name="brand.image" type="image" source="brand" id={$LOGO_IMAGE_ID} width=218 height=146 resize_mode="borders"} {loop name="brand.image" type="image" source="brand" id={$LOGO_IMAGE_ID} width=218 height=146 resize_mode="borders"}
@@ -295,6 +295,7 @@
{/loop} {/loop}
{$pse[$ID]["combinations"]=$pse_combination} {$pse[$ID]["combinations"]=$pse_combination}
{/loop} {/loop}
<script type="text/javascript"> <script type="text/javascript">
// Product sale elements // Product sale elements
var PSE_FORM = true; var PSE_FORM = true;
@@ -309,8 +310,6 @@
var PSE_COMBINATIONS = {$combination_label|json_encode nofilter}; var PSE_COMBINATIONS = {$combination_label|json_encode nofilter};
var PSE_COMBINATIONS_VALUE = {$combination_values|json_encode nofilter}; var PSE_COMBINATIONS_VALUE = {$combination_values|json_encode nofilter};
</script> </script>
{if $pse_count > 1}
{/if}
</article><!-- /#product --> </article><!-- /#product -->
@@ -329,9 +328,12 @@
{/loop} {/loop}
</div><!-- /.main --> </div><!-- /.main -->
{else}
<div class="main">
<article id="content-main" class="col-main" role="main" aria-labelledby="main-label">
{include file="includes/empty.html"}
</article>
</div><!-- /.layout -->
{/if}
{/block} {/block}
{block name="javascript-initialization"}
{/block}