How to display a Static-Block in a CMS-Page

Posted by Unknown Labels: permissions at March 12, 2018

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmhVgqgncgIjXAKlcYz_VVOBUR0TNOeTXfOmC_f4M8XJ9LksVd0YLCkWao5zKsrF9YzrUIyTuAGpu37WjBu-3VqUV9MP26CZvvFGrluIwe_ha7uPVA1LbNXApprmBpXhgF0svaX2lMqhv9/s1600/theming-magento-icon.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="210" data-original-width="210" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmhVgqgncgIjXAKlcYz_VVOBUR0TNOeTXfOmC_f4M8XJ9LksVd0YLCkWao5zKsrF9YzrUIyTuAGpu37WjBu-3VqUV9MP26CZvvFGrluIwe_ha7uPVA1LbNXApprmBpXhgF0svaX2lMqhv9/s1600/theming-magento-icon.png" /></a></div>
 
One of the coolest things in Magento, is the ability to call a static block within a CMS page. Here is how you can do just that. 
 
FOLLOW STEPS 
 
1. Copy this code into your CMS page 
 
<span style="background-color: #eceff1; color: #3d4245; font-family: "consolas" , "menlo" , "monaco" , "lucida console" , "liberation mono" , "dejavu sans mono" , "bitstream vera sans mono" , "courier new" , monospace , sans-serif; white-space: pre-wrap;">{{block type="cms/block" block_id="ur-block-id"}} 
 
"<span style="background-color: #eceff1; color: #3d4245; font-family: "consolas" , "menlo" , "monaco" , "lucida console" , "liberation mono" , "dejavu sans mono" , "bitstream vera sans mono" , "courier new" , monospace , sans-serif; white-space: pre-wrap;">ur-block-id" is your block id, remember to change it to correspond to your static block identifier. 
 
//if your block does not display, it simply means your need to set your cms/block permission. 
 
2. Set permission for your CMS/Block (follow steps below to do so, if you have not set it already) 
 
<div style="background-color: white; border: 0px; box-sizing: inherit; clear: both; color: #3d4245; font-family: roboto, arial, sans-serif; font-stretch: inherit; line-height: inherit; margin-bottom: 1em; padding: 0px; vertical-align: baseline;">
<code style="background-color: #eceff1; border: 0px; box-sizing: inherit; font-family: consolas, menlo, monaco, "lucida console", "liberation mono", "dejavu sans mono", "bitstream vera sans mono", "courier new", monospace, sans-serif; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 1px 5px; vertical-align: baseline; white-space: pre-wrap;">System > Permissions > Blocks</code></div>
<div style="background-color: white; border: 0px; box-sizing: inherit; clear: both; color: #3d4245; font-family: roboto, arial, sans-serif; font-stretch: inherit; line-height: inherit; margin-bottom: 1em; padding: 0px; vertical-align: baseline;">
Now click on <code style="background-color: #eceff1; border: 0px; box-sizing: inherit; font-family: consolas, menlo, monaco, "lucida console", "liberation mono", "dejavu sans mono", "bitstream vera sans mono", "courier new", monospace, sans-serif; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 1px 5px; vertical-align: baseline; white-space: pre-wrap;">Add New Block</code> and write <code style="background-color: #eceff1; border: 0px; box-sizing: inherit; font-family: consolas, menlo, monaco, "lucida console", "liberation mono", "dejavu sans mono", "bitstream vera sans mono", "courier new", monospace, sans-serif; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 1px 5px; vertical-align: baseline; white-space: pre-wrap;">cms/block</code> on Block Name, finally set YES, on the allow tab and save.</div>
And That's it, you should be able to see you static block display within your CMS page.

One of the coolest things in Magento, is the ability to call a static block within a CMS page. Here is how you can do just that. FOLLO...

Find Magento's cart html tags (tfoot, thead, tr, td, table)

Posted by Unknown Labels: html at March 09, 2018

