On rajoute des infos dans single-products (les pictos)

templates/frontOffice/custom/assets/dist/css/custom.min.css

@@ -1 +1 @@
-.btn,.tag-produit{border-radius:5px}@font-face{font-family:sofia_prolight;src:url(../fonts/sofiapro/sofiapro-light-webfont.woff2) format('woff2'),url(../fonts/sofiapro/sofiapro-light-webfont.woff) format('woff');font-weight:400;font-style:normal}#product-details .product-info .sku,aside.col-left,div.product-options,footer.footer-info,section.category-description,ul.pager{display:none}html{font-family:sofia_prolight,sans-serif!important}#products-new .overlay:after,#products-offer .overlay:after,#products-upsell .overlay:after,body{font-family:sofia_prolight,'Open Sans',sans-serif!important}div.container{width:90%!important}@media (min-width:992px){.header__main{width:90%}}@media (min-width:768px){.header__content{flex-direction:column}}.header__content{display:flex}.header__main{align-items:center;display:flex;flex-direction:row;justify-content:space-between}.header__secondary{display:inline-flex}.overlay:before{background-color:rgba(128,189,138,.4)}.navbar-default{background-color:transparent}.navbar li>a.home:before{display:none}.navbar li{font-size:1.72rem}.nav>li{text-transform:uppercase}.navbar-customer{display:flex;flex-direction:column;text-align:center}#search-button:before,address.adr span.street-address,article.col-main div#google-map{display:none}.navbar-customer>li>a{text-transform:none}.header__content .container-fluid{padding-left:0;padding-right:0}.navbar-form .form-control{width:150px}.navbar-form{margin:auto}.logo-boutique{width:160px}.navbar{margin-bottom:0}.glyphicon,a{color:#95c11e}.btn{border-color:#95c11e;border-left:1px solid #95c11e}.btn-default{color:#3c3c3b;background-color:#fff}.btn-default:active,.btn-default:focus,.btn-default:hover{color:#fff;background-color:#3c3c3b;text-decoration:none}.btn-primary{background-color:#95c11e;color:#fff}.btn-primary:active,.btn-primary:focus,.btn-primary:hover{background-color:#fff;border-color:#95c11e;color:#95c11e}.btn-primary[disabled]:focus,.btn-primary[disabled]:hover{background-color:#95c11e;border-color:#95c11e;color:#fff}.btn-link:focus,.btn-link:hover{color:#95c11e}.navbar-default .navbar-nav>li>a{color:#3c3c3b}.nav>li>a:focus,.nav>li>a:hover,.navbar-default .navbar-nav>.active>a,.navbar-default .navbar-nav>.active>a:focus,.navbar-default .navbar-nav>.active>a:hover,.navbar-default .navbar-nav>li>a:focus,.navbar-default .navbar-nav>li>a:hover{background-color:#95c11e;color:#fff}.breadcrumb{text-align:center;font-size:large;margin-bottom:30px}.checkout-progress .btn-step.active{background:#95c11e}.toolbar .amount{color:#95c11e}.grid #category-products .item>article .product-info .name{height:1.5em}.product-title,.product-title:active,.product-title:hover{text-decoration:none;color:#3c3c3b}.price,.table-cart tbody td.subprice .price,.table-cart thead th.subprice,.table-order tbody td.subprice .price,.table-order thead th.subprice{color:#95c11e}.pagination>.active>a,.pagination>.active>a:focus,.pagination>.active>a:hover,.pagination>.active>span,.pagination>.active>span:focus,.pagination>.active>span:hover{background-color:#95c11e;border-color:#95c11e}.products-heading{text-transform:uppercase;text-align:center}.products-heading>h2{color:#3c3c3b;font-weight:900}.fa-cart-plus,.fa-user,.glyphicon-search{font-size:2rem!important}#search-button{padding-top:6px}.footer-container .footer-block{background-color:rgba(128,189,138,.08)}.block.block-contact .block-content ul>li:before{color:#95c11e}.block.block-contact .block-content ul>li.contact-address:before{font-size:26px}.block .block-title{color:#3c3c3b}.block .block-content .block-subtitle,.block-default .block-content li:before{color:#95c11e}.boutons-plusmoins{display:inline-grid!important;margin-right:20px}.bouton-moins,.bouton-plus{font-family:FontAwesome;content:"f067"}.tag-produit{transform:rotate(-10deg);padding:0 5px;text-align:center;position:absolute;z-index:300;bottom:5px;right:10px}.tag-bio{background-color:#95c11e;color:#fff}.tag-local{background-color:red;color:#fff}
+.btn,.tag-produit{border-radius:5px}@font-face{font-family:sofia_prolight;src:url(../fonts/sofiapro/sofiapro-light-webfont.woff2) format('woff2'),url(../fonts/sofiapro/sofiapro-light-webfont.woff) format('woff');font-weight:400;font-style:normal}#product-details .product-info .sku,aside.col-left,div.product-options,footer.footer-info,section.category-description,ul.pager{display:none}html{font-family:sofia_prolight,sans-serif!important}#products-new .overlay:after,#products-offer .overlay:after,#products-upsell .overlay:after,body{font-family:sofia_prolight,'Open Sans',sans-serif!important}div.container{width:90%!important}@media (min-width:992px){.header__main{width:90%}}@media (min-width:768px){.header__content{flex-direction:column}}.header__content{display:flex}.header__main{align-items:center;display:flex;flex-direction:row;justify-content:space-between}.header__secondary{display:inline-flex}.overlay:before{background-color:rgba(128,189,138,.4)}.navbar-default{background-color:transparent}.navbar li>a.home:before{display:none}.navbar li{font-size:1.72rem}.nav>li{text-transform:uppercase}.navbar-customer{display:flex;flex-direction:column;text-align:center}#search-button:before,address.adr span.street-address,article.col-main div#google-map{display:none}.navbar-customer>li>a{text-transform:none}.header__content .container-fluid{padding-left:0;padding-right:0}.navbar-form .form-control{width:150px}.navbar-form{margin:auto}.logo-boutique{width:160px}.navbar{margin-bottom:0}.glyphicon,a{color:#95c11e}.btn{border-color:#95c11e;border-left:1px solid #95c11e}.btn-default{color:#3c3c3b;background-color:#fff}.btn-default:active,.btn-default:focus,.btn-default:hover{color:#fff;background-color:#3c3c3b;text-decoration:none}.btn-primary{background-color:#95c11e;color:#fff}.btn-primary:active,.btn-primary:focus,.btn-primary:hover{background-color:#fff;border-color:#95c11e;color:#95c11e}.btn-primary[disabled]:focus,.btn-primary[disabled]:hover{background-color:#95c11e;border-color:#95c11e;color:#fff}.btn-link:focus,.btn-link:hover{color:#95c11e}.navbar-default .navbar-nav>li>a{color:#3c3c3b}.nav>li>a:focus,.nav>li>a:hover,.navbar-default .navbar-nav>.active>a,.navbar-default .navbar-nav>.active>a:focus,.navbar-default .navbar-nav>.active>a:hover,.navbar-default .navbar-nav>li>a:focus,.navbar-default .navbar-nav>li>a:hover{background-color:#95c11e;color:#fff}.breadcrumb{text-align:center;font-size:large;margin-bottom:30px}.checkout-progress .btn-step.active{background:#95c11e}.toolbar .amount{color:#95c11e}.grid #category-products .item>article .product-info .name{height:1.5em}.product-title,.product-title:active,.product-title:hover{text-decoration:none;color:#3c3c3b}.price,.table-cart tbody td.subprice .price,.table-cart thead th.subprice,.table-order tbody td.subprice .price,.table-order thead th.subprice{color:#95c11e}.pagination>.active>a,.pagination>.active>a:focus,.pagination>.active>a:hover,.pagination>.active>span,.pagination>.active>span:focus,.pagination>.active>span:hover{background-color:#95c11e;border-color:#95c11e}.products-heading{text-transform:uppercase;text-align:center}.products-heading>h2{color:#3c3c3b;font-weight:900}.fa-cart-plus,.fa-user,.glyphicon-search{font-size:2rem!important}#search-button{padding-top:6px}.footer-container .footer-block{background-color:rgba(128,189,138,.08)}.block.block-contact .block-content ul>li:before{color:#95c11e}.block.block-contact .block-content ul>li.contact-address:before{font-size:26px}.block .block-title{color:#3c3c3b}.block .block-content .block-subtitle,.block-default .block-content li:before{color:#95c11e}.tag-produit{transform:rotate(-10deg);padding:0 5px;text-align:center;position:absolute;z-index:300;bottom:5px;right:10px}.tag-bio{background-color:#95c11e;color:#fff}.tag-local{background-color:red;color:#fff}.product-provenance{text-align:center;line-height:1rem;padding:5px 0 2px;border:1px solid #95c11e;border-radius:8px}.texte-provenance{color:#95c11e}.inline-flex{display:inline-flex;flex-wrap:nowrap;align-items:center;margin-left:5px}.table-pictos{margin-bottom:0!important}.table-pictos td.ligne{border:none!important;vertical-align:baseline!important}.image-auxbieauxlegumes{width:30px;height:auto}.bio{background-color:#95c11e;color:#fff;padding:0 2px}

