Tag Archive: custom


Custom Magento EAV Attributes

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:

<resources>
    <madskull_homepage_setup>
        <setup>
            <module>Madskull_HomePage</module>
            <class>Mage_Catalog_Model_Resource_Setup</class>
        </setup>
    </madskull_homepage_setup>
</resources>

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:

<?php

/* @var $installer Mage_Catalog_Model_Resource_Setup */
$installer = $this;

$installer->startSetup();

$installer->addAttribute(
    Mage_Catalog_Model_Product::ENTITY,
    'homepage_image',
    array(
        'frontend'                      => 'catalog/product_attribute_frontend_image',
        'global'                        => Mage_Catalog_Model_Resource_Eav_Attribute::SCOPE_GLOBAL,
        'visible'                       => true,
        'used_in_product_listing'       => true,
        'filterable'                    => false,
        'filterable_in_search'          => false,
        'used_for_price_rules'          => false,
        'searchable'                    => false,
        'comparable'                    => false,
        'visible_on_front'              => true,
        'used_for_sort_by'              => false,
        'is_visible_in_advanced_search' => false,
        'type'                          => 'varchar',
        'input'                         => 'media_image',
        'group'                         => 'Images',
        'label'                         => 'Homepage Image',
        'user_defined'                  => true,
        'is_configurable'               => false,
        'required'                      => false
    )
);

$installer->endSetup();

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! 😀

Advertisements

Modules in Magento allow you to code additional functionality into your magento store. Today I’m making a module for a Pinterest competition!

First thing we do is create the file and folder structure in app/code/local/YOURLIB/YOURMODULE :

app
    /code
        /local
            /Madskull
                /Pinterest
                    /controllers
                    /etc

In the etc folder, create config.xml:




    
        
            0.1.0
        
    


    


        
            
                Madskull_Pinterest_Model
                madskull_pinterest_resource
            
            
                Madskull_Pinterest_Model_Resource
            
        


        
            
                Madskull_Pinterest_Block
            
        


        
            
                Madskull_Pinterest_Helper
            
        


    


    
    


        
            
                standard
                
                    Madskull_Pinterest
                    pinterest
                
            
        



        
            
                
                    madskull/pinterest.xml
                
            
        


    
    

To activate our module, we add a config file app/etc/modules/Madskull_Pinterest.xml :



    
        
            true
            local
        
    

Finally to get up and running add the controller code in controllers/IndexController.php :


    
        
            
                page/1column.phtml
            
        
        
            
        
    

Now reload the page, and you’ll have all the template gubbins rendering too.

Your module is primed and ready for you to start developing!

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:

custom magento home 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:

<div class="row">
     <div class="col-md-8">
       {{block type="cms/block" block_id="slider-home" template="cms/content.phtml"}}
</div>
     <div class="col-md-4">
       {{block type="cms/block" block_id="home-right-banner" template="cms/content.phtml"}}
     </div>
</div>

Using the {{ blahblah }} puts the CMS blocks in place. Now we add the slider-home cms block:

<div data-ride="carousel" class="carousel slide" id="slider-home">
    <ol class="carousel-indicators">
        <li data-slide-to="0" data-target="#slider-home"></li>
        <li data-slide-to="1" data-target="#slider-home" class="active"></li>
        <li data-slide-to="2" data-target="#slider-home" class=""></li>
    </ol>
    <div class="carousel-inner">
        <div class="item">
            <img src="{{skin_url='images/slide1.png'}}" alt="Slide 1 Alt Text">
        </div>
        <div class="item active">
            <img src="{{skin_url='images/slide1.png'}}" alt="Slide 2 Alt Text">
        </div>
        <div class="item">
            <img src="{{skin_url='images/slide1.png'}}" alt="Slide 3 Alt Text">
        </div>
    </div>
    <a data-slide="prev" href="#slider-home" class="left carousel-control">
        <span class="glyphicon glyphicon-chevron-left"></span>
    </a>
    <a data-slide="next" href="#slider-home" class="right carousel-control">
        <span class="glyphicon glyphicon-chevron-right"></span>
    </a>
