Делаем витрину (список товаров) для virtuemart, часть 2

Добрый день, читатели моего блога. Здесь вы найдете ответы на некоторые вопросы, которые мучают вебмастеров. Сегодня речь пойдет о бесплатном компоненте (virtuemart 1.1.5-9) для joomla 1.5-2.5, а конкретно о витрине виртуемарта. Для начинающего вебмастера, фрилансера, для того кто решил связать свою деятельность со сборкой магазинов на virtuemart данная статья будет полезна.

Основными элементами любого современного интернет магазина, являются: 1) витрина - список товаров 2) Карточка товара - описание товара (цена, производитель и т.д.) 3) список категорий товаров магазина, производителей 4) Корзина. Сегодня мы будем разбираться с витриной. Эта статья является логическим продолжением, того о чем я писал ранее. В предыдущей статье (верстка витрины для virtuemart) было рассмотрено, как можно из макета витрины нарисованного в фотошопе получить готовую верстку. В статье по шагам было рассмотрено создание html документа и оформление его CSS стилями, проще говоря, верстка макета витрины (списка товаров) магазина. В этой статье мы будем "натягивать" верстку витрины на движок магазина, формировать шаблон витрины.

Как поменять шаблон витрины в админке virtuemart. Управление шаблонами виртуемарта.

В предыдущей статье из рубрики virtuemart мы рассмотрели, как сверстать макет каталога будущего интернет-магазина на компоненте virtuemart. Макет витрины выглядит следующим образом.