templates/frontOffice/custom/assets/src/css/custom.css

@@ -238,6 +238,7 @@ article.col-main div#google-map {
     color: #95c11e;
 }
 
+/*
 .boutons-plusmoins {
     display: inline-grid !important;
     margin-right: 20px;
@@ -250,7 +251,7 @@ article.col-main div#google-map {
     font-family: FontAwesome;
     content: "f067";
 }
-
+*/
 .tag-produit {
     transform: rotate(-10deg);
     padding: 0 5px;
@@ -269,3 +270,62 @@ article.col-main div#google-map {
     background-color: red;
     color: white;
 }
+
+/*
+.titre-info-complementaire {
+    font-size: 2.2rem;
+    font-weight: 900;
+    color: #95c11e;
+}
+.titre-info-complementaire:after {
+    font-family: "FontAwesome";
+    content: " \f067";
+}
+.titre-info-complementaire:hover:after {
+    font-family: "FontAwesome";
+    content: " \f068";
+}
+
+.texte-info-complementaire {
+    font-size: 1.8rem;
+    display: none;
+}
+
+.info-complementaire:hover > .texte-info-complementaire {
+    display: block;
+}
+*/
+
+.product-provenance {
+    text-align: center;
+    line-height: 1rem;
+    padding: 5px 0 2px 0;
+    border: 1px solid #95c11e;
+    border-radius: 8px;
+}
+.texte-provenance {
+    color: #95c11e;
+}
+
+.inline-flex {
+    display: inline-flex;
+    flex-wrap: nowrap;
+    align-items: center;
+    margin-left: 5px;
+}
+.table-pictos {
+    margin-bottom: 0 !important;
+}
+.table-pictos td.ligne {
+    border: none !important;
+    vertical-align: baseline !important;
+}
+.image-auxbieauxlegumes {
+    width: 30px;
+    height: auto;
+}
+.bio {
+    background-color: #95c11e;
+    color: white;
+    padding: 0 2px;
+}

