Skip to content

Commit ca663ca

Browse files
empiricompanyempiricompany
authored
RWD theme: removed jQuery dependencies from swatches (#3824)
1 parent 2ab5574 commit ca663ca

File tree

3 files changed

+137
-73
lines changed

3 files changed

+137
-73
lines changed

‎app/design/frontend/rwd/default/template/configurableswatches/catalog/media/js.phtml

Lines changed: 13 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -18,11 +18,20 @@
1818
?>
1919

2020
<script type="text/javascript">
21-
$j(document).on('product-media-loaded', function() {
21+
if(!(typeof $j == 'function' && $j === jQuery)) {
2222
ConfigurableMediaImages.init('<?php echo $this->getImageType(); ?>');
2323
<?php foreach ($this->getProductImageFallbacks() as $imageFallback): ?>
24-
ConfigurableMediaImages.setImageFallback(<?php echo $imageFallback['product']->getId(); ?>, $j.parseJSON('<?php echo $imageFallback['image_fallback']; ?>'));
24+
ConfigurableMediaImages.setImageFallback(<?php echo $imageFallback['product']->getId(); ?>, JSON.parse('<?php echo $imageFallback['image_fallback']; ?>'));
2525
<?php endforeach ?>
26-
$j(document).trigger('configurable-media-images-init', ConfigurableMediaImages);
27-
});
26+
document.dispatchEvent(new Event('configurable-media-images-init'));
27+
} else {
28+
// compatibility with rwd theme ProductMediaManager in app.js
29+
$j(document).on('product-media-loaded', function() {
30+
ConfigurableMediaImages.init('<?php echo $this->getImageType(); ?>');
31+
<?php foreach ($this->getProductImageFallbacks() as $imageFallback): ?>
32+
ConfigurableMediaImages.setImageFallback(<?php echo $imageFallback['product']->getId(); ?>, $j.parseJSON('<?php echo $imageFallback['image_fallback']; ?>'));
33+
<?php endforeach ?>
34+
$j(document).trigger('configurable-media-images-init', ConfigurableMediaImages);
35+
});
36+
}
2837
</script>

‎skin/frontend/rwd/default/js/configurableswatches/product-media.js

Lines changed: 100 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -80,18 +80,25 @@ var ConfigurableMediaImages = {
8080
}
8181

8282
//second, get any product which is compatible with currently selected option(s)
83-
$j.each(fallback['option_labels'], function(key, value) {
84-
var image = value['configurable_product'][ConfigurableMediaImages.imageType];
85-
var products = value['products'];
86-
87-
if(image) { //configurable product has image in the first place
88-
//if intersection between compatible products and this label's products, we found a match
89-
var isCompatibleProduct = ConfigurableMediaImages.arrayIntersect(products, compatibleProducts).length > 0;
90-
if(isCompatibleProduct) {
91-
return image;
83+
var optionLabels = fallback['option_labels'];
84+
for (var key in optionLabels) {
85+
if (optionLabels.hasOwnProperty(key)) {
86+
var value = optionLabels[key];
87+
var image = value['configurable_product'][ConfigurableMediaImages.imageType];
88+
var products = value['products'];
89+
90+
if (image) { //configurable product has image in the first place
91+
//if intersection between compatible products and this label's products, we found a match
92+
var isCompatibleProduct = products.filter(function(productId) {
93+
return compatibleProducts.includes(productId);
94+
}).length > 0;
95+
96+
if (isCompatibleProduct) {
97+
return image;
98+
}
9299
}
93100
}
94-
});
101+
}
95102

96103
//third, get image off of child product which is compatible
97104
var childSwatchImage = null;
@@ -118,74 +125,122 @@ var ConfigurableMediaImages = {
118125
getImageObject: function(productId, imageUrl) {
119126
var key = productId+'-'+imageUrl;
120127
if(!ConfigurableMediaImages.imageObjects[key]) {
121-
var image = $j('<img />');
122-
image.attr('src', imageUrl);
128+
var image = document.createElement('img');
129+
image.src = imageUrl;
123130
ConfigurableMediaImages.imageObjects[key] = image;
124131
}
125132
return ConfigurableMediaImages.imageObjects[key];
126133
},
127134

128-
updateImage: function(el) {
129-
var select = $j(el);
130-
var label = select.find('option:selected').attr('data-label');
135+
updateImage(el) {
136+
var select = el;
137+
var label = select.options[select.selectedIndex].getAttribute('data-label');
131138
var productId = optionsPrice.productId; //get product ID from options price object
132139

133140
//find all selected labels
134-
var selectedLabels = new Array();
141+
var selectedLabels = [];
135142

136-
$j('.product-options .super-attribute-select').each(function() {
137-
var $option = $j(this);
138-
if($option.val() != '') {
139-
selectedLabels.push($option.find('option:selected').attr('data-label'));
143+
var superAttributeSelects = document.querySelectorAll('.product-options .super-attribute-select');
144+
superAttributeSelects.forEach(function(option) {
145+
if (option.value !== '') {
146+
selectedLabels.push(option.options[option.selectedIndex].getAttribute('data-label'));
140147
}
141148
});
142149

143150
var swatchImageUrl = ConfigurableMediaImages.getSwatchImage(productId, label, selectedLabels);
144-
if(!ConfigurableMediaImages.isValidImage(swatchImageUrl)) {
151+
if (!ConfigurableMediaImages.isValidImage(swatchImageUrl)) {
152+
console.log('no image found');
145153
return;
146154
}
147155

148156
var swatchImage = ConfigurableMediaImages.getImageObject(productId, swatchImageUrl);
149157

150-
ProductMediaManager.swapImage(swatchImage);
158+
this.swapImage(swatchImage);
159+
},
160+
161+
swapImage: function(targetImage) {
162+
targetImage.classList.add('gallery-image');
163+
164+
var imageGallery = document.querySelector('.product-image-gallery');
165+
166+
if (targetImage.complete) { // image already loaded -- swap immediately
167+
var galleryImages = imageGallery.querySelectorAll('.gallery-image');
168+
galleryImages.forEach(function(image) {
169+
image.classList.remove('visible');
170+
});
171+
172+
// move target image to correct place, in case it's necessary
173+
imageGallery.appendChild(targetImage);
174+
175+
// reveal new image
176+
targetImage.classList.add('visible');
177+
} else { // need to wait for image to load
178+
// add spinner
179+
imageGallery.classList.add('loading');
180+
181+
// move target image to correct place, in case it's necessary
182+
imageGallery.appendChild(targetImage);
183+
184+
// wait until image is loaded
185+
targetImage.addEventListener('load', function() {
186+
// remove spinner
187+
imageGallery.classList.remove('loading');
188+
189+
// hide old image
190+
var galleryImages = imageGallery.querySelectorAll('.gallery-image');
191+
galleryImages.forEach(function(image) {
192+
image.classList.remove('visible');
193+
});
194+
195+
// reveal new image
196+
targetImage.classList.add('visible');
197+
});
198+
}
151199
},
152200

153201
wireOptions: function() {
154-
$j('.product-options .super-attribute-select').change(function(e) {
155-
ConfigurableMediaImages.updateImage(this);
202+
var selectElements = document.querySelectorAll('.product-options .super-attribute-select');
203+
selectElements.forEach(function(selectElement) {
204+
selectElement.addEventListener('change', function(e) {
205+
ConfigurableMediaImages.updateImage(this);
206+
});
156207
});
157208
},
158209

159210
swapListImage: function(productId, imageObject) {
160-
var originalImage = $j('#product-collection-image-' + productId);
211+
var originalImage = document.querySelector('#product-collection-image-' + productId);
161212

162-
if(imageObject[0].complete) { //swap image immediately
213+
if (imageObject.complete) { // swap image immediately
163214

164-
//remove old image
165-
originalImage.addClass('hidden');
166-
$j('.product-collection-image-' + productId).remove();
215+
// remove old image
216+
originalImage.classList.add('hidden');
217+
document.querySelectorAll('.product-collection-image-' + productId).forEach(function (image) {
218+
image.remove();
219+
});
167220

168-
//add new image
169-
imageObject.insertAfter(originalImage);
221+
// add new image
222+
originalImage.parentNode.insertBefore(imageObject, originalImage.nextSibling);
170223

171-
} else { //need to load image
224+
} else { // need to load image
172225

173-
var wrapper = originalImage.parent();
226+
var wrapper = originalImage.parentNode;
174227

175-
//add spinner
176-
wrapper.addClass('loading');
228+
// add spinner
229+
wrapper.classList.add('loading');
177230

178-
//wait until image is loaded
179-
imagesLoaded(imageObject, function() {
180-
//remove spinner
181-
wrapper.removeClass('loading');
231+
// wait until image is loaded
232+
imageObject.addEventListener('load', function () {
233+
// remove spinner
234+
wrapper.classList.remove('loading');
182235

183-
//remove old image
184-
originalImage.addClass('hidden');
185-
$j('.product-collection-image-' + productId).remove();
236+
// remove old image
237+
originalImage.classList.add('hidden');
238+
document.querySelectorAll('.product-collection-image-' + productId).forEach(function (image) {
239+
image.remove();
240+
});
186241

187-
//add new image
188-
imageObject.insertAfter(originalImage);
242+
// add new image
243+
originalImage.parentNode.insertBefore(imageObject, originalImage.nextSibling);
189244
});
190245

191246
}
@@ -198,7 +253,7 @@ var ConfigurableMediaImages = {
198253
}
199254

200255
var newImage = ConfigurableMediaImages.getImageObject(productId, swatchImageUrl);
201-
newImage.addClass('product-collection-image-' + productId);
256+
newImage.classList.add('product-collection-image-' + productId);
202257

203258
ConfigurableMediaImages.swapListImage(productId, newImage);
204259
},

‎skin/frontend/rwd/default/js/configurableswatches/swatches-list.js

Lines changed: 24 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -15,63 +15,63 @@
1515
var ConfigurableSwatchesList = {
1616
swatchesByProduct: {},
1717

18-
init: function()
19-
{
18+
init: function() {
2019
var that = this;
21-
$j('.configurable-swatch-list li').each(function() {
22-
that.initSwatch(this);
23-
var $swatch = $j(this);
24-
if ($swatch.hasClass('filter-match')) {
25-
that.handleSwatchSelect($swatch);
20+
document.querySelectorAll('.configurable-swatch-list li').forEach(function(element) {
21+
that.initSwatch(element);
22+
var swatch = element;
23+
if (swatch.classList.contains('filter-match')) {
24+
that.handleSwatchSelect(swatch);
2625
}
2726
});
2827
},
2928

3029
initSwatch: function(swatch)
3130
{
3231
var that = this;
33-
var $swatch = $j(swatch);
32+
var $swatch = swatch;
3433
var productId;
35-
$j($swatch).hover(function() {
34+
$swatch.addEventListener('mouseenter', function() {
3635
/**
3736
*
3837
* - Preview the stock status
3938
**/
40-
var swatchUl = $swatch.parent();
41-
swatchUl.find('.x').each(function(){
42-
$j(this).show();
43-
$j(this).closest('li').addClass('not-available');
39+
var swatchUl = $swatch.parentNode;
40+
var xElements = swatchUl.querySelectorAll('.x');
41+
xElements.forEach(function(element) {
42+
element.style.display = 'block';
43+
element.closest('li').classList.add('not-available');
4444
});
4545
});
46-
if (productId = $swatch.data('product-id')) {
47-
if (typeof(this.swatchesByProduct[productId]) == 'undefined') {
46+
if (productId = $swatch.dataset.productId) {
47+
if (typeof this.swatchesByProduct[productId] == 'undefined') {
4848
this.swatchesByProduct[productId] = [];
4949
}
5050
this.swatchesByProduct[productId].push($swatch);
5151

52-
$swatch.find('a').on('click', function(e) {
52+
var anchorElement = $swatch.querySelector('a');
53+
anchorElement.addEventListener('click', function(e) {
5354
e.preventDefault();
5455
that.handleSwatchSelect($swatch);
5556
});
5657
}
5758
},
5859

59-
handleSwatchSelect: function($swatch)
60-
{
61-
var productId = $swatch.data('product-id');
60+
handleSwatchSelect: function(swatch) {
61+
var productId = swatch.dataset.productId;
6262
var label;
63-
if (label = $swatch.data('option-label')) {
63+
if (label = swatch.dataset.optionLabel) {
6464
ConfigurableMediaImages.swapListImageByOption(productId, label);
6565
}
6666

67-
$j.each(this.swatchesByProduct[productId], function(key, $productSwatch) {
68-
$productSwatch.removeClass('selected');
67+
Array.from(this.swatchesByProduct[productId]).forEach(function(productSwatch) {
68+
productSwatch.classList.remove('selected');
6969
});
7070

71-
$swatch.addClass('selected');
71+
swatch.classList.add('selected');
7272
}
7373
};
7474

75-
$j(document).on('configurable-media-images-init', function(){
75+
document.addEventListener('DOMContentLoaded', function() {
7676
ConfigurableSwatchesList.init();
7777
});

0 commit comments

Comments
 (0)