If you have been following me, or are subscribed to our Demac Media blog, then you most likely saw my last off canvas tutorial! If you missed it though, here’s the link: Magento Mobile Off-Canvas Navigation Menu. In that blog post I explained how user experience is one of the most important features a mobile store should focus on, as well as showing you a step-by-step example of how to create an off-canvas mobile menu. Just to make sure we’re all still on the same page, off-canvas refers to any item that sits outside of the viewport on your website through CSS or JS and slides into view once activated.
This time I mean to show you how to properly create an mobile off canvas mini cart in Magento! This post was created in conjunction with a post by our Interface Designer, Ryan Howorth on the UX Design of a Mobile Off Canvas Mini Cart
Off Canvas Mini Cart
Having an off canvas mini cart on your mobile site will fulfill the need a great number of users have, which is to be able to quickly check what is already in their cart while avoiding the aggravation caused by loading a whole new page every time they want to see this info. We can safely assume that slow loading times are one of the main causes of shopping cart abandonment. Among these reasons, a bad navigation implementation is another as explained in the related blog posts below.
A properly implemented off canvas mini cart can definitely help improve your mCommerce site’s flow, as long as you keep in mind that this feature should not increase the amount of clicks users need to perform while completing one transaction.
It needs to be created at the ‘root’ level because it will live outside of all of the content and the type=”core/text_list” tells the block to automatically display all of its children.
When something is off-canvas it can be on either the top, bottom, left or right sides, so let’s declare a block with the ‘right’ word in its name since we want our mini-cart to slide in from the right.
This time we give it a type=”core/template” which is the most general block type and contains all the methods we will need for this. We will create the template file later on.
Now, it is time to declare the children blocks of content that our off canvas mini cart will contain and render. This part is easy because Magento has already done it for us! We are copying and pasting the xml code used for the sidebar cart and placing it inside of our ‘off_canvas_right’ block.
Now that we have all of our off canvas blocks declared, we can proceed to declaring the block for our mobile navigation in the header.
This one goes outside of the <reference name=”root”></reference> block entirely and in the “header” block instead. This is where you will place the shopping cart icon, and other important mobile navigation buttons.
This one is easy, you just need to call the child block we declared in the header block earlier. Preferably at the very bottom of header.phtml. You will later on show and hide this with CSS and media queries, but for anything to render we first need to create the following template file.
<div class="mobile-menu hide-desktop" id="icon-nav">
<?php // You can place any other navigation buttons here ?>
<label for="off-canvas-right-check" id="mini-cart-icon">
<i class="fa fa-shopping-cart"></i>
I showed how to display a shopping cart item count in my other tutorial here
You will notice that inside of the ‘bag-icon-wrap’ div we have a label. This is the label that goes together with the input check box we placed inside of offcanvasright.phtml. Just make sure the ID of your check box matches the for=”” attribute of your label.
All of these will need the same code edit. Inside of the <body> you will need to wrap the <div class=”wrapper”> with two other wrapping divs, one called ‘outer-wrap’ and another called ‘inner-wrap’. In-between the ‘outer’ and ‘inner’ divs is where you will call the off-canvas menu block, like so:
We don’t want or need to see the check box, so we better display:none it.
Just some styles and transitions for the wrappers to work better with the off-canvas menu. For the outer-wrap we did overflow-x:hidden to avoid getting a scrolling bar once the off-canvas is open. For the inner-wrap we added a left:0 for the animation to have a starting position.
This is our off-canvas menu. The first part here is, of course, the transitions that will allow the sliding animation to happen. We use position:absolute to position the mini-cart out of the html structure and on top of everything else, height:100% to make it reach the bottom of the window at all times, and overflow:hidden so that we can put it outside of its container box without increasing the container’s width. Then we give it a 75% width and a right margin of the same amount but negative so that it’s fully hidden outside of the browser.
Here is where we finally get to use the magic of CSS3. We use the pseudo-class :checked to target the check box when checked. It’ll be checked when the user taps the label that is related to it (the shopping cart icon is the label). We use the ‘+’ selector to target only the immediate sibling element with the ‘off-canvas-right’ id, and then add the necessary styles for it to slide to the left.
Here we use the :checked pseudo-class again but this time we use the ‘~’ selector which targets any next siblings with the class ‘inner-wrap’ which is the site’s content wrap. We want to simultaneously slide this to the left while the off-canvas slides to the left from the right as well. We need left:-75% so that they both move the same distance and look synced. We need position:relative here for left:-75% to work.
And finally some media queries to hide the mobile navigation and off-canvas menu from 940px and up. We also want to return ‘inner-wrap’ to left:0. The transitions will make it look nice when you’re resizing the browser window.
Hopefully, this tutorial helps you with implementing an off canvas mini cart for your online store. Remember that mCommerce is the here and now and you should be executing strategies to integrate and optimize the performance of your store on mobile. Comment below if you have any questions or would like clarification on any of the steps I’ve outlined above!