templates/frontOffice/custom/category.html

@@ -108,7 +108,7 @@
                     <div class="products-content">
                         <ul class="list-unstyled row">
                             {loop type="product" name="product_list" category=$category_id limit=$limit page=$product_page order=$product_order}
-                                {include file="includes/single-product.html" product_id=$ID hasBtn=false hasDescription=true hasQuickView=false width="218" height="146"}
+                                {include file="includes/single-product.html" product_id=$ID hasBtn=false hasDescription=false hasQuickView=false width="218" height="146"}
                             {/loop}
                         </ul>
                     </div>

templates/frontOffice/custom/includes/pictos.html

@@ -0,0 +1,32 @@
+<div class="product-pictos col-sm-8">
+  <table class="table table-pictos">
+    <tr>
+      {loop name="features-list" type="feature" product=$product_id}
+        {if $TITLE|strstr:"Pictogrammes"}
+          {loop name="feature-values-list" type="feature_value" product=$product_id feature={$ID}}
+            {assign var="largeurCol" value=12/{$LOOP_TOTAL}}
+            <td class="col-sm-{$largeurCol} ligne">
+              {if $TITLE eq "Français"}
+                 <img src="{image file='assets/src/img/flags/fr.png'}" alt="{$TITLE}" title="Produit français"/>
+              {else}
+                {if $TITLE eq "AuxBieauxLegumes"}
+                  <img src="{image file='assets/src/img/flags/favicon.ico'}" alt="{$TITLE}" title="Nous cultivons nous même ce produit" class="image-auxbieauxlegumes"/>
+                {else}
+                  {if $TITLE eq "Local"}
+                  <img src="{image file='assets/src/img/flags/logo-npdc.png'}" alt="{$TITLE}" title="Produit local" class="image-auxbieauxlegumes"/>
+                  {else}
+                    {if $TITLE eq "Bio"}
+                       <span class="bio">{$TITLE}</span>
+                    {else}
+                       {$TITLE}
+                    {/if}
+                 {/if}
+              {/if}
+            {/if}
+            </td>
+          {/loop}
+        {/if}
+      {/loop}
+    </tr>
+  </table>
+</div>

