TheCoreDev/boutique-fanny
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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)

Browse Source
This commit is contained in:
Laurent LE CORRE
2019-11-25 06:52:45 +01:00
parent 1dc16836ee
commit 332ebfbcb7
20 changed files with 11174 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
templates/frontOffice/boutique/assets/dist/css/thelia.min.css vendored
View File

File diff suppressed because one or more lines are too long

2
templates/frontOffice/boutique/assets/dist/js/thelia.min.js vendored
View File

File diff suppressed because one or more lines are too long

11015
templates/frontOffice/boutique/assets/src/css/thelia.css
View File

File diff suppressed because it is too large Load Diff

30
templates/frontOffice/boutique/assets/src/js/thelia.js
View File

@@ -51,7 +51,8 @@ var pseManager = (function($){
"options": {}, "options": {},
"pseId": null, "pseId": null,
"useFallback": false, "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 // not exists, revert
displayNotice(); displayNotice();
setPseForm(); setPseForm();
selection = getFormSelection();
pseId = pseExist(selection);
} else { } else {
$pse.validity.hide(); $pse.validity.hide();
} }
@@ -241,6 +244,31 @@ var pseManager = (function($){
$pse.priceOld.html(""); $pse.priceOld.html("");
$pse.price.html(pse.price); $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 { else {
setProductAvailable(false); setProductAvailable(false);

3
templates/frontOffice/boutique/assets/src/less/thelia/product.less
View File

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

3
templates/frontOffice/boutique/assets/src/less/theme/buttons.less
View File

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

2
templates/frontOffice/boutique/assets/src/less/theme/product.less
View File

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

7
templates/frontOffice/boutique/assets/src/less/theme/theme.less
View File

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

14
templates/frontOffice/boutique/assets/src/less/theme/variables.less
View File

@@ -8,7 +8,7 @@
@gray-light: #e5e5e5; @gray-light: #e5e5e5;
@gray-lighter: #eee; @gray-lighter: #eee;
@brand-primary: #EF8201; //#f49a17; @brand-primary: #f49a17; //#f49a17;EF8201
@brand-success: #5cb85c; @brand-success: #5cb85c;
@brand-warning: #f0ad4e; @brand-warning: #f0ad4e;
@brand-danger: #d9534f; @brand-danger: #d9534f;
@@ -20,8 +20,8 @@
@link-color: @brand-primary; @link-color: @brand-primary;
@link-hover-color: darken(@link-color, 15%); @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-monospace: Monaco, Menlo, Consolas, "Courier New", monospace;
@font-family-base: @font-family-sans-serif; @font-family-base: @font-family-sans-serif;
@@ -123,9 +123,9 @@
@btn-primary-border: @brand-primary; @btn-primary-border: @brand-primary;
// Pager // Pager
@pager-bg: @btn-default-bg; @pager-bg: @btn-default-bg;
@pager-border: @btn-default-border; @pager-border: @btn-default-border;
@pager-border-radius: 0; @pager-border-radius: 0;
// Couleurs personnalisées // Couleurs personnalisées
@pictos: #7407AA; @pictos: #ffffff;

32
templates/frontOffice/boutique/cart.html
View File

@@ -58,32 +58,44 @@
</thead> </thead>
<tbody> <tbody>
{loop type="cart" name="cartloop"} {loop type="cart" name="cartloop"}
<tr> <tr id="cart_item_id_{$ITEM_ID}">
<td class="image"> <td class="image">
{ifloop rel='product-image'}
<a href="{$PRODUCT_URL nofilter}" class="thumbnail"> <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} {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="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> </a>
{/ifloop}
</td> </td>
<td class="product" > <td class="product" >
<h3 class="name"><a href="{$PRODUCT_URL nofilter}">{$TITLE}</a></h3> <h3 class="name"><a href="{$PRODUCT_URL nofilter}">{$TITLE}</a></h3>
<div class="product-options"> <div class="product-options">
<dl class="dl-horizontal"> <dl class="dl-horizontal">
<dt>{intl l="Available"}</dt> <dt class="stockView">{intl l="Available"} :</dt>
{if $STOCK > 0} {if $STOCK > 0}
<dd>{intl l="In Stock"}</dd> <dd>{intl l="In Stock"}</dd>
{else} {else}
{$errorStock="TRUE"} {$errorStock="TRUE"}
<dd>{intl l="Out of Stock"}</dd> <dd>{intl l="Out of Stock"}</dd>
{/if} {/if}
<!-- TheCoreDev : pas besoin <dt>{intl l="No."}</dt> <!-- TheCoreDev : pas besoin <dt class="refView">{intl l="No."}</dt>
<dd>{$REF}</dd>//--> <dd>{$REF}</dd>//-->
{loop type="attribute_combination" name="product_options" product_sale_elements="$PRODUCT_SALE_ELEMENTS_ID" order="manual"} {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> <dd>{$ATTRIBUTE_AVAILABILITY_TITLE}</dd>
<!-- TheCoreDev : on compte le nb de pots pour savoir si l'offre de réduc 3 pots est applicable //--> <!-- TheCoreDev : on compte le nb de pots pour savoir si l'offre de réduc 3 pots est applicable //-->

15
templates/frontOffice/boutique/includes/addedToCart.html
View File

@@ -12,9 +12,18 @@
</tr> </tr>
<tr> <tr>
<td class="col-md-4"> <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"}
<img itemprop="image" src="{$IMAGE_URL nofilter}" alt="Product #{$LOOP_COUNT}"> {loop type="product-sale-elements-image" name="pse-first-image" product_sale_elements_id={$smarty.get.pse_id} limit="1"}
{/loop} {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>
<td class="col-md-4"> <td class="col-md-4">
<h2>{$TITLE}</h2> <h2>{$TITLE}</h2>

27
templates/frontOffice/boutique/order-invoice.html
View File

@@ -82,16 +82,25 @@
{loop type="cart" name="cartloop"} {loop type="cart" name="cartloop"}
<tr> <tr>
<td class="image"> <td class="image">
{assign "cart_count" $LOOP_COUNT}
<a href="{$PRODUCT_URL nofilter}"> <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} {/loop}
{/ifloop} {/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} {/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> </a>
</td> </td>
<td class="product" > <td class="product" >
@@ -100,16 +109,16 @@
</h3> </h3>
<div class="product-options"> <div class="product-options">
<dl class="dl-horizontal"> <dl class="dl-horizontal">
<dt>{intl l="Available"} :</dt> <dt class="stockView">{intl l="Available"} :</dt>
{if $STOCK > 0} {if $STOCK > 0}
<dd>{intl l="In Stock"}</dd> <dd>{intl l="In Stock"}</dd>
{else} {else}
<dd>{intl l="Out of Stock"}</dd> <dd>{intl l="Out of Stock"}</dd>
{/if} {/if}
<dt>{intl l="No."}</dt> <dt class="refView">{intl l="No."}</dt>
<dd>{$REF}</dd> <dd>{$REF}</dd>
{loop type="attribute_combination" name="product_options" product_sale_elements="$PRODUCT_SALE_ELEMENTS_ID"} {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> <dd>{$ATTRIBUTE_AVAILABILITY_TITLE}</dd>
{/loop} {/loop}
</dl> </dl>

13
templates/frontOffice/boutique/product.html
View File

@@ -80,9 +80,9 @@
<div class="carousel-inner"> <div class="carousel-inner">
<div class="item active"> <div class="item active">
<ul class="list-inline"> <ul class="list-inline">
{loop name="image.carousel" type="image" product={$ID} width="560" height="445" resize_mode="borders" limit="5"} {loop name="image.carousel" type="image" product={$ID} width="560" height="445" resize_mode="borders" limit="5"}
<li> <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"} {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}"> <img src="{$IMAGE_URL nofilter}" alt="{$TITLE}">
{/loop} {/loop}
@@ -94,9 +94,9 @@
{ifloop rel="image.carouselsup"} {ifloop rel="image.carouselsup"}
<div class="item"> <div class="item">
<ul class="list-inline"> <ul class="list-inline">
{loop name="image.carouselsup" type="image" product={$ID} width="560" height="445" resize_mode="borders" offset="5"} {loop name="image.carouselsup" type="image" product={$ID} width="560" height="445" resize_mode="borders" offset="5"}
<li> <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"} {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}"> <img src="{$IMAGE_URL nofilter}" alt="{$TITLE}">
{/loop} {/loop}
@@ -373,6 +373,11 @@
{$pse_combination[]=$ATTRIBUTE_AVAILABILITY_ID} {$pse_combination[]=$ATTRIBUTE_AVAILABILITY_ID}
{/loop} {/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} {/loop}
<script type="text/javascript"> <script type="text/javascript">

4
templates/frontOffice/default/assets/src/css/thelia.css
View File

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

30
templates/frontOffice/default/assets/src/js/thelia.js
View File

@@ -47,7 +47,8 @@ var pseManager = (function($){
"options": {}, "options": {},
"pseId": null, "pseId": null,
"useFallback": false, "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 // not exists, revert
displayNotice(); displayNotice();
setPseForm(); setPseForm();
selection = getFormSelection();
pseId = pseExist(selection);
} else { } else {
$pse.validity.hide(); $pse.validity.hide();
} }
@@ -237,6 +240,31 @@ var pseManager = (function($){
$pse.priceOld.html(""); $pse.priceOld.html("");
$pse.price.html(pse.price); $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 { else {
setProductAvailable(false); setProductAvailable(false);

3
templates/frontOffice/default/assets/src/less/thelia/product.less
View File

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

10
templates/frontOffice/default/product.html
View File

@@ -79,7 +79,7 @@
<ul class="list-inline"> <ul class="list-inline">
{loop name="image.carousel" type="image" product={$ID} width="560" height="445" resize_mode="borders" limit="5"} {loop name="image.carousel" type="image" product={$ID} width="560" height="445" resize_mode="borders" limit="5"}
<li> <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"} {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}"> <img src="{$IMAGE_URL nofilter}" alt="{$TITLE}">
{/loop} {/loop}
@@ -93,7 +93,7 @@
<ul class="list-inline"> <ul class="list-inline">
{loop name="image.carouselsup" type="image" product={$ID} width="560" height="445" resize_mode="borders" offset="5"} {loop name="image.carouselsup" type="image" product={$ID} width="560" height="445" resize_mode="borders" offset="5"}
<li> <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"} {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}"> <img src="{$IMAGE_URL nofilter}" alt="{$TITLE}">
{/loop} {/loop}
@@ -360,6 +360,12 @@
{$pse_combination[]=$ATTRIBUTE_AVAILABILITY_ID} {$pse_combination[]=$ATTRIBUTE_AVAILABILITY_ID}
{/loop} {/loop}
{$pse[$ID]["combinations"]=$pse_combination} {$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} {/loop}
<script type="text/javascript"> <script type="text/javascript">

3
web/.htaccess
View File

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

1
web/index.php
View File

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

2
web/index_dev.php
View File

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