This product page inspired me to write this post. It was launched around February last year (uh oh time flies!) and the first successful order was made around that time too. By then, there were only about 20 products or less, and really short attributes i.e. volumes in 8, 12 or 16 oz. strength like mild, regular, etc. Last monday, new products came in for addition to the site and they have quite longer attributes. It could have had a liquid width on the attribute and cart buttons but they had a really good design advisers and wanted to follow the design to the pixel.

Initially, this html code composes the product attribute and cart button, notice that <span class="c">Cherry</span> is a one word attribute for scent

  Cherry
  8 oz.
  $5.99
  
    Add to bag
  
  » ITEM: 33404

And the new ones came with the colors “Casino Red”, “Golden Chestnut” and “Orchid Black” – long attributes, and two others “Copper” and “Spice” – short and manageable, as the column width will fit the entire word.

I was really planning to rewrite the whole attribute and cart button section, but I didn’t had much time. I figured I can make the font smaller and paddings or margins can go smaller than the regular so that two lines would fit in the box if the attribute value is a word longer. But I cannot be in PHP, its not really the way to go. So, if I can add another class that would override existing font-size and parent margin/padding, that would work. Here, I thought, word count doesn’t really need be in the PHP side and since I’m using Smarty, I found in it a variable modifier that can print the number of words in a variable, and that’s it. I can add another class in the column span like words-10 or countwords-3 in my template by the number of words that is present in the variable. Below is the generated code

  Casino Red
  8 oz.
  $11.39
  
    Add to bag
  
  » ITEM: 33825

CSS rules

/* default rules */
.cartbutton { height: 23px; background: url('/images/button-add-to-bag.gif') no-repeat left center; color: #333; }
.cartbutton span { display: block; text-align: center; float: left; font-weight: bold; font-size: 10px; padding-top: 5px; }
.cartbutton span.c { width: 45px;  }
.cartbutton span.d { width: 80px;}
.cartbutton span.d a { color: #fff; text-decoration: none; }
.cartbutton span.e { margin-left: 10px; width: 100px; }
/* special rule for two word attribute */
span.words-2 { padding-top: 3px; line-height: 98%; font-size: 9px; }

And this is how it is setup in the template.

{if $attr[at].color}
  {$attr[at].color}
{/if}
{if $attr[at].strength}
  {$attr[at].strength}
{/if}
{if $attr[at].scent}
  {$attr[at].scent}
{/if}
{if $attr[at].volume}
  {$attr[at].volume}
{/if}

  $ {if !$attr[at].amount} {$results[r].amount} {else} {math equation="x" x=$attr[at].amount format="%.2f"} {/if}


  Add to bag

» ITEM: {if $results[r].sku && !$attr[at].sku}{$results[r].sku}{elseif $attr[at].sku}{$attr[at].sku}{/if}

Those extra class names like col-volume, col-scent and col-strength are only for future use, who knows what other formatting and adjustments on the data and theme will happen. Its really fun working with MVC model. Hope it helps

Happy coding!