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": {},
"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);

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

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

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

@@ -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,

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

@@ -72,7 +72,7 @@
// Product Gallery
#product-gallery {
border-right: 1px solid #f5f5f5;
//border-right: 1px solid #f5f5f5;
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.)
.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;
}

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

@@ -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-serif: Georgia, "Times New Roman", Times, serif;
@font-family-sans-serif: 'Avenir next', sans-serif; //'Open Sans', sans-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;
@@ -123,9 +123,9 @@
@btn-primary-border: @brand-primary;
// Pager
@pager-bg: @btn-default-bg;
@pager-border: @btn-default-border;
@pager-border-radius: 0;
@pager-bg: @btn-default-bg;
@pager-border: @btn-default-border;
@pager-border-radius: 0;
// Couleurs personnalisées
@pictos: #7407AA;
@pictos: #ffffff;

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

@@ -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}
{loop type="image" name="product-image" product=$PRODUCT_ID limit="1" width="118" height="85" force_return="true"}
<img src="{$IMAGE_URL nofilter}" alt="Product #{$cart_count}">
{/loop}
{assign var="product_image_url" value=null}
{ifloop rel="pse-first-image"}
{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="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>
{/ifloop}
</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 //-->

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

@@ -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"}
<img itemprop="image" src="{$IMAGE_URL nofilter}" alt="Product #{$LOOP_COUNT}">
{/loop}
{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>

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

@@ -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'}
{loop type="image" name="product-image" product=$PRODUCT_ID limit="1" width="118" height="85" force_return="true"}
<img src="{$IMAGE_URL nofilter}" alt="Product #{$cart_count}">
{assign var="product_image_url" value=null}
{ifloop rel="pse-first-image"}
{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"}
<img itemprop="image" src="{image file='assets/dist/img/product/1/118x85.png'}" alt="Product #{$cart_count}">
{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" >
@@ -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>

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

@@ -80,9 +80,9 @@
<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"}
{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}
@@ -94,9 +94,9 @@
{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"}
{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">

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

@@ -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;
}

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

@@ -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);

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

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

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

@@ -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">