Category Archives: Design Layout, XML Schema, and CMS Content Directives

○ Describe the elements of Magento’s layout XML schema, including the major layout directives:
■ How are , , and used in Magento layout?
■ Which classes and methods determine which nodes from layout XML correspond to certain URLs?
These code references can be used as an entry point to find answers to the questions above:
■ Mage_Core_Model_Layout
■ Mage_Core_Model_Layout_Update ■ Mage_Core_Block_Abstract
○ Register layout XML files:
■ How can layout XML files be registered for the frontend and adminhtml areas?
These code references can be used as an entry point to find answers to the questions above:
■ Mage_Core_Model_Layout_Update ○ Create and add code to pages:
■ How can code be modified or added to Magento pages using the following methods?
− Template customizations
− Layout customizations
− Overriding block classes
− Registering observers on general block events
■ In which circumstances are each of the above methods more or less appropriate than others?
These code references can be used as an entry point to find answers to the questions above:
■ Mage_Core_Controller_Varien_Action ■ Mage/Core/Block/*
■ Mage_Core_Block_Abstract
■ Mage_Core_Block_Template
■ Mage_Core_Block_Text
■ Mage_Core_Block_Text_List ■ Mage_Page_Block_Html_Head
○ Explain how variables can be passed to block instances via layout XML:
■ How can variables be passed to the block using the following methods?
− From layout xml file
− From controller
− From one block to another
− From an arbitrary location (for example, install/upgrade scripts, models)
■ In which circumstances are each of the above methods more or less appropriate than others?
These code references can be used as an entry point to find answers to the questions above:
■ Mage_Core_Model_Layout
■ Mage_Core_Controller_Varien_Action
■ Mage/Core/Block/*
■ Mage_Core_Block_Abstract
■ Mage_Core_Block_Template
■ Mage_Core_Block_Text
■ Mage_Core_Block_Text_List
■ Mage_Page_Block_Html_Head
○ Describe various ways to add and customize JavaScript to specific request scopes:
■ Which block is responsible for rendering JavaScript in Magento?
■ Which modes of including JavaScript does Magento support?
■ Which classes and files should be checked if a link to a custom JavaScript file isn’t being rendered on a page?
These code references can be used as an entry point to find answers to the questions above:
■ Mage/Core/Block/*
■ Mage_Core_Block_Abstract
■ Mage_Core_Block_Template
■ Mage_Core_Block_Text
■ Mage_Core_Block_Text_List
■ Mage_Page_Block_Html_Head

Inserting an Additional Step Into Checkout

There are several things that need to be considered in implementing an additional step. Here the basics that may be useful to now. As always this will be stepped through by implementing a new module.

config.xml:

<?xml version="1.0"?>
<config>

    <modules>
        <Howto_Customcheckout>
            <version>0.1.0</version>
        </Howto_Customcheckout>
    </modules>

    <admin>
        <routers>
            <customcheckout>
                <use>admin</use>
                <args>
                    <module>Howto_Customcheckout</module>
                    <frontName>customcheckout</frontName>
                </args>
            </customcheckout>
        </routers>
    </admin>

    <frontend>
        <layout>
            <updates>
                <customcheckout module="customcheckout">
                    <file>howto_customcheckout.xml</file>
                </customcheckout>
            </updates>
        </layout>
    </frontend>

    <global>
        <rewrite>
            <customcheckout_controller_rewrite> <!--This can be any unique id -->
                <from><![CDATA[#^/checkout/onepage/#]]></from>
                <!-- the URL which to override-->
                <to>/customcheckout/onepage/</to>
                <!-- destination url -->
            </customcheckout_controller_rewrite>
        </rewrite>

        <blocks>
            <customcheckout>
                <class>Howto_Customcheckout_Block</class>
            </customcheckout>
            <checkout>
                <rewrite>
                    <onepage>Howto_Customcheckout_Block_Checkout_Onepage</onepage>
                    <onepage_progress>Howto_Customcheckout_Block_Checkout_Onepage_Progress</onepage_progress>
                </rewrite>
            </checkout>
        </blocks>

        <helpers>
            <customcheckout>
                <class>Howto_Customcheckout_Helper</class>
            </customcheckout>
        </helpers>

        <models>
            <checkout>
                <rewrite>
                    <type_onepage>Howto_Customcheckout_Model_Checkout_Type_Onepage</type_onepage>
                </rewrite>
            </checkout>

            <customcheckout>
                <class>Howto_Customcheckout_Model</class>
            </customcheckout>

        </models>

    <global>

</config>

FILL IN OTHER DETAILS HERE….

An important part of the process in relation to the display of the new step goes to the layout aspect.

/app/design/frontend/default//layout/howto_customcheckout.xml

<?xml version="1.0" encoding="ISO-8859-1"?>
<layout version="0.1.0">
    <checkout_onepage_index> <!-- Adding our new step to onepage block  -->
        <reference name='checkout.onepage'>
            <action method='setTemplate'><template>checkout/onepage.phtml</template></action>

            <block type="customcheckout/checkout_onepage_customcheckout" name="checkout.onepage.customcheckout" as="customcheckout" template="checkout/onepage/customcheckout.phtml">
                <block type="customcheckout/checkout_onepage_customcheckout" name="checkout.onepage.customcheckout.child" as="customcheckout_child" template="checkout/onepage/customcheckout/customcheckout_child.phtml" />
            </block>

        </reference>
        
        <reference name='checkout.progress'> <!-- Change the template of progress block -->
            <action method='setTemplate'><template>checkout/onepage/progress.phtml</template></action>
        </reference> <!-- Here we change the template of the progress block to our custom template created -->
    </checkout_onepage_index>

    <checkout_onepage_customcheckout>
        <!-- Mage_Checkout -->
        <remove name="right"/>
        <remove name="left"/>

        <block type="customcheckout/checkout_onepage_customcheckout" name="root" output="toHtml" template="checkout/onepage/customcheckout/customcheckout_child.phtml"/>
    </checkout_onepage_customcheckout>

    <checkout_onepage_progress>  <!-- Change the template of progress block -->
        <reference name='root'>
            <action method='setTemplate'><template>checkout/onepage/progress.phtml</template></action>
        </reference>
    </checkout_onepage_progress>
</layout>

/app/code/local/Howto/Customcheckout/Block/Checkout/Onepage.php

<?php

class Webholism_DeliveryTimes_Block_Checkout_Onepage extends Mage_Checkout_Block_Onepage
{
	/**
	 * Get checkout steps codes
	 *
	 * @return array
	 */
	protected function _getStepCodes()
	{
		return array('billing', 'shipping', 'additionaltest', 'deliverytimes', 'payment', 'review');
	}

    public function getSteps()
    {
        $steps = array();

        if (!$this->isCustomerLoggedIn()) {
            $steps['login'] = $this->getCheckout()->getStepData('login');
        }

        // Adding new deliverytimes step, and remove shipping_method as this is to be automatically specified
        $stepCodes = array('billing', 'shipping', 'customcheckout', 'shipping-method', 'payment', 'review');

        foreach ($stepCodes as $step) {
            $steps[$step] = $this->getCheckout()->getStepData($step);
        }
        return $steps;
    }

