Шаблон категорий в VirtueMart, мой вариант оформления

Для отображения категорий в компоненте VirtueMart используеться шаблоны которые имеют название browse_xx.php В данной статье хочу показать мое решение оформления этого шаблона а также рассказать о заглушках (вставках кода на php).

В шаблоне используються заглушки вида {заглушка}

Вот перечень заглушек:

{product_flypage} - Ссылка на флаер товара

{product_thumb_image} - Имя файла маленькой картинки

{product_full_image} - Имя файла большой картинки

{full_image_width} - Ширина большой картинки. Для открытия картинки в окне, размером с картинку

{full_image_height} - Высота большой картинки

{image_url} - Ссылка до директории картинок Virtuemart «images/»

{image_width} - Ширина маленькой картинки

{image_height} - Высота маленькой картинки

{product_name} - Наименование товара

{product_s_desc} - Краткое описание товара

{product_details...} - Имя ссылки на флаер товара «Подробнее...»

{product_rating} - Рейтинг товара

{product_price} - Цена товара

{form_addtocart} - Форма добавления в корзину

{product_sku} - Артикул товара

А теперь исходник моего оформления файла категорий

<div>
        <h3><a style="font-size: 16px; font-weight: bold;" title="{product_name}" href="/{product_flypage}">
            {product_name}</a>
<div style="border: 2px;border-bottom-style: dotted;color: #D98C00;"></div>
<br style="clear:both" /> <br style="clear:both" /> 
        </h3>
<div style="width:100%;padding: 0px 3px 3px 3px;">
    <div style="float:left;width:20%;">
        <script type="text/javascript">//<![CDATA[
        document.write('<a href="javascript:void window.open(\'{image_url}product/{product_full_image}\', \'win2\', \'status=no,toolbar=no,scrollbars=yes,titlebar=no,menubar=no,resizable=yes,width={full_image_width},height={full_image_height},directories=no,location=no\');">');
        document.write('<img src="/{product_thumb_image}" {image_height} {image_width} border="0" title="{product_name}" alt="{product_name}" /></a>' );
        //]]></script>
        <noscript>
            <a href="/{image_url}product/{product_full_image}" target="_blank" title="{product_name}">
            <img src="/{product_thumb_image}" {image_height} {image_width} border="0" title="{product_name}" alt="{product_name}" />
            </a>
        </noscript>

    </div>

        <div style="float:left;width:70%;">
            {product_s_desc} 
        </div>

       <div style="float:right;width:10%;align:left; color : #ff9933;font-size:22px">
            {product_price}
        </div>

       <div style="float:right;width:80%;text-align:right"><BR>
   <div style="float:left;width:18%; valign:middle; color : #cc9900;font-size:22px">
            <a href="/{product_flypage}" title="{product_details...}">{product_details...}...</a></div>
      
{form_addtocart}   </div>
             

</div>
        </div>
        <div style="float:left;width:30%;">
        {product_rating}
        </div>
    </div>
</div>