<pre style="color: #a9b7c6; font-family: "DejaVu Sans Mono"; font-size: 11.3pt;"></pre>
<pre style="font-family: "dejavu sans mono";"><div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmhVgqgncgIjXAKlcYz_VVOBUR0TNOeTXfOmC_f4M8XJ9LksVd0YLCkWao5zKsrF9YzrUIyTuAGpu37WjBu-3VqUV9MP26CZvvFGrluIwe_ha7uPVA1LbNXApprmBpXhgF0svaX2lMqhv9/s1600/theming-magento-icon.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="210" data-original-width="210" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmhVgqgncgIjXAKlcYz_VVOBUR0TNOeTXfOmC_f4M8XJ9LksVd0YLCkWao5zKsrF9YzrUIyTuAGpu37WjBu-3VqUV9MP26CZvvFGrluIwe_ha7uPVA1LbNXApprmBpXhgF0svaX2lMqhv9/s1600/theming-magento-icon.png" /></a></div>
<pre style="font-family: "dejavu sans mono";">
</pre>
<pre style="font-family: "dejavu sans mono";">Opening your hint path, you will be missed lead </pre>
<pre style="font-family: "dejavu sans mono";">to think you will find the html table tags in side cart.phtml</pre>
<pre style="font-family: "dejavu sans mono";">
</pre>
<pre style="font-family: "dejavu sans mono";"><pre style="background-color: #2b2b2b; font-family: "dejavu sans mono"; font-size: medium;">.../template/checkout/cart.phtml</pre>
<div>
</div>
</pre>
</pre>
<pre style="font-family: "dejavu sans mono";">>> file content</pre>
<pre style="color: #a9b7c6; font-family: "dejavu sans mono";"><pre style="background-color: #2b2b2b; font-family: "dejavu sans mono";"></pre>
<pre style="background-color: #2b2b2b; font-family: "dejavu sans mono";"><tbody><?php foreach($this->getItems() as $_item): ?>
 <?php echo $this->getItemHtml($_item) ?>
<?php endforeach ?>
</tbody></pre>
</pre>
<pre style="font-family: "dejavu sans mono";">Sorry! So to locate the file that is responsible for</pre>
<pre style="font-family: "dejavu sans mono";">populating your Magento cart, you will need to dig a little</pre>
<pre style="font-family: "dejavu sans mono";">deeper, at first this might seem confusing, but Magento has a </pre>
<pre style="font-family: "dejavu sans mono";">perfectly good, "CONTROL N FLEXIBILITY". </pre>
<pre style="font-family: "dejavu sans mono";">
</pre>
<pre style="font-family: "dejavu sans mono";">>> To start editing your cart, navigate to the directory below </pre>
<pre style="font-family: "dejavu sans mono";">
</pre>
<pre style="font-family: "dejavu sans mono";"><pre style="background-color: #2b2b2b; font-family: "dejavu sans mono";">.../template/checkout/cart/item/default.phtml</pre>
<pre style="background-color: #2b2b2b; font-family: "dejavu sans mono";"></pre>
<pre style="font-family: "dejavu sans mono";"><pre style="font-family: "dejavu sans mono";">All the expected html table tags (tfoot, thead, tr, td, table) </pre>
<pre style="font-family: "dejavu sans mono";">controlling Magento's cart layout are all located under this file. </pre>
<pre style="font-family: "dejavu sans mono";">Remember to first copy and paste this file inside your template</pre>
<pre style="font-family: "dejavu sans mono";">folder BEFORE EDITING it.</pre>
<pre style="font-family: "dejavu sans mono";">
</pre>
<pre style="font-family: "dejavu sans mono";">Happy theming. </pre>
<pre style="font-family: "dejavu sans mono";"></pre>
<pre style="font-family: "dejavu sans mono";"></pre>

</pre>

</pre>

Opening your hint path, you will be missed lead to think you will find the html table tags in side cart.phtml .../template/checkout...

How to use jquery functions in magento ( noConflict() method )

Posted by Unknown Labels: jquery at March 09, 2018

Magento is a very big system, so sometimes things might not work as you would expect. here is a little trick you need to use before usin...

How to change the template for the product review form?

Posted by Unknown Labels: template at March 05, 2018

Open your local.xml file and paste the code below, depending on which template you wish to switch to, just edit 1columnphtml > 2column...

Remove footer and header on onestep checkout (local.xml)

Posted by Unknown Labels: local.xml at February 26, 2018

Its always a good idea to keep your checkout page clean, so I thought I should share this new trend with you. The onepage or onestep c...

How to customise the Magento navbar (Topmenu.php vs Topmenu.phtml)