</div>

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”> :

<!-- define the reference block slider -->
<block type="core/text_list" name="slider" as="slider" translate="label">
    <label>Slider Block</label>
</block>

Now if you open your template files (in app/design/frontend/bookstore/default/ template/page), you would see we already added the following:

<section id="after-header">
    <div class="container">          
        <?= $this->getChildHtml('slider') ?> 
    </div>
</section>

So all we need to do to is update the layout XML and tell the slider block which cms blocks to load in:

<reference name="slider">
    <block type="cms/block" name="home-fullwidth" as="home-fullwidth">
        <action method="setBlockId">
            <block_id>home-fullwidth</block_id> 
        </action>         
    </block>
</reference>

Bob is now your uncle. If you refresh, you’ll see our slider and right panel 🙂

Again, it looks better styled:

/* Carousel */
#after-header {
    background-color: #efefef;
}
#slider-home {
    text-align:center;
    padding:40px 0;
}
#slider-home .carousel-control.right,#slider-home .carousel-control.
   left {
    background:none;
}
#slider-home .carousel-indicators {
    bottom:20px;
    left:0;
    margin:0;
    text-align:left;
}
/* Carousel Bullets */
.carousel-indicators li {
    border:0;
    background-color:#333;
}
.carousel-indicators li:hover {
    background:#41b7d8;
}
#slider-home .carousel-indicators .active {
    background:#f37541;
    border-color:#f37541;
}
/* 3 Banners */
#banner-home {
}

#banner-home div {
    color:#FFF;
    height:85px;
    margin:25px 0;
    padding:15px;
    background: #ddd;
}
#banner-home h3 {
    font-size:20px;
    margin:0;
    padding:0;
}
/* Text Banners Background Colors */
#banner-home div.bg-orange {
    background:#f89223;
}
#banner-home div.bg-cyan {
    background:#41b7d8;
}
#banner-home div.bg-darkgrey {
    background:#333;
}

Main content Row

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:

<reference name="left">
    <remove name="left.newsletter"/>
    <remove name="left.permanent.callout"/>
    <remove name="tags_popular"/>
</reference>

Ok we need our vertical Nav menu on the left. Create a new block again in the left reference:

<block type="catalog/navigation" before="-" name="leftNav" as="leftNav" template="catalog/navigation/leftnav.phtml"/>

Create the catalog/navigation/leftnav.phtml in your template folder.

<div class="block block-leftnav">
    <div class="block-title">
        <strong><?= $this->__('Browse Category'); ?></strong>
    </div>
    <div class="block-content">
        <ul>
            <?php foreach ($this->getStoreCategories() as $_category) {
                if($_category->name!=""){
                    echo $this->drawItem($_category);
                }
            } ?>
        </ul>
    </div>
</div>

Again, adding CSS:

