- Як поміняти шаблон вітрини в адмінці virtuemart. Управління шаблонами віртуемарта.
- Файли, які мають відношення до відображення списку товарів в virtuemart.
- Основні змінні, використовувані в шаблоні вітрини вітруемарт. Як вивести ціну, повне / короткий опис і т.д.
- Прикручуємо верстку до шаблону.
Добрий день, читачі мого блогу . Тут ви знайдете відповіді на деякі питання, які мучать вебмайстрів. Сьогодні мова піде про безкоштовне компоненті (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;}На закуску мувик про курйози муай-тая. Мордобій по тайськи.
Так, наприклад, шаблон форми додавання в корзину виглядає наступним чином: <?Gt; <Form action = "<?
Php echo $ mm_action_url?
Php" method = "post" name = "addtocart" id = "addtocart <?
Php echo $ i?
Gt;" Class = "addtocart_form" <?
Notify) {echo 'onsubmit = "handleAddToCart (this.id); return false;"'; }?
Gt;> <?
Php echo $ ps_product_attribute-> show_quantity_box ($ product_id, $ product_id); ?
Наша совместная команда Banwar.org. Сайт казино "Пари Матч" теперь доступен для всех желающих, жаждущих волнения и азартных приключений.