On commence à customiser le template frontOffice

local/modules/HookCustomer/templates/frontOffice/custom/main-navbar-secondary.html

@@ -0,0 +1,43 @@
+<ul class="nav navbar-nav navbar-cuqstomer navbar-right">
+    {loop type="auth" name="customer_info_block" role="CUSTOMER"}
+    <li><a href="{url path="/logout"}" class="logout">{intl l="Log out!" d="hookcustomer.fo.default"}</a></li>
+    <li><a href="{url path="/account"}" class="account">{intl l="My Account" d="hookcustomer.fo.default"}</a></li>
+    {/loop}
+    {elseloop rel="customer_info_block"}
+<!--    <li><a href="{url path="/register"}" class="register">{intl l="Register!" d="hookcustomer.fo.default"}</a></li>-->
+    <li class="dropdown">
+        <a href="{url path="/login"}" class="login dropdown-toggle">{intl l="Log In!" d="hookcustomer.fo.default"}</a>
+        <div class="dropdown-menu">
+            {form name="thelia.front.customer.login"}
+            <form id="form-login-mini" action="{url path="/login"}" method="post" {form_enctype}>
+            {form_hidden_fields}
+            {form_field field="success_url"}
+            <input type="hidden" name="{$name}" value="{navigate to="current"}">
+            {/form_field}
+            {form_field field="email"}
+            <div class="form-group group-email">
+                <label for="{$label_attr.for}-mini">{intl l="Email address" d="hookcustomer.fo.default"}</label>
+                <input type="email" name="{$name}" id="{$label_attr.for}-mini" class="form-control input-sm" maxlength="255" aria-required="true" required>
+            </div>
+            {/form_field}
+            {form_field field="password"}
+            <div class="form-group group-password">
+                <label for="{$label_attr.for}-mini">{intl l="Password" d="hookcustomer.fo.default"}</label>
+                <input type="password" name="{$name}" id="{$label_attr.for}-mini" class="form-control input-sm" maxlength="255" aria-required="true" required>
+            </div>
+            {/form_field}
+            {form_field field="account"}
+            <input type="hidden" name="{$name}" value="1">
+            {/form_field}
+            <div class="form-group group-btn">
+                <button type="submit" class="btn btn-login-mini btn-sm btn-primary"><i class="fa fa-sign-in"></i> {intl l="Sign In" d="hookcustomer.fo.default"}</button>
+                <a href="{url path="/register"}" class="btn btn-register-mini btn-default btn-sm"><i class="fa fa-user-plus"></i> {intl l="Register" d="hookcustomer.fo.default"}</a>
+            </div>
+
+            <a href="{url path="/password"}" class="mini-forgot-password">{intl l="Forgot your Password?" d="hookcustomer.fo.default"}</a>
+            </form>
+            {/form}
+        </div>
+    </li>
+    {/elseloop}
+</ul>

local/modules/HookNavigation/templates/frontOffice/custom/main-navbar-primary.html

@@ -0,0 +1,32 @@
+<nav class="navbar navbar-default nav-main" role="navigation" itemscope itemtype="http://schema.org/SiteNavigationElement">
+    <div class="container-fluid">
+        <div class="navbar-header">
+            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-primary">
+                <span class="sr-only">{intl l="Toggle navigation" d="hooknavigation.fo.default"}</span>
+                <span class="icon-bar"></span>
+                <span class="icon-bar"></span>
+                <span class="icon-bar"></span>
+            </button>
+            <a class="navbar-brand visible-xs-block visible-sm-block" href="{navigate to="index"}">{intl l="Categories" d="hooknavigation.fo.default"}</a>
+        </div>
+        <div class="collapse navbar-collapse" id="navbar-primary">
+            <ul class="nav navbar-nav navbar-categories">
+                <li><a href="{navigate to="index"}" class="home">{intl l="Home" d="hooknavigation.fo.default"}</a></li>
+                {loop type="category" name="category.navigation" parent="0" need_count_child="yes"}
+                {if $CHILD_COUNT > 0}
+                    <li class="dropdown">
+                        <a href="{$URL}" class="dropdown-toggle">{$TITLE}</a>
+                        <ul class="dropdown-menu" role="menu">
+                            {loop type="category" name="sub-cat" parent="{$ID}"}
+                                <li><a href="{$URL}">{$TITLE}</a></li>    
+                            {/loop}
+                        </ul>
+                    </li>
+                {else}
+                    <li><a href="{$URL}">{$TITLE}</a></li>
+                {/if}
+                {/loop}
+            </ul>
+        </div>
+    </div>
+</nav>

local/modules/HookSearch/templates/frontOffice/custom/main-navbar-primary.html

@@ -0,0 +1,11 @@
+<div class="search-container navbar-form navbar-left">
+    <form id="form-search" action="{url path="/search"}" method="get" role="search" aria-labelledby="search-label">
+    <label id="search-label" class="sr-only" for="q">{intl l="Search a product" d="hooksearch.fo.default"}</label>
+    <div class="input-group">
+        <input type="search" name="q" id="q" placeholder="{intl l="Search..." d="hooksearch.fo.default"}" class="form-control" autocomplete="off" aria-required="true" required pattern=".{ldelim}2,{rdelim}" title="{intl l="Minimum 2 characters." d="hooksearch.fo.default"}">
+        <div class="input-group-btn">
+            <button type="submit" class="btn btn-search"><i class="fa fa-search"></i> <span class="sr-only">{intl l="Search" d="hooksearch.fo.default"}</span></button>
+        </div>
+    </div>
+    </form>
+</div>

local/modules/HookSearch/templates/frontOffice/custom/main-navbar-secondary.html

@@ -0,0 +1,9 @@
+<div class="search-container navbar-form navbar-left">
+    <form id="form-search" action="{url path="/search"}" method="get" role="search" aria-labelledby="search-label">
+        <label id="search-label" class="sr-only" for="q">{intl l="Search a product" d="hooksearch.fo.default"}</label>
+        <i class="glyphicon glyphicon-search" id="search-icon">
+        <input type="search" name="q" id="q" placeholder="{intl l="Search..." d="hooksearch.fo.default"}" class="form-control" autocomplete="off" aria-required="true" required pattern=".{ldelim}2,{rdelim}" title="{intl l="Minimum 2 characters." d="hooksearch.fo.default"}">
+        </i>
+        {* <button type="submit" class="btn btn-search"><i class="fa fa-search"></i> <span class="sr-only">{intl l="Search" d="hooksearch.fo.default"}</span></button> *}
+    </form>
+</div>

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

