Tuesday, October 12

How to add Facebook Like button to your product page

1. Open view.phtml in app/design/frontend/default/[yourtheme]/template/catalog/product

2. Find in that file this line

($_product->getName()), 'name')

3. You will see the code above is inside the header HTML mark up. Under the header (this is the location that I want to set up. However, you are welcome to put the Like button anywhere in the page that you want), put this line of code

<?php
          $url = $_product->getProductUrl()
?>

4. Then, put this Facebook Like code under it

<iframe src="http://www.facebook.com/plugins/like.php?href=<?php echo $url; ?>&amp;layout=button_count&amp;show_faces=true&amp;width=450&amp;action=like&amp;colorscheme=light&amp;height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:21px;" allowTransparency="true"></iframe>

Monday, October 11

How to use both Horizontal and vertical Navigation Menu in Magento

If you have RicoNeitzel_VertNav installed, it will remove the top horizontal menu in some themes.
To turn top horizontal menu back on, go to

Admin > System > Configuration > Catalog > Category Vertical Navigation and set “Hide Top Navigation” to “No”.
Save Config.

Sunday, October 10

How to create a custom page in magento and link it to a new menu

STEPS FOR CREATING A CUSTOM PAGE IN MAGENTO AND LINK IT TO A NEW MENU

1. Login as admin, Then select ‘Manage Pages’ from CMS menu.
2. Click ‘Add New Page’ Button to create a page.
3. In the New Page:

a) In General Information tab enter following details:
Page Title: Test Page
SEF URL Indentifier: test1
Store View: All Store Views
Status: Enabled
Content: Enter some text here..

b) Custome Design: Select your own layout from this tab
Select Layout: Three Column (you can select any layout)

c) Meta Data: If you want to add Keywords and Descriptions

Then click on ‘Save Page’ button. Now your test page is ready.

4. Now we have to create a new menu to link this page. Open app/design/frontend/default/default/template/catalog/navigation/top.phtml

Enter following line just above the foreach statement.

<li><a href="<?php echo $this->getUrl('test1')?>"><?php echo $this->__('Staff') ?></a></li>

Here test1 is the SEF URL Identifier and Staff is the new menu name.

Now your menu is ready.  Go to magento frontend and click on ‘Staff’ menu to see your new page.

How to Edit the Magento Footer & Footer Links

Edit Magento Footer Links

The Magento footer links are collected from a few different layout components:

 1. About Us | Customer Service
-> cms.xml

These two links are default static blocks taken from the database. To edit them, go to Magento Admin -> CMS -> Static Blocks.

 2. Site Map
-> catalog.xml
<reference name=”footer_links”>
<action method=”addLink” translate=”label title” module=”catalog” ifconfig=”catalog/seo/site_map”><label>Site Map</label><url helper=”catalog/map/getCategoryUrl” /><title>Site Map</title></action>
</reference>

 3. Search Terms | Advanced Search
-> catalogsearch.xml
<reference name=”footer_links”>
<action method=”addLink” translate=”label title” module=”catalogsearch” ifconfig=”catalog/seo/search_terms”>
<label>Search Terms</label>
<url helper=”catalogsearch/getSearchTermUrl” />
<title>Search Terms</title>
</action>
<action method=”addLink” translate=”label title” module=”catalogsearch”>
<label>Advanced Search</label>
<url helper=”catalogsearch/getAdvancedSearchUrl” />
<title>Advanced Search</title>
</action>
</reference>

 4. Contact Us
-> contacts.xml
<reference name=”footer_links”>
<action method=”addLink” translate=”label title” module=”contacts” ifconfig=”contacts/contacts/enabled”><label>Contact Us</label><url>contacts</url><title>Contact Us</title><prepare>true</prepare></action>
</reference>

 5. RSS
-> rss.xml
<reference name=”footer_links”>
<action method=”addLink” translate=”label title” module=”rss” ifconfig=”rss/config/active”><label>RSS</label><url>rss</url><title>RSS testing</title><prepare>true</prepare><urlParams/><position/><li/>
<a>class=”link-feed”</a>
</action>
</reference>

 * 2. Site Map, 3. Search Terms | Advanced Search, 4. Contact Us, and 5. RSS are the HTML links pulled by the function “$this->getLinks()”, not by “$this->getChildHtml(name)”. These links are pulled from a few different places as specified above.

 6. To edit the default Magento footer message ” Help Us to Keep Magento Healthy - Report All Bugs (ver. 1.2.1.2) © 2007 Magento Demo Store. All Rights Reserved.”, edit the following file.
-> /app/design/frontend/default/default/template/page/html/footer.phtml

 7. To edit the copyright notice,
-> /app/design/frontend/default/default/template/page/html/footer.phtml

How to add new layout in Magento

Many times we need to add new layout skeleton rather then 2colums-left, 2columns-right, 1column and 3columns. Here is the way how we can add more layout structures.


