How to edit price function html in magento?

Question

Currently price showing like:

<span class="price">$589.00</span>

i want currency to bit little than other fonts and i should be superlative? like:

<span class="price"><sup>$</sup>589.00</span>

From where do i get that file?

Answer 1

The currency symbol is defined in /lib/Zend/Locale/Data/_your locale_.xml, but I would not change it there. This will modify it everywhere and at least in pdfs you will get the tags displayed instead of HTML. Simplest way would be to achieve it via the :first-letter css pseudo-selector:

.price:first-letter
{ 
  //style here
}

Browser support is pretty good - http://www.w3schools.com/cssref/sel_firstletter.asp

Answer 2

Looking inside design/frontend/[package]/[theme]/template/catalog/product/price.phtml, it seems all prices are rendered by calling currency(...) inside Mage_Core_Helper_Data

public static function currency($value, $format = true, $includeContainer = true)
{
    return self::currencyByStore($value, null, $format, $includeContainer);
}

currency(...) then calls currencyByStore(...):

public static function currencyByStore($value, $store = null, $format = true, $includeContainer = true)
{
    ...
    $value = $store->convertPrice($value, $format, $includeContainer);
    ...
}

currencyByStore(...) calls convertPrice() inside Mage_Core_Model_Store:

public function convertPrice($price, $format = false, $includeContainer = true)
{
    ...
    if ($this->getCurrentCurrency() && $format) {
        $value = $this->formatPrice($value, $includeContainer);
    }
    return $value;
}

convertPrice(...) calls formatPrice(...):

public function formatPrice($price, $includeContainer = true)
{
    if ($this->getCurrentCurrency()) {
        return $this->getCurrentCurrency()->format($price, array(), $includeContainer);
    }
    return $price;
}

which eventually calls format(...), the format method takes in an options array that gets passed all the way down to Zend_Currency inside /lib/Zend/Currency.php

/**
 * Options array
 *
 * The following options are available
 * 'position'  => Position for the currency sign
 * 'script'    => Script for the output
 * 'format'    => Locale for numeric output
 * 'display'   => Currency detail to show
 * 'precision' => Precision for the currency
 * 'name'      => Name for this currency
 * 'currency'  => 3 lettered international abbreviation
 * 'symbol'    => Currency symbol
 * 'locale'    => Locale for this currency
 * 'value'     => Money value
 * 'service'   => Exchange service to use
 *
 * @var array
 * @see Zend_Locale
 */

Notice the 'symbol' => Currency symbol and:

// Constants for defining what currency symbol should be displayed
const NO_SYMBOL     = 1;
const USE_SYMBOL    = 2;
const USE_SHORTNAME = 3;
const USE_NAME      = 4;

What you can do is override a the currency(), currencyByStore(), convertPrice() and formatPrice() to handle an extra parameter, a new options array and set symbol => 1 from inside price.phtml and then you would be able to do <span class="price"><sup>$</sup>589.00</span>

I haven't tested/tried anything, just followed the function calls so this might not be the best option.

Answer 3

Progressive enhancement option: you could target the price block with JS, find the price strings, and adjust the DOM by wrapping the first character with the <sup> tag.

This would give you more layout control in CSS than :first-letter and have roughly equivalent fallback.