templates/frontOffice/custom/includes/single-product.html

@@ -9,17 +9,15 @@
        {assign var="product_id" value=$ID}
     {/if}
 
-    {assign var="IS_BIO" value=false}
+    {assign var="_PROVENANCE" value=""}
-    {assign var="IS_LOCAL" value=false}
     {loop name="features-list" type="feature" product=$product_id}
-        {if $TITLE|strstr:"Locaux"}{assign var="IS_LOCAL" value=true}{/if}
+        {if $TITLE|strstr:"Provenance"}
-        {if $TITLE|strstr:"Audomarois"}{assign var="IS_LOCAL" value=true}{/if}
             {loop name="feature-values-list" type="feature_value" product=$product_id feature={$ID}}
-            {if $TITLE|strstr:"Bio"}{assign var="IS_BIO" value=true}{/if}
+                {assign var="_PROVENANCE" value="$TITLE"}
             {/loop}
+        {/if}
     {/loop}
 
-
     <article class="row" itemscope itemtype="http://schema.org/Product">
         {hook name="singleproduct.top" product="{$product_id}"}
 
@@ -31,21 +29,18 @@
                 <img itemprop="image" src="{image file='assets/dist/img/218x146.png'}" class="img-responsive" alt="{$productTitle}">
             {/elseloop}
         </a>
-        <div class="product-info col-sm-6">
+        <div class="product-info col-sm-12">
             <a href="{$URL nofilter}" class="product-title"><h2 class="name"><span itemprop="name">{$productTitle}</span></h2></a>
             {if $hasDescription}
             <div class="description" itemprop="description">
                 <p>{$DESCRIPTION nofilter}</p>
             </div>
             {/if}
+        </div>
 
-            {if $IS_BIO}
+        <div class="product-provenance col-sm-12">
-            <span class="tag-produit tag-bio">{intl l="Produit bio"}</span>
+            <label class="label-provenance">{intl l="Provenance"}&nbsp;:&nbsp;</label>
-            {/if}
+            <span class="texte-provenance">{if $_PROVENANCE ne ""}{$_PROVENANCE}{else}<i>{intl l="Non précisé"}</i>{/if}</span>
-            {if $IS_LOCAL}
-            <span class="tag-produit tag-local">{intl l="Produit local"}</span>
-            {/if}
-
         </div>
 
         {* Stock *}
