Домівка > How to (як зробити?), Magento > Як створити меню з act-ефектом використовуючи віджети в Magento

Як створити меню з 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.

Вам також буде цікаво прочитати:

Advertisements
  1. Серпень 18, 2011 о 21:58

    Дякую за статтю,а то багато замовлень є на магазини,а я чув тільки джумлу з якимось додатком у вигляді магазину.А це власне те що потрібно невеликий скрипт,не нагружає сервер і доволі простий в освоєнні

  1. No trackbacks yet.

Залишити відповідь

Заповніть поля нижче або авторизуйтесь клікнувши по іконці

Лого WordPress.com

Ви коментуєте, використовуючи свій обліковий запис WordPress.com. Log Out / Змінити )

Twitter picture

Ви коментуєте, використовуючи свій обліковий запис Twitter. Log Out / Змінити )

Facebook photo

Ви коментуєте, використовуючи свій обліковий запис Facebook. Log Out / Змінити )

Google+ photo

Ви коментуєте, використовуючи свій обліковий запис Google+. Log Out / Змінити )

З’єднання з %s

%d блогерам подобається це: