Як створити меню з act-ефектом використовуючи віджети в Magento
Дуже часто під час розробки інтернет магазину потрібно зробити меню зі статичних сторінок. Наприклад “Про нас”, “Доставка”, “Умови повернення” і таке інше. Меню може бути, як в “шапці” сайту, так і в “підвалі”. Часто дизайн магазину передбачає, що коли ми переходимо на одну з цих сторінок відповідний йому пункт меню має підсвічуватися як активний.
Це завдання ми можемо реалізувати за допомогою лише CSS додавши унікальні id на кожен з елементів меню та враховуючи те що на тег <body> Magento доставляє унікальні класи, які залежать від URL ідентифікатора сторінки.
Але правильніше це зробити використовучи віджети, які доступні в Magento з версії 1.4.x. Отже давайте творити:
1. Перш за все створюємо власне статичні сторінки з яких складатиметься меню (“Про нас”, “Доставка”, “Умови повернення” і та інші).
2. Створюємо файл для нашого віджету по цьому шляху
app/design/frontend/vashpackage/vashatema/template/cms/widget/link/cms_menu_link.phtml з наступним кодом у середині:
<!--?php $testHref = trim($this--->getBaseUrl(),'/').$this->getRequest()->getPathInfo();
if ($testHref == $this->getHref() || strpos($testHref, $this->getHref().'/') === 0) {
$this->setClass($this->getClass().' act');
}
?>
<a>getLinkAttributes() ?>></a>
3. Створюємо статичний блок, який і буде нашим меню. В ньому додаємо наступний код:
4. В вікні статичного блоку клікаємо на кнопці ”Insert Widget”, у вспливаючому вікні вибираємо ”CMS Page Link” в селекторі “Widget Type”. Заповнюємо поля ”Anchor Custom Text” та “Anchor Custom Title”. В селекторі ”Template” вибираємо “CMS Page Link Inline Template”. Після цього натискаємо кнопку “Select Page” та вибираємо бажану сторінку (в нашому випадку це About Us). Тепер натискаємо ”Insert Widget” в правому верхньому кутку.
5. Ми отримаємо код дуже подібний на цей:
{{widget type="cms/widget_page_link" anchor_text="About Us" title="About Us" template="cms/widget/link/link_inline.phtml" page_id="3"}}
у ньому підміняємо template=”cms/widget/link/link_inline.phtml” на template=”cms/widget/link/cms_menu_link.phtml”.
Як ви розумієте цей дивний шмат коду буде генерувати нам посилання на пункт меню “About Us”, а саме лінк на нього. Тому ми переносимо його в потрібне для нас місце в HTML. І наш код виглядатиме так:
</pre>
<ul id="submenu">
<li>{{widget type="cms/widget_page_link" anchor_text="About Us" title="About Us" template="cms/widget/link/cms_menu_link.phtml" page_id="3"}}</li>
</ul>
<pre>
тепер посилання буде мати клас “act” коли ми зайдемо на сторінку About Us, у всіх інших випадках воно буде без класу.
6. Повторюємо пункти 4 та 5 для кожного пункту меню.
7. Коли завершите зберігаєте блок та стайлите його відповідно до дизайну.
Удачі.
Сподобалася стаття? Підпишись на RSS або на e-mail розсилку. А ще приєднуйся до нас у Твітері @magentoua.
Вам також буде цікаво прочитати:
Дякую за статтю,а то багато замовлень є на магазини,а я чув тільки джумлу з якимось додатком у вигляді магазину.А це власне те що потрібно невеликий скрипт,не нагружає сервер і доволі простий в освоєнні