Posted by Unknown Labels: template hints at February 22, 2018

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmhVgqgncgIjXAKlcYz_VVOBUR0TNOeTXfOmC_f4M8XJ9LksVd0YLCkWao5zKsrF9YzrUIyTuAGpu37WjBu-3VqUV9MP26CZvvFGrluIwe_ha7uPVA1LbNXApprmBpXhgF0svaX2lMqhv9/s1600/theming-magento-icon.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="210" data-original-width="210" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmhVgqgncgIjXAKlcYz_VVOBUR0TNOeTXfOmC_f4M8XJ9LksVd0YLCkWao5zKsrF9YzrUIyTuAGpu37WjBu-3VqUV9MP26CZvvFGrluIwe_ha7uPVA1LbNXApprmBpXhgF0svaX2lMqhv9/s200/theming-magento-icon.png" width="200" /></a></div>
<div style="text-align: center;">
 </div>
So today I was trying to customise the nav bar of my Magento store, just like any other front end developer, I turned on my <a href="http:/#">template hints</a>, and navigated the file Topmenu.phtml. 
 
File path: app/design/frontend/package_name/theme_name/template/page/html/topmenu.phtml 
 
But to my surprise, this is all i found. 
 
 
<pre style="background-color: #2b2b2b; border: 0px; box-sizing: border-box; font-family: "dejavu sans mono"; font-size: 11.3pt; outline: 0px; padding: 0px; vertical-align: baseline;"><span style="border: 0px; box-sizing: border-box; color: #e69138; font-family: inherit; font-size: 15.0667px; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
</pre>
<pre style="background-color: #2b2b2b; border: 0px; box-sizing: border-box; font-family: "dejavu sans mono"; font-size: 11.3pt; outline: 0px; padding: 0px; vertical-align: baseline;"> echo $_menu;</pre>
<pre style="background-color: #2b2b2b; border: 0px; box-sizing: border-box; color: #a9b7c6; font-family: "DejaVu Sans Mono"; font-size: 11.3pt; outline: 0px; padding: 0px; vertical-align: baseline;"><span style="border: 0px; box-sizing: border-box; color: #e8bf6a; font-family: inherit; font-size: 15.0667px; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"><pre style="border: 0px; box-sizing: border-box; font-family: "dejavu sans mono"; font-size: 11.3pt; font-style: inherit; font-weight: inherit; outline: 0px; padding: 0px; vertical-align: baseline;"></pre>
</pre>
 
"Ah! Where are the ul and li tags?" well not to worry i did some digging, and found a .php file responsible for populating the navigation bar (Topmenu.php). 
 
File path: app/code/core/Mage/Page/Block/Html/Topmenu.php 
 Before editing this file, you need to copy it your local folder... if you do not have local/ create it under app/code/ 
 
copy to File path: app/code/local/Mage/Page/Block/Html/Topmenu.php 
 
This is where the variable $_menu is declared and populated. 
 
<pre style="background-color: #2b2b2b; border: 0px; box-sizing: border-box; font-family: "dejavu sans mono"; font-size: 11.3pt; outline: 0px; padding: 0px; vertical-align: baseline;">
</pre>
<pre style="background-color: #2b2b2b; border: 0px; box-sizing: border-box; font-family: "dejavu sans mono"; font-size: 11.3pt; outline: 0px; padding: 0px; vertical-align: baseline;">protected $_menu;</pre>
<pre style="background-color: #2b2b2b; border: 0px; box-sizing: border-box; font-family: "dejavu sans mono"; font-size: 11.3pt; outline: 0px; padding: 0px; vertical-align: baseline;">
</pre>
<pre style="background-color: #2b2b2b; border: 0px; box-sizing: border-box; font-family: "dejavu sans mono"; font-size: 11.3pt; outline: 0px; padding: 0px; vertical-align: baseline;"><pre style="color: #a9b7c6; font-family: "DejaVu Sans Mono"; font-size: 11.3pt;">public function getHtml($outermostClass = '', $childrenWrapClass = ''){</pre>
<pre style="color: #a9b7c6; font-family: "DejaVu Sans Mono"; font-size: 11.3pt;"> </pre>
<pre style="color: #a9b7c6; font-family: "DejaVu Sans Mono"; font-size: 11.3pt;">}</pre>
</pre>
<pre style="background-color: #2b2b2b; border: 0px; box-sizing: border-box; font-family: "dejavu sans mono"; font-size: 11.3pt; outline: 0px; padding: 0px; vertical-align: baseline;">
</pre>
 
Sometimes Magento can get tricky at first glance, but this is what this blog is here for, to help you get started. If you found this article to be informative, let me know below on the comments section or leave a question.

