Yet another blog (hopefully a useful one though)
Posts tagged Magento
The future of eCommerce – mCommerce?
Jun 23rd
I was lucky enough to be invited into the Magento Mobile introductory Webinar which was very interesting and very well put together. The content will shortly be available on the Magento website.
So, what is this mobile commerce, or mCommerce to the cool kids, all about? Well for starters mCommerce sales already account for $2.5 billion per year and this is projected to rise to around $24 billion per year within the next 5 years which would lead it to account for almost 10% of all eCommerce sales. With this sort of sales volume it is not just the big players that should take mCommerce seriously.
Obviously the next question for someone thinking about this is how to get this whole mCommerce thing happening. There are a couple of routes and some pretty big pros and cons here. The biggest difficulty with the mobile world is what us geeks call fragmentation. This is that there are several different platforms, all of which operate differently and even use totally different operating systems.
There are two ways that mCommerce can operate. The first is as a website which is presented differently to mobile devices. This has the advantage that one solution can be accessed on all devices but there are some performance and user-interface sacrifices. At face value the native app just works better in terms of giving a high quality experience. However, the native app route means development costs are much higher and development must be done separately for each device. However, if the initial cost hurdle can be overcome the high quality result can give excellent results. Oasis, for example, reported to break even on their app after only one month.
In terms of the different platforms there are currently:
iPhone (and now iPad; it isn’t a phone so is it just a Smart?) – The daddy of the mobile app world. There had been a bunch of smart phones before the iPhone that had supported third party applications but it was Apple’s App Store that first got peoples attention in a big way. Ironically, Apple were against this idea first and wanted everything to be web based originally. There are currently something like 200,000 iPhone apps and there have been over 2 billion downloads from the App Store. Applications for the
Android – This is the newer open source operating system from Google. There are a very large number of handsets from numerous manufactures from Sony-Erickson, through Samsung to Dell. Android is built on Java which is a language with a fairly large developer community already. Also, Android is pretty flexible so all sorts of different things can be done with Android apps. In the first quarter of 2010 more Android handsets were sold in the US than iPhones and Android shows the fasted rate of growth in uptake of any smart phone OS. However, this is just before iPhone 4 was released so time may tell that this is a little artificial in what it means.
Blackberry – The Blackberry is still the mainstay of corporate types. To now, Blackberry apps have been pretty poor and performance is quite variable. However, RIM (the makers of Blackberry) have recently released a new App World and developer tool set so this is likely to change. In many countries the Blackberry is the most popular smart phone type by a large margin so if the apps could be made to behave there is a big market out there.
Symbian + Maemo – These are two smart phone OS’s with daft names (not that the others are much better) from Nokia. Around the world there are more Symbian smart phones that any other type of smart phone device. At the moment there are some major delivery and consistency issues with Symbian apps and teh handsets are fairly low end. Maemo is newer and is based on Linux. I think it is too early to tell if Maemo will take off but from a developer’s point of view apps for both Symbian and Maemo can be build with the same tool.
Windows Mobile (and Windows Phone 7) – Microsoft were a very early provider of smart phones. There are a fairly large number of business oriented Windows mobile apps but not so many casual apps. Windows Phone 7 may see this change (I personally think it will anyway). Windows Phone 7 uses Silverlight for the simple user interface stuff which is a fairly straight forward thing to use and has some developers already. For games etc XNA studio is used which is the same as for the XBox so again a developer community already exists. Knowing Microsoft Windows phone 7 will be a successful mobile platform and I think it will take off but you never know.
Palm WebOS – Poor Palm, they had the next big thing, it was a revolutionary system. Beautiful to use and easy to develop for. Unfortunately no-one bought one though so they folded. HP bought up Palm so we don’t know yet what will happen so this one is a bit of a watch this space.
Samsung Bada – This is a relatively new mobile OS that lives on the Samsung Wave 2. It is quite a nice OS but for app developers we need to know that there will be a decent sized audience before we start committing resources to the system. There is however a pretty large developer challenge with some nice juicy prizes up for grabs and Samsung are pushing hard to make their new mobile OS stick so this is another wait and see.
So, all together we have eight seperate mobile OS’s to look at for native mobile apps. At the moment you would consider iPhone first but also iPad and Android. Blackberry and Windows mobile (maybe just Phone 7 though as it is coming soon) are a pretty safe bet and plausable for app development. The others really need to prove themselves but all have an audience so if you are Facebook or someone similar and want to target absolutely everyone they are worth considering. Equally if you wish to target a certain country then they are worth looking at. For example China is almost exclusively Symbian.
Ok, so we have looked at what mCommerce is, whether it is best to go for a mobile website or a native mobile app but there is a middle way. This is not something that really works well yet but does offer a compromise. I will not go in to too much detail but essentially a transferable web-based core is embedded into a device specific wrapper. A few platforms exist with PhoneGap being my favourite (it’s free and I’m tight) but you can tell where the web content exists which to me is a fail most of the time. It is a bit like the old Geo-cities sites in the rickety way they sometimes work and for a commercial product I don’t think it is good enough (yet).
I think that for most companies a mobile app is the best bet at the moment. They are a bit expensive but an ROI is pretty much guaranteed. There is still a great PR buzz around them so just the publicity will usually make it worth it. The important thing is too look at how your customers are likely to want to interact with your business on a mobile device. If the mobile application is the product (in the case of a game) the return can be highest but so is the risk. Whatever your business though there is sure to be an app for that 
.
As a foot note we are a mobile application development company as well as a web design company and we can offer development on all platforms as well as strategy / consultancy. See our main site for info or contact details. Also, we are in the UK but can operate globally. I would buy the msinternet.com domain but they want $10,000 and as I already said, I’m tight!
Magento: jQuery Accordian Menu
Mar 6th
Ok here’s how to make a dynamic jQuery sliding accordian menu in Magento, as seen on http://www.waterfrontbathrooms.com/.
Waterfront bathrooms also has a dynamic tree menu system to deal with there being more than 2 levels of categories, but I’ll cover this in a future post.
- Upload jQuery
Upload the latest jQuery version to js/jquery/jqueryfile.js. You can get the latest jQuery file from: http://docs.jquery.com/Downloading_jQuery - Upload ddAccordian
Upload ddAccordian menu script to js/ddaccordian.js. You can get ddaccordian.js from http://www.dynamicdrive.com/dynamicindex17/ddaccordion.js - Call the javascript files from the page head
Open app/design/frontend/yourpackage/yourtheme/template/page/html/head.phtml and put the following lines in anywhere after the default lines of code.
<script type="text/javascript" src="/js/jquery/jqueryfile.js"></script><br /> <script type="text/javascript" src="/js/ddaccordion.js"></script>
- Create the navigation template file [download here]
Create a new phtml file in app/design/frontend/yourpackage/yourtheme/template/catalog/navigation/ You can call this whatever you like, but for the purpose of this post lets call it AccordianMenu.phtml.This would be app/design/frontend/yourpackage/yourtheme/template/catalog/navigation/AccordianMenu.phtml.
In this file you want to put this code. This is what gets all the categories from the database and displays them in a way that ddAccordian can understand.
<?php /* Get the categories that are active for the store */ $_main_categories=$this->getStoreCategories(); /* Get the current category the user is in */ $_default_category=$this->getCurrentCategory(); ?> <div id="leftmenu"> <?php if ($_main_categories): /* This bit cycles through the categories - setting the next one to current */ foreach ($_main_categories as $_main_category): // if(($_main_category->getIsActive()) && ($_main_category->getId() != 37)): // Skip Category with ID of 37 if($_main_category->getIsActive()): $cur_category=Mage::getModel('catalog/category')->load($_main_category->getId()); $layer = Mage::getSingleton('catalog/layer'); $layer->setCurrentCategory($cur_category); ?> <?php $_categories=$this->getCurrentChildCategories()?> <?php if($_categories->count()):?> <div><?php echo $this->getCurrentCategory()->getName();?></div> <div> <ul> <? foreach ($_categories as $_category):?> <? if($_category->getIsActive()): $cur_subcategory=Mage::getModel('catalog/category')->load($_category->getId()); $layer = Mage::getSingleton('catalog/layer'); $layer->setCurrentCategory($cur_subcategory); ?> <li>» <a href="<?php echo $this->getCategoryUrl($_category)?>"><?php echo $_category->getName()?></a></li> <? endif;?> <?endforeach?> </ul> </div> <?else:?> <div><a href="<?php echo $this->getCategoryUrl($_main_category)?>"><?php echo $_main_category->getName();?></a></div> <?endif;?> <?php endif; endforeach; ?> <?php endif; ?> <?php $layer->setCurrentCategory($_default_category); ?> <div><a href="#">Information Page</a></div> <div><a href="#">Information Page</a></div> <div><a href="#">Information Page</a></div> </div> - Refence the AccordianMenu.phtml in catalog.xml
In your main layout file (app/design/frontend/yourpackage/yourtheme/layout/catalog.xml), you need to tell Magento what the Accordian file is, and where to put it. This tutorial isn’t really about covering the workings of your catalog.xml file, you’ll find plenty of tutorials about this if you search around google. The code I use to link the accordian menu to the left column is:
<reference name="left"> <block type="catalog/navigation" name="catalog.accordianmenu" template="catalog/navigation/AccordianMenu.phtml"/> </reference>
- Configure ddAccordian settings
Open your head file again (app/design/frontend/yourpackage/yourtheme/template/page/html/head.phtml) and add the following code underneath where you called the scripts.<script type="text/javascript"><br /> //Initialize first demo:<br /> ddaccordion.init({<br /> headerclass: "navhead", //Shared CSS class name of headers group<br /> contentclass: "navcontent", //Shared CSS class name of contents group<br /> revealtype: "click", //Reveal content when user clicks or onmouseover the header? Valid value: "click", "clickgo", or "mouseover"<br /> mouseoverdelay: 400, //if revealtype="mouseover", set delay in milliseconds before header expands onMouseover<br /> collapseprev: true, //Collapse previous content (so only one open at any time)? true/false<br /> defaultexpanded: [0], //index of content(s) open by default [index1, index2, etc]. [] denotes no content.<br /> onemustopen: false, //Specify whether at least one header should be open always (so never all headers closed)<br /> animatedefault: true, //Should contents open by default be animated into view?<br /> persiststate: true, //persist state of opened contents within browser session?<br /> toggleclass: ["", ""], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"]<br /> togglehtml: ["none", "", ""], //Additional HTML added to the header when it's collapsed and expanded, respectively ["position", "html1", "html2"] (see docs)<br /> animatespeed: "normal", //speed of animation: integer in milliseconds (ie: 200), or keywords "fast", "normal", or "slow"<br /> oninit:function(expandedindices){ //custom code to run when headers have initalized<br /> //do nothing<br /> },<br /> onopenclose:function(header, index, state, isuseractivated){ //custom code to run whenever a header is opened or closed<br /> //do nothing<br /> }<br /> })<br /> </script>
You can play with these values to get the desired effect, such as opening the sub categories on mouseover rather than click.
Now hopefully with a bit of styling you should be in business. If you have any questions/problems with this, leave a comment and I’d be happy to help.
Credit for the ddAccordian script goes to the guys at www.dynamicdrive.com. They have some pretty cool scripts over there, you should check it out.
Incase you missed it, you can download my AccordianMenu file from http://www.msinternet.co.uk/AccordianMenu.txt
Ben
Creative Lead
MS Internet
Magento – Show cart quantity
Mar 6th
If you’re putting a shopping cart area anywhere other than the standard cart side block, then you’ll probably want to show how many items are in the cart at any one time. Here’s how:
<br /> $cart = Mage::getModel('checkout/cart')->getQuote()->getData();<br /> if(isset($cart['items_qty'])){<br /> if($cart['items_qty'] != 1) {<br /> echo "You have " . (int)$cart['items_qty'] . " items in your shopping cart";<br /> } else {<br /> echo "You have " . (int)$cart['items_qty'] . " item in your shopping cart";<br /> }</p> <p>} else {<br /> echo "You have 0 items in your shopping cart"<br /> }<br />
Magento – Handy code snippets
Mar 6th
Here’s a short list of magento codes to do some of the simple stuff. It’s a little empty at the moment but I’ll keep adding to it over time.
- Check if customer is logged in
<?php $_customer = Mage::getSingleton('customer/session')->isLoggedIn(); if ($_customer) { // do stuff } ?>
- Get product image
<?php echo $this->helper('catalog/image')->init($_product, 'image'); ?>
- Show image using current skin path (PHTML)
<img src="<?php echo $this->getSkinUrl('images/logo.png');?>" alt="logo" />
- Show image using current skin path (CMS)
<img src={{skin url="images/logo.png"}} />
- Show a custom block (CMS)
{{block type="catalog/product_featured" name="product_featured" as="product_featured" template="catalog/product/featured.phtml"}}
- Show a custom block (XML)
<block type="catalog/navigation" name="catalog.myblock" after="-" template="catalog/navigation/myblock.phtml"/> - Show CMS block (PHTML)
<?php echo $this->getLayout()->createBlock('cms/block')->setBlockId('my_block_identifier')->toHtml() ?>
- Show short version of review summary
<?php echo $this->getReviewsSummaryHtml($_link,"short",true) ?>
Suggestions for any more helpful code snippets are more than welcome!
Ben
Creative Lead
MS Internet
Magento – Show image from a random product in a specific category
Mar 6th
A website we developed recently required some boxes on the homepage that link through to a specific category each, and each box needed to show an image from a random product from within that category. If you would like to do the same, here’s how it’s done:
- Create a PHTML file in your template folder, such as app/design/frontend/yourpackage/yourtheme/template/catalog/navigation/box.phtml
- Put this code in the file:
$images = array(); $catId=37; // put your category ID in here $products = Mage::getModel('catalog/product')->getCollection() ->addAttributeToSelect('image') ->addCategoryFilter(Mage::getModel('catalog/category')->load($catId)); Mage::getSingleton('catalog/product_status')->addSaleableFilterToCollection($products); // Only select products that are salable $products->load(); foreach($products as $product){ $images[] = $product->getImageUrl(); } if (sizeof($images) > 1) { $random_image = array_rand($images, 1); } else { $random_image = 0; } echo "<div class='box'><img src='" . $images[$random_image] . "'/></div>";
You can find the ID for your category by logging into the admin area and going to Catalog > Manage Categories and clicking on a category. You should see the ID come up next to the category name in the editable area.
- All you need to do now is specify where the box is shown. Open a layout file, such as app/design/frontend/yourpackage/yourtheme/layout/catalog.xml and use this layout update:
<reference name="left"><!-- change left to any structural block you want to target, such as right or content. --> <block type="catalog/navigation" name="catalog.box" template="catalog/navigation/box.phtml"/> <!--change the template path to wherever you put the template file --> </reference>
And that’s it! You should now have a block that shows an image from a random product within a specific category. You’ll need to do some styling to get it looking right mind but I hope this helps.
Ben
Creative Lead
MS Internet
Magento – Swap product image on thumbnail click
Mar 6th
One of the most frequent requests we get for Magento sites is to tame what the thumbnails do on the product page. Of course there are plenty of plugins for adding a lightbox of some sort, but if you simply want to swap out the image in the zoomer window for one of the thumbnails, here’s what you’ll need to do:
- Open app/design/frontend/yourpackage/yourtheme/template/catalog/product/view/media.phtml
- Go down to line 71 and change:
<li> <a href="#" onclick="popWin('<?php echo $this->getGalleryUrl($_image) ?>', 'gallery', 'width=300,height=300,left=50,top=50,location=no,status=yes,scrollbars=yes,resizable=yes'); return false;"> <img src="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'thumbnail', $_image->getFile())->resize(56); ?>" alt="<?php echo $this->htmlEscape($_image->getLabel()) ?>" title="<?php echo $this->htmlEscape($_image->getLabel()) ?>" /> </a> </li>
to
<li> <a href="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'image', $_image->getFile()); ?>" title="<?php echo $_product->getName();?>" onclick="$('image').src = this.href; return false;"> <img src="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'thumbnail', $_image->getFile())->resize(70, 70); ?>" alt="<?php echo $this->htmlEscape($_image->getLabel()) ?>" title="<?php echo $this->htmlEscape($_image->getLabel()) ?>"/> </a> </li>
And that’s it! Your product image should now swap out for whichever thumbnail you click.
Credit to Scott from http://www.magentocommerce.com/boards/viewthread/6402/#t61131
Ben
Creative Lead
MS Internet
Magento SagePay Form
Feb 25th
Today we finally got our integration of Sage Pay Form for Magento. Sage Pay is the UK and Ireland’s most popular payment gateway and Magento is rapidly gaining popularity. We will be submitting our integration to Magento as a community app but it will be available from us until then.
UPDATE
The extension is now live in Magento Connect at http://www.magentocommerce.com/extension/3060/sagepay-formerly-protx-form as a free community extension.
To install enter the key in Magento Connect (from the page above) and the extension should install completely.
You will need a Sagepay account. You can get one HERE.
Then you need to enter the details in Magento > Admin > System > Configuration > Payment Methods > SagePay Form.
Next you must run a transaction in test mode using a SagePay test card found HERE and successfully refund this.
The , all you have to do is ask SagePay to let you “Go Live” and change the server target from “Test” to “Live”.
This is currently tested in v1.3.2.4 so we would be interested to hear whether it runs ok in other versions. There is no reason why it should not.
Happy Trading!
UPDATE 1/12/2010
I have found out that a few people have failed to get this extension from Magento Connect. I have resubmitted it so it should come back soon but for now it can be found here. Just unzip and upload and it should work.
Also, it is stable in 1.3.x and 1.4.1.1 but not in 1.4.0.0.
MS Internet Magento Easy Pre-Installer
Feb 18th
At MS Internet we are proud to use Magento as the base of the majority of our e-commerce projects. As a software Magento is very thoroughly built and provides a plethora or functions. The following is taken from the Magento site:
Marketing Promotions and Tools
- Flexible Coupons (pricing rules) with ability to restrict to stores, customer groups, time period, products, and categories.
- Catalog Promotional Pricing
Analytics and Reporting
- Admin Dashboard for Report Overview
- Abandoned Shopping Cart Report
- Best Customers Report by Total and Number of Orders
Search Engine Optimization
- Google Site Map
- URL Rewrites give full control of URL’s
- Meta-information for products and categories
Site Management
- Control multiple websites and stores from one Administration Panel with ability to share as much or as little information as needed
- Web Services API for easy integration between Magento and any third-party application
- One-Click Upgrades
- Google Website Optimizer Integration for A/B and Multivariate Testing
Catalog Management
- Batch Import and Export of catalog
- Google Base Integration
- Downloadable/Digital Products
- Advanced Pricing Rules and support for Special Prices (see marketing tools)
Catalog Browsing
- Layered / Faceted Navigation for filtering of products in Categories
- Layered / Faceted Navigation for filtering of products in Search Results
- Product comparisons
- Product Reviews
Checkout
- One-Page Checkout
- Checkout without account/Guest Checkout
- Shipping to multiple addresses in one order
Shipping
- Shipping to multiple addresses in one order
- Multiple shipments per order
- Free Shipping
Payment
- Integrated with Google Checkout (Level 2)
- Payment Extensions Available through Magento Connect
- Configurable to authorize and charge, or authorize only and charge on creation of invoices
Customer Accounts
- Re-orders from account
- Downloadable Products
- Recently ordered items
Order Management
- View, edit, create and fulfill orders from admin panel.
- Create one or multiple invoices, shipments and credit memos per order to allow for split fulfillment
The downside of Magento is that it is a huge application with almost 10,000 files. This makes the task of installing the base software quiet time consuming. If you have SSH access this can be done much more quickly than via ftp but many hosts will not allow this. So, we have created this Magento Pre-Installer to get and unpack the files and install the sample data.
This zip file contains one PHP script. To run simply upload to your web root. If you provide database credentials you can also install the sample data. This script fetches Magento version 1.3.2.4.