/* 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

<?php

$collection = $this->getLoadedProductCollection();
$helper = $this->helper('catalog/output');

if (!$collection->count()){ ?>
    <p class="note-msg"><?= $this->__('There are no products matching the selection.') ?></p>
<?php } else { ?>
    <div class="category-products">
        <?php

        $count = $collection->count() ;
        $columns = $this->getColumnCount();
        $i = 0;

        foreach ($collection as $_product) {
            if ($i++ % $columns == 0) { ?>
                <ul class="products-grid row">
            <?php } ?>
            <li class="item<?php if (($i - 1) % $columns == 0) { ?>first<?php } elseif ($i % $columns == 0) { ?> last<?php } ?> col-md-4">

                <a href="<?= $_product->getProductUrl() ?>"
                   title="<?= $this->stripTags($this->getImageLabel($_product, 'small_image'), null, true) ?>"
                   class="product-image">
                    <img src="<?= $this->helper('catalog/image')->init($_product, 'small_image')->resize(250, 310); ?>"
                         alt="<?= $this->stripTags($this->getImageLabel($_product, 'small_image'), null, true) ?>"
                         class="img-responsive img-thumbnail"/>
                </a>

                <h3 class="panel-title product-name">
                    <a href="<?= $_product->getProductUrl() ?>"
                       title="<?= $this->stripTags($_product->getName(), null, true); ?>">
                        <?= $helper->productAttribute($_product, $_product->getName(), 'name') ?>
                    </a>
                </h3>

                <div class="pull-left"> <?= $this->getPriceHtml($_product, true) ?> </div>
                
                <div class="pull-right">
                    <?php if ($_product->isSaleable()) { ?>
                        <button type="button" title="<?= $this->__('Add to Cart') ?>"
                                class="btn btn-warning btn-cart"
                                onclick="setLocation('<?= $this->getAddToCartUrl($_product) ?>')">
                            <?= $this->__('Add to Cart') ?>
                        </button>
                    <?php } else { ?>
                        <p class="btn btn-alert availability out-of-stock"><span><?= $this->__('Out of stock'); ?></span></p>
                    <?php } ?>
                </div>
                
            </li>
            <?php if ($i == 6) {break;}
                  if ($i % $columns == 0 || $i == $count){?> </ul> <?php } ?>
        <?php } ?>
    </div>
<?php }

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:

{{block type="catalog/product_list" category_id="3"  template="catalog/product/list-home.phtml"}}

And of course, style it:

/* Product List */
.products-grid {
    list-style-type:none;
    margin:0;
    padding:0;
}
.products-grid li.item {
    margin-bottom: 30px;
}
.products-grid .product-name {
    font-size:14px;
    min-height:30px;
    margin:0;
}
.products-grid .panel-footer {
    overflow:hidden;
}
.product-name a {
    color:#333;
}

.price-box p {
    margin:0;
}
.products-grid .product-image {
    margin-bottom:10px;
    display:block;
}

Job done, our home page is complete!

Other Pages

Category

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 :

<catalog_category_default>
     <reference name="root">
        <action method="setTemplate">
           <template>page/1column.phtml</template>
        </action>
     </reference>
</catalog_category_default>

And we’ll set a 2 column layout for the ‘layered’ categories:

<catalog_category_layered>
     <reference name="root">
        <action method="setTemplate">
           <template>page/2columns-right.phtml</template>
        </action>
     </reference>
</catalog_category_layered>

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:

<catalog_category_layered>
    <reference name="root">
        <action method="setTemplate">
            <template>page/2columns-right.phtml</template>
        </action>
    </reference>
    <reference name="right">
        <block type="catalog/layer_view" name="catalog.leftnav" after="currency" template="catalog/layer/view.phtml" before="-"/>
    </reference>
</catalog_category_layered>

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:

<catalog_product_view>
    <reference name="root">
        <action method="setTemplate">
            <template>page/1column.phtml</template></action>
    </reference>
</catalog_product_view>

The rest

Cart page.

app/design/frontend/
base/default/template/
checkout/cart.phtml
<checkout_cart_index>

Login Area.

app/design/frontend/
base/default/template/
customer/form/login.
phtml
<customer_account_login>

The user account registration page

app/design/frontend/
base/default/template/
customer/form/register.
phtml

<customer_account_create>

By now you should have the idea! Get tweaking!

Ok, so you have a custom Magento theme (or at least a partially customised theme so far!), but now we need a custom search box.

In /app/design/frontend/your-theme/template, create catalogsearch/form.mini.phtml

<?php $helper =  $this->helper('catalogsearch'); ?>
<form id="search_mini_form" class="navbar-form navbar-right" role="search" action="<?= $helper->getResultUrl()?>" method="get">
    <div class="form-group">
        <div class="input-group">
            <span class="input-group-addon">
                <div class="glyphicon glyphicon-search pull-left"></div>
            </span>
            <input id="search"
                   type="text"
                   name="<?= $helper->getQueryParamName() ?>"
                   value="<?= $helper->getEscapedQueryText() ?>"
                   class="form-control"
                   maxlength="<?= $helper->getMaxQueryLength();?>"
                   placeholder="<?= $this->__('Search...') ?>" />
                <span class="input-group-btn">
                    <button type="submit" class="btn btn-default">Submit</button>
                </span>
            </div>
        </div>
    <div id="search_autocomplete" class="search-autocomplete"></div>