So today I was trying to customise the nav bar of my Magento store, just like any other front end developer, I turned on my template hin...

How to display Special Price with discount percentage

Posted by Unknown Labels: template at February 20, 2018

If you would like to show your users the discount percentage, on both your product list and product view, simply use the scripts below. ...

How to get the current category name from product view and list

Posted by Unknown Labels: template at February 20, 2018

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmhVgqgncgIjXAKlcYz_VVOBUR0TNOeTXfOmC_f4M8XJ9LksVd0YLCkWao5zKsrF9YzrUIyTuAGpu37WjBu-3VqUV9MP26CZvvFGrluIwe_ha7uPVA1LbNXApprmBpXhgF0svaX2lMqhv9/s1600/theming-magento-icon.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="210" data-original-width="210" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmhVgqgncgIjXAKlcYz_VVOBUR0TNOeTXfOmC_f4M8XJ9LksVd0YLCkWao5zKsrF9YzrUIyTuAGpu37WjBu-3VqUV9MP26CZvvFGrluIwe_ha7uPVA1LbNXApprmBpXhgF0svaX2lMqhv9/s1600/theming-magento-icon.png" /></a></div>
<div style="text-align: center;">
 </div>
Use the php code below to get current category name, sadly it only works on certain template files, 
namely the product view and product list. 
 
Product view template path: 
app/design/frontend/package_name/theme_name/template/catalog/product/view.phtml  
 
Product list template path: 
app/design/frontend/package_name/theme_name/template/catalog/product/list.phtml  
 
<pre style="background-color: #2b2b2b; color: #a9b7c6; font-family: 'DejaVu Sans Mono'; font-size: 11.3pt;">
</pre>
<pre style="background-color: #2b2b2b;"><?php
 $current_category = Mage::getSingleton('catalog/layer')->getCurrentCategory()->getName();
 //check for if( $current_category == 'Shoe-wear') { echo "<style> body { background-image: #00 }</style>"; }
?></pre>
<pre style="background-color: #2b2b2b; color: #a9b7c6; font-family: 'DejaVu Sans Mono'; font-size: 11.3pt;">
</pre>
 
But any other file within the Catalog/ template folder should also be able to use this code, 
 
app/design/frontend/package_name/theme_name/template/catalog/ 
 
I usually use this approach if i want to change the background of my product view page, for that particular product, just to add some fun customisation for my shoppers. I hope this article was helpful to you, please leave your question/s on the comments section below and I will do my best to answer back. 
<div>
 </div>

Use the php code below to get current category name, sadly it only works on certain template files, namely the product view and product...

How to add a template file directly into another template (.phtml)

Posted by Unknown Labels: template at February 19, 2018

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmhVgqgncgIjXAKlcYz_VVOBUR0TNOeTXfOmC_f4M8XJ9LksVd0YLCkWao5zKsrF9YzrUIyTuAGpu37WjBu-3VqUV9MP26CZvvFGrluIwe_ha7uPVA1LbNXApprmBpXhgF0svaX2lMqhv9/s1600/theming-magento-icon.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="210" data-original-width="210" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmhVgqgncgIjXAKlcYz_VVOBUR0TNOeTXfOmC_f4M8XJ9LksVd0YLCkWao5zKsrF9YzrUIyTuAGpu37WjBu-3VqUV9MP26CZvvFGrluIwe_ha7uPVA1LbNXApprmBpXhgF0svaX2lMqhv9/s1600/theming-magento-icon.png" /></a></div>
<div style="text-align: center;">
 </div>
Sometimes it is not easy to move template blocks around your Magento store using local.xml, so here is a short code that can help you achieve the same result. 
 
<pre style="background-color: #2b2b2b; color: #a9b7c6; font-family: 'DejaVu Sans Mono'; font-size: 11.3pt;">
</pre>
<pre style="background-color: #2b2b2b; color: #a9b7c6; font-family: "DejaVu Sans Mono";"><?php echo $this->getLayout()->createBlock('core/template')->setTemplate('newsletter/subscribe.phtml')->toHtml();?></pre>
<pre style="background-color: #2b2b2b; color: #a9b7c6; font-family: 'DejaVu Sans Mono'; font-size: 11.3pt;">
</pre>
 
CASE STUDY: 
Lets say you want to move the newsletter subscribe template from the footer and only show it on the 2columns-left.phtml layout template but in a different location. 
 
