Posting in the Magento forums has been disabled pending the implementation of a new and improved forum solution which should better serve the community.

For new questions please post at magento.stackexchange.com, the community-run support site for the Magento community. We will be providing updates on the new forum solution soon. For questions or concerns please email community@magento.com.

Magento Forum

Page 1 of 2
[SOLVED] Superscript and underline the “.00” part of the price…
 
liquid2g
Member
 
Avatar
Total Posts:  52
Joined:  2009-04-04
 

Hi guys,
Here’s a question for a CSS wizard

How can I apply superscript and and underline the “.00” part of the price?

Ie. How can I make $48.00 appear as in the attached picture
I’m aware of the CSS superscipt property <sup>
It’s quite simple to change the look of the whole price, but how would I apply it to only the latter half of the price (the decimal point and any digits afterward).

I do not just want to use an image for the price, since I require the dynamic currency conversion to still be available.

Still in the early stages of learning Magento, so clear explanations would be much appreciated.

Hopefully an answer will be useful for others trying to do the same thing too .

Thanks in advance!

-Luke

Image Attachments
superscript-example.jpg
 
Magento Community Magento Community
Magento Community
Magento Community
 
i960
Guru
 
Avatar
Total Posts:  633
Joined:  2007-10-01
Bakersfield, CA
 

This took me awhile to figure out because the price gets passed through what seems like a zillion functions.  This may not even be the best way, but it works for me.

The file you need to edit is /app/code/core/Mage/Directory/Model/Currency.php

Look for this code around line 180:

public function formatTxt($price$options=array())
    
{
        
if (!is_numeric($price)) {
            $price 
Mage::app()->getLocale()->getNumber($price);
        
}
        
/**
         * Fix problem with 12 000 000, 1 200 000
         */
        
$price sprintf("%f"$price);
        return 
Mage::app()->getLocale()->currency($this->getCode())->toCurrency($price$options);
    
}

Replace it with this code instead:

public function formatTxt($price$options=array())
    
{
        
if (!is_numeric($price)) {
            $price 
Mage::app()->getLocale()->getNumber($price);
        
}
        
/**
         * Fix problem with 12 000 000, 1 200 000
         */
        
$price sprintf("%f"$price);
        
$superscriptPrice explode(".",Mage::app()->getLocale()->currency($this->getCode())->toCurrency($price$options));
        return 
$superscriptPrice[0] '<sup>.' $superscriptPrice[1] '</sup>';
    
}

Now you will want to save this file to a different location so it doesn’t get overwritten by Magento upgrades.  Save the file to /app/code/local/Mage/Directory/Model/Currency.php

Now Magento will load the modified file instead of the default one.  Keep in mind that if this file is ever updated by a Magento upgrade, you will need to apply those changes to your copied file.  I think there is a way to overload just the formatTxt() function instead of the whole file, but I’m not sure how to do that.

Now what this does is take a price such as $19.95, splits it at the decimal point, and then puts it back together like this: $19<sup>.95</sup> As long as the currency uses a decimal point, it should work.  Now styling that is up to you and I can’t really help you with that.  Also, keep in mind that this is going to affect prices nearly everywhere, on both the frontend and backend.  If you were wanting it to affect just specific prices, that would require more work and I’m not sure exactly how to do that.  Hopefully this information will get you started in the right direction.

 
Magento Community Magento Community
Magento Community
Magento Community
 
liquid2g
Member
 
Avatar
Total Posts:  52
Joined:  2009-04-04
 

Thanks i960! That’s great.
Very helpful indeed!

Works a treat!

If anyone else knows how to override just the single function instead of the whole php file when uploading files to
“app/code/local” it would be great to know. This would mean it’s less likely to create troubles when upgrading.

thanks in advance
Luke

 
Magento Community Magento Community
Magento Community
Magento Community
 
Solide
Member
 
Avatar
Total Posts:  44
Joined:  2010-03-13
Netherlands
 

I would love a decent solution for this. The one described above doesnt work with 1.4.2.0. Anyone know how to do this in the template code?

 
Magento Community Magento Community
Magento Community
Magento Community
 
Solide
Member
 
Avatar
Total Posts:  44
Joined:  2010-03-13
Netherlands
 

Ok, i fixed this using jQuery. If anyone is interested here is the code i used:

$j(".price").each(function() {
        
var newText $j(this).text().split(",").join("</span>,<span class='cents'>");
        
newText "<span class='dollars'>" newText "</span>";
        
$j(this).html(newText);
    
});

This will add a span class called “cents” around the cents after the decimal of the price. Through CSS you can now format the decimals for specific parts of your skin.

 
Magento Community Magento Community
Magento Community
Magento Community
 
smoothman36
Member
 
Total Posts:  52
Joined:  2009-12-04
 

i960’s solution works great. But, it doens’t work with product options.

For example in the dropdown for a configured product with mulitple color options we see the following:
Blue +10,<sup>00</sup>
Instead of Blue +10,00