</form>
<script type="text/javascript">
    //<![CDATA[
    var searchForm = new Varien.searchForm('search_mini_form', 'search', '<?= $this->__('Search...') ?>');
    searchForm.initAutocomplete('<?= $helper->getSuggestUrl() ?>', 'search_autocomplete');
    //]]>
</script>

Of course, if you know how, you can generate a Zend_Form and save you having to code the form by hand! 😉

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.

fashion

The theme I downloaded has Bootstrap 3, but not the latest version, so I’m grabbing the latest from http://getbootstrap.com/getting-started/#download.

Once downloaded, copy the following files into your theme in /skin/frontend/fashion/default :

/css
    /bootstrap.min.css
/js
    /bootstrap.min.js
/fonts
    /glyphicons-halflings-regular.eot
    /glyphicons-halflings-regular.svg
    /glyphicons-halflings-regular.ttf
    /glyphicons-halflings-regular.woff

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:

<?xml version="1.0" encoding="UTF-8"?>
<!--
/**
 * local.xml
 * Local layout modifications for our local theme
 * @category    design
 * @package     fashion
 * @copyright   Copyright (c) 2015 delboy1978uk.
 */
-->
<layout version="0.1.0">
    <default>
        <reference name="head">
            <action method="addJs"><script>js/lib/jquery.min.js</script></action>
            <action method="addJs"><script>js/lib/jquery/noconflict.js</script></action>
            <action method="addItem"><type>skin_js</type><name>js/bootstrap.min.js</name></action>
            <action method="addItem"><type>skin_css</type><name>css/bootstrap.min.css</name></action>
            <action method="addItem"><type>skin_css</type><name>css/styles.css</name></action>
            <action method="addItem"><type>skin_css</type><name>css/styles-ie.css</name></action>
        </reference>
    </default>
</layout

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):

<action method="addItem"><type>skin_js</type><name>js/html5shiv.js</name><params/><if>lt IE 9</if></action>
<action method="addItem"><type>skin_js</type><name>js/respond.min.js</name><params/><if>lt IE 9</if></action>

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):

<reference name="root">
      <action method="setTemplate">
          <template>page/2columns-left.phtml</template>
      </action>
</reference>

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

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->getLang() ?>" lang="<?= $this->getLang() ?>">

    <head>
        <?= $this->getChildHtml('head') ?>
    </head>

    <body<?= $this->getBodyClass() ? ' class="'.$this->getBodyClass().'"' : null; ?>>
        <?= $this->getChildHtml('after_body_start') ?>
        <?= $this->getChildHtml('global_notices'); ?>
        <header>
            <?= $this->getChildHtml('header'); ?>
        </header>
        <section id="after-header">
            <div class="container">
                <?= $this->getChildHtml('slider'); ?>
            </div>
        </section>
        <section id="maincontent">
            <div class="container">
                <div class="row">
                    <?= $this->getChildHtml('breadcrumbs'); ?>
                    <aside class="col-left sidebar col-md-3">
                        <?= $this->getChildHtml('left'); ?>
                    </aside>
                    <div class="col-main col-md-9">
                        <?= $this->getChildHtml('global_messages'); ?>
                        <?= $this->getChildHtml('content'); ?>
                    </div>
                </div>
            </div>
        </section>
        <footer id="footer">
            <div class="container">
                <?= $this->getChildHtml('footer'); ?>
            </div>
        </footer>
        <?= $this->getChildHtml('before_body_end'); ?>
        <?= $this->getChildHtml('global_cookie_notice'); ?>
        <?= $this->getAbsoluteFooter(); ?>
    </body>

</html>

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.

Create the following directory stucture:

/app
    /design
        /frontend
            /fashion
                /default
                    /template
                    /layout
                    /locale

And in the skin directory, create the following structure:

/skin
    /frontend
        /fashion
            /default
                /images
                /css
                /js

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/ :