1. First you need to remove the newsletter/subscribe.phtml from all you layout pages using local.xml. 
 
<pre style="background-color: #2b2b2b; color: #a9b7c6; font-family: "DejaVu Sans Mono"; font-size: 11.3pt;">
<?xml version="1.0"?><layout> </pre>
<pre style="background-color: #2b2b2b; color: #a9b7c6; font-family: "DejaVu Sans Mono"; font-size: 11.3pt;"> <default>
 <remove name="footer.newsletter"/></pre>
<pre style="background-color: #2b2b2b; color: #a9b7c6; font-family: "DejaVu Sans Mono"; font-size: 11.3pt;"> </default></pre>
<pre style="background-color: #2b2b2b; color: #a9b7c6; font-family: "DejaVu Sans Mono"; font-size: 11.3pt;"></layout></pre>
<pre style="background-color: #2b2b2b; color: #a9b7c6; font-family: "DejaVu Sans Mono"; font-size: 11.3pt;">
</pre>
 
2. Open your layout template, 2columns-left.phtml 
 
File Path: 
app/design/frontend/package_name/theme_name/template/page/2columns-left.phtml 
 
3. Place the following script any where you would like to display you newsletter subscriber template. 
 
<pre style="background-color: #2b2b2b; color: #a9b7c6; font-family: "DejaVu Sans Mono";">
</pre>
<pre style="background-color: #2b2b2b; color: #a9b7c6; font-family: "DejaVu Sans Mono";"><?php echo $this->getLayout()->createBlock('core/template')->setTemplate('newsletter/subscribe.phtml')->toHtml();?></pre>
<pre style="background-color: #2b2b2b; color: #a9b7c6; font-family: "DejaVu Sans Mono";">
</pre>
<div>
 </div>
<div>
As you can see, the function setTemplate('newsletter/subscribe.phtml')->toHtml()</div>
<div>
takes in the template file subscribe.phtml located in your template's newsletter folder.</div>
<div>
 </div>
<div>
File Path: </div>
<div>
app/design/frontend/package_name/theme_name/template/newsletter/subscribe.phtml</div>
<div>
 </div>
<div>
You maybe be wondering how did i know that the newsletter subscribe block has a name of footer.newsletter the block name i used on local.xml to remove all newsletter subscriber templates from layouts? Well, Fortunate for you, my next topic is, "<a href="http:/#">How to find out the block name of a template file (Path Hint)</a>". 
 
I hope this article was helpful to you, please leave your question/s on the comments section below and I will do my best to answer back.</div>
<div>
 </div>
<div>
 </div>

Sometimes it is not easy to move template blocks around your Magento store using local.xml, so here is a short code that can help you ac...

How to add Static block directly into your template file (.phtml)

Posted by Unknown Labels: template at February 19, 2018

</pre>
 
Looking at the above code you will notice setBlockId('social-connect')  'social-connect' is my Static Block Identifier name or BlockId, that I used when I was creating my static block. 
 
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfBRrg04kLhszDlb11wwGGZxBI845eOWJ4Y5etN8QJ32R0pEy1_VtO2yGvJMO7eKOV_54_cJe-ZYypdy9yG77bEoRJd8YBd91NHJg83oNTB7Hyo7BEa9552t_3sh2rsGXTSX3ScqM4qYpe/s1600/Screenshot-2018-2-19+Connect+With+Pandora+Static+Blocks+CMS+Magento+Admin.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="425" data-original-width="717" height="374" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfBRrg04kLhszDlb11wwGGZxBI845eOWJ4Y5etN8QJ32R0pEy1_VtO2yGvJMO7eKOV_54_cJe-ZYypdy9yG77bEoRJd8YBd91NHJg83oNTB7Hyo7BEa9552t_3sh2rsGXTSX3ScqM4qYpe/s640/Screenshot-2018-2-19+Connect+With+Pandora+Static+Blocks+CMS+Magento+Admin.png" width="640" /></a></div>
 
Note: You can use this php code on any template file (.phtml). 
 
I hope this article was helpful to you, please leave your question/s on the comments section below and I will do my best to answer back.

Here is a short php code to help you display Static Block that you created on your Magento Admin panel. <?php echo $this -> get...

How to load custom javascripts and style sheets to specific CMS Pages

Posted by Unknown Labels: cms pages at February 19, 2018

In most cases, you may want to run a promotion, which might require you to add custom styling sheet and javascripts files that do not ne...