How to add font awesome icons in top links of Magento - magento

I am using boilerplate template for Magento and there is font awesome already included with this template. I create a bootstrap button for my car in top links by adding a class="btn btn-primary" in Links.php and now I am facing an issue when trying to add the cart icon from font awesome...
I would like to add this code in front of "My Cart (2 items)" top links:
My cart
I have tried few things without success...
thanks for any help
edit: this is what my top.links.phtml look like and I can't figure out how to add your code:
<?php if($toplinks && is_array($toplinks)): ?>
<ul class="links">
<?php echo $this->getChildHtml() ?>
<?php foreach($toplinks as $_toplink): ?>
<li<?php if($_toplink['first']||$_toplink['last']): ?> class="<?php if($_toplink['first']): ?>first<?php endif; ?><?php if($_toplink['last']): ?> last<?php endif; ?>"<?php endif; ?> <?php echo $_toplink['liParams'] ?>><?php echo $_toplink['beforeText'] ?><a <?php echo $_toplink['aParams'] ?>><?php echo $_toplink['innerText'] ?></a><?php echo $_toplink['afterText'] ?></li>
<?php endforeach; ?>
</ul>
<?php endif; ?>

best practice is use xml for custom modifications. but in this case you need to add on links. try to edit top.links.phtml..you can call class using this
<action method="addLink" translate="label title" module="customer">
<label>Logout</label>
<url helper="customer/getLogoutUrl"/>
<title>Log Out</title>
<prepare/>
<urlParams/>
<position>2</position>
<liParams></liParams>
<aParams>class="logout-link"</aParams>
<beforeText><![CDATA[<span>]]></beforeText>
<afterText><![CDATA[</span>]]></afterText>
</action>

Foolow this link:
http://www.ibeccreative.com/blog/151/Magento-Tutorial-How-to-Customize-the-Top-Links-Block/
and for some links as wishlist:
app/design/frontend/[[YOURTHEME]]/default/layout/wishlist.xml
Change:
<reference name="top.links">
<block type="wishlist/links" name="wishlist_link" />
<action method="addLinkBlock"><blockName>wishlist_link</blockName></action>
</reference>
To:
<reference name="top.links">
<block type="wishlist/links" name="wishlist_link">
<action method="setBeforeText">
<beforeText><![CDATA[<i class="fa fa-gift"></i>]]> </beforeText>
</action>
</block>
<action method="addLinkBlock">
<blockName>wishlist_link</blockName>
</action>
</reference>

Related

Moving toplinks to another block in Magento

I'm trying to move the toplinks to a static block that I created above the header. Currently, I'm only getting the "Log Out" link instead of all of the top links (My Account, My Wishlist, My Cart, and Checkout). How can I get all these links into the static block?
2columns-right.phtml
<head>
<?php echo $this->getChildHtml('head') ?>
</head>
<body<?php echo $this->getBodyClass()?' class="'.$this->getBodyClass().'"':'' ?>>
<?php echo $this->getChildHtml('after_body_start') ?>
<div class="wrapper">
<?php echo $this->getChildHtml('global_notices') ?>
<div class="page">
<div><?php echo $this->getChildHtml('newreference') ?></div>
<?php echo $this->getChildHtml('header') ?>
<div class="main-container col2-right-layout">
<div class="main">
<?php echo $this->getChildHtml('breadcrumbs') ?>
<div class="col-main">
<?php echo $this->getChildHtml('global_messages') ?>
<?php echo $this->getChildHtml('content') ?>
</div>
<div class="col-right sidebar"><?php echo $this->getChildHtml('right') ?></div>
</div>
</div>
<?php echo $this->getChildHtml('footer') ?>
<?php echo $this->getChildHtml('global_cookie_notice') ?>
<?php echo $this->getChildHtml('before_body_end') ?>
</div>
</div>
<?php echo $this->getAbsoluteFooter() ?>
</body>
</html>
newReference.phtml
<p class="welcome-msg"><?php echo $this->getChildHtml('welcome') ?> <?php echo $this->getAdditionalHtml() ?></p>
<div class="quick-access">
<?php echo $this->getChildHtml('topLinks') ?>
</div>
local.xml
<?xml version="1.0" encoding="UTF-8"?>
<layout>
<default>
<reference name="root">
<block type="core/text_list" name="newreference" as="newreference" translate="label">
<label>New Reference</label>
</block>
</reference>
<reference name="newreference">
<block type="core/template" name="newreferenceblock" template="newreference.phtml">
<block type="page/template_links" name="top.links" as="topLinks"/>
</block>
</reference>
</default>
</layout>
Try this
<reference name="newreference">
<block type="core/template" name="newreferenceblock" template="newreference.phtml">
<block type="page/template_links" name="top.links" as="topLinks"/>
</block>
</reference>
change this to
<reference name="newreference">
<block type="core/template" name="newreference" template="newReference.phtml">
<block type="page/template_links" name="top.links" as="topLinks"/>
</block>
</reference>

how to remove the 'home' link from top menu in magento?

