«Top Links» в Magento

Що таке «Top Links»?

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

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

Топ лінки на головній сторінці дефолтової теми 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 справа.

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

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

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