How to find the image URL while clicking on the options label in a PDP page using ‘afterOptionSelection’ event.

By using the event afterOptionSelection we can find the URL of the respective image.

_.extend(ProductDetailsImageGalleryView.prototype, {
				template: jj_childitem_mycoolmodule_tpl,

				initialize: _.wrap(ProductDetailsImageGalleryView.prototype.initialize, function (fn) {
					
					fn.apply(this, _.toArray(arguments).slice(1));
					 var application= this.options.application;
					 var pdp=application.getComponent('PDP');
					 var model= this.model;
					 var self=this;
					 pdp.on('afterOptionSelection', function () {
						self.itemInfo = pdp.getItemInfo();
						var g = $('label[class="product-views-option-tile-picker active"]').text();		
						g=$.trim(g).substring(0,7)	


						g=g.toLowerCase();
						var imgpath=self.itemInfo.item;						
						var urls = _.filter(imgpath.keyMapping_images, function(num){return num.url.indexOf(g) != -1;});

							var imgurl=urls[0].url;
							self.imgurl=imgurl;

						}

						self.render();
						})
				}),

Leave a comment

Your email address will not be published. Required fields are marked *