<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Zebra Kick &#187; Magento</title>
	<atom:link href="http://www.zebrakick.com/blog/category/open-source/magento-open-source/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.zebrakick.com/blog</link>
	<description>Creative Awesome Web</description>
	<lastBuildDate>Wed, 18 Aug 2010 19:29:15 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.8.2</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>Magento Onepage Checkout Template Bug</title>
		<link>http://www.zebrakick.com/blog/magento-onepage-checkout-template-bug/</link>
		<comments>http://www.zebrakick.com/blog/magento-onepage-checkout-template-bug/#comments</comments>
		<pubDate>Tue, 22 Sep 2009 08:51:49 +0000</pubDate>
		<dc:creator>Justin</dc:creator>
				<category><![CDATA[Magento]]></category>
		<category><![CDATA[bug]]></category>
		<category><![CDATA[css]]></category>
		<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[magento]]></category>
		<category><![CDATA[template]]></category>

		<guid isPermaLink="false">http://www.zebrakick.com/blog/?p=96</guid>
		<description><![CDATA[Changing from the default template in Magento breaks the onepage checkout page.  Here's how to fix it.<p><div class="aggregator-exclude"><a href="http://www.zebrakick.com/blog/magento-onepage-checkout-template-bug/">Magento Onepage Checkout Template Bug</a> posted on the <a href="http://www.zebrakick.com/blog">Zebra Kick Blog</a> a <a href="http://www.zebrakick.com">Riverside Web Design Company</a></div></p>
]]></description>
			<content:encoded><![CDATA[<p class="dropcap-first">Recently, we rolled out an installation of <a title="Magento Commerce" href="http://www.magentocommerce.com/" target="_blank">Magento 1.3.2.3</a> for one of our clients but ran into small a problem along the way. Being an established open source project, I initially assumed that the error was my own when I found that the onepage checkout process would stop working half way through (step 3 to be exact).  However, after digging around, I found that the problem was actually a bug in Magento&#8217;s JavaScript.  The bug has been reported and will hopefully be fixed soon, but in the meantime, here&#8217;s the fix and how I found it.<span id="more-96"></span></p>
<p>I uncovered this bug after I had changed the template in <tt>app/design/frontend/default/default/layout/checkout.xml</tt> in the following block:</p>
<pre>&lt;checkout_onepage_index&gt;
    &lt;!-- Mage_Checkout --&gt;
    ...
    &lt;reference name="root"&gt;
        &lt;action method="setTemplate"&gt;
            &lt;template&gt;page/2columns-right.phtml&lt;/template&gt;
        &lt;/action&gt;
    &lt;/reference&gt;
    ....
&lt;checkout_onepage_index&gt;</pre>
<p>The default template specifies <tt>2columns-right.phtml</tt>. When I switched to a different template (<tt>2columns-left.phtml</tt> in my case), onepage checkout broke.</p>
<p>Line 49 of <tt>opcheckout.js</tt> requires that the progress blocks (that summarize the user&#8217;s checkout information on the side) be within an element with the class <tt>col-right</tt>, which is how it references those blocks to update them when the user progresses to the next checkout step.  <tt>col-right</tt> is part of the template <tt>2columns-right.phtml</tt>, which as we saw is what the checkout process uses by default.  This works out of the box, but unfortunately makes the onepage checkout process dependent on the <tt>2columns-right.phtml</tt> template.</p>
<p>As you may have seen, if the template is changed, the onepage checkout accordion does not automatically expand to show step 2 after the user presses &#8220;continue&#8221; from step 1.  More importantly, the user is not able to proceed past step 3 of the checkout process because of a silent JavaScript error(s).</p>
<p>The bug stems from a poor design choice in basing this sidebar&#8217;s functionality on a specific CSS class selector that is part of the global <tt>2columns-right.phtml</tt> template rather than on a selector that is directly related to the progress blocks (one which is already being created by that module).</p>
<p>The fix is to replace <tt>.col-right</tt> on line 49 with <tt>.one-page-checkout-progress</tt>, a class that is specifically used for the progress block content.   This makes updating of the progress blocks independent of the template, and designers can change the template without having to change the JavaScript or having the checkout process break.</p>
<p>A simple fix for a simple bug, but I have the feeling designers without knowledge of JavaScript would have had a hard time cracking it.  Hope that helps.</p>
<p><div class="aggregator-exclude"><a href="http://www.zebrakick.com/blog/magento-onepage-checkout-template-bug/">Magento Onepage Checkout Template Bug</a> posted on the <a href="http://www.zebrakick.com/blog">Zebra Kick Blog</a> a <a href="http://www.zebrakick.com">Riverside Web Design Company</a></div></p>
]]></content:encoded>
			<wfw:commentRss>http://www.zebrakick.com/blog/magento-onepage-checkout-template-bug/feed/</wfw:commentRss>
		<slash:comments>18</slash:comments>
		</item>
	</channel>
</rss>