/page/1column.phtml
/page/2columns-left.phtml
/page/2columns-right.phtml
/page/3columns.phtml
/page/html/head.phtml
/page/html/header.phtml
/page/html/footer.phtml

Ok, getting somewhere. Next we create local.xml in /app/design/frontend/fashion/default/layout :

<?xml version="1.0" encoding="UTF-8"?>
<!--
/**
 * local.xml
 * Customised Magento Theme
 * @category    design
 * @package     fashion
 * @copyright   Copyright (c) 2015 delboy1978uk.
 */
-->
<layout version="0.1.0">
    <default>

    </default>
</layout>

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

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

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 turned ON

Template Path Hints

Have fun setting up your own themes! I’ll be blogging more as I learn more, so stay tuned!

The magento admin user can add custom variables which can be used in static blocks, the CMS section of the admin panel, and also in the transactional emails. To use these, we go into System > Custom Variables, and click add New Variable. You give it a code like store_city, and in the ‘name’ field put a description (yes, i know). Then you can set an html representation and a plain text representation of what you want the value to be.

Now when editing a CMS page or transactional email, we can do stuff like this:

<p>We are based in: {{CustomVar code="store_city"}}</p>

Nice and easy.

I’m still quite fresh with Magento, and today I’ve been tasked with updating the transactional emails with our rebranded design. The Magento docs for this are located here: http://devdocs.magento.com/guides/m1x/ce19-ee114/RWD_responsive_emails.html

The default transactional email templates are stored in app/locale/en_US/template/email/. You can edit these files directly, but I wouldn’t recommend it. The better way to do this is to override these templates, there are two ways of doing so.

First way: you can copy the app/locale/en_US/template/email/ into app/locale/en_GB/template/email/ the Magento Admin Panel. Doing so (this is providing your site is GB) means that the GB files will override the US ones. It also means you can have completely different templates for each locale.

However, you can alter each locales template through the admin panel too, and instead of using files, it pulls the override templates from the database.

To do this, log in to the Admin section, and go to System -> Transactional Emails. Click on add new template. Select one of the existing templates, and select the locale you wish to work with. Then click Load Template. The code will appear below. Give the new template a name, and start editing it! When you hit save, it goes into the DB. If you look you will see that the template file han’t been altered.

In the templates, there are placeholders such as

{{var logo_url}}

etc, some of these settings can be found in Configuration > General > Design > Transactional Emails

Transactional Emails Design Settings

Transactional Emails Design Settings

Css (or SASS) is kept in /skin/frontend/PACKAGE/THEME/scss/

Ok, so now I have about 40 emails to design, so I best be on with it! Catch you later! 😀

Getting Started with Pimcore

I’ve only just started using Pimcore, but of all the CMS’es out there, this looks the best. Anyway, in the admin panel, you can create new pages etc. As the developer, we can create the templates and views, but restrict to just the editable areas for standard cms users. These editable areas are called areablocks.

For instance, in my homepage.phtml, I have the following:

<?= $this->areablock('some-id-or-other'); ?>

Once there is an areablock on a view, when you are in the admin panel, you can select an area block from the collapsible menu and literally just drag it into place, and start editing.

Customised Area files go in the website/views/areas folder. I’m making a Carousel, so in website/views/areas, I created a gallery-carousel folder, and inside that I created a view.phtml file (or .php, depending on your pimcore prefs), and a area.xml:

<?xml version="1.0"?>
<zend-config xmlns:zf="http://framework.zend.com/xml/zend-config-xml/1.0/">
    <id>tabbed-slider-text</id>
    <name>Slider (Tabs/Text)</name>
    <description></description>
    <author>pimcore.org</author>
    <version>1.0</version>
