Commerce Price Field formatting

Question

I'm using a view which is rendering the Product displays as DisplaySuite modes.

Right Now, the generated code for the price looks as follows.

<div class="commerce-product-field commerce-product-field-commerce-price field-commerce-price node-12-product-commerce-price">HK$100.00<span>/Month</span></div>

In order to achieve a similar rendering as

I need to split the decimal part and the currency into their own markup.

Any idea about how to do that in a clean fashion ?

Answer 1

I have found a working solution for that, even if there might be a more clean solution, at least it works.

In the template.php file of my theme in use I put the function :

  function MYTHEME_preprocess_field(&$vars) {
  if($vars['element']['#field_name'] == 'commerce_price') {                              
    // dpm($vars);
    $price = $vars['element'][0]['#markup'];
    $parts = explode(".",$price);
    $parts[0] = str_replace('HK$', '',$parts[0]);
    $markup = '<span class="currency">HK$</span><span class="units">'.$parts[0].'</span><span class="decimal">.'.$parts[1].'</span>';
    $vars['items'][0]['#markup'] = $markup;
  }
}

Once this saved, a markup on which it is possible to act is generated. The "per month" par is supplied by a field suffix using Display Suite. The rest is some easy CSS to style the output.

Another method is possible. At uncommenting the dpm($vars) line in the code above, some candidate template files names for the field are provided.

Answer 2

Maybe using CSS nth child? http://www.w3schools.com/cssref/sel_nth-child.asp to set the decimal font size and then z index and right margin the per month?