Display a div on the picture product depending on selected declination

[skywhi]

Hello,
I want to display a special div when the selected declination of my product is on sale.

Example : my black chair is on sale so when it is selected on the color picker, i want display the div on the product picture of the black chair. But the orange chair is not on sale, so when you select it on the color picker, my div on the product pic disappears. I hope my request is understandable. Thanks in advance !

[hakeryk2]

Well, You can try in product.js something with global var selectedCombination

 

When You are on product page, select your product, open up browser console (ctrl+shift+j) and paste this:
 

console.log(selectedCombination);

You will see information about product. There are 2 values there that might define this is this product is on sale and they are

selectCombination.specific_price.reduction_percent and selectCombination.specific_price.reduction_percent 

So if You want to use it just open up product.js or your custom js file and paste this somewhere in product.js
 

function showSaleLabel(){
	if (selectedCombination['specific_price']['reduction_price'] == 0 || selectedCombination['specific_price']['reduction_percent']) {
		$('.sale-box').remove();
	} else {
		$('#image-block').prepend('<span class="sale-box no-print">\
			<span class="sale-label">SALE!</span>\
		</span>');
	}
}

in product.js You also have function updateDisplay() and on the end of this function paste 

showSaleLabel();

and now everything should work. Ofcourse You can add whatever You want in this prepend code.
Actually, thank You for this thread because I wanted to this a long time ago for myself. 

Edited August 28, 2017 by hakeryk2 (see edit history)