/app/design/frontend/default//template/checkout/onepage/customcheckout.phtml

<?php ?>
<form  action="" id="co-customcheckout-form">
    <fieldset>
        <ul class="form-list">
            <li id="checkout-customcheckout-load">
                <?php echo ($this->getChildHtml('customcheckout_child')); ?>
            </li>
        </ul>

        <div class="buttons-set" id="customcheckout-buttons-container">
            <p class="back-link"><a href="#" onclick="checkout.back(); return false;"><small>&laquo; </small><?php echo $this->__('Back') ?></a></p>
            <button type="button" title="<?php echo $this->__('Continue') ?>" class="button" onclick="customcheckout.save()"><span><span><?php echo $this->__('Continue') ?></span></span></button>
            <span class="please-wait" id="customcheckout-please-wait" style="display:none;">
                <img src="<?php echo $this->getSkinUrl('images/opc-ajax-loader.gif') ?>" alt="<?php echo $this->__('Loading next step...') ?>" title="<?php echo $this->__('Loading next step...') ?>" class="v-middle" /> <?php echo $this->__('Loading next step...') ?>
            </span>
        </div>
    </fieldset>
</form>
<script type="text/javascript">
    //<![CDATA[
    var customcheckout = new CustomcheckoutMethod('co-customcheckout-form','<?php echo $this->getUrl('customcheckout/onepage/saveCustomcheckout') ?>');
    var customcheckoutForm = new VarienForm('co-customcheckout-form');
    //]]>
</script>

Customising Transactional Emails

If it is necessary to change the any of the transactional emails, it is possible to do this from within the administrator interface. First let’s clarify the term transactional email, by this consider the following forms that are generated with the standard operating processes:
Contact Form
Credit Memo Update
Credit Memo Update for Guest
Currency Update Warning
Forget Admin Password
Forgot Password
Invoice Update
Invoice Update for Guest
Log cleanup Warning
Moneybookers activate Email
New Credit Memo
New Credit Memo for Guest
New Invoice
New Invoice for Guest
New Order
New Order for Guest
New Shipment
New Shipment for Guest
New account
New account for Guest
Newsletter subscription confirmation
Newsletter subscription success
Newsletter unsubscription success
Order Update
Order Update for Guest
Payment Failed
Product alerts Cron error
Product price alert
Product stock alert
Remind Password
Send product to a friend
Share Wishlist
Shipment Update
Shipment Update for Guest
Sitemap generate Warnings
Token Status Change

To update any of these forms it is possible to enter the Administrator Backend. Then go to the following menu option System -> Transactional Emails.

Then Add New Template. From the new form that opens:

Backend -> System -> Transactional Emails -> Add New Template -> Load default template

This will allow selection of the forms listed above when selecting the Template* dropdown.

Then select the locale dropdown to define the language option that the new template will be applied to.

When the Load Template button is selected this will populate the bottom half of the form and it will be possible to customise this directly and save it. This template will then be used for the conditions applied.