Modif pour rafraichissement de la photo en fonction du choix de déclinaison (https://github.com/thelia/thelia/pull/1981 + https://github.com/thelia/thelia/pull/2414)

templates/frontOffice/boutique/assets/src/js/thelia.js

@@ -51,7 +51,8 @@ var pseManager = (function($){
             "options": {},
             "pseId": null,
             "useFallback": false,
-            "fallback": $("#pse-options .pse-fallback")
+            "fallback": $("#pse-options .pse-fallback"),
+            "thumbnails": $('#product-thumbnails')
         };
     }
 
@@ -153,6 +154,8 @@ var pseManager = (function($){
                     // not exists, revert
                     displayNotice();
                     setPseForm();
+                    selection = getFormSelection();
+                    pseId = pseExist(selection);
                 } else {
                     $pse.validity.hide();
                 }
@@ -241,6 +244,31 @@ var pseManager = (function($){
                 $pse.priceOld.html("");
                 $pse.price.html(pse.price);
             }
+
+            // images
+            if (pse.images.length > 0) {
+                i = 0;
+                $pse.thumbnails.find('.thumbnail').each(function() {
+                    if (jQuery.inArray($(this).data('thumbId'), pse.images) !== -1) {
+                        $(this).filter('.disabled').removeClass('disabled');
+                        if (i === 0) {
+                            if (!$(this).hasClass('active')) {
+                                $pse.thumbnails.find('.thumbnail.active').removeClass('active');
+                                $('.product-image > img', $(this).closest("#product-gallery")).attr('src',$(this).attr('href'));
+                                $(this).addClass('active');
+                                if ($(this).filter(":visible").length != 1) {
+                                    $pse.thumbnails.carousel('next');
+                                }
+                            }
+                            i++;
+                        }
+                    } else {
+                        $(this).not('.disabled').addClass('disabled');
+                    }
+                });
+            } else {
+                $pse.thumbnails.find('.thumbnail.disabled').removeClass('disabled');
+            }
         }
         else {
             setProductAvailable(false);

templates/frontOffice/boutique/assets/src/less/thelia/product.less

@@ -42,6 +42,9 @@
                     margin: 0;
                     padding: 0;
                     width: 19%;
+                    .thumbnail.disabled {
+                        .opacity(.3);
+                    }
                 }
             }
         }

templates/frontOffice/boutique/assets/src/less/theme/buttons.less

@@ -1,7 +1,7 @@
 // Thelia : Buttons
 .btn {
     .transition(all 0.3s ease-in-out);
-    border-radius: 0;
+    border-radius: 12px;
     text-align: left;
     font-weight: 600;
 
@@ -18,7 +18,6 @@
 .btn-primary {
     font-style: italic;
     //border-left: 3px solid lighten(@brand-primary, 20%);
-    border-radius: 12px;
     text-align: center;
 
     &:hover,

templates/frontOffice/boutique/assets/src/less/theme/product.less

@@ -72,7 +72,7 @@
 
     // Product Gallery
     #product-gallery {
-        border-right: 1px solid #f5f5f5;
+        //border-right: 1px solid #f5f5f5;
         padding-right: 20px;
     }
 

templates/frontOffice/boutique/assets/src/less/theme/theme.less

@@ -1,3 +1,7 @@
+
+
+
+
 // Body padding required with the fixed navbar (By default, the navbar is 50px high.)
 .page-header {
     border: none;
@@ -99,6 +103,7 @@ label {
 // Navbar
 .navbar {
     li {
+        font-size: 16px;
         > a.home {
             &:before {
                 .fa-icon();
@@ -635,7 +640,7 @@ td.product,
 
         // Product Gallery
         #product-gallery {
-            border-right: 1px solid @gray-lighter;
+            //border-right: 1px solid @gray-lighter;
             padding-right: 20px;
         }
 

templates/frontOffice/boutique/assets/src/less/theme/variables.less

@@ -8,7 +8,7 @@
 @gray-light:                        #e5e5e5;
 @gray-lighter:                      #eee;
 
-@brand-primary:                     #EF8201; //#f49a17;
+@brand-primary:                     #f49a17; //#f49a17;EF8201
 @brand-success:                     #5cb85c;
 @brand-warning:                     #f0ad4e;
 @brand-danger:                      #d9534f;
@@ -20,8 +20,8 @@
 @link-color:                        @brand-primary;
 @link-hover-color:                  darken(@link-color, 15%);
 
-@font-family-sans-serif:            'Open Sans', sans-serif;
+@font-family-sans-serif:            'Avenir next', sans-serif; //'Open Sans', sans-serif;
-@font-family-serif:                 Georgia, "Times New Roman", Times, serif;
+@font-family-serif:                 "Times New Roman", Times, serif;
 @font-family-monospace:             Monaco, Menlo, Consolas, "Courier New", monospace;
 @font-family-base:                  @font-family-sans-serif;
 
@@ -128,4 +128,4 @@
 @pager-border-radius:               0;
 
 // Couleurs personnalisées
-@pictos:                          #7407AA;
+@pictos:                            #ffffff;

templates/frontOffice/boutique/cart.html

@@ -58,32 +58,44 @@
                     </thead>
                     <tbody>
                         {loop type="cart" name="cartloop"}
-                        <tr>
+                        <tr id="cart_item_id_{$ITEM_ID}">
                             <td class="image">
-                                {ifloop rel='product-image'}
                                 <a href="{$PRODUCT_URL nofilter}" class="thumbnail">
-                                    {assign "cart_count" $LOOP_COUNT}
+                                    {assign var="product_image_url" value=null}
-                                    {loop type="image" name="product-image" product=$PRODUCT_ID limit="1" width="118" height="85" force_return="true"}
+                                    {ifloop rel="pse-first-image"}
-                                        <img src="{$IMAGE_URL nofilter}" alt="Product #{$cart_count}">
+                                        {loop type="product-sale-elements-image" name="pse-first-image" product_sale_elements_id=$PRODUCT_SALE_ELEMENTS_ID limit="1"}
+                                            {loop type="image" name="product-image" id=$PRODUCT_IMAGE_ID product=$PRODUCT_ID limit="1" width="118" height="85" force_return="true"}
+                                                {assign var="product_image_url" value=$IMAGE_URL}
+                                            {/loop}
                                         {/loop}
-                                </a>
                                     {/ifloop}
+                                    {elseloop rel="pse-first-image"}
+                                        {loop type="image" name="product-image" product=$PRODUCT_ID limit="1" width="118" height="85" force_return="true"}
+                                            {assign var="product_image_url" value=$IMAGE_URL}
+                                        {/loop}
+                                    {/elseloop}
+                                    {if $product_image_url}
+                                        <img itemprop="image" src="{$product_image_url nofilter}" alt="Product #{$LOOP_COUNT}">
+                                    {else}
+                                        <img itemprop="image" src="{image file='assets/dist/img/product/1/118x85.png'}" alt="Product #{$LOOP_COUNT}">
+                                    {/if}
+                                </a>
                             </td>
                             <td class="product" >
                                 <h3 class="name"><a href="{$PRODUCT_URL nofilter}">{$TITLE}</a></h3>
                                 <div class="product-options">
                                     <dl class="dl-horizontal">
-                                        <dt>{intl l="Available"}</dt>
+                                        <dt class="stockView">{intl l="Available"} :</dt>
                                         {if $STOCK > 0}
                                             <dd>{intl l="In Stock"}</dd>
                                         {else}
                                             {$errorStock="TRUE"}
                                             <dd>{intl l="Out of Stock"}</dd>
                                         {/if}
-                                        <!-- TheCoreDev : pas besoin <dt>{intl l="No."}</dt>
+                                        <!-- TheCoreDev : pas besoin <dt class="refView">{intl l="No."}</dt>
                                         <dd>{$REF}</dd>//-->
                                         {loop type="attribute_combination" name="product_options" product_sale_elements="$PRODUCT_SALE_ELEMENTS_ID" order="manual"}
-                                            <dt>{$ATTRIBUTE_TITLE}</dt>
+                                            <dt class="attributeView">{$ATTRIBUTE_TITLE}</dt>
                                             <dd>{$ATTRIBUTE_AVAILABILITY_TITLE}</dd>
                                         
                                             <!-- TheCoreDev : on compte le nb de pots pour savoir si l'offre de réduc 3 pots est applicable //-->

templates/frontOffice/boutique/includes/addedToCart.html

@@ -12,9 +12,18 @@
         </tr>
         <tr>
             <td class="col-md-4">
-                {loop name="product_thumbnail" type="image" product=$ID width="218" height="146" resize_mode="borders" limit="1"}
+                {ifloop rel="pse-first-image"}
+                    {loop type="product-sale-elements-image" name="pse-first-image" product_sale_elements_id={$smarty.get.pse_id} limit="1"}
+                        {loop type="image" name="product-image" id=$PRODUCT_IMAGE_ID product=$ID limit="1" width="218" height="146" resize_mode="borders"}
                             <img itemprop="image" src="{$IMAGE_URL nofilter}" alt="Product #{$LOOP_COUNT}">
                         {/loop}
+                    {/loop}
+                {/ifloop}
+                {elseloop rel="pse-first-image"}
+                    {loop type="image" name="product-image" product=$ID limit="1" width="218" height="146" resize_mode="borders"}
+                        <img itemprop="image" src="{$IMAGE_URL nofilter}" alt="Product #{$LOOP_COUNT}">
+                    {/loop}
+                {/elseloop}
             </td>
             <td class="col-md-4">
                 <h2>{$TITLE}</h2>

templates/frontOffice/boutique/order-invoice.html

@@ -82,16 +82,25 @@
                     {loop type="cart" name="cartloop"}
                     <tr>
                         <td class="image">
-                            {assign "cart_count" $LOOP_COUNT}
                             <a href="{$PRODUCT_URL nofilter}">
-                            {ifloop rel='product-image'}
+                           {assign var="product_image_url" value=null}
-                                {loop type="image" name="product-image" product=$PRODUCT_ID limit="1" width="118" height="85" force_return="true"}
+                           {ifloop rel="pse-first-image"}
-                                    <img src="{$IMAGE_URL nofilter}" alt="Product #{$cart_count}">
+                                {loop type="product-sale-elements-image" name="pse-first-image" product_sale_elements_id=$PRODUCT_SALE_ELEMENTS_ID limit="1"}
+                                    {loop type="image" name="product-image" id=$PRODUCT_IMAGE_ID product=$PRODUCT_ID limit="1" width="118" height="85" force_return="true"}
+                                        {assign var="product_image_url" value=$IMAGE_URL}
+                                    {/loop}
                                 {/loop}
                             {/ifloop}
-                            {elseloop rel="product-image"}
+                            {elseloop rel="pse-first-image"}
-                                <img itemprop="image" src="{image file='assets/dist/img/product/1/118x85.png'}" alt="Product #{$cart_count}">
+                                {loop type="image" name="product-image" product=$PRODUCT_ID limit="1" width="118" height="85" force_return="true"}
+                                    {assign var="product_image_url" value=$IMAGE_URL}
+                                {/loop}
                             {/elseloop}
+                            {if $product_image_url}
+                                <img itemprop="image" src="{$product_image_url nofilter}" alt="Product #{$LOOP_COUNT}">
+                            {else}
+                                <img itemprop="image" src="{image file='assets/dist/img/product/1/118x85.png'}" alt="Product #{$LOOP_COUNT}">
+                            {/if}
                             </a>
                         </td>
                         <td class="product" >
@@ -100,16 +109,16 @@
                             </h3>
                             <div class="product-options">
                                 <dl class="dl-horizontal">
-                                    <dt>{intl l="Available"} :</dt>
+                                    <dt class="stockView">{intl l="Available"} :</dt>
                                     {if $STOCK > 0}
                                         <dd>{intl l="In Stock"}</dd>
                                     {else}
                                         <dd>{intl l="Out of Stock"}</dd>
                                     {/if}
-                                    <dt>{intl l="No."}</dt>
+                                    <dt class="refView">{intl l="No."}</dt>
                                     <dd>{$REF}</dd>
                                     {loop type="attribute_combination" name="product_options" product_sale_elements="$PRODUCT_SALE_ELEMENTS_ID"}
-                                        <dt>{$ATTRIBUTE_TITLE}</dt>
+                                        <dt class="attributeView">{$ATTRIBUTE_TITLE}</dt>
                                         <dd>{$ATTRIBUTE_AVAILABILITY_TITLE}</dd>
                                     {/loop}
                                 </dl>

templates/frontOffice/boutique/product.html

@@ -82,7 +82,7 @@
                             <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}">
+                                    <a href="{$IMAGE_URL nofilter}" class="thumbnail {if $LOOP_COUNT == 1}active{/if}" data-thumb-id="{$ID}">
                                         {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}
@@ -96,7 +96,7 @@
                             <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">
+                                        <a href="{$IMAGE_URL nofilter}" class="thumbnail" data-thumb-id="{$ID}">
                                             {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}
@@ -373,6 +373,11 @@
         {$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}
 
 <script type="text/javascript">

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

@@ -8798,6 +8798,10 @@ header .header .language-container .currency-switch .select {
   padding: 0;
   width: 19%;
 }
+#product #product-gallery #product-thumbnails ul > li .thumbnail.disabled {
+  opacity: 0.3;
+  filter: alpha(opacity=30);
+}
 #product #product-details .name {
   margin-top: 0;
 }

templates/frontOffice/default/assets/src/js/thelia.js

@@ -47,7 +47,8 @@ var pseManager = (function($){
             "options": {},
             "pseId": null,
             "useFallback": false,
-            "fallback": $("#pse-options .pse-fallback")
+            "fallback": $("#pse-options .pse-fallback"),
+            "thumbnails": $('#product-thumbnails')
         };
     }
 
@@ -149,6 +150,8 @@ var pseManager = (function($){
                     // not exists, revert
                     displayNotice();
                     setPseForm();
+                    selection = getFormSelection();
+                    pseId = pseExist(selection);
                 } else {
                     $pse.validity.hide();
                 }
@@ -237,6 +240,31 @@ var pseManager = (function($){
                 $pse.priceOld.html("");
                 $pse.price.html(pse.price);
             }
+
+            // images
+            if (pse.images.length > 0) {
+                i = 0;
+                $pse.thumbnails.find('.thumbnail').each(function() {
+                    if (jQuery.inArray($(this).data('thumbId'), pse.images) !== -1) {
+                        $(this).filter('.disabled').removeClass('disabled');
+                        if (i === 0) {
+                            if (!$(this).hasClass('active')) {
+                                $pse.thumbnails.find('.thumbnail.active').removeClass('active');
+                                $('.product-image > img', $(this).closest("#product-gallery")).attr('src',$(this).attr('href'));
+                                $(this).addClass('active');
+                                if ($(this).filter(":visible").length != 1) {
+                                    $pse.thumbnails.carousel('next');
+                                }
+                            }
+                            i++;
+                        }
+                    } else {
+                        $(this).not('.disabled').addClass('disabled');
+                    }
+                });
+            } else {
+                $pse.thumbnails.find('.thumbnail.disabled').removeClass('disabled');
+            }
         }
         else {
             setProductAvailable(false);

templates/frontOffice/default/assets/src/less/thelia/product.less

@@ -42,6 +42,9 @@
                     margin: 0;
                     padding: 0;
                     width: 19%;
+                    .thumbnail.disabled {
+                        .opacity(.3);
+                    }
                 }
             }
         }

templates/frontOffice/default/product.html

@@ -79,7 +79,7 @@
                             <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}">
+                                    <a href="{$IMAGE_URL nofilter}" class="thumbnail {if $LOOP_COUNT == 1}active{/if}" data-thumb-id="{$ID}">
                                         {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}
@@ -93,7 +93,7 @@
                             <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">
+                                        <a href="{$IMAGE_URL nofilter}" class="thumbnail" data-thumb-id="{$ID}">
                                             {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}
@@ -360,6 +360,12 @@
         {$pse_combination[]=$ATTRIBUTE_AVAILABILITY_ID}
     {/loop}
     {$pse[$ID]["combinations"]=$pse_combination}
+    {$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}
 
 <script type="text/javascript">

web/.htaccess

@@ -26,6 +26,9 @@ AddDefaultCharset UTF-8
     # define the RewriteBase below to get a proper URL rewriting
     # RewriteBase /thelia2
 
+    #RewriteCond %{REQUEST_URI} !^/web/
+    #RewriteRule ^(.*)$ /web/$1 [L]
+
     RewriteCond %{REQUEST_FILENAME} !-f
     RewriteCond %{REQUEST_FILENAME} !-d
 

web/index.php

@@ -30,7 +30,6 @@ $loader->unregister();
 $cacheLoader->register(true);
 */
 
-
 $request = Request::createFromGlobals();
 
 $thelia = new Thelia("prod", false);

web/index_dev.php

@@ -24,7 +24,7 @@ require __DIR__ . '/../core/vendor/autoload.php';
 $trustedIp = array(
   '::1',
   '127.0.0.1',
-  '78.210.220.249'
+  '90.55.92.159'
 );
 
 $request = Request::createFromGlobals();