Price decimals style in Prestashop 1.7.8.8

[cristidam]

Hello,

I would like to display the price decimals in the following style: 

I have updated classes/Tools.php, by adding <sup> tag to the decimals, but on the frontend the html gets converted to text an it shows 499⁰⁰.

I have found an older post that gives a solution but it's for PS 1.6.

https://www.prestashop.com/forums/topic/557593-productprice-smaller-font-behind-the-comma/

Can someone help me with this issue?

Thank you!

 

[ps8modules]

Hi.

It needs to be added wherever the price parameter is nofilter.

For example: {$product.price nofilter}

[cristidam]

9 hours ago, ps8moduly.cz said:

Hi.

It needs to be added wherever the price parameter is nofilter.

For example: {$product.price nofilter}

Hi,

Thank you. This works fine, it's just that it's a lot of work to modify the decimal style everywhere. I was wondering if there is a way to add the <sup> element directly where the $product.price is formatted, I just can't find the file.

Thank you!

 

[vmthang]

On 11/7/2023 at 4:19 PM, cristidam said:

Hi,

Thank you. This works fine, it's just that it's a lot of work to modify the decimal style everywhere. I was wondering if there is a way to add the <sup> element directly where the $product.price is formatted, I just can't find the file.

Thank you!

 

Hi,

Did you manage to fix this? I want the same price format effect for my prestashop 1.7

Thank you

 

[jwd19]

anyone has a solution to this please ?

[Mediacom87]

Hi,

Here is the code to put in your theme's custom.js file:

document.addEventListener("DOMContentLoaded", function () {
	const priceElements = document.querySelectorAll(".current-price-value, .price");

	priceElements.forEach(el => {
		let text = el.textContent.trim();
		const regex = /(\d{1,3}(?:[.,'\u00A0]\d{3})*|\d+)[.,](\d+)/;
		const match = text.match(regex);
		if (match) {
			const integerPart = match[1];
			const decimalPart = match[2];
			const formattedNumber = `${integerPart}<sup>${decimalPart}</sup>`;
			el.innerHTML = text.replace(regex, formattedNumber);
		}
	});
});

And here is the code to put in your theme's custom.css file:

sup {
	font-size: 0.6em;
	vertical-align: top;
	position: initial;
	line-height: inherit;
}

 

[jwd19]

10 hours ago, Mediacom87 said:

Hi,

Here is the code to put in your theme's custom.js file:

document.addEventListener("DOMContentLoaded", function () {
	const priceElements = document.querySelectorAll(".current-price-value, .price");

	priceElements.forEach(el => {
		let text = el.textContent.trim();
		const regex = /(\d{1,3}(?:[.,'\u00A0]\d{3})*|\d+)[.,](\d+)/;
		const match = text.match(regex);
		if (match) {
			const integerPart = match[1];
			const decimalPart = match[2];
			const formattedNumber = `${integerPart}<sup>${decimalPart}</sup>`;
			el.innerHTML = text.replace(regex, formattedNumber);
		}
	});
});

And here is the code to put in your theme's custom.css file:

sup {
	font-size: 0.6em;
	vertical-align: top;
	position: initial;
	line-height: inherit;
}

 

hi Sir thank yo ufor your reply!

i have uploaded the first part in /theme/asses/js/custom.js     and the css code in the css file,  deleted cache, but unfortunately nothing has changed, can you help me proceed please

[Mediacom87]

Il y a 14 heures, jwd19 a dit :

hi Sir thank yo ufor your reply!

i have uploaded the first part in /theme/asses/js/custom.js     and the css code in the css file,  deleted cache, but unfortunately nothing has changed, can you help me proceed please

URL of your site ?