As well for the other options (radio buttons, checkbox etc) where the <sup> code is gone.

ANY IDEAS?

 
Magento Community Magento Community
Magento Community
Magento Community
 
smoothman36
Member
 
Total Posts:  52
Joined:  2009-12-04
 

Anybody got an idea? Or where to place the jquery that Phuture suggested?

 
Magento Community Magento Community
Magento Community
Magento Community
 
Basbasbas
Jr. Member
 
Total Posts:  22
Joined:  2011-01-28
 

Thought I’d share this with the forum; this is what I did to add a <span> to the decimals;

- Copy Currency.php to the app\code\local folder and edit the file
- Goto function formatPrecision ()
- Change line

return '<span class="price">' . ($addBrackets '[' '') . $this->formatTxt($price$options) . ($addBrackets ']' '') . '</span>';

in

return '<span class="price-before">' . ($addBrackets '[' '') . substr($this->formatTxt($price$options), 0strrpos($this->formatTxt($price$options), ',')+1) . '<span class="price-after">' substr($this->formatTxt($price$options), -22) . ($addBrackets ']' '') . '</span>' '</span>';

- Add price-before and price-after to styles.css. For example:

.price-before {
    font
-size100%;
}

.price-after {
    font
-size70%;
    
positionrelative;
    
top : -3px;
}

I’m not yet finished, I’m still figuring out what $includeContainer does in the function, but meanwhile i’ve added the line

$includeContainer true;

just below the start of the function and it seems to work.  Another thing is that by this modification all the price-formats change, everywhere wink I think it must be possible to avoid this by using relative css.

By the way, I’m in the Magento/CSS/PHP-business ‘since tuesday’, sorry for not knowing the right words wink

 
Magento Community Magento Community
Magento Community
Magento Community
 
steverice
Jr. Member
 
Total Posts:  3
Joined:  2011-05-15
 

To expand on Basbasbas’ post a bit, the $includeContainer flag specifies whether to add the HTML span tags to the price output. In some areas of the site, the span is not used, and that’s where $includeContainer would be false.

I did an override of Mage_Directory_Model_Currency and used this as my formatPrecision():