Для начала нам необходимо настроить параметры отображения каталога. Заходим в админку joomla (_http://вашсайт/administrator), далее в компонентах выбираем virtuemart. Слева в панели открываем вкладку настройки и выбираем пункт настройки. На вновь открывшейся странице справа на вкладке "сайт" в группе настроек "Вид" указываем необходимые параметры.

Для нашего случая нужно выбрать: шаблон отображения товара в списке - browse_3; Количество товаров в строке - 3. Такие параметры требует макет, у нас 3 товара в строке.
Кроме этого параметры отображения можно задавать для каждой категории отдельно.

Около списка шаблонов нажмите на ссылку "настройки" откроется страница, где можно выбрать шаблон отображения списка товаров.

Для вновь созданных категорий параметры отображения каталога принимаются как в главных настройках. Если вам нужно настройки сделать отличными от основных, тогда выберете в компоненте виртуемарт слева вкладку "товары" -> "список категорий". На вновь открывшейся странице выбираем нужную категорию, далее на вкладке "Информация о категории" внизу выбираем нужные параметры.

Файлы, которые имеют отношение к отображению списка товаров в virtuemart.

Внешний вид магазина частично определяется настройками, которые можно изменить через админку, а в основном вид можно менять через шаблоны. Шаблоны это общепринятый способ объектно-ориентированного подхода в программировании. Это очень удобно, поскольку выборка данных из базы и обработка происходит в отдельном файле, а в шаблоне нет ничего лишнего кроме html тэгов и данных, которые нужно вывести. Так, например, шаблон формы добавления в корзину выглядит следующим образом:

<?php if( !defined( '_VALID_MOS' ) && !defined( '_JEXEC' ) ) die( 'Direct Access to '.basename(__FILE__).' is not allowed.' ); 
mm_showMyFileName(__FILE__);

$button_lbl = $VM_LANG->_('PHPSHOP_CART_ADD_TO');
$button_cls = 'addtocart_button';
if( CHECK_STOCK == '1' && !$product_in_stock ) {
	$button_lbl = $VM_LANG->_('VM_CART_NOTIFY');
	$button_cls = 'notify_button';
	$notify = true;
} else {
	$notify = false;
}
?>

<form action="<?php echo $mm_action_url ?>index.php" method="post" name="addtocart" id="addtocart<?php echo $i ?>" class="addtocart_form" <?php if( $this->get_cfg( 'useAjaxCartActions', 1 ) && !$notify ) { echo 'onsubmit="handleAddToCart( this.id );return false;"'; } ?>>
    <?php echo $ps_product_attribute->show_quantity_box($product_id,$product_id); ?><br />
	<input type="submit" class="<?php echo $button_cls ?>" value="<?php echo $button_lbl	?>" title="<?php echo $button_lbl ?>" />
    <input type="hidden" name="category_id" value="<?php echo  @$_REQUEST['category_id'] ?>" />
    <input type="hidden" name="product_id" value="<?php echo $product_id ?>" />
    <input type="hidden" name="prod_id[]" value="<?php echo $product_id ?>" />
    <input type="hidden" name="page" value="shop.cart" />
    <input type="hidden" name="func" value="cartadd" />
    <input type="hidden" name="Itemid" value="<?php echo $sess->getShopItemid() ?>" />
    <input type="hidden" name="option" value="com_virtuemart" />
    <input type="hidden" name="set_price[]" value="" />
    <input type="hidden" name="adjust_price[]" value="" />
    <input type="hidden" name="master_product[]" value="" />
</form>

В первых строках определяется место обращения к шаблону, что исключает непосредственное обращение к файлу шаблона.
В 4-13 строках определяются некоторые переменные. 15-28 непосредственно форма добавления в корзину. Шаблон представляет собой, по сути html документ с добавлением в нужные места php вставок.

• \components\com_virtuemart\themes\default\templates\browse\browse_xxx.php - шаблон отображения товара в общем списке
• \components\com_virtuemart\themes\default\templates\browse\includes\browse_notables.tpl.php - шаблон списка товаров (без таблиц), также есть шаблоны на таблицах (browse_layouttable.tpl.php)
• \components\com_virtuemart\themes\default\templates\browse\includes\addtocart_form.tpl.php - шаблон формирования группы элементов добавления в корзину

Основные переменные, используемые в шаблоне витрины витруемарт. Как вывести цену, полное/краткое описание и т.д.

В шаблоне browse_xxx.php используются следующие переменные.

• $product_flypage - url карточки товара
• $product_name - наименование товара
• $product_price - цена
• $product_thumb_image - ссылка на мини изображение товара
• $product_s_desc - краткое описание товара
• $product_desc - полное описание товара

здесь перечислены некоторые переменные, названия интуитивно понятны.

Прикручиваем верстку к шаблону.

Приступим к формированию шаблона. browse_notables.tpl.php - оставим без изменений. В шаблон browse_3.php просто добавим код верстки, при этом в нужные места добавим переменные:

<?php if( !defined( '_VALID_MOS' ) && !defined( '_JEXEC' ) ) die( 'Direct Access to '.basename(__FILE__).' is not allowed.' );
mm_showMyFileName(__FILE__);
$db	=& JFactory::getDBO();
$query = 'SELECT m.mf_name FROM #__vm_product AS p, #__vm_product_mf_xref AS mfx, #__vm_manufacturer AS m WHERE p.product_id=mfx.product_id AND m.manufacturer_id=mfx.manufacturer_id AND p.product_id='.$product_id.' LIMIT 1';
$db->setQuery($query);
$man = $db->loadObjectList();
 ?>
 
<table class="product_browse" cellpadding="0" cellspacing="0" border="0">
    	<tr>
        	<td colspan="2"><div class="img"><a href="<?php echo $product_flypage ?>" title="<?php echo $product_name ?>">
        <?php echo ps_product::image_tag( urldecode($product_thumb_image), 'class="browseProductImage" border="0" title="'.$product_name.'" alt="'.$product_name .'"' ) ?>
       </a></div></td>
        </tr>
        <tr>
        	<td colspan="2" class="descript"> <a style="font-size:16px; font-weight:bold;" href="<?php echo $product_flypage ?>"><?php echo $product_name ?></a><br/>Сила дуг: <?php echo $product_strong_d ?>кг.<br/>Производитель: <?php echo $man[0]->mf_name ?></td>
        </tr>
        <tr>
        	<td class="descript"><span class="price" rel="<?php echo $product_id ?>"><?php echo $product_price ?></span></td><td align="right" class="add" rel="<?php echo $product_id ?>" width="115px;"><?php echo $form_addtocart ?></td>
        </tr>
    </table>

стилевое оформление обеспечивается следующим CSS кодом, который нужно вставить в css файл шаблона joomla:

.addtocart_form input.quantity_box_button, .addtocart_form label { display:none;}

.product_browse .img{ background: url(../img/fon-img.png) no-repeat center top; width:220px; height:156px; padding-top:5px; margin-bottom:5px;}

.product_browse .img img{ margin:auto; display:block; border:none;}

.product_browse .add_to_cart{ background:url(../img/button-add-to-cart.png) no-repeat right top; width:80px; height:25px;}

.product_browse input.addtocart_button{ background:url(../img/button-add-to-cart.png) no-repeat right top; display:block; float:right; width:80px; height:25px; color:#fff; font-weight:100; font: 14px/18px Arial, Helvetica, sans-serif;}

.product_browse  {font: 14px/18px Arial, Helvetica, sans-serif; color: #4d4c4c; float:left; margin:0 10px 40px 0; width:217px; height:250px;}

.product_browse a, .product_browse a:visited{ font: 15px/18px Arial, Helvetica, sans-serif; color: #000; text-decoration:underline;}

.product_browse a:hover { font-style:italic;}

.product_browse span.price{ color: #a50101;}

.product_browse input.inputboxquantity{ width:22px; border:1px solid #b5b5b5; margin-right:5px; display:block; float:right;} 

.product_browse div.add_to_cart{ color:#fff; padding:2px 10px 0 0; margin-right:5px; float:right; cursor:pointer;}

.product_browse td.descript{ padding:0 10px 0 10px;}

#product_list{ margin-top:20px;}

На закуску мувик про курьезы муай-тая. Мордобой по тайски.