Magento has an Entity Attribute Value system in the db, neaning you can easily add custom stuff by adding rows and not columns! But that’s all done for us, so here’s how we set it up. In this example I’m wanting a home page image radio button.
In the config.xml you’ll see something like
<version>0.2.0</version>
So in this example we would bump that up to 0.3.0. Also, check you have a setup key in the xml:
Next, in the sql folder of your module, create a file called madskull_homepage_setup/upgrade-0.2.0-0.3.0.php (thats upgrading from v0.2.0 to v0.3.0) and I put the following:
When you next visit any page, Magento will see the version has changed, and attempt to upgrade it. If successful, it will appear in the eav_attribute table. Clear your caches, and reindex. Now if you go into your products in the admin panel, and select any product to edit, click on the Images option, and you should see our new attribute in there as a radio button! 🙂
Now you can use your variable by doing things like $collection->addAttributeToSelect([‘name’, ‘price’, ‘special_price’, ‘homepage_image’]); and so on! 😀
Mage::getBaseUrl() => Get base url path e.g. http://yourwebsite.com/
Mage::getBaseUrl('media') => Get MEDIA folder path e.g. http://yourwebsite.com/media/
Mage::getBaseUrl('js') => Get JS folder path e.g. http://yourwebsite.com/js/
Mage::getBaseUrl('skin') => Get SKIN folder path e.g. http://yourwebsite.com/skin/
Mage::getUrl('',array('_secure'=>true))
Mage::getUrl('module/controller/action',array('_secure'=>true))
Mage::getUrl('module/controller/action')
Mage::helper('core/url')->getHomeUrl();
Mage::helper('core/url')->getCurrentUrl();
I’m on chapter 3 of my book, and you’ve stumble upon my notes! So far, I have made a custom theme, brought in bootstrap js and css, create the main theme templates, and created blocks and cms-blocks. Now I’m on chapter three, its time to get a groovy looking front page:
as it will look by the end of chapter 3
As you can see, there’s a slider row, and we’ll have some more cms blocks for the carousel, banners, and home page proper.
Slider
First up, lets create the slider row. In the admin panel, goto CMS > Static Blocks, and add a block called Home Block Full width, labelled home-fullwidth:
The {{skin_url}} stuff is like the XML config. It looks in the public folder for that theme for images, css, and javascript.
The 3 banners next to the slider go in cms block home-right-banner :
In the Admin panel, click through to CMS Pages, you’ll see home page is already there. Click on it, and in the content tab, stick some placeholder text (I like Zombie Ipsum!) and in the design tab switch layout to 2 columns with left bar.
Earlier in my previous post we made CMS block home-fullwidth (a bootstrap row with two columns). However, if we added that CMS block to our Home Page, it would come out wrong, as it’ll appear in the right hand column of the layout. To sort that, we add a thing called a reference block. We add another bit of config to /app/design/frontend/bookstore/default/layout/local.xml, in the section <reference name=”root”> :
You’ll notice in the main content left bar that it’s displaying some placeholder text with a 555 nphone number. This is a default template coming from the base theme. Again we need to put some remove tags in our xml file. To find these when you are working away, look in the base/default/layout xml files to find the name of the blocks you want: In our <reference name=”left”> section:
/* Left Menu */
.block-leftnav {
margin-top: 35px;
}
.block-leftnav .block-title {
font-size: 16px;
border-bottom: 1px solid #E1E1E1;
padding-bottom: 10px;
}
.block-leftnav .block-content {
}
.block-leftnav .block-content ul {
padding: 0;
list-style-position: inside;
}
.block-leftnav .block-content ul li {
}
.block-leftnav .block-content ul li.active {
background: #333;
color: #fff;
padding-left: 10px;
}
.block-leftnav .block-content ul li.active a {
color: #FA9221;
}
.block-leftnav .block-content ul li a {
font-size: 13px;
color: #333
}
.block-leftnav .block-content ul li a:hover {
color: #FA9221;
}
.block-leftnav .block-content > ul > li.level0 {
border-bottom: 1px solid #E1E1E1;
padding: 10px;
}
.block-leftnav .block-content > ul > li.level0:last-child {
border-bottom: 0;
}
.block-leftnav .block-content > ul > li.level0:hover {
background-color: #efefef
}
.block-leftnav .block-content > ul > li.level0 > a {
font-weight: bold;
}
.block-leftnav .block-content ul ul {
padding-left: 15px;
}
.block-leftnav .block-content ul ul ul a {
color: #999
}
Main content
Our main content has placeholder text so far. We want some text at the top, a block of products from a particular category, and a block of text information for each product. Create default/template/catalog/product/list-home.phtml
Ok, if you havent played around in the admin panel and created some categories and products, now is the time to do it! Catalog > Manage Categories, & Catalog > Manage Products. Create Books as a subcategory of the default category. Add some subcategories, Fiction, Reference etc!
Add a few products too. Remember to set the categories it will appear in, and set the stock levels to more than zero! Click around, you’ll find it! Anyway, click the book category, and make a note of the ID number. (mine said ‘Books (ID: 3)’). We want to bung the products list block into our CMS home content. Add this to it:
Apply these techniques and you’ll be able to customise any other blocks in your theme. Take the products grid for example. Turn on the developer config for template path hints. Now go to the home page. Click on the books category. You will see the main products grid looks crap, but you can see that it comes from frontend/base/default/template/catalog/product/list.phtml . Create that file in your theme. Now if you nose into the base themes catalog.xml, you’ll see various blocks defined etc. The products category page has two handles, <catalog_category_default translate=”label”> and <catalog_category_layered translate=”label”>. Layered refers to layered navigation. To use layered navigation, we need to set the Category setting Is Anchor to Yes. You can find that in the Category Display Settings.
To set the default category view to a one column layout, add this in your XML :
Now the thing with this is, the 2 columns right template doesnt have a leftnav section, but we have a right section. So we add the following to the catalog_category_layered XML:
Copy the code from the base layouts, and tweak with your bootstrap classes etc, and style, you dont need me to tell you how dto do that part!
Product
Again looking at the template paths, you’ll find it in app/design/frontend/base/default/template/catalog/product/view.phtml and the layout handle is <catalog_product_view>. I’m setting it to a one column layout:
Ok in yesterdays post, I showed you how you can start bringing in the Bootstrap files into Magento by defining them in the theme’s page.xml. We finished up by tweaking the layout .phtml files.
Now we’ll start editing our header. Open /app/design/frontend/fashion/default/template/page/html/header.phtml and put some placeholder bootstrap HTML into place:
We’ll stick some custom links in, the logo, and shopping basket, and nav bars with menu and search form. To make the top header div, we will create a CMS block with custom links, and a user area. To create a CMS Block, in the Magento Admin Panel, click on CMS > Static Blocks, and Add new block. I gave mine a title of Top Links, an ID of top_links, and in the content I added an inline bootstrap <ul>
Ok, the section under the top-bit will contain a logo and a shopping cart. To change what the logo is, in the Magento Admin Panel, navigate to System > Configuration > Design > Header and change the Logo Image src.
We now have a very bootstrappy looking search box! As you can see from the code above, we are also wanting the ChildHtml of topMenu. So lets add that. Edit /app/design/ frontend/fashion/default/template/page/html/topmenu.phtml :
There are six things being called here. Four items will be CMS blocks, and the other two normal blocks (newsletter and copyright). We define our blocks in the local.xml in the footer reference:
Ok, the CMS blocks then. Log in to the admin panel, and go to CMS > Static Blocks. Click add new block, call it footer_company
<h4>About Our company</h4> <p>Our company are awesome, we use Bootstrap 3.0 and Magento version
1.19. We are developing solutions and blah blah blah<a href="https://github.com/delboy1978uk">Visit Our Github!</a>
Now we have our CMS blocks, we still need the other two. The newsletter block wont appear, because the default goes in the left hand side for whatever reason. Back in the xml, we add this:
This was a bit fidgety, but its possible to override core Magento files! Actually there are two ways, but one involves copy pasting the class and tweaking. That will break if the class ever changes on a Magento update, so I won’t even tell you how to do that.
Instead, we’ll create our own module. My module’s called Madskull, and I already have a folder in /app/code/local/madskull
In this example, I overrode Mage_Core_Model_Url. I had to have a custom getUrl() method.
I created (in the aforementioned folder) Url/Url.php, which extends Mage_Core_Model_Url :
<?php
/**
* Class Madskull_Core_Model_Url
*
* @author delboy1978uk
*/
class Madskull_Url_Url extends Mage_Core_Model_Url
{
/**
* Do a quick string replace to ditch apostrophes
* @return string
*/
public function getUrl($routePath = null, $params = null)
{
return str_replace("'",'',parent::getUrl($routePath,$params));
}
}
Okay, next in the Url directory, create an etc folder, and create config.xml :
Google likes this stuff, so we should utilise tags in the.I could probably put this code in a better place, but for now, I went into my head view file located at app/design/frontend/themename/default/template/page/html/head.phtml
If you DON’T have category pages with duplicate content that can be accessed from multiple urls, you can now turn off the canonical tag in the SEO settings. Log into the admin panel, and select System > Configuration > Catalogue > Search Engine Optimisations. Then you can set Use Canonical Link Meta Tag For Categories to No.
Again, leave it yes if you have duplicate content, ie /crystal-wine-glasses has the same (but less) content than /wine-glasses.
Last post, I created my own cusomised Magento theme. It looks crap, but it works! Instructions here https://delboy1978uk.wordpress.com/2015/06/04/creating-custom-magento-themes/ In this post, I am going to take my fancy bootstrap 3 store template, and integrate it in to our newly created theme. The first stage is learning how the templates all work, so we’ll bring in the js and css, and make our own header until we get the hang of it. Then we can take the HTML from our template and add it in. But first things first.
Stick your jquery.min.js in /js/lib/jquery. There’s already a jQuery in there, but yours might be newer. You’ll notice a noconflict.js too. That stops jQuery and Prototype from conflicting with one another.
Ok, now we’ve done that, we need to configure our /app/design/frontend/fashion/default/layout/local.xml file. Javascript & Css go in our head block. So lets add it:
As you know, the C of CSS stands for cascading. The styles.css in the base theme will be called first, which obviously is unwanted behaviour which could cause class conflicts, so we really want to stop the base theme from loading it. So add this line before the bootstrap.min.css line :
<!-- Remove base theme styles.css -->
<action method="removeItem"><type>skin_css</type><name>css/styles.css</name></action>
Now let’s deal with the world’s shittiest, least standards compliant browser out there (if you can call it a browser) : Internet Explorer. The usual suspects apply here, namely https://oss.maxcdn.com/libs/respond.js/1.3.0/ respond.min.js & https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js . Download them into the theme js folder, and add them under that bootstrap js line (notice the params bit):
You can also add a config section specifically for print, so here’s what to add after the reference=”head” section:
<print translate="label" module="page">
<label>All Pages (Print Version)</label>
<!-- Mage_Page -->
<block type="page/html" name="root" output="toHtml" template="page/print.phtml">
<!-- This block allows the print.phtml template to get the logo -->
<block type="page/html_header" name="header" as="header"/>
<block type="page/html_head" name="head" as="head">
<action method="addCss"><stylesheet>css/styles.css</stylesheet></action>
<action method="addItem"><type>skin_css</type><name>css/styles-ie.css</name><params/><if>lt IE 8</if></action>
<action method="addCss"><stylesheet>css/widgets.css</stylesheet></action>
<action method="addItem"><type>skin_css</type><name>css/print.css</name></action>
</block>
<block type="core/text_list" name="content" as="content" translate="label">
<label>Main Content Area</label>
</block>
</block>
</print>
Now we add our ‘root’ template file. At the top, in the default node but above the <reference name=”head”> node, add the following (for the example I’m using the 2 col layout):
Great! Now it’s time to rip apart the .phtml files we copied over from the base theme! Open /app/design/frontend/fashion/default/template/page/2columns-left.phtml
Okay, do the same for the other template files too! You know the score! Ditch the Magento markup and replace with BS3 awesomeness!
Check out my next post where we’ll start editing the view files and creating blocks etc!
First up, get your mock up files, photoshop layout, bootstrap template, or whatever. Then decide on a name for your package which we’ll use for the whole project. I’m making a fashion store magento site for the purposes of learning, so i got a theme from http://w3layouts.com/, and I’ll be calling my theme ‘fashion‘. Once you have your html template ready, we start creating our folders.
Now we have the directory structure in place, we need to create the required files. The easiest way to do this is to copy the files from the base theme, and edit them to suit.
Copy the following files from app/design/frontend/base/default/template/ to app/design/frontend/fashion/default/template/ :
Lastly, copy the 3 css files in /skin/frontend/default/css/ into /skin/frontend/fashion/default/css. styles.css is the main stylesheet, print.css is the style for printed materials, styles-ie.css is the style for that popular ‘browser selection tool’ 😉 .
Disable the cache. To do this, navigate to /admin in the browser and log in to your Magento control panel. Once there, go to System > Cache Management . Click select all, choose Disable in the Actions select element, and click submit.
Disabling the Magento Cache
Now we can activate our theme! Click on System > Configuration > General >Design and click on the package option. Type in your package name (in my case fashion), and click Save Config.
Our empty Magento theme
It’s not much to look at, but we are now using our own custom Magento theme! 😀
It’s a good idea to disable the WYSIWYG editor for the CMS section, as your HTML will be tinkered with. It’s meant for non-techie-types, so lets turn that off. Go to System > Configuration > Content Management, select Disable Completely, and again save your config.
Lastly, pages can be made out of bits from other pages. Sometimes, it can be awkward finding the file you need if there are several blocks in a page. There is a helper for this which displays the template path. Go to System > Configuration > Advanced > Developer. Above the left hand column, you will see Current Configuration Scope. Select Main Website. In the Debug section to the right, select Yes to Template path hints. Save.
Template Path Hints
Have fun setting up your own themes! I’ll be blogging more as I learn more, so stay tuned!
DelBoys Place 