I have a website where i don't want the 'home' link in top menu, I just want to remove or disable it...I have tried this link
http://www.magentocommerce.com/boards/viewthread/60059/
but it didn't find any code in top.phtml (app > design > frontend > default (or whatever theme you have) > catalog > navigation > top.phtml ) like-
<li> yada /home statement </li>
or
<li><?php echo $this->__('Home') ?></li>
I have only
<?php $_menu = $this->renderCategoriesMenuHtml(0,'level-top') ?>
<?php if($_menu): ?>
<div class="nav-container">
<ul id="nav">
<?php echo $_menu ?>
</ul>
</div>
<?php endif ?>
Please give a solution.
I already tried using xml in customer.xml file but may be I didn't use it in proper xml file or proper code.
<reference name="top.links">
<action method="removeLinkByUrl">
<url helper="core/url/getHomeUrl" />
</action>
</reference>
Try this in the local.xml file of your active theme.
<default>
<reference name="root">
<reference name="top.links">
<action method="removeLinkByUrl"><url helper="core/url/getHomeUrl"/></action>
</reference>
</reference>
</default>
As a hack you can hide it using css
find the class and add .class { display:none }
At last, I figured it out.The Home link is there because of the menu plugin(custom responsive menu'). I disabled it from backend.

Nested block within a reference not rendering when using ->getChildHtml()

this is my layout xml:
<catalog_category_default translate="label">
<label>Catalog Category (Non-Anchor)</label>
<reference name="content">
<block type="core/template" name="page.brand" template="page/brand.phtml" />
<block type="catalog/product_list" template="page/accessories.phtml">
<block type="catalog/navigation" name="catalog.leftnav" as="filter_menu" template="catalog/navigation/left.phtml"/>
</block>
</reference>
</catalog_category_default>
And from within page.accessories.phtml, inside some div block i call:
<?php echo $this->getChildHtml('filter_menu') ?>
but nothing renders out. Why is that?
this is code from the layered phtml file:
<div class="oh_shit"></div>
<?php if($this->canShowBlock()): ?>
<div class="block block-layered-nav">
<div class="block-title">
<strong><span><?php echo $this->__('Shop By') ?></span></strong>
</div>
<div class="block-content">
<?php echo $this->getStateHtml() ?>
<?php if ($this->getLayer()->getState()->getFilters()): ?>
<div class="actions"><?php echo $this->__('Clear All') ?></div>
<?php endif; ?>
<?php if($this->canShowOptions()): ?>
<p class="block-subtitle"><?php echo $this->__('Shopping Options') ?></p>
<dl id="narrow-by-list">
<?php $_filters = $this->getFilters() ?>
<?php foreach ($_filters as $_filter): ?>
<?php if($_filter->getItemsCount()): ?>
<dt><?php echo $this->__($_filter->getName()) ?></dt>
<dd><?php echo $_filter->getHtml() ?></dd>
<?php endif; ?>
<?php endforeach; ?>
</dl>
<script type="text/javascript">decorateDataList('narrow-by-list')</script>
<?php endif; ?>
</div>
</div>
<?php endif; ?>
Try adding your blocks in your layout xml to:
<catalog_category_layered translate="label">
<label>Catalog Category</label>
<reference name="content">
<block type="core/template" name="page.brand" template="page/brand.phtml" />
<block type="catalog/product_list" template="page/accessories.phtml">
<block type="catalog/navigation" name="catalog.leftnav" as="filter_menu" template="catalog/navigation/left.phtml"/>
</block>
</reference>
</catalog_category_layered>
ok. i got it. i accidentally deleted the name attribute on the block with type="product_list". when i re-added the name="product_list" it worked.

Moving Magento Advanced Search Link From Footer To Beneath Search Bar

I'm trying to move magentos advanced search link from the footer links right beneath the search bar.
I know that the origins of the link are in layout/catalogsearch.xml under
reference name="footer_links" and appear in the footer because of getChildHtml('footer_links') in footer.phtml
And i know that the search bar originates from template/catalogsearch/form.mini.phtml and appears though catalogsearch.xml under reference name="top.menu"
Any ideas on how to proceed here?
thank you for the quick answer!
But it is not exactly what I was looking for as it would display the entire footer links block beneath the searchbar.
Nevertheless thank you for showing me the method you used for that!
Anyways, I figured out a solution on my own:
I modified catalogsearch.xml:
<default>
<reference name="top.menu">
<block type="core/template" name="top.search" as="topSearch" template="catalogsearch/form.mini.phtml"/>
</reference>
<!-- add a new reference to top.search including my new adv.search block -->
<reference name="top.search">
<block type="page/template_links" name="adv.search" as="adv.search" >
<action method="addLink" translate="label title" module="catalogsearch">
<label>Advanced Search</label>
<url helper="catalogsearch/getAdvancedSearchUrl" />
<title>Advanced Search</title>
</action>
</block>
</reference>
<!-- the reference to the footer i commented out as its not longer needed; it includes advanced search and popular search terms-->
</default>
In form.mini.phtml I added a new div that calls adv.search:
</script>
<div class="adv-search"> <?php echo $this->getChildHtml('adv.search') ?> </div>
</div>
And last, in styles.css, I added some code to controll the looks of that div:
.adv-search {width:100px; height:15px; margin-top:24px; margin-left: 120px;}
.adv-search a { color:#fff; font-weight:bold; }
any additional advice is more than welcome
Cheers!
In order for this to work, you must:
1) Update your app/design/frontend/[yourtheme]/default/layout/local.xml file
2) Call the new blocks in app/design/frontend/[yourtheme]/default/template/page/html/header.phtml - this is needed because header.phtml is not a "core/text_list" block type which automatically renders its nested blocks. So we must explicitly tell Magento to render those child blocks
Your app/design/frontend/[yourtheme]/default/layout/local.xml should contain this:
<?xml version="1.0"?>
<layout version="0.1.0">
<default>
<reference name="header">
<!-- Insert cms links. No need to use <action method="insert"> as this block is not used elsewhere in layout -->
<block type="cms/block" name="top_links_cms" as="top_links_cms" before="top_links_other">
<action method="setBlockId"><block_id>footer_links</block_id></action>
</block>
<!-- Insert former footer links. -->
<action method="insert">
<!-- We must keep block name "footer_links" as it is used as a reference for adding links by other modules -->
<blockName>footer_links</blockName>
<!-- Name of the block we want to have as sibling (in order to get its position and place our block after it. See next node <after> -->
<siblingName>topSearch</siblingName>
<!-- $after param from Mage_Core_Block_Abstract::insert() is a boolean type, so its value in the XML node is [empty], 0 or 1 -->
<after>1</after>
<alias>top_links_other</alias>
</action>
</reference>
<reference name="footer">
<action method="unsetChild"><name>footer_links</name></action>
<action method="unsetChild"><name>cms_footer_links</name></action>
</reference>
</default>
</layout>
This is an updated header.phtml you can get inspiration from for your app/design/frontend/[yourtheme]/default/template/page/html/header.phtml file:
<div class="header-container">
<div class="header">
<?php if ($this->getIsHomePage()):?>
<h1 class="logo"><strong><?php echo $this->getLogoAlt() ?></strong><img src="<?php echo $this->getLogoSrc() ?>" alt="<?php echo $this->getLogoAlt() ?>" /></h1>
<?php else:?>
<strong><?php echo $this->getLogoAlt() ?></strong><img src="<?php echo $this->getLogoSrc() ?>" alt="<?php echo $this->getLogoAlt() ?>" />
<?php endif?>
<div class="quick-access">
<?php echo $this->getChildHtml('topSearch') ?>
<?php
/**
* Add other top links (footer and cms links)
*/
?>
<?php echo $this->getChildHtml('top_links_cms') ?>
<?php echo $this->getChildHtml('top_links_other') ?>
<p class="welcome-msg"><?php echo $this->getWelcome() ?> <?php echo $this->getAdditionalHtml() ?></p>
<?php echo $this->getChildHtml('topLinks') ?>
<?php echo $this->getChildHtml('store_language') ?>
</div>
<?php echo $this->getChildHtml('topContainer'); ?>
</div>
</div>
<?php echo $this->getChildHtml('topMenu') ?>

Magento: Move product filters

As default, the available product filters are displayed in the left sidebar. But I'd like to display them above the product list instead.
I simply tried to just copy the following code from /template/catalog/layer/view.phtml to /template/catalog/product/list.phtml:
<p class="block-subtitle"><?php echo $this->__('Shopping Options') ?></p>
<dl id="narrow-by-list">
<?php $_filters = $this->getFilters() ?>
<?php foreach ($_filters as $_filter): ?>
<?php if($_filter->getItemsCount()): ?>
<dt><?php echo $this->__($_filter->getName()) ?></dt>
<dd><?php echo $_filter->getHtml() ?></dd>
<?php endif; ?>
<?php endforeach; ?>
</dl>
But apparently it doesn't work that way. How should I do?
Thank you in advance!
You need to make the block (a php class) which uses the filters template a child of the class where you wish to include those filters. This is done in layout XML.
In a local.xml file in your theme's layout folder, do the following:
<?xml version="1.0" ?>
<layout>
<catalog_category_layered>
<!-- remove from left block -->
<reference name="left">
<action method="unsetChild">
<child>catalog.leftnav</child>
</action>
</reference>
<!-- add as child to product list block -->
<reference name="product_list">
<action method="insert">
<child>catalog.leftnav</child>
</action>
</reference>
</catalog_category_layered>
</layout>
using the above, you can simply call <?php echo $this->getChildHtml('catalog.leftnav') ?> inside your custom list template for it to show. You can either style it using CSS, or you can change its template by adding this inside the catalog_category_layered node above:
<reference name="catalog.leftnav">
<action method="setTemplate">
<child>path/to/template.phtml</child>
</action>
</reference>

Resources