@@ -0,0 +1,47 @@
+@media (min-width: 1200px) {
+    .container {
+        width: 1170px;
+    }
+}
+@media (min-width: 992px) {
+    .header__main {
+        width: 95%;
+    }
+}
+@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;
+}
+
+.navbar-default {
+    background-color: transparent;
+}
+
+.navbar li>a.home:before {
+    display: none;
+}
+.nav>li {
+    text-transform: uppercase;
+}
+
+.header__content .container-fluid {
+    padding-left: 0;
+    padding-right: 0;
+}
+.navbar-form .form-control {
+    width: 50px;
+}
+.navbar-form .form-control.large {
+    width: auto;
+}

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

@@ -2989,7 +2989,6 @@ select[multiple].input-lg {
   line-height: 1.42857143;
   border-radius: 3px;
   -webkit-user-select: none;
-  -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
 }
@@ -5052,14 +5051,6 @@ a.thumbnail.active {
 .alert-danger .alert-link {
   color: #843534;
 }
-@-webkit-keyframes progress-bar-stripes {
-  from {
-    background-position: 40px 0;
-  }
-  to {
-    background-position: 0 0;
-  }
-}
 @keyframes progress-bar-stripes {
   from {
     background-position: 40px 0;
@@ -5095,7 +5086,6 @@ a.thumbnail.active {
 }
 .progress.active .progress-bar,
 .progress-bar.active {
-  -webkit-animation: progress-bar-stripes 2s linear infinite;
   animation: progress-bar-stripes 2s linear infinite;
 }
 .progress-bar-success {
@@ -5806,14 +5796,11 @@ button.close {
   outline: 0;
 }
 .modal.fade .modal-dialog {
-  -webkit-transform: translate(0, -25%);
   -ms-transform: translate(0, -25%);
   transform: translate(0, -25%);
-  transition: -webkit-transform 0.3s ease-out;
   transition: transform 0.3s ease-out;
 }
 .modal.in .modal-dialog {
-  -webkit-transform: translate(0, 0);
   -ms-transform: translate(0, 0);
   transform: translate(0, 0);
 }
@@ -6170,29 +6157,23 @@ button.close {
 }
 @media all and (transform-3d), (-webkit-transform-3d) {
   .carousel-inner > .item {
-    transition: -webkit-transform 0.6s ease-in-out;
     transition: transform 0.6s ease-in-out;
-    -webkit-backface-visibility: hidden;
     backface-visibility: hidden;
-    -webkit-perspective: 1000px;
     perspective: 1000px;
   }
   .carousel-inner > .item.next,
   .carousel-inner > .item.active.right {
-    -webkit-transform: translate3d(100%, 0, 0);
     transform: translate3d(100%, 0, 0);
     left: 0;
   }
   .carousel-inner > .item.prev,
   .carousel-inner > .item.active.left {
-    -webkit-transform: translate3d(-100%, 0, 0);
     transform: translate3d(-100%, 0, 0);
     left: 0;
   }
   .carousel-inner > .item.next.left,
   .carousel-inner > .item.prev.right,
   .carousel-inner > .item.active {
-    -webkit-transform: translate3d(0, 0, 0);
     transform: translate3d(0, 0, 0);
     left: 0;
   }
@@ -6684,9 +6665,8 @@ button.close {
   text-rendering: auto;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  -webkit-transform: translate(0, 0);
+  -ms-transform: translate(0, 0);
-      -ms-transform: translate(0, 0);
+      transform: translate(0, 0);
-          transform: translate(0, 0);
 }
 /* makes the font 33% larger relative to the icon container */
 .fa-lg {
@@ -6746,60 +6726,41 @@ button.close {
   margin-left: .3em;
 }
 .fa-spin {
-  -webkit-animation: fa-spin 2s infinite linear;
   animation: fa-spin 2s infinite linear;
 }
 .fa-pulse {
-  -webkit-animation: fa-spin 1s infinite steps(8);
   animation: fa-spin 1s infinite steps(8);
 }
-@-webkit-keyframes fa-spin {
-  0% {
-    -webkit-transform: rotate(0deg);
-    transform: rotate(0deg);
-  }
-  100% {
-    -webkit-transform: rotate(359deg);
-    transform: rotate(359deg);
-  }
-}
 @keyframes fa-spin {
   0% {
-    -webkit-transform: rotate(0deg);
     transform: rotate(0deg);
   }
   100% {
-    -webkit-transform: rotate(359deg);
     transform: rotate(359deg);
   }
 }
 .fa-rotate-90 {
   filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
-  -webkit-transform: rotate(90deg);
   -ms-transform: rotate(90deg);
   transform: rotate(90deg);
 }
 .fa-rotate-180 {
   filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
-  -webkit-transform: rotate(180deg);
   -ms-transform: rotate(180deg);
   transform: rotate(180deg);
 }
 .fa-rotate-270 {
   filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
-  -webkit-transform: rotate(270deg);
   -ms-transform: rotate(270deg);
   transform: rotate(270deg);
 }
 .fa-flip-horizontal {
   filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1);
-  -webkit-transform: scale(-1, 1);
   -ms-transform: scale(-1, 1);
   transform: scale(-1, 1);
 }
 .fa-flip-vertical {
   filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1);
-  -webkit-transform: scale(1, -1);
   -ms-transform: scale(1, -1);
   transform: scale(1, -1);
 }
@@ -6808,8 +6769,7 @@ button.close {
 :root .fa-rotate-270,
 :root .fa-flip-horizontal,
 :root .fa-flip-vertical {
-  -webkit-filter: none;
+  filter: none;
-          filter: none;
 }
 .fa-stack {
   position: relative;
@@ -8595,9 +8555,8 @@ header .header .language-container .currency-switch .select {
     text-rendering: auto;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
-    -webkit-transform: translate(0, 0);
+    -ms-transform: translate(0, 0);
-        -ms-transform: translate(0, 0);
+        transform: translate(0, 0);
-            transform: translate(0, 0);
     content: "\f078";
   }
   .navbar .navbar-cart .dropdown > a:after,
@@ -8957,9 +8916,8 @@ header .header .language-container .currency-switch .select {
   text-rendering: auto;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  -webkit-transform: translate(0, 0);
+  -ms-transform: translate(0, 0);
-      -ms-transform: translate(0, 0);
+      transform: translate(0, 0);
-          transform: translate(0, 0);
   content: "\f071";
   display: block;
   font-size: 2.2em;
@@ -9087,9 +9045,8 @@ a {
   text-rendering: auto;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  -webkit-transform: translate(0, 0);
+  -ms-transform: translate(0, 0);
-      -ms-transform: translate(0, 0);
+      transform: translate(0, 0);
-          transform: translate(0, 0);
   content: "\f105";
 }
 .btn {
@@ -9320,9 +9277,8 @@ a {
   text-rendering: auto;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  -webkit-transform: translate(0, 0);
+  -ms-transform: translate(0, 0);
-      -ms-transform: translate(0, 0);
+      transform: translate(0, 0);
-          transform: translate(0, 0);
   content: "\f078";
 }
 .panel-heading {
@@ -9498,9 +9454,8 @@ a {
   text-rendering: auto;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  -webkit-transform: translate(0, 0);
+  -ms-transform: translate(0, 0);
-      -ms-transform: translate(0, 0);
+      transform: translate(0, 0);
-          transform: translate(0, 0);
   content: "\f071";
   display: block;
   font-size: 2.2em;
@@ -9558,9 +9513,8 @@ a {
   text-rendering: auto;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  -webkit-transform: translate(0, 0);
+  -ms-transform: translate(0, 0);
-      -ms-transform: translate(0, 0);
+      transform: translate(0, 0);
-          transform: translate(0, 0);
   content: "\f054";
   color: #f49a17;
   margin-left: -15px;
@@ -9613,9 +9567,8 @@ a {
   text-rendering: auto;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  -webkit-transform: translate(0, 0);
+  -ms-transform: translate(0, 0);
-      -ms-transform: translate(0, 0);
+      transform: translate(0, 0);
-          transform: translate(0, 0);
   content: "\f068";
 }
 .block-nav .block-content li a.accordion-toggle.collapsed:after {
@@ -9998,9 +9951,8 @@ a.label-delivered:focus {
   text-rendering: auto;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  -webkit-transform: translate(0, 0);
+  -ms-transform: translate(0, 0);
-      -ms-transform: translate(0, 0);
+      transform: translate(0, 0);
-          transform: translate(0, 0);
   content: "\f00d";
   margin-right: .3em;
 }
@@ -10048,7 +10000,6 @@ label {
   content: "\f002";
   color: #fff;
   text-align: center;
-  -webkit-transform: translate(0, 0);
   -ms-transform: translate(0, 0);
   transform: translate(0, 0);
   line-height: 0;
@@ -10063,7 +10014,6 @@ label {
 }
 .overlay:hover:after,
 .overlay:focus:after {
-  -webkit-transform: translate(0, 50%);
   -ms-transform: translate(0, 50%);
   transform: translate(0, 50%);
 }
@@ -10074,9 +10024,8 @@ label {
   text-rendering: auto;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  -webkit-transform: translate(0, 0);
+  -ms-transform: translate(0, 0);
-      -ms-transform: translate(0, 0);
+      transform: translate(0, 0);
-          transform: translate(0, 0);
   content: "\f015";
   color: #c9c9c9;
   font-size: 26px;
@@ -10092,9 +10041,8 @@ label {
   text-rendering: auto;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  -webkit-transform: translate(0, 0);
+  -ms-transform: translate(0, 0);
-      -ms-transform: translate(0, 0);
+      transform: translate(0, 0);
-          transform: translate(0, 0);
   content: "\f007";
   color: #f49a17;
   font-size: 19px;
@@ -10126,9 +10074,8 @@ label {
   text-rendering: auto;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  -webkit-transform: translate(0, 0);
+  -ms-transform: translate(0, 0);
-      -ms-transform: translate(0, 0);
+      transform: translate(0, 0);
-          transform: translate(0, 0);
   content: "\f07a";
   color: #fff;
   font-size: 24px;
@@ -10249,7 +10196,6 @@ td.product .name > a:focus,
   text-decoration: line-through;
 }
 #products-new .products-grid .overlay:after {
-  -webkit-transform: translate(0, 40%);
   -ms-transform: translate(0, 40%);
   transform: translate(0, 40%);
 }
@@ -10465,9 +10411,8 @@ td.product .name > a:focus,
   text-rendering: auto;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  -webkit-transform: translate(0, 0);
+  -ms-transform: translate(0, 0);
-      -ms-transform: translate(0, 0);
+      transform: translate(0, 0);
-          transform: translate(0, 0);
   content: "\f005";
 }
 #product-details .product-promo .sale-period {
@@ -10547,9 +10492,8 @@ td.product .name > a:focus,
   text-rendering: auto;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  -webkit-transform: translate(0, 0);
+  -ms-transform: translate(0, 0);
-      -ms-transform: translate(0, 0);
+      transform: translate(0, 0);
-          transform: translate(0, 0);
   content: "\f002";
   font-size: 30px;
   float: left;
@@ -10617,9 +10561,8 @@ td.product .name > a:focus,
   text-rendering: auto;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  -webkit-transform: translate(0, 0);
+  -ms-transform: translate(0, 0);
-      -ms-transform: translate(0, 0);
+      transform: translate(0, 0);
-          transform: translate(0, 0);
   content: "\f0e0";
   color: #8b8b8b;
   font-size: 18px;
@@ -10659,9 +10602,8 @@ td.product .name > a:focus,
   text-rendering: auto;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  -webkit-transform: translate(0, 0);
+  -ms-transform: translate(0, 0);
-      -ms-transform: translate(0, 0);
+      transform: translate(0, 0);
-          transform: translate(0, 0);
   content: "\f041";
   font-size: 34px;
 }
@@ -10672,9 +10614,8 @@ td.product .name > a:focus,
   text-rendering: auto;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  -webkit-transform: translate(0, 0);
+  -ms-transform: translate(0, 0);
-      -ms-transform: translate(0, 0);
+      transform: translate(0, 0);
-          transform: translate(0, 0);
   content: "\f10b";
   font-size: 30px;
   margin-top: -8px;
@@ -10687,9 +10628,8 @@ td.product .name > a:focus,
   text-rendering: auto;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  -webkit-transform: translate(0, 0);
+  -ms-transform: translate(0, 0);
-      -ms-transform: translate(0, 0);
+      transform: translate(0, 0);
-          transform: translate(0, 0);
   content: "\f0e0";
   font-size: 17px;
   margin-left: 2px;
@@ -10707,9 +10647,8 @@ td.product .name > a:focus,
   text-rendering: auto;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  -webkit-transform: translate(0, 0);
+  -ms-transform: translate(0, 0);
-      -ms-transform: translate(0, 0);
+      transform: translate(0, 0);
-          transform: translate(0, 0);
   content: "\f1d8";
   font-size: 17px;
 }
@@ -10875,9 +10814,8 @@ td.product .name > a:focus,
   text-rendering: auto;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  -webkit-transform: translate(0, 0);
+  -ms-transform: translate(0, 0);
-      -ms-transform: translate(0, 0);
+      transform: translate(0, 0);
-          transform: translate(0, 0);
   content: "\f077";
   color: #f49a17;
   display: block;
@@ -10913,9 +10851,8 @@ td.product .name > a:focus,
   text-rendering: auto;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  -webkit-transform: translate(0, 0);
+  -ms-transform: translate(0, 0);
-      -ms-transform: translate(0, 0);
+      transform: translate(0, 0);
-          transform: translate(0, 0);
   content: "\f078";
   float: left;
   width: 20px;
@@ -10942,9 +10879,8 @@ td.product .name > a:focus,
   text-rendering: auto;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  -webkit-transform: translate(0, 0);
+  -ms-transform: translate(0, 0);
-      -ms-transform: translate(0, 0);
+      transform: translate(0, 0);
-          transform: translate(0, 0);
   content: "\f10b";
   font-size: 30px;
 }
@@ -10955,9 +10891,8 @@ td.product .name > a:focus,
   text-rendering: auto;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  -webkit-transform: translate(0, 0);
+  -ms-transform: translate(0, 0);
-      -ms-transform: translate(0, 0);
+      transform: translate(0, 0);
-          transform: translate(0, 0);
   content: "\f095";
   font-size: 22px;
 }
@@ -10968,9 +10903,8 @@ td.product .name > a:focus,
   text-rendering: auto;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  -webkit-transform: translate(0, 0);
+  -ms-transform: translate(0, 0);
-      -ms-transform: translate(0, 0);
+      transform: translate(0, 0);
-          transform: translate(0, 0);
   content: "\f0e0";
   font-size: 18px;
 }
@@ -11035,7 +10969,6 @@ td.product .name > a:focus,
   margin-bottom: 20px;
   width: 100%;
   height: 350px;
-  -webkit-filter: grayscale(100%);
   -moz-filter: grayscale(100%);
   -ms-filter: grayscale(100%);
   -o-filter: grayscale(100%);
@@ -11057,9 +10990,8 @@ td.product .name > a:focus,
   text-rendering: auto;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  -webkit-transform: translate(0, 0);
+  -ms-transform: translate(0, 0);
-      -ms-transform: translate(0, 0);
+      transform: translate(0, 0);
-          transform: translate(0, 0);
   content: "\f005";
 }
 #sale-details .sale-discount-information .sale-period {
@@ -11073,12 +11005,3 @@ td.product .name > a:focus,
 #sale-details .sale-information .description {
   margin-bottom: 10px;
 }
-
-/*
-.sticky {
-  position: fixed !important;
-  top: 0;
-  width: 100%;
-  z-index: 3000;
-}
-*/

templates/frontOffice/custom/assets/src/js/customJS.js

@@ -0,0 +1,11 @@
+(function($) {
+
+    $('#search-icon').hover(function() {
+        $(".navbar-form .form-control").addClass("large");
+    });
+
+    $('#search-icon').mouseleave(function() {
+        $(".navbar-form .form-control").removeClass("large");
+    });
+
+})(jQuery);

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

@@ -0,0 +1,127 @@
+<li class="item {$colClass|default:"col-md-3"}">
+    {if $PSE_COUNT > 1}
+        {assign var="hasSubmit" value = false}
+    {else}
+        {assign var="hasSubmit" value = true}
+    {/if}
+    {assign var="productTitle" value="{$TITLE}"}
+    {if not $product_id}
+       {assign var="product_id" value=$ID}
+    {/if}
+    <article class="row" itemscope itemtype="http://schema.org/Product">
+        {hook name="singleproduct.top" product="{$product_id}"}
+
+        <a href="{$URL nofilter}" itemprop="url" tabindex="-1" class="product-image{if $hasQuickView == true} product-quickview{/if} overlay col-sm-3">
+            {loop name="product_thumbnail" type="image" product=$product_id width="{$width}" height="{$height}" resize_mode="borders" limit="1"}
+                <img itemprop="image" src="{$IMAGE_URL nofilter}" class="img-responsive" alt="{$productTitle}">
+            {/loop}
+            {elseloop rel="product_thumbnail"}
+                <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">
+            <h2 class="name"><a href="{$URL nofilter}"><span itemprop="name">{$productTitle}</span></a></h2>
+            {if $hasDescription}
+            <div class="description" itemprop="description">
+                <p>{$DESCRIPTION nofilter}</p>
+            </div>
+            {/if}
+        </div>
+
+        {* Stock *}
+        {assign var="current_stock_content" value = "in_stock"}
+        {assign var="current_stock_href" value = "http://schema.org/InStock"}
+        {if {config key="check-available-stock"} != 0}
+            {if $VIRTUAL == 0 && $QUANTITY <= 0}
+                {assign var="current_stock_content" value = "out_stock"}
+                {assign var="current_stock_href" value = "http://schema.org/OutOfStock"}
+            {/if}
+        {/if}
+
+        <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"}">
+                {* Issue #2525 Remove itemCondition need improvement (not used like this) *}
+                {* List of condition : NewCondition, DamagedCondition, UsedCondition, RefurbishedCondition *}
+                {*<meta itemprop="itemCondition" itemscope itemtype="http://schema.org/NewCondition">*}
+                {* List of currency : The currency used to describe the product price, in three-letter ISO format. *}
+                <meta itemprop="priceCurrency" content="{currency attr="symbol"}">
+                <link itemprop="availability" href="{$current_stock_href}" content="{$current_stock_content}" />
+
+                {if $IS_PROMO }
+                    {assign var="combination_count" value={count type="product_sale_elements" promo="1" product=$ID}}
+
+                    {loop type="digressive" name="digressivePrice" product_id=$ID quantity=1}
+                        <span class="special-price col-xs-6"><span itemprop="price" class="price-label" content="{$BEST_TAXED_PRICE}">{intl l="Special Price:"} </span><span class="price">
+                            {if $combination_count > 1}
+                                {intl l="From %price" price={format_money number=$TAXED_PROMO_PRICE}}
+                            {else}
+                                {format_money number=$TAXED_PROMO_PRICE}
+                            {/if}
+                        </span></span>
+                        {if $SHOW_ORIGINAL_PRICE}
+                        <span class="old-price col-xs-6"><span class="price-label">{intl l="Regular Price:"} </span><span class="price">{format_money number=$TAXED_PRICE}</span></span>
+                        {/if}
+                    {/loop}
+                {else}
+                    {loop type="digressive" name="digressivePrice" product_id=$ID quantity=1}
+                    <span class="regular-price col-xs-12"><span itemprop="price" class="price" content="{$TAXED_PRICE}">{format_money number=$TAXED_PRICE}</span></span>
+                    {/loop}
+                {/if}
+            </div>
+
+            {if $hasBtn == true}
+                {if $hasSubmit == true && $current_stock_content == "in_stock"}
+                    {form name="thelia.cart.add" }
+                    <form id="form-product-details{$product_id}" action="{url path="/cart/add" }" method="post" class="form-product">
+                        {form_hidden_fields}
+                        <input type="hidden" name="view" value="product">
+                        <input type="hidden" name="product_id" value="{$product_id}">
+                        {form_field field="append"}
+                            <input type="hidden" name="{$name}" value="1">
+                        {/form_field}
+
+                        {if $form_error}<div class="alert alert-error">{$form_error_message}</div>{/if}
+
+                        {form_field field='product_sale_elements_id'}
+                            <input type="hidden" class="pse-id" name="{$name}" value="{$PRODUCT_SALE_ELEMENT}" {$attr}>
+                        {/form_field}
+                        {form_field field="product"}
+                            <input id="{$label_attr.for}" type="hidden" name="{$name}" value="{$product_id}" {$attr} >
+                        {/form_field}
+
+                        <fieldset class="product-cart form-inline">
+                            {form_field field='quantity'}
+                                <div class="form-group group-qty hide {if $error}has-error{elseif $value != "" && !$error}has-success{/if}">
+                                    <label for="{$label_attr.for}">{$label}</label>
+                                    <input type="number" name="{$name}" id="{$label_attr.for}" class="form-control" value="{$value|default:1}" min="0" required>
+                                    {if $error }
+                                        <span class="help-block"><i class="fa fa-remove"></i> {$message}</span>
+                                    {elseif $value != "" && !$error}
+                                        <span class="help-block"><i class="fa fa"></i></span>
+                                    {/if}
+                                </div>
+                            {/form_field}
+                            <div>
+                                <div class="product-btn">
+                                    <button type="submit" class="btn btn-primary btn-block"><i class="fa fa-shopping-cart"></i> {intl l="Add to cart"}</button>
+                                </div>
+                            </div>
+                        </fieldset>
+                    </form>
+                    {/form}
+                {else}
+                    <div>
+                        <div class="product-btn">
+                            <a href="{$URL nofilter}" class="btn btn-primary btn-block"><i class="fa fa-eye"></i> {intl l="View product"}</a>
+                        </div>
+                    </div>
+                {/if}
+            {/if}
+        </div>
+
+        {hook name="singleproduct.bottom" product={$product_id}}
+
+    </article><!-- /product -->
+</li>

templates/frontOffice/custom/layout.tpl

@@ -72,6 +72,9 @@ GNU General Public License : http://www.gnu.org/licenses/
     {/stylesheets}
 
     *}
+    {stylesheets file='assets/src/css/custom.css'}
+        <link rel="stylesheet" href="{$asset_url}">
+    {/stylesheets}
 
     {hook name="main.stylesheet"}
 
@@ -117,47 +120,27 @@ GNU General Public License : http://www.gnu.org/licenses/
 
     <div class="page" role="document">
 
-        <div class="header-container" itemscope itemtype="http://schema.org/WPHeader">
+        <header class="header" id="header" role="banner">
-            {hook name="main.header-top"}
+            <div class="container">
-            <div class="navbar navbar-default navbar-secondary" itemscope itemtype="http://schema.org/SiteNavigationElement">
+                {hook name="main.header-top"}
-                <div class="container">
 
-                    <div class="navbar-header">
+                    <div class="header__content">
-                        <!-- .navbar-toggle is used as the toggle for collapsed navbar content -->
+                        <div class="header__main">
-                        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".nav-secondary">
+                            <h1 class="logo hidden-xs">
-                            <span class="sr-only">{intl l="Toggle navigation"}</span>
+                                <a href="{navigate to="index"}" title="{$store_name}">
-                            <span class="icon-bar"></span>
+                                    {local_media type="logo"}
-                            <span class="icon-bar"></span>
+                                        <img src="{$MEDIA_URL}" alt="{$store_name}">
-                            <span class="icon-bar"></span>
+                                    {/local_media}
-                        </button>
+                                </a>
-                        <a class="navbar-brand visible-xs" href="{navigate to="index"}">{$store_name}</a>
+                            </h1>
+                            {hook name="main.navbar-primary"}
+                            {hook name="main.navbar-secondary"}
+                        </div>
                     </div>
 
-                    {ifhook rel="main.navbar-secondary"}
+                {hook name="main.header-bottom"}
-                        {* Place everything within .nav-collapse to hide it until above 768px *}
-                        <nav class="navbar-collapse collapse nav-secondary" role="navigation" aria-label="{intl l="Secondary Navigation"}">
-                            {hook name="main.navbar-secondary"}
-                        </nav>
-                    {/ifhook}
-                </div>
             </div>
-
+        </header>
-
-            <header class="container" role="banner">
-                <div class="header row">
-                    <h1 class="logo container hidden-xs">
-                        <a href="{navigate to="index"}" title="{$store_name}">
-                            {local_media type="logo"}
-                                <img src="{$MEDIA_URL}" alt="{$store_name}">
-                            {/local_media}
-                        </a>
-                    </h1>
-                    {hook name="main.navbar-primary"}
-                </div>
-            </header><!-- /.header -->
-
-            {hook name="main.header-bottom"}
-        </div><!-- /.header-container -->
 
         {hook name="main.header-bottom"}
 
@@ -306,7 +289,9 @@ GNU General Public License : http://www.gnu.org/licenses/
     <!-- Custom scripts -->
     <script src="{javascript file='assets/dist/js/thelia.min.js'}"></script>
 
-{*    <script>*}
+    <script src="{javascript file='assets/src/js/customJS.js'}"></script>
+
+    {*    <script>*}
 {*        var header = $(".nav-main");*}
 {*        var sticky = header[0].offsetTop;*}
 

templates/frontOffice/custom/product.html

@@ -0,0 +1,487 @@
+{extends file="layout.tpl"}
+
+{block name="init"}
+    {$product_id={product attr="id"}}
+    {$pse_count=1}
+    {$product_virtual={product attr="virtual"}}
+    {$check_availability={config key="check-available-stock" default="1"}}
+
+    {$pse=[]}
+    {$combination_label=[]}
+    {$combination_values=[]}
+    {$default_pse=[]}
+    {$gtins=[8,12,13,14]}
+    {loop name="pse" type="product_sale_elements" product=$product_id}
+        {if $IS_PROMO}
+            {$finalPrice=$TAXED_PROMO_PRICE}
+        {else}
+            {$finalPrice=$TAXED_PRICE}
+        {/if}
+        {$pse[$ID]=[
+            "id" => $ID,
+            "isDefault" => $IS_DEFAULT,
+            "isPromo" => $IS_PROMO,
+            "isNew" => $IS_NEW,
+            "ref" => $REF,
+            "ean" => $EAN_CODE,
+            "quantity" => $QUANTITY,
+            "price" => {format_money number=$TAXED_PRICE},
+            "promo" => {format_money number=$TAXED_PROMO_PRICE},
+            "finalPrice" => $finalPrice
+        ]}
+        {if $IS_DEFAULT}
+            {$default_pse=$pse[$ID]}
+        {/if}
+        {$pse_combination=[]}
+        {loop name="combi" type="attribute_combination" product_sale_elements="$ID" order="manual"}
+            {if ! $combination_label[$ATTRIBUTE_ID]}
+                {$combination_label[$ATTRIBUTE_ID]=["name" => {$ATTRIBUTE_TITLE}, "values" => []]}
+            {/if}
+            {if ! $combination_values[$ATTRIBUTE_AVAILABILITY_ID]}
+                {$combination_label[$ATTRIBUTE_ID]["values"][]=$ATTRIBUTE_AVAILABILITY_ID}
+                {$combination_values[$ATTRIBUTE_AVAILABILITY_ID]=[{$ATTRIBUTE_AVAILABILITY_TITLE}, $ATTRIBUTE_ID]}
+            {/if}
+            {$pse_combination[]=$ATTRIBUTE_AVAILABILITY_ID}
+        {/loop}
+        {$pse[$ID]["combinations"]=$pse_combination}
+        {$pse_images=[]}
+        {loop name="pse_images" type="product-sale-elements-image" product_sale_elements_id="$ID"}
+            {$pse_images[]=$PRODUCT_IMAGE_ID}
+        {/loop}
+        {$pse[$ID]["images"]=$pse_images}
+    {/loop}
+{/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_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_id limit="1" with_prev_next_info="1"}
+    {include file="includes/meta-seo.html"}
+    {/loop}
+{/block}
+
+{* Breadcrumb *}
+{block name='no-return-functions' append}
+    {$breadcrumbs = []}
+    {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 nofilter}]}
+        {/loop}
+        {$breadcrumbs[] = ['title' => {$TITLE}, 'url'=> {$URL nofilter}]}
+    {/loop}
+{/block}
+
+{* Content *}
+{block name="main-content"}
+    {if $product_id}
+    <div class="main">
+        {loop name="product.details" type="product" id=$product_id limit="1" with_prev_next_info="1" with_prev_next_visible="1"}
+        <article id="product" class="col-main row" role="main" itemscope itemtype="http://schema.org/Product">
+            {* Stock *}
+            {assign var="current_stock_content" value="in_stock"}
+            {assign var="current_stock_href" value="http://schema.org/InStock"}
+            {if ($check_availability != 0 && $VIRTUAL == 0 && $QUANTITY <= 0)}
+                {assign var="current_stock_content" value="out_stock"}
+                {assign var="current_stock_href" value="http://schema.org/OutOfStock"}
+            {/if}
+
+            {$pse_count=$PSE_COUNT}
+
+            {* 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_id}
+                    <meta itemprop="productID" content="isbn:{$TITLE}">
+                {/loop}
+            {/loop}
+            *}
+
+            {hook name="product.top" product={$ID}}
+
+            {ifhook rel="product.gallery"}
+               {hook name="product.gallery" product={$ID}}
+            {/ifhook}
+            {elsehook rel="product.gallery"}
+            <section id="product-gallery" class="col-sm-6">
+                {ifloop rel="image.main"}
+                <figure class="product-image">
+                    {loop type="image" name="image.main" product={$ID} width="560" height="445" resize_mode="borders" limit="1"}
+                        <img src="{$IMAGE_URL nofilter}" alt="{$TITLE}" class="img-responsive" itemprop="image" data-toggle="magnify">
+                    {/loop}
+                </figure>
+                {/ifloop}
+
+                {ifloop rel="image.carousel"}
+                <div id="product-thumbnails" class="carousel slide" style="position:relative;">
+                    <div class="carousel-inner">
+                        <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"}
+                                <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"}
+                                            <img src="{$IMAGE_URL nofilter}" alt="{$TITLE}">
+                                        {/loop}
+                                    </a>
+                                </li>
+                                {/loop}
+                            </ul>
+                        </div>
+                        {ifloop rel="image.carouselsup"}
+                        <div class="item">
+                            <ul class="list-inline">
+                                {loop name="image.carouselsup" type="image" product={$ID} width="560" height="445" resize_mode="borders" offset="5"}
+                                    <li>
+                                        <a href="{$IMAGE_URL nofilter}" class="thumbnail">
+                                            {loop type="image" name="image.thumbssup" id={$ID} product="$OBJECT_ID" width="118" height="85" resize_mode="borders"}
+                                                <img src="{$IMAGE_URL nofilter}" alt="{$TITLE}">
+                                            {/loop}
+                                        </a>
+                                    </li>
+                                {/loop}
+                            </ul>
+                        </div>
+                        {/ifloop}
+                    </div>
+                    {ifloop rel="image.carouselsup"}
+                        <a class="left carousel-control" href="#product-thumbnails" data-slide="prev"><i class="fa fa-caret-left"></i></a>
+                        <a class="right carousel-control" href="#product-thumbnails" data-slide="next"><i class="fa fa-caret-right"></i></a>
+                    {/ifloop}
+                </div>
+                {/ifloop}
+            </section>
+            {/elsehook}
+
+            <section id="product-details" class="col-sm-6">
+                {hook name="product.details-top" product={$ID}}
+
+                <div class="product-info">
+                    <h1 class="name"><span itemprop="name" content="{$TITLE}">{$TITLE}</span><span id="pse-name" class="pse-name"></span></h1>
+                    <span itemprop="sku" content="{$default_pse['id']}" class="sku">{intl l='Ref.'}: <span itemprop="mpn" id="pse-ref">{$default_pse['ref']}</span></span>
+                    {if in_array(strlen($default_pse['ean']), $gtins)}<meta itemprop="gtin{strlen($default_pse['ean'])}" content="{$default_pse['ean']}" />{/if}
+
+                    {loop name="brand_info" type="brand" product={$ID} limit="1"}
+                        {assign var="brand_title" value={$TITLE nofilter}}
+                        <p><a href="{$URL nofilter}" title="{intl l="More information about this brand"}"><span itemprop="brand">{$TITLE}</span></a></p>
+                    {/loop}
+
+                    {if $POSTSCRIPTUM}<div class="short-description">
+                        <p>{$POSTSCRIPTUM}</p>
+                    </div>{/if}
+                </div>
+
+                {loop type="sale" name="product-sale-info" product={$ID} active="1"}
+                    <div class="product-promo">
+                        <p class="sale-label">{$SALE_LABEL}</p>
+                        <p class="sale-saving"> {intl l="Save %amount%sign on this product" amount={$PRICE_OFFSET_VALUE} sign={$PRICE_OFFSET_SYMBOL}}</p>
+                        {if $HAS_END_DATE}
+                            <p class="sale-period">{intl l="This offer is valid until %date" date={format_date date=$END_DATE output="date"}}</p>
+                        {/if}
+                    </div>
+                 {/loop}
+
+                <div class="product-price" itemprop="offers" itemscope itemtype="http://schema.org/Offer">
+                    <div class="availability">
+                        <span class="availibity-label sr-only">{intl l="Availability"}: </span>
+                        <span itemprop="availability" href="{$current_stock_href}" class="" id="pse-availability" content="{$current_stock_content}">
+                            <span class="in">{intl l='In Stock'}</span>
+                            <span class="out">{intl l='Out of Stock'}</span>
+                        </span>
+                    </div>
+
+                    <div class="price-container">
+                        {loop type="category" name="category_tag" id=$DEFAULT_CATEGORY}
+                            <meta itemprop="category" content="{$TITLE}">
+                        {/loop}
+                        {* List of condition : NewCondition, DamagedCondition, UsedCondition, RefurbishedCondition *}
+                        <meta itemprop="itemCondition" itemtype="http://schema.org/ItemCondition" content="NewCondition">
+                        {* List of currency : The currency used to describe the product price, in three-letter ISO format. *}
+                        <meta itemprop="priceCurrency" content="{currency attr="code"}">
+
+                        <span id="pse-promo">
+                            <span class="special-price">
+                                {loop type="digressive" name="digressivePriceLoop" product_id=$product_id quantity=1}
+                                <span class="price-label">{intl l="Special Price:"} </span><span id="pse-price" class="price">
+                                {if $IS_PROMO}
+                                {format_money number=$TAXED_PROMO_PRICE symbol={currency attr="symbol"}}
+                                {else}
+                                {format_money number=$TAXED_PRICE symbol={currency attr="symbol"}}
+                                {/if}
+                                </span>
+                                {/loop}
+                            </span>
+                            <meta itemprop="price" content="{if $IS_PROMO}{$TAXED_PROMO_PRICE}{else}{$TAXED_PRICE}{/if}">
+
+                            {if $SHOW_ORIGINAL_PRICE}
+                                <span class="old-price"><span class="price-label">{intl l="Regular Price:"} </span><span id="pse-price-old" class="price">{format_money number=$TAXED_PRICE}</span></span>
+                            {/if}
+                        </span>
+                    </div>
+
+                    <div id="pse-validity" class="validity alert alert-warning" style="display: none;" >
+                        {intl l="Sorry but this combination does not exist."}
+                    </div>
+
+                </div>
+
+                {form name="thelia.cart.add" }
+                <form id="form-product-details" action="{url path="/cart/add" }" method="post" class="form-product">
+                    {form_hidden_fields}
+                    <input type="hidden" name="view" value="product">
+                    <input type="hidden" name="product_id" value="{$ID}">
+                    {form_field field="append"}
+                        <input type="hidden" name="{$name}" value="1">
+                    {/form_field}
+                    {form_field form=$form field="success_url"}
+                        <input type="hidden" name="{$name}" value="{url path='/cart'}">
+                    {/form_field}
+
+                    {if $form_error}<div class="alert alert-error">{$form_error_message}</div>{/if}
+
+                    {form_field field="product"}
+                        <input id="{$label_attr.for}" type="hidden" name="{$name}" value="{$ID}" {$attr} >
+                    {/form_field}
+
+                    {* pse *}
+                    {form_field field='product_sale_elements_id'}
+                    <input id="pse-id" class="pse-id" type="hidden" name="{$name}" value="{$PRODUCT_SALE_ELEMENT}" {$attr} >
+                    {/form_field}
+
+                    {if $pse_count > 1}
+                        {* We have more than 1 combination: custom form *}
+                        <fieldset id="pse-options" class="product-options">
+                            {loop name="attributes" type="attribute" product="$product_id" order="manual"}
+                            <div class="option option-option">
+                                <label for="option-{$ID}" class="option-heading">{$TITLE}</label>
+                                <div class="option-content clearfix">
+                                    <select id="option-{$ID}" name="option-{$ID}" class="form-control input-sm pse-option" data-attribute="{$ID}"></select>
+                                </div>
+                            </div>
+                            {/loop}
+                            <div class="option option-fallback">
+                                <label for="option-fallback" class="option-heading">{intl l="Options"}</label>
+                                <div class="option-content clearfix">
+                                    <select id="option-fallback" name="option-fallback" class="form-control input-sm pse-option pse-fallback" data-attribute="0"></select>
+                                </div>
+                            </div>
+                        </fieldset>
+                    {/if}
+
+                    <fieldset class="product-cart form-inline">
+                        {form_field field='quantity'}
+                        <div class="form-group group-qty {if $error}has-error{elseif $value != "" && !$error}has-success{/if}">
+                            <label for="{$label_attr.for}">{$label}</label>
+                            <input type="number" name="{$name}" id="{$label_attr.for}" class="form-control" value="{$value|default:1}" min="1" required>
+                            {if $error }
+                                <span class="help-block">{$message}</span>
+                            {elseif $value != "" && !$error}
+                                <span class="help-block"><i class="fa fa-check"></i></span>
+                            {/if}
+                        </div>
+                        {/form_field}
+
+                        <div class="form-group group-btn">
+                            <button id="pse-submit" type="submit" class="btn btn_add_to_cart btn-primary"><i class="fa fa-chevron-right"></i> {intl l="Add to cart"}</button>
+                        </div>
+                    </fieldset>
+
+                </form>
+                {/form}
+                {hook name="product.details-bottom" product={$ID}}
+            </section>
+
+            {strip}
+                {capture "additional"}
+                    {ifloop rel="feature_info"}
+                        <ul>
+                            {loop name="feature_info" type="feature" product={$ID}}
+                            {ifloop rel="feature_value_info"}
+                                <li>
+                                    <strong>{$TITLE}</strong> :
+                                    {loop name="feature_value_info" type="feature_value" feature={$ID} product=$product_id}
+                                        {if $LOOP_COUNT > 1}, {else} {/if}
+                                        <span>{$TITLE}</span>
+                                    {/loop}
+                                </li>
+                            {/ifloop}
+                            {/loop}
+                        </ul>
+                    {/ifloop}
+                {/capture}
+            {/strip}
+
+            {strip}
+                {capture "brand_info"}
+                    {loop name="brand_info" type="brand" product={$ID} limit="1"}
+                        <p><strong><a href="{$URL nofilter}">{$TITLE}</a></strong></p>
+
+                        {loop name="brand.image" type="image" source="brand" id={$LOGO_IMAGE_ID} width=218 height=146 resize_mode="borders"}
+                            <p><a href="{$URL nofilter}"><img itemprop="image" src="{$IMAGE_URL nofilter}" alt="{$TITLE}"></a></p>
+                        {/loop}
+
+                        {if $CHAPO}
+                            <div class="chapo">
+                                {$CHAPO}
+                            </div>
+                        {/if}
+                        {if $DESCRIPTION}
+                            <div class="description">
+                                {$DESCRIPTION nofilter}
+                            </div>
+                        {/if}
+                        {if $POSTSCRIPTUM}
+                            <small class="postscriptum">
+                                {$POSTSCRIPTUM}
+                            </small>
+                        {/if}
+                    {/loop}
+                {/capture}
+            {/strip}
+
+            {strip}
+                {capture "document"}
+                    {ifloop rel="document"}
+                    <ul>
+                    {loop name="document" type="document" product=$ID visible="yes"}
+                        <li>
+                            <a href="{$DOCUMENT_URL}" title="{$TITLE}" target="_blank">{$TITLE}</a>
+                        </li>
+                    {/loop}
+                    </ul>
+                    {/ifloop}
+                {/capture}
+            {/strip}
+
+            <section id="product-tabs" class="col-sm-12">
+                {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}
+                    {forhook rel="product.additional"}
+                        <li role="presentation"><a id="tab{$id}" href="#{$id}" data-toggle="tab" role="tab">{$title}</a></li>
+                    {/forhook}
+                </ul>
+                <div class="tab-content">
+                    <div class="tab-pane active in" id="description" itemprop="description" role="tabpanel" aria-labelledby="tab1">
+                        <div>{$DESCRIPTION|default:'N/A' nofilter}</div>
+                    </div>
+                    {if $smarty.capture.additional ne ""}
+                        <div class="tab-pane" id="additional" role="tabpanel" aria-labelledby="tab2">
+                            {$smarty.capture.additional nofilter}
+                        </div>
+                    {/if}
+                    {if $smarty.capture.brand_info ne ""}
+                        <div class="tab-pane" id="brand_info" role="tabpanel" aria-labelledby="tab3">
+                            {$smarty.capture.brand_info nofilter}
+                        </div>
+                    {/if}
+                    {if $smarty.capture.document ne ""}
+                        <div class="tab-pane" id="document" role="tabpanel" aria-labelledby="tab4">
+                            {$smarty.capture.document nofilter}
+                        </div>
+                    {/if}
+                    {forhook rel="product.additional"}
+                    <div class="tab-pane" id="{$id}" role="tabpanel" aria-labelledby="tab{$id}">
+                        {$content nofilter}
+                    </div>
+                    {/forhook}
+                </div>
+                {/hookblock}
+            </section>
+            {hook name="product.bottom" product={$ID}}
+
+            {* javascript configuration to display pse *}
+            <script type="text/javascript">
+                // Product sale elements
+                var PSE_FORM = true;
+                var PSE_COUNT = {$pse_count};
+                {if $check_availability == 0 || $product_virtual == 1 }
+                    var PSE_CHECK_AVAILABILITY = false;
+                {else}
+                    var PSE_CHECK_AVAILABILITY = true;
+                {/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>
+
+        </article><!-- /#product -->
+
+        <ul class="pager">
+            {if $HAS_PREVIOUS == 1}
+                {loop type="product" name="prev_product" id={$PREVIOUS}}
+                    <li class="previous"><a href="{$URL nofilter}"><i class="fa fa-chevron-left"></i> {intl l="Previous product"}</a></li>
+                {/loop}
+            {/if}
+            {if $HAS_NEXT == 1}
+                {loop type="product" name="next_product" id={$NEXT}}
+                    <li class="next"><a href="{$URL nofilter}"><i class="fa fa-chevron-right"></i> {intl l="Next product"}</a></li>
+                {/loop}
+            {/if}
+        </ul>
+        {foreach $pse as $pseItem}
+            {if !$pseItem['isDefault']}
+                <span itemscope itemtype="http://schema.org/Product">
+                    <meta itemprop="name" content="{$TITLE}" />
+                    <meta itemprop="sku" content="{$pseItem['id']}" />
+                    <meta itemprop="mpn" content="{$pseItem['ref']}" />
+                    {if in_array(strlen($pseItem['ean']), $gtins)}
+                        <meta itemprop="gtin{strlen($pseItem['ean'])}" content="{$pseItem['ean']}" />
+                    {/if}
+                    <meta itemprop="description" content="{$DESCRIPTION|strip_tags}" />
+                    <meta itemprop="brand" content="{$brand_title}" />
+                    {ifloop rel="additionalProperty"}
+                        <div itemprop="additionalProperty" itemscope itemtype="http://schema.org/PropertyValue">
+                            {loop name="additionalProperty" type="attribute_combination" product_sale_elements=$pseItem['id'] order="manual"}
+                                <meta itemprop="name" content="{$ATTRIBUTE_TITLE}" />
+                                <meta itemprop="value" content="{$ATTRIBUTE_AVAILABILITY_TITLE}" />
+                            {/loop}
+                        </div>
+                    {/ifloop}
+                    <span itemprop="offers" itemscope itemtype="http://schema.org/Offer">
+                        {if ($check_availability != 0 && $VIRTUAL == 0 && {$pseItem['quantity']} <= 0)}
+                            <meta itemprop="availability" href="http://schema.org/OutOfStock" content="out_stock" />
+                        {else}
+                            <meta itemprop="availability" href="http://schema.org/InStock" content="in_stock" />
+                        {/if}
+                        <meta itemprop="itemCondition" itemtype="http://schema.org/ItemCondition" content="NewCondition" />
+                        <meta itemprop="price" content="{$pseItem['finalPrice']}" />
+                        <meta itemprop="priceCurrency" content="{currency attr="code"}" />
+                    </span>
+                </span>
+            {/if}
+        {/foreach}
+        {/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="stylesheet"}
+{hook name="product.stylesheet"}
+{/block}
+
+{block name="after-javascript-include"}
+{hook name="product.after-javascript-include"}
+{/block}
+
+{block name="javascript-initialization"}
+{hook name="product.javascript-initialization"}
+{/block}