</zend-config>
<section class="area-tabbed-slider-text">

    <?php if($this->editmode) { ?>
        <div class="alert alert-info">
            How many tabs you want to show?

            <?php
                // prepare the store
                $selectStore = [];
                for($i=2; $i<6; $i++) {
                    $selectStore[] = [$i, $i];
                }
            ?>
            <?= $this->select("slides",[
                "store" => $selectStore,
                "reload" => true,
                "width" => 60
            ]); ?>
        </div>
    <?php } ?>

    <?php
        $id = "tabbed-slider-" . uniqid();
        $slides = 2; // default value
        if(!$this->select("slides")->isEmpty())
        {
            $slides = (int) $this->select("slides")->getData();
        }
    ?>
    <div id="<?= $id ?>" class="tabbed-slider carousel slide">
        <div class="carousel-inner">
            <?php for($i=0; $i<$slides; $i++) { ?>
                <div class="item <?= ($i==0 ? "active" : "") ?> item-<?= $i ?> <?= $id . "-" . $i ?>">
                    <?php if(!$this->image("image_" . $i)->isEmpty() || $this->editmode) { ?>
                        <?= $this->image("image_" . $i, [
                            "dropClass" => $id . "-" . $i,
                            "thumbnail" => ""
                        ]); ?>
                    <?php } ?>
                    <div class="carousel-caption">
                        <h1><?= $this->input("headline_" . $i) ?></h1>
                        <p><?= $this->textarea("description_" . $i, ["nl2br" => true]) ?></p>
                    </div>
                </div>
            <?php } ?>
        </div>
        <!-- End Carousel Inner -->
        <ul class="nav nav-pills nav-justified">
            <?php for($i=0; $i<$slides; $i++) { ?>
                <li data-target="#<?= $id ?>" data-slide-to="<?= $i ?>" class="<?= ($i==0 ? "active" : "") ?> item-<?= $i ?>">
                    <a href="#">
                        <?= $this->input("pill-title_" . $i) ?>
                        <small><?= $this->input("pill-small_" . $i) ?></small>
                    </a></li>
            <?php } ?>
        </ul>
    </div>

</section>

The customised area blocks must be enabled before they will appear in Pimcore. Click on Extras -> Extensions in the Admin section, and you will see each folder you have added. Click the icon to enable/disable the area. Now if you refresh your page with the $this->areablock(…) code, you should see your customised area available to use!

Last thing! Pimcore has all manner of caching going on! Go into Settings > Cache in order to clear it and see your changes!

Pimcore looks to be a great CMS! I haven’t played around with it much but if you are a fan of Zend Framework 1 then you’ll be right at home using it!

Right now, I’m designing the front end for a small promotional site that requires a CMS admin panel etc, and I’m rendering a customised Navigation view, in order to get the Bootstrap classes that I want.

Pimcore allows you to run multiple sites from the one system. So first we put a check in our layout.phtml :

$navStartNode = $this->document->getProperty("navigationRoot");
    if(!$navStartNode instanceof Document_Page) 
    {
        if(Site::isSiteRequest()) 
        {
            $site = Site::getCurrentSite();
            $navStartNode = $site->getRootDocument();
        } 
        else 
        {
            $navStartNode = Document::getById(1);
        }
    }

The root site always has Document ID 1. In the Pimcore admin panel, you right click and add a new page, then right click and you can tell it to use that page as an actual site, so you can add as many as you like!

In the layout.phtml (or view partial like header.phtml), I have the following:

<div class="navbar-collapse collapse">
<?php
        $navigation = $this->pimcoreNavigation()->getNavigation($this->document, $navStartNode);;
        echo $this->navigation()->menu()->renderPartial($navigation, 'elements/theme-nav.phtml', array(
                "maxDepth" => 1,
                "ulClass" => "nav navbar-nav"
          ));
 ?>
</div>

Pimcore checks in the views folder for the partial (elements/theme-nav.phtml in my example). In my project the views folder is located in /website/views/scripts, so create an elements folder, and create theme-nav.phtml:

<ul class="nav navbar-nav"  data-0="margin-top:20px;" data-300="margin-top:5px;">
    <?php
    foreach ($this->container as $page) 
    {
        echo '<li>'.$this->navigation()->menu()->htmlify($page).'</li>';
    }
    ?>
</ul>

And that’s it! Your Navigation is now rendered in the way we want!