@@ -58,6 +53,8 @@
             {/if}
         {/if}
 
+        <div class="row inline-flex">
+
             <div class="product-price col-sm-3">
                 <div class="price-container row" itemprop="offers" itemscope itemtype="http://schema.org/Offer">
                     <meta itemprop="category" content="{category attr="title"}">
@@ -134,6 +131,7 @@
                     {/if}
                 </div>
 
+
                 {if $hasBtn == true}
                     {if $hasSubmit == true && $current_stock_content == "in_stock"}
                         {form name="thelia.cart.add" }
@@ -184,6 +182,10 @@
                 {/if}
             </div>
 
+            {include file="includes/pictos.html" product_id=$ID}
+
+        </div>
+
         {hook name="singleproduct.bottom" product={$product_id}}
 
     </article><!-- /product -->

templates/frontOffice/custom/product.html

@@ -125,6 +125,7 @@
                         <div class="item active">
                             <ul class="list-inline">
                                 {loop name="image.carousel" type="image" product={$ID} width="560" height="445" resize_mode="borders" limit="5"}
+                                    {if $LOOP_COUNT > 1}
                                     <li>
                                         <a href="{$IMAGE_URL nofilter}" class="thumbnail {if $LOOP_COUNT == 1}active{/if}">
                                             {loop type="image" name="image.thumbs" id={$ID} product="$OBJECT_ID" width="118" height="85" resize_mode="borders"}
@@ -132,6 +133,7 @@
                                             {/loop}
                                         </a>
                                     </li>
+                                    {/if}
                                 {/loop}
                             </ul>
                         </div>
@@ -370,13 +372,31 @@
                 {/capture}
             {/strip}
 
-            <section id="product-tabs" class="col-sm-12">
+            {strip}
+                {capture "associated_content"}
+                    {ifloop rel="ac-loop"}
+                    <ul>
+                        {loop name="ac-loop" type="associated_content" product=$product_id}
+                            {loop type="content" name="ac-content-loop" id=$CONTENT_ID}
+                            <div class="description">
+                                {$DESCRIPTION nofilter}
+                            </div>
+                            {/loop}
+                        {/loop}
+                    </ul>
+                    {/ifloop}
+                {/capture}
+            {/strip}
+
+            <section id="product-tabs" class="col-sm-6">
                 {hookblock name="product.additional" product=$product_id fields="id,class,title,content"}
                 <ul class="nav nav-tabs" role="tablist">
                     <li class="active" role="presentation"><a id="tab1" href="#description" data-toggle="tab" role="tab">{intl l="Description"}</a></li>
                     {if $smarty.capture.additional ne ""}<li role="presentation"><a id="tab2" href="#additional" data-toggle="tab" role="tab">{intl l="Additional Info"}</a></li>{/if}
                     {if $smarty.capture.brand_info ne ""}<li role="presentation"><a id="tab3" href="#brand_info" data-toggle="tab" role="tab">{intl l="Brand information"}</a></li>{/if}
                     {if $smarty.capture.document ne ""}<li role="presentation"><a id="tab4" href="#document" data-toggle="tab" role="tab">{intl l="Documents"}</a></li>{/if}
+{*                    {if $smarty.capture.associated_content ne ""}<li role="presentation"><a id="tab5" href="#associated_content" data-toggle="tab" role="tab">{intl l="Associated content"}</a></li>{/if}   *}
+
                     {forhook rel="product.additional"}
                         <li role="presentation"><a id="tab{$id}" href="#{$id}" data-toggle="tab" role="tab">{$title}</a></li>
                     {/forhook}
@@ -405,6 +425,11 @@
                         {$content nofilter}
                     </div>
                     {/forhook}
+                    {if $smarty.capture.associated_content ne ""}
+                    <div class="tab-pane" id="associated_content" role="tabpanel" aria-labelledby="tab5">
+                        {$smarty.capture.associated_content nofilter}
+                    </div>
+                    {/if}
                 </div>
                 {/hookblock}
             </section>