You can make modification directly in app/code/core/Page/etc/config.xml but if you don’t want to touch core file, I recommend you to follow these steps:

Create config.xml under app/code/local/Magestore/Page/etc






0.1.0








page_three_columns_cms






Now, open app/etc/modules and create file Magestore_Page.xml





true
local




You have to create a file named '3columns-cms.phtml' under app/design/frontend/[YOUR_PACKAGE]/[YOUR_THEME]/template/page.

Now, log in your admin, go to Cms -> Manage pages, click Add new page. In Custom Design tab, you can find new layout you just created:

Moving / Removing Callouts on the left / right columns


This is a pretty easy task, but finding them required a small bit of digging (as usual).

My first recommendation when trying to find any thing in the front end is to turn on Template Path hints in the admin section

   1. Admin > System > Configuration
   2. Switch your "Current Configuration Scope" to your store (’Main Website’ on a stock build)
   3. Click on the Developer Tab (bottom left) and find the Debug area
   4. Template Path Hints: Yes (also might want to add Block Names to hints)

You will find that the template files (phtml files) which include the html for the callouts are located at:
app/design/frontend/*/*/template/callouts/right_col.phtml
app/design/frontend/*/*/template/callouts/left_col.phtml

You will also find that the block is being added onto your Magento install via catalog.xml
app/design/frontend/*/*/layout/catalog.xml

For the right column:

<reference name="right">
<block type="core/template" before="cart_sidebar" name="catalog.compare.sidebar"
template="catalog/product/compare/sidebar.phtml"/>
<block type="core/template" name="right.permanent.callout" template="callouts/right_col.phtml"/>
</reference>

to

<reference name="right">
<block type="core/template" before="cart_sidebar" name="catalog.compare.sidebar"
template="catalog/product/compare/sidebar.phtml"/>
<!--<block type="core/template" name="right.permanent.callout" template="callouts/right_col.phtml"/>--> <!-- or delete this line altogether -->
</reference> 

You can do the same for the left callouts

Magento Installation

What is Magento?

Magento is an open source eCommerce solution. It comes with a variety of tools, necessarily for building a successful online shop. Magento offers a lot of built-in capabilities, such as promo pricing and coupon codes, detailed statistics, and SEO options.

There are two ways to install Magento. The first one is through your cPanel -> Site Software and the second is the manual installation.

Automatic Magento Installation through cPanel

Magento installation is easy and fast through the special Site Software tool from cPanel. If your web host doesn't offer such an installation, consider Siteground exclusive Magento hosting or go below to the Magento manual installation.
First go to cPanel find the Site Software icon.
cPAddons
Find Magento in the Ecommerce section and open it.
Magento cPAddon
Enter the admin user name and the corresponding password.
You can also define the folder for your Magento installation. Leaving it blank will install the script directly in the web root directory for your account.
Click on the Install button to complete the script installation.
At the end you will get a confirmation screen with the URLs of your installation's front and back ends, the Magento admin login details and the link to the SiteGround Magento tutorial. The Magento encryption key will also be visualised.
Magento install confirmation

Manual Installation of Magento

The steps which you must follow in order to complete the Magento manual installation are:
Step 1: Download the latest stable Magento package from:
Step 2: Upload the package on your hosting account through your cPanel -> File Manager or using an FTP client.
You can learn more about cPanel from our cPanel Tutorial.
There are 2 options where you can place the Magento download file:
  • Either under the public_html folder, which is the main one for your web site content. Then your web site will be accessible directly through your domain.
  • Or under a subfolder, for example if your domain name is called yourdomainname.com and you decide to install the script in the public_html/magento folder, you will open the web site at: http://yourdomainname.com/magento.
Once you upload the package, you can extract it through your cPanel -> File Manager. Using the same tool, please change the file permissions for the Magento files to 755.
Step 3: Create a MySQL database and assign a user to it through cPanel -> MySQL Databases. Remember the database details, since you will need them during the script installation.
Important The MySQL database is created with your username as prefix - username_databasename, and this is the name you have to use for your application.
Step 4: In our example we will install  Magento in the public_html/magento folder. Once the package is uploaded and extracted and you have a MySQL database, navigate to http://yourdomainname.com/magento:
Installation wizard
Click on the check box next to "I agree to the above terms and conditions" and click on the Continue button.
Step 5: Choose the preferred Time Zone, Locale and Currency:
localization
Click on the Continue button.
Step 6: Enter the database details: Database Name, User Name and User Password. You can leave the other options intact.
Click on the check box next to "Skip Base URL validation before next step".
Magento database details
Click on the Continue button.
Step 7: At this point you should enter the personal information and the admin login details which you want to use. You can leave the Encryption Key field empty and the script will generate one for you.
admin details
Click on the Continue button.
Step 8: Write down your encryption key; it will be used by Magento to encrypt passwords, credit cards and other confidential information.
completion
Well done! Your Magento installation was successfully completed. Now you can navigate to its Frontend or Backend.