Домівка > How to (як зробити?), Magento > «Top Links» в Magento

«Top Links» в Magento

Що таке «Top Links»?

«Top Links» – це один з базових блоків Magento у якому створюються, так би мовити, «службові» посилання вашого магазину. Сюди відносяться Login/Logout, My Account, My Wishlist, My Cart та Checkout посилання. За замовчуванням «Топ лінки» знаходяться в «шапці» сторінки, але при потребі їх можна викликати і в другому місці.

Одна з важливих відмінностей топ лінків від простого списку посилань зроблених статично, є те, що по мірі того як ви додаєте товари в корзину (My Cart) та в Список бажань (My Wishlist), Top Links автоматично вписує отриману кількість поряд з потрібними посиланнями.

Top Links Magento

Топ лінки на головній сторінці дефолтової теми Magento

Де викликаються «Top Links»?

Блок викликається за допомогою:

<?php echo this->getChildHtml('topLinks') ?>

в темплейті template/page/html/header.phtml, а оголошується в page.xml

<block type="page/html_header" name="header" as="header">
	<block type="page/template_links" name="top.links" as="topLinks"/>
	<block type="core/text_list" name="top.menu" as="topMenu"/>
</block>

Посилання додаються до цього блоку за допомогою <action method="addLink" translate="label title" >…</action> в наступних XML файлах:

  • Login/Logout, My Account – customer.xml
  • My Cart та Checkout – checkout.xml
  • My Wishlist – wishlist.xml

Слід зазначити що посилання My Cart та Checkout викликаються за допомогою <action method="addCartLink"></action> та <action method="addCheckoutLink"></action> відповідно.

Модифікація «Top Links» в Magento.

Топ лінки будуються на основі темплейту, який знаходиться тут: page/template/links.phtml. У ньому ви можете додавати додаткові класи чи робити потрібні модифікації.

Інколи є потреба розбити топ лінки на дві частини. Наприклад Login/Logout, My Account зліва, а My Wishlist, My Cart та Checkout справа.

Top Links Magento separated

Розділені топ лінки

Зр­­­­­обити це дуже просто:

  1. Йдемо в page.xml та оголошуємо там ще один блок, майже ідентичний блоку topLinks, але даємо йому ім’я topLinksLeft;
    <block type="page/html_header" name="header" as="header">
    	<block type="page/switch" name="store_language" as="store_language" template="page/switch/languages.phtml"/>
    	<block type="core/text_list" name="top.menu" as="topMenu"/>
    	<block type="page/template_links" name="top.links" as="topLinks"/>
        <block type="page/template_links" name="top.links.left" as="topLinksLeft"/>
    </block>
    
  2. В темплейті template/page/html/header.phtml викликаємо наш блок у потрібному нам місці за допомогою <?php echo this->getChildHtml('topLinksLeft') ?>
    <div class="header">
    	<h1 id="logo" class="logo" title="<?php echo $this->getLogoAlt() ?>" style="background-image:url(<?php echo $this->getLogoSrc() ?>);"><a href="<?php echo $this->getUrl('') ?>"><?php echo $this->getLogoAlt() ?></a></h1>
    	<div class="toplinksleft"><?php echo $this->getChildHtml('topLinksLeft') ?></div>
    	<?php echo $this->getChildHtml('topLinks') ?>
    	<?php echo $this->getChildHtml('topMenu') ?>
    </div> 
  3. Йдемо в customer.xml змінюємо ім’я блоку в який викликаються Login/Logout, My Account з top.links на top.links.left так як в прикладі:
    <customer_logged_in>
    	<reference name="top.links.left">
    		<action method="addLink" translate="label title" module="customer"><label>My Account</label><url helper="customer/getAccountUrl"/><title>My Account</title><prepare/><urlParams/><position>10</position></action>
    	</reference>
    	<reference name="top.links.left">
    		<action method="addLink" translate="label title" module="customer"><label>Log Out</label><url helper="customer/getLogoutUrl"/><title>Log Out</title><prepare/><urlParams/><position>100</position></action>
    	</reference>
    </customer_logged_in>

Також можна присвоїти топ лінкам, які будуть зліва інший темплейт (інколи потрібно постайлити їх по-різному). Для цього продублюємо темплейт page/template/links.phtml та назвемо його links_left.phtml. Отже у нас є 2 темплейти links.phtml для правого блоку і links_left.phtml для лівого. Залишилося тільки його підключити. Для цього в блоці «topLinksLeft» page.xml змінюємо оголошуємо темплейт links_left.phtml.

<block type="page/html_header" name="header" as="header">
	<block type="page/template_links" name="top.links" as="topLinks"/>
	<block type="page/template_links" name="top.links.left" as="topLinksLeft" template="page/template/links_left.phtml" />
</block>

Тепер ці блоки можна постайлити абсолютно по-різному і додати різний HTML до них.

А якщо нам потрібно додати посилання на реєстрацію облікового запису (Register) поряд з Login/Logout? Для цього йдемо в customer.xml і об’являємо посилання наступним чином:

<customer_logged_out>
	<reference name="top.links">
		<action method="addLink" translate="label title" module="customer"><label>Log In</label><url helper="customer/getLoginUrl"/><title>Log In</title><prepare/><urlParams/><position>100</position></action>
		<action method="addLink" translate="label title" module="customer"><label>register</label><url helper="customer/getRegisterUrl"/><title>register</title><prepare/><urlParams/><position>10</position></action>
	</reference>
</customer_logged_out>
About these ads
  1. Тротуарная плитка
    Жовтень 21, 2011 о 14:30 | #1

    Большое спасибо за толковое разъяснение. Только с Вашей помощью смог разобраться…

  2. Александр
    Січень 14, 2014 о 15:54 | #2

    А есть возможность поместить Top Links в выпадающем меню?

    • Січень 14, 2014 о 20:00 | #3

      Якщо під “выпадающем меню” маєте на увазі меню категорій, то наскільки я знаю в версії до 1.8 такого зробити не можна.

      • Александр
        Січень 14, 2014 о 20:15 | #4

        Я маю на увазі зробити в хедері маленький блок з випадаючим меню, і в нього перемістити всі стандартні Top Links. Чи є така можливість? Ніде в неті не можу знайти таку інформацію.

      • Січень 15, 2014 о 17:11 | #5

        Не зовсім зрозуміло, що саме потрібно зробити. Було б добре побачити дизайн. Але може це допоможе: Top links є по суті блоком в який ви можете “назбирати” певний набір системних (і не тільки) лінків. Цей блок має свій темплейт, який ви можете поредагувати на свій розсуд(де темплейт написано в статті). Ви можете викликати цей блок в іншому блоці. Єдине що ви не можете робити – це в темплейті хедера напряму викликати конкретні лінки. Якщо покажете дизайн – спробую відповісти конкретніше.

  1. Травень 18, 2010 о 07:56 | #1
  2. Січень 28, 2011 о 08:55 | #2
  3. Липень 22, 2013 о 10:08 | #3

Напишіть відгук

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Змінити )

Twitter picture

You are commenting using your Twitter account. Log Out / Змінити )

Facebook photo

You are commenting using your Facebook account. Log Out / Змінити )

Google+ photo

You are commenting using your Google+ account. Log Out / Змінити )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

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