From 09c124c6ae1b0998c8bb50f1ddbaf6afdb204e9b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julien=20Chans=C3=A9aume?= <jchanseaume@openstudio.fr>
Date: Thu, 31 Jul 2014 14:22:15 +0200
Subject: [PATCH] optimized templates, UI

---
 templates/frontOffice/default/category.html   |  57 +++---
 templates/frontOffice/default/content.html    |  48 +++--
 templates/frontOffice/default/folder.html     | 164 ++++++++++--------
 .../frontOffice/default/includes/empty.html   |  10 ++
 templates/frontOffice/default/product.html    |  56 +++---
 5 files changed, 200 insertions(+), 135 deletions(-)
 create mode 100644 templates/frontOffice/default/includes/empty.html

diff --git a/templates/frontOffice/default/category.html b/templates/frontOffice/default/category.html
index 6a0d31853..d5eecbec3 100644
--- a/templates/frontOffice/default/category.html
+++ b/templates/frontOffice/default/category.html
@@ -1,39 +1,52 @@
 {extends file='layout.tpl'}
 
+{block name="init"}
+{$category_id={category attr="id"}}
+{/block}
+
+
 {* Body Class *}
 {block name="body-class"}page-category{/block}
 
 {* Page Title *}
 {block name='no-return-functions' append}
-    {loop name="category.seo.title" type="category" current="yes"}
-    {$page_title = {$META_TITLE}}
+{if $category_id}
+    {loop name="category.seo.title" type="category" id=$category_id limit="1"}
+        {$page_title = {$META_TITLE}}
     {/loop}
+{/if}
 {/block}
 
 {* Meta *}
 {block name="meta"}
-    {loop name="category.seo.meta" type="category" category="{category attr="id"}"}
-    {include file="includes/meta-seo.html"}
+{if $category_id}
+    {loop name="category.seo.meta" type="category" id=$category_id limit="1"}
+        {include file="includes/meta-seo.html"}
     {/loop}
+{/if}
 {/block}
 
 {* 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"}"}" />
+{/if}
 {/block}
 
 {* Breadcrumb *}
 {block name='no-return-functions' append}
+{if $category_id}
     {$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}]}
     {/loop}
+{/if}
 {/block}
 
 {* Content *}
 {block name="main-content"}
 
-    {$category_id={category attr="id"}}
+
     {$limit={$smarty.get.limit|default:8}}
     {$product_page={$smarty.get.page|default:1}}
     {$product_order={$smarty.get.order|default:'alpha'}}
@@ -43,21 +56,21 @@
 
             {if #category_display_detail# && $category_id}
             <section class="category-description">
-                {loop name="category.description" type="category" id={$category_id} }
-                <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"}
-                <p><img itemprop="image" src="{$IMAGE_URL}" alt="{$TITLE}"></p>
-                {/loop}
-                {if $DESCRIPTION}
-                <div class="description">
-                    {$DESCRIPTION nofilter}
-                </div>
-                {/if}
-                {if $POSTSCRIPTUM}
-                <small class="postscriptum">
-                    {$POSTSCRIPTUM}
-                </small>
-                {/if}
+                {loop name="category.description" type="category" id={$category_id} limit="1" }
+                    <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"}
+                    <p><img itemprop="image" src="{$IMAGE_URL}" alt="{$TITLE}"></p>
+                    {/loop}
+                    {if $DESCRIPTION}
+                    <div class="description">
+                        {$DESCRIPTION nofilter}
+                    </div>
+                    {/if}
+                    {if $POSTSCRIPTUM}
+                    <small class="postscriptum">
+                        {$POSTSCRIPTUM}
+                    </small>
+                    {/if}
                 {/loop}
             </section>
             <hr/>
@@ -80,7 +93,7 @@
             {/if}
 
             {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="sorter-container">
                     <span class="amount">{if ($amount > 1)}{intl l="%nb Items" nb="{$amount}"}{else}{intl l="%nb Item" nb="{$amount}"}{/if}</span>
diff --git a/templates/frontOffice/default/content.html b/templates/frontOffice/default/content.html
index d6968918f..18449fba3 100644
--- a/templates/frontOffice/default/content.html
+++ b/templates/frontOffice/default/content.html
@@ -1,39 +1,48 @@
 {extends file="layout.tpl"}
 
+{block name='init'}
+    {assign var="content_id" value={content attr="id"}}
+{/block}
+
 {* Body Class *}
 {block name="body-class"}page-content{/block}
 
 {* Page Title *}
 {block name='no-return-functions' append}
-    {$content_id={content attr="id"}}
-    {loop name="content.seo.title" type="content" id=$content_id}
-        {$page_title = {$META_TITLE}}
-    {/loop}
+    {if {$content_id}}
+        {loop name="content.seo.title" type="content" id={$content_id} limit="1"}
+            {$page_title = {$META_TITLE}}
+        {/loop}
+    {/if}
 {/block}
 
 {* Meta *}
 {block name="meta"}
-    {loop name="content.seo.meta" type="content" id=$content_id}
-        {include file="includes/meta-seo.html"}
-    {/loop}
+    {if $content_id}
+        {loop name="content.seo.meta" type="content" id=$content_id limit="1"}
+            {include file="includes/meta-seo.html"}
+        {/loop}
+    {/if}
 {/block}
 
 {* Breadcrumb *}
 {block name='no-return-functions' append}
-    {$breadcrumbs = []}
-    {loop type="content" name="content-breadcrumb" id=$content_id}
-        {loop name="folder_path" type="folder-path" folder="{$DEFAULT_FOLDER}"}
+    {if $content_id}
+        {$breadcrumbs = []}
+        {loop type="content" name="content-breadcrumb" id=$content_id limit="1"}
+            {loop name="folder_path" type="folder-path" folder="{$DEFAULT_FOLDER}"}
+                {$breadcrumbs[] = ['title' => {$TITLE}, 'url'=> {$URL}]}
+            {/loop}
             {$breadcrumbs[] = ['title' => {$TITLE}, 'url'=> {$URL}]}
         {/loop}
-        {$breadcrumbs[] = ['title' => {$TITLE}, 'url'=> {$URL}]}
-    {/loop}
+    {/if}
 {/block}
 
 {block name="main-content"}
+{if $content_id}
     <div class="main layout-col-2-left">
-
         <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>
                 {if $CHAPO}
                     <div class="chapo">
@@ -48,14 +57,19 @@
                 {if $POSTSCRIPTUM}
                     <small class="postscriptum">
                         {$POSTSCRIPTUM}
-                    </small>
+                   </small>
                 {/if}
             {/loop}
         </article>
-
         <aside class="col-left" role="complementary" itemscope itemtype="http://schema.org/WPSideBar">
             {include file="includes/asides/articles.html"}
         </aside>
-
     </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}
diff --git a/templates/frontOffice/default/folder.html b/templates/frontOffice/default/folder.html
index c30ed433c..94659fd24 100644
--- a/templates/frontOffice/default/folder.html
+++ b/templates/frontOffice/default/folder.html
@@ -1,29 +1,38 @@
 {extends file="layout.tpl"}
 
+{block name="init"}
+{$folder_id={folder attr="id"}}
+{/block}
+
 {* Body Class *}
 {block name="body-class"}page-folder{/block}
 
 {* Page Title *}
 {block name='no-return-functions' append}
-    {$folder_id={folder attr="id"}}
-    {loop name="folder.seo.title" type="folder" id=$folder_id}
-    {$page_title = {$META_TITLE}}
-    {/loop}
+    {if $folder_id}
+        {loop name="folder.seo.title" type="folder" id=$folder_id limit="1"}
+        {$page_title = {$META_TITLE}}
+        {/loop}
+    {/if}
 {/block}
 
 {* Meta *}
 {block name="meta"}
-    {loop name="folder.seo.meta" type="folder" id="{folder attr="id"}"}
-    {include file="includes/meta-seo.html"}
-    {/loop}
+    {if $folder_id}
+        {loop name="folder.seo.meta" type="folder" id=$folder_id limit="1"}
+            {include file="includes/meta-seo.html"}
+        {/loop}
+    {/if}
 {/block}
 
 {* Breadcrumb *}
 {block name='no-return-functions' append}
-    {$breadcrumbs = []}
-    {loop name="folder_path" type="folder-path" folder="{folder attr="id"}"}
-    {$breadcrumbs[] = ['title' => {$TITLE}, 'url'=> {$URL}]}
-    {/loop}
+    {if $folder_id}
+        {$breadcrumbs = []}
+        {loop name="folder_path" type="folder-path" folder=$folder_id}
+            {$breadcrumbs[] = ['title' => {$TITLE}, 'url'=> {$URL}]}
+        {/loop}
+    {/if}
 {/block}
 
 {block name="feeds"}
@@ -33,69 +42,86 @@
 {* Content *}
 {block name="main-content"}
     <div class="main">
+        <div class="col-main contents-list" role="main" aria-labelledby="main-label">
+        {if $folder_id}
+            {loop name="folder" type="folder" id=$folder_id limit="1"}
+                <h1 id="main-label" class="page-header">{$TITLE}</h1>
+                {if $CHAPO}
+                    <div class="folder-chapo">
+                        {$CHAPO}
+                    </div>
+                {/if}
+                {if $DESCRIPTION}
+                    <div class="folder-description">
+                        {$DESCRIPTION nofilter}
+                    </div>
+                {/if}
 
-        <div class="col-main" role="main" aria-labelledby="main-label">
+                <div id="folder-contents">
+                    <div class="contents">
+                        {ifloop rel="folder_content"}
+                            <ul>
+                                {loop name="folder_content" type="content" folder="$ID"}
+                                    <li class="item">
+                                        <article>
+                                            {ifloop rel="content_thumbnail"}
+                                            <a href="{$URL}" tabindex="-1" class="content-image">
+                                                {loop name="content_thumbnail" type="image" width="369" height="247" content=$ID limit="1"}
+                                                    <img src="{$IMAGE_URL}" alt="{$TITLE}">
+                                                {/loop}
+                                                <span class="mask"></span>
+                                            </a>
+                                            {/ifloop}
 
-        {loop name="folder" type="folder" id="{folder attr="id"}"}
-            <h1 id="main-label" class="page-header">{$TITLE}</h1>
-            {if $CHAPO}
-                <div class="folder-chapo">
-                    {$CHAPO}
-                </div>
-            {/if}
-            {if $DESCRIPTION}
-                <div class="folder-description">
-                    {$DESCRIPTION nofilter}
-                </div>
-            {/if}
+                                            <div class="content-info">
+                                                <h3 class="name"><a href="{$URL}">{$TITLE}</a></h3>
 
-            <div id="folder-contents">
-                <div class="contents">
-                    {ifloop rel="folder_content"}
-                        <ul>
-                            {loop name="folder_content" type="content" folder="$ID"}
-                                <li class="item">
-                                    <article>
-                                        <a href="{$URL}" tabindex="-1" class="content-image">
-                                            {loop name="content_thumbnail" type="image" width="369" height="247" content=$ID limit="1"}
-                                                <img src="{$IMAGE_URL}" alt="{$TITLE}">
-                                            {/loop}
-                                            {elseloop rel="content_thumbnail"}
-                                                {images file='assets/img/280x196.png'}<img src="{$asset_url}" alt="{$TITLE}">{/images}
-                                            {/elseloop}
-                                            <span class="mask"></span>
-                                        </a>
-
-                                        <div class="content-info">
-                                            <h3 class="name"><a href="{$URL}">{$TITLE}</a></h3>
-
-                                            {if $CHAPO}
-                                            <div class="short-description">
-                                               {$CHAPO}
+                                                {if $CHAPO}
+                                                <div class="short-description">
+                                                   {$CHAPO}
+                                                </div>
+                                                {/if}
                                             </div>
-                                            {/if}
-                                        </div>
-                                    </article><!-- /content -->
-                                </li>
-                            {/loop}
-                        </ul>
-                    {/ifloop}
-                    {elseloop  rel="folder_content"}
-                        <div class="folder-warning">
-                            {intl l="No Content in this folder."}
+                                        </article><!-- /content -->
+                                    </li>
+                                {/loop}
+                            </ul>
+                        {/ifloop}
+                        {elseloop  rel="folder_content"}
+                            <div class="folder-warning">
+                                {intl l="No Contents in this folder."}
+                            </div>
+                        {/elseloop}
+                    </div>
+                </div><!-- /#category-products -->
+
+
+                {if $POSTSCRIPTUM}
+                    <small class="folder-postscriptum">
+                        {$POSTSCRIPTUM}
+                    </small>
+                {/if}
+            {/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>
-                    {/elseloop}
-                </div>
-            </div><!-- /#category-products -->
-
-
-            {if $POSTSCRIPTUM}
-                <small class="folder-postscriptum">
-                    {$POSTSCRIPTUM}
-                </small>
-            {/if}
-        {/loop}
-
+                    </article>
+                </li>
+                {/loop}
+            </ul>
+            {/ifloop}
+        {/if}
         </div>
     </div>
 {/block}
diff --git a/templates/frontOffice/default/includes/empty.html b/templates/frontOffice/default/includes/empty.html
new file mode 100644
index 000000000..d73d101ef
--- /dev/null
+++ b/templates/frontOffice/default/includes/empty.html
@@ -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}
\ No newline at end of file
diff --git a/templates/frontOffice/default/product.html b/templates/frontOffice/default/product.html
index 1591bf276..0e4a06c48 100644
--- a/templates/frontOffice/default/product.html
+++ b/templates/frontOffice/default/product.html
@@ -1,18 +1,24 @@
 {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 *}
 {block name="body-class"}page-product{/block}
 
 {* Page Title *}
 {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}}
     {/loop}
 {/block}
 
 {* 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"}
     {/loop}
 {/block}
@@ -20,7 +26,7 @@
 {* Breadcrumb *}
 {block name='no-return-functions' append}
     {$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}"}
             {$breadcrumbs[] = ['title' => {$TITLE}, 'url'=> {$URL}]}
         {/loop}
@@ -30,30 +36,26 @@
 
 {* Content *}
 {block name="main-content"}
-
-    {$product_id={product attr="id"}}
-    {$pse_count=1}
-    {$check_availability={config key="check-available-stock" default="1"}}
-
+    {if $product_id}
     <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">
 
             {$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}"}
                 <meta itemprop="brand" content="{$TITLE}">
             {/loop}
 
-            {*
-
+            {* Add custom feature if needed
             {loop name="isbn.feature" type="feature" product="{$ID}" title="isbn"}
                 {loop name="isbn.value" type="feature_value" feature="{$ID}" product="{product attr="id"}"}
                     <meta itemprop="productID" content="isbn:{$TITLE}">
                 {/loop}
             {/loop}
             *}
+
             <section id="product-gallery">
                 {ifloop rel="image.main"}
                 <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>
                     {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>
                     {/loop}
 
@@ -206,7 +208,6 @@
             {strip}
                 {capture "additional"}
                     {ifloop rel="feature_info"}
-
                         <ul>
                             {loop name="feature_info" type="feature" product="{$ID}"}
                             {ifloop rel="feature_value_info"}
@@ -220,14 +221,13 @@
                             {/ifloop}
                             {/loop}
                         </ul>
-
                     {/ifloop}
                 {/capture}
             {/strip}
 
             {strip}
                 {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>
 
                         {loop name="brand.image" type="image" source="brand" id={$LOGO_IMAGE_ID} width=218 height=146 resize_mode="borders"}
@@ -295,22 +295,21 @@
     {/loop}
     {$pse[$ID]["combinations"]=$pse_combination}
 {/loop}
+
 <script type="text/javascript">
     // Product sale elements
     var PSE_FORM = true;
     var PSE_COUNT = {$pse_count};
     {if $check_availability}
         var PSE_CHECK_AVAILABILITY = true;
-        {else}
-        var PSE_CHECK_AVAILABILITY = false;
-        {/if};
-            var PSE_DEFAULT_AVAILABLE_STOCK = {config key="default-available-stock" default="100"};
-        var PSE = {$pse|json_encode nofilter};
+    {else}
+    var PSE_CHECK_AVAILABILITY = false;
+    {/if};
+    var PSE_DEFAULT_AVAILABLE_STOCK = {config key="default-available-stock" default="100"};
+    var PSE = {$pse|json_encode nofilter};
     var PSE_COMBINATIONS = {$combination_label|json_encode nofilter};
     var PSE_COMBINATIONS_VALUE = {$combination_values|json_encode nofilter};
 </script>
-{if $pse_count > 1}
-{/if}
 
         </article><!-- /#product -->
 
@@ -329,9 +328,12 @@
        {/loop}
 
     </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 name="javascript-initialization"}
-
-
-{/block}