public function formatPrecision($price$precision$options=array(), $includeContainer true$addBrackets false)
{
    
if (!isset($options['precision'])) {
        $options[
'precision'$precision;
    
}
    $priceText 
$this->formatTxt($price$options);
    if (
$includeContainer{
        
return '<span class="price">' . ($addBrackets '[' '') . substr($priceText0, ($options['precision'* -1)) . '<span class="super">' substr($priceText, ($options['precision'* -1))  . '</span>' . ($addBrackets ']' '') . '</span>';
    
}
    
return $priceText;
}

The advantage here is that it uses the $precision parameter to determine where the string should be split, so (in theory) it should work across currency formats as it does not require the separator to be a specific character like a period or a comma. In this implementation the separator is left outside of the super span, so you may want to adjust this to include it or remove it altogether.

 
Magento Community Magento Community
Magento Community
Magento Community
 
nathan123
Jr. Member
 
Total Posts:  9
Joined:  2011-11-26
 

Very good, thanks.

 
Magento Community Magento Community
Magento Community
Magento Community
 
joost22
Jr. Member
 
Total Posts:  6
Joined:  2011-06-30
 
decadentwaste - 03 January 2012 09:45 AM

To expand on Basbasbas’ post a bit, the $includeContainer flag specifies whether to add the HTML span tags to the price output. In some areas of the site, the span is not used, and that’s where $includeContainer would be false.

I did an override of Mage_Directory_Model_Currency and used this as my formatPrecision():

public function formatPrecision($price$precision$options=array(), $includeContainer true$addBrackets false)
{
    
if (!isset($options['precision'])) {
        $options[
'precision'$precision;
    
}
    $priceText 
$this->formatTxt($price$options);
    if (
$includeContainer{
        
return '<span class="price">' . ($addBrackets '[' '') . substr($priceText0, ($options['precision'* -1)) . '<span class="super">' substr($priceText, ($options['precision'* -1))  . '</span>' . ($addBrackets ']' '') . '</span>';
    
}
    
return $priceText;
}

The advantage here is that it uses the $precision parameter to determine where the string should be split, so (in theory) it should work across currency formats as it does not require the separator to be a specific character like a period or a comma. In this implementation the separator is left outside of the super span, so you may want to adjust this to include it or remove it altogether.

Thanks for the code, its working but not for product with custom options. Can you help me?

 
Magento Community Magento Community
Magento Community
Magento Community
 
Ton Swart
Jr. Member
 
Total Posts:  24
Joined:  2009-05-10
 

Thanks for the solution.

It works on the list/view category page - but not on a product-page in case with product options.

With most currencies it works - except with displaying the Euro sign behind the amount (Germany) then it displays.���

21,09 ���

 
Magento Community Magento Community
Magento Community
Magento Community
 
bones_ct
Jr. Member
 
Total Posts:  12
Joined:  2011-07-20
 

Thanks I960. You saved my lungs a pack of tigarets trying to solve this for my website.

 
Magento Community Magento Community
Magento Community
Magento Community
 
hubfub
Jr. Member
 
Total Posts:  2
Joined:  2008-10-18
 
i960 - 23 May 2009 06:16 PM

This took me awhile to figure out because the price gets passed through what seems like a zillion functions.  This may not even be the best way, but it works for me.

The file you need to edit is /app/code/core/Mage/Directory/Model/Currency.php

Look for this code around line 180:

public function formatTxt($price$options=array())
    
{
        
if (!is_numeric($price)) {
            $price 
Mage::app()->getLocale()->getNumber($price);
        
}
        
/**
         * Fix problem with 12 000 000, 1 200 000
         */
        
$price sprintf("%f"$price);
        return 
Mage::app()->getLocale()->currency($this->getCode())->toCurrency($price$options);
    
}

Replace it with this code instead:

public function formatTxt($price$options=array())
    
{
        
if (!is_numeric($price)) {
            $price 
Mage::app()->getLocale()->getNumber($price);
        
}
        
/**
         * Fix problem with 12 000 000, 1 200 000
         */
        
$price sprintf("%f"$price);
        
$superscriptPrice explode(".",Mage::app()->getLocale()->currency($this->getCode())->toCurrency($price$options));
        return 
$superscriptPrice[0] '<sup>.' $superscriptPrice[1] '</sup>';
    
}

Now you will want to save this file to a different location so it doesn’t get overwritten by Magento upgrades.  Save the file to /app/code/local/Mage/Directory/Model/Currency.php

Now Magento will load the modified file instead of the default one.  Keep in mind that if this file is ever updated by a Magento upgrade, you will need to apply those changes to your copied file.  I think there is a way to overload just the formatTxt() function instead of the whole file, but I’m not sure how to do that.

Now what this does is take a price such as $19.95, splits it at the decimal point, and then puts it back together like this: $19<sup>.95</sup> As long as the currency uses a decimal point, it should work.  Now styling that is up to you and I can’t really help you with that.  Also, keep in mind that this is going to affect prices nearly everywhere, on both the frontend and backend.  If you were wanting it to affect just specific prices, that would require more work and I’m not sure exactly how to do that.  Hopefully this information will get you started in the right direction.

This solution still works great but I was wondering how I can get it to also work with the bundle pricing see my test site: http://vt.webq.com.au/computers/servers/test

The “Price as configured: $699.00” still does not have the cents superscripted.. does anyone know how to apply it to this as well?

 
Magento Community Magento Community
Magento Community
Magento Community
 
Memphis
Jr. Member
 
Total Posts:  2
Joined:  2009-12-15
 

The code is working but my curency symbol is after the price and is putting the curency into the sup.

<span id="product-price-236" class="price">
95<sup>.00 Lei</sup>
</span>

Can you help me please to have it live that:

<span id="product-price-236" class="price">
95<sup>.00 </sup>Lei
</span>

 
Magento Community Magento Community
Magento Community
Magento Community
 
szokart
Member
 
Avatar
Total Posts:  38
Joined:  2008-08-21
Bialystok, Poland
 

The file you need to edit is /app/code/core/Mage/Directory/Model/Currency.php

Look for this code around line 180:

public function formatTxt($price$options=array())
    
{
        
if (!is_numeric($price)) {
            $price 
Mage::app()->getLocale()->getNumber($price);
        
}
        
/**
         * Fix problem with 12 000 000, 1 200 000
         */
        
$price sprintf("%f"$price);
        return 
Mage::app()->getLocale()->currency($this->getCode())->toCurrency($price$options);
    
}

Replace it with this code instead:

public function formatTxt($price$options=array())
    
{
        
if (!is_numeric($price)) {
            $price 
Mage::app()->getLocale()->getNumber($price);
        
}
        
/**
         * Fix problem with 12 000 000, 1 200 000
         *
         * %f - the argument is treated as a float, and presented as a floating-point number (locale aware).
         * %F - the argument is treated as a float, and presented as a floating-point number (non-locale aware).
         */
        
$price sprintf("%F"$price);
        
// change /////
        
$superscriptPrice explode(",",Mage::app()->getLocale()->currency($this->getCode())->toCurrency($price$options));
        
$b_superscriptPrice=substr($superscriptPrice[1]02); 
        
$c_superscriptPrice=substr($superscriptPrice[1]2); 
        return 
$superscriptPrice[0].'<sup>'.$b_superscriptPrice.'</sup>'.$c_superscriptPrice;
        
//change end ///// 
        //return Mage::app()->getLocale()->currency($this->getCode())->toCurrency($price, $options);
    
}

result:

<span id="product-price-x" class="price">199<sup>00</sup>Lei</span>

 
Magento Community Magento Community
Magento Community
Magento Community
Magento Community
Magento Community
Back to top
Page 1 of 2