Jan
19
2016

What’s new in Magento 2

December 2015 saw the release of Magento 2 for store owners and merchants. As experienced Magento consultants, Richard Carter Consultancy share our insight and thoughts on what’s new in Magento 2.

Magento was started in 2007, and has become one of the leading ecommerce platforms in the world. Whilst it may have a steep learning curve (which is where our Magento training courses are useful!), Magento has proven itself a great, feature-rich, stable ecommerce platform for many leading names around the world.

What to expect in Magento 2

Magento 2: new design

At a glance, here is what you can expect from Magento 2:

  • New administration interface design which is mobile and touch friendly
  • Drag and drop, customisable product grids: add new columns, and reorder them easily: something that was achievable in Magento 1, but not easily done by an administrator
  • New reporting tools for sales and orders
  • A focus on performance, with the Full Page Cache (previously only in Magento Enterprise) now
  • A new responsive base Magento theme, Luma (see screenshot above)
  • A rolling roadmap of new features every quarter
  • Improved checkout: Magento 2’s checkout process has seen some small improvements which should have a large impact on conversion rates, including guest checkout being the default, and automatic customer account detection by email address
  • An improved Magento Connect marketplace for extensions, with heavier vetting by the Magento team to prevent poor quality and scammy extensions being available

And whilst the administrative panel has changed in the new Magento version, there’s nothing particularly new feature-wise in the new Magento version (yet – don’t forget those quarterly features), this is a great new platform for ecommerce businesses.

Updating to Magento 2

If you’re a store owner or merchant already on Magento and are considering whether or not you should upgrade to Magento 2 yet, our advice is: not yet (January 2016)! Whilst Magento 2’s core functionality for Magento Enterprise and Magento Community is now ready and in use on a very small number of live stores, additional features such as shipping and payment integrations may not yet be ready for your store.

There is a migration path for your customer, order and product catalogue data from Magento 1 to Magento 2 (we’re currently experimenting to see how reliable this tool is!), but themes and modules will not be portable to the new version of Magento.

So, there you have it: a guide to what’s new in Magento 2. If you’d like to work with us on your next Magento 2 project, please do get in touch.

Oct
15
2015

Adding Apple (iPhone/iPad) touch icons to Magento 1.9 using local.xml layout XML

We’ve seen a lot of hacky-feeling ways to adding Apple touch icon paths to theof your Magento store, so here is a cleaner way to add Apple Touch icons to your Magento theme’selement.

1. Open your Magento theme’s local.xml

Open your theme’s local.xml layout file, located in the app/design/frontend/[package]/[theme]/layout, where [package] and [theme] are relevant to your store.

For example, the local.xml file might be in this directory of your Magento store if you have enabled a custom package called rcc:

app/design/frontend/rcc/default]/layout/local.xml

2. Add the layout XML to add touch icons

Once you have found the local.xml file in your Magento theme (or created it in your theme, if it doesn’t already exist), find the <reference=”head”> block in the file, and add the following layout XML:

<block type="core/text" name="head.touch.icons">
<action method="setText">
<text><![CDATA[<link rel="apple-touch-icon" href="/apple-touch-icon.png" /><link rel="apple-touch-icon" sizes="57x57" href="/apple-touch-icon-57x57.png" /><link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-72x72.png" /><link rel="apple-touch-icon" sizes="76x76" href="/apple-touch-icon-76x76.png" /><link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-114x114.png" /><link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png" /><link rel="apple-touch-icon" sizes="144x144" href="/apple-touch-icon-144x144.png" /><link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png" /><link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-180x180.png" />]]></text>
</action>
</block>

This adds <link> elements in to the <head> element of your Magento theme which reference the required Touch icons such as apple-touch-icon.png and apple-touch-icon-180×180.png used by different Apple device types (such as iPad, iPhone).

3. Upload your Apple Touch icons to Magento

You can then upload your desired Apple Touch icons to your Magento root directory, so that they appear at:

example.com/apple-touch-icon.png

etc. This means that they can be found by devices which don’t make use of the <link> elements in your theme’s <head> element.

You can use a free tool such as Iconifier to create the various sizes required for this, including your store’s default favicon.ico.

4. Make the local.xml file live

Once you’ve made the changes to your Magento theme, upload your new local.xml to your site.

Don’t forget to clear your Magento store’s caches in the System > Cache Management screen of your Magento administration panel once you’ve done this to see the changes!

That’s it, you should now see Apple Touch icons on your Magento store!

 

Sep
2
2015

Removing the Raleway Google Font from your Magento 1.9 rwd child theme

Magento Community 1.9 introduced a new theming system aimed at creating a better base theme for responsive websites.

At a basic level, the Magento rwd theme provides a great base layer to start customising to your brand’s colours and imagery. A very common query we receive from other web designers and developers working with Magento is how to remove the default Raleway font from the base rwd theme.

Removing a Google web font from Magento rwd theme

Removing this default font from a Magento theme in Community 1.9 is actually relatively easy using Magento’s local.xml file.

  1. Firstly, locate your theme’s local.xml file; this is typically in your /app/design/frontend/[package-name]/[theme-name]/layout/ directory
  2. Add the following snippet to your local.xml file:


link_rel
//fonts.googleapis.com/css?family=Raleway:300,400,500,700,600


This removes the Google web font from your theme’s <head> element. If you don’t see the change, don’t forget to clear your caches (in the System > Cache Management menu in the Magento administration panel).

Adding a Google web font to a Magento theme

If you want to add a new Google web font in to your Magento rwd theme, you can add the following to your theme’s local.xml file:

<action method="addLinkRel">
<rel>stylesheet</rel>
<href>//fonts.googleapis.com/css?family=Open+Sans</href>
</action>

Changing the value of Open+Sans (noting that spaces in the font name should be replaced with a “+” character) will change the relevant font in your Magento theme.

You can also then change the references to typefaces in your Magento theme in the relevant Sass/SCSS files in the /skin/frontend/[package-name]/[theme-name]/scss/mixin directory in the _typography.scss partial file.

And, of course, if you’re looking for a Magento web designer and Magento consultant for your next project, we’re available!

Jul
20
2015

Which additional features are in Magento Enterprise Edition?

One question we receive from client enquiries on a reasonably regular basis is which additional features Magento Enterprise Edition comes with.

Magento Community, its free-to-use sister, is already very feature rich and provides a great basis for ecommerce websites, and the question of what extra functionality the Magento license fee (see how much Magento Enterprise costs) for Enterprise Edition provides is certainly valid.

Extra functionality in Magento Enterprise

So, which extra features does Magento Enterprise Edition actually ship with? The features that really stand out to us are:

  • Full Page Caching: this could be worth the cost of Magento Enterprise alone, as it can hugely reduce load on your servers and increasing availability of your store at peak times (see this guide on Magento Full Page Caching), as well as some potential load time benefits
  • Return Management Authorisation: RMA allows management of returns, replacements and refunds with Magento Enterprise’s backend (see this Wikipedia article for a reasonable explanation of RMA).
  • Customer support from Magento Inc: direct access to Magento staff for any queries you might have.
  • Better support for huge numbers of SKUs: simply, Magento Enterprise is better designed for huge product databases, so expect more tools for managing products in bulk, as well as frontend and backend performance gains.
  • Improved customer segmenting: greater ability to segment customers to better promotional emails, etc.
  • More SEO tools: additional search engine optimisation controls and tools for products and content.
  • Better promotional tools: Enterprise Edition offers merchants more tools to target their promotions (see improved customer segmenting) and opportunities for merchandising, as well as greater control over discount/promotional coupons

Many of these features can actually be added to Magento Community through free or paid extensions that already exist, but Magento Enterprise’s full page caching and ability to handle very large numbers of SKUs more easily can be very useful to clients.

And, of course, if you’d like help and consultancy for your Magento Enterprise project, please do get in touch with us.

This information is correct to our knowledge as of July 2015 and Magento Enterprise Edition 1.14.

May
14
2015

Providing a unique robots.txt file per site within Magento’s multisite

This is a guide on how to provide a unique robots.txt file per site within a Magento multisite installation.

As this solution isn’t Magento-specific (it’s server specific), it should work with any version of Magento Community and Magento Enterprise Editions (we tested it on Magento CE 1.4 and Magento CE 1.9).

There are a couple of requirements before we begin:

  1. Your server must been on Apache (this method won’t work for nginx servers)
  2. Your sites should live on different domains (e.g., example.com and example.de)

Having a robots.txt file at the root of your website is essential for many reasons. Search engines require the files to be named robots.txt in order for them to be able to read and understood.

What happens however, when you have multiple sites all with the same root directory? With only one robots.txt file you would have to effect the same sections of each individual website. This is obviously not ideal for some stores running within a single Magento installation using the multisite feature, who may have different requirements.

We can get around this with two different methods. The first involves a redirect. You can view the pro’s and con’s of using a redirect in the following table:

Method 1 – Redirect the robots.txt to separate files

Advantage Disadvantage
Easily setup The redirect negatively affects the SEO of your site
Requires minimal knowledge of programming

The file we will need is the .htaccess file of which can be found in your root directory. Within this we need to do a simple redirect like so:

RewriteRule ^robots\.txt$ %{HTTP_HOST}.txt [L]

This redirect would essentially redirect your robots.txt file to a domain_name.txt file. You could therefore create a robots.txt file per-site and have them read via the redirect. This would work like so:

Domain Name Redirected robots.txt file
example.com example.com/example.com.txt
ilovelearning.com ilovelearning.com/ilovelearning.com.txt

Within each of these files you can place the relevant information of which you need per site.

Method 2 – unique robots.txt files using PHP

The second method involves a bit more work. However, it includes no redirects making it more friendly to search engines crawling through your site.

To begin with, we will have to tell our site that the robots.txt file is actually one operates with php. To do this add the following to your .htaccess file:

<FilesMatch ^robots\.txt$>

SetHandler application/x-httpd-php

</FilesMatch>

With this, we can now add php to the robots.txt. Next we need to add a little code!

@header("Content-Type: text/plain");

$content = "";
$url = SERVER['SERVER_NAME'];


if ($url == "a.site.com")

{

$content .= "User-Agent: * \n";

$content .= "Disallow: /app/ \n";

...

} elseif($url == "b'site.com") {

$content .= "User-Agent: * \n";

$content .= "Disallow: /skin/ \n";

...

} else {

...

}

echo $content;

A little explaining is in order. We first need to create a variable of which is empty so that we can add our robots.txt information within it. Next we need to ask for the url of which the crawler is currently within.

We can then add specific information based upon which URL the file is being called from. This allows us to only use a single robots.txt file throughout the whole of our multisite.

Ensuring that there is a newline at the end of every addition (with the use of “\n”) is very important. We need to ensure that we are displaying the file as we need to otherwise the crawler may not be able to understand what we are telling it.

The above example would output the following based upon the current URL:

Domain Name robots.txt content
a.site.com User-Agent: *Disallow: /app/
b.site.com User-Agent: *Disallow: /skin/

 

That should be it! You are now giving search engines a different robots.txt file depending on which website they are currently crawling on your Magento multisiute installation.
If you desire any further help with Magento, don’t hesitate to check out our comprehensive Magento consultancy services.

Feb
23
2015

Adding New Tabs to Products Within Magento

Starting off with Magento’s default tabs on product pages will leave you with “Delivery” and “Additional Information”.

Whilst these can be useful, it isn’t going to always include the exact information of which you need to display. Luckily, it isn’t too difficult to add / remove tabs from the list. Before we dive into the code, let’s try and understand it a little more.

Within the base themes location (app/design/frontend/base/default/) navigate to the layout directory and open “catalog.xml” (this being the layout file for the catalog module). Within this file you will find the following code:

 

<catalog_product_view translate="label">

     ...

   <reference name="content">
      <block type="catalog/product_view" name="product.info" template="catalog/product/view.phtml">

     ...

         <block type="catalog/product_view_additional" name="product.info.additional" as="product_additional_data" />

         <block type="catalog/product_view_description" name="product.description" as="description" template="catalog/product/view/description.phtml">
            <action method="addToParentGroup"><group>detailed_info</group></action>
            <action method="setTitle" translate="value"><value>Description</value></action>
         </block>

         <block type="catalog/product_view_attributes" name="product.attributes" as="additional" template="catalog/product/view/attributes.phtml">
            <action method="addToParentGroup"><group>detailed_info</group></action>
            <action method="setTitle" translate="value"><value>Additional Information</value></action>
         </block>

     ...

      </block>
   </reference>

     ...

</catalog_product_view>

 

A few things to note here are the following:

1) A block “name” has to be unique to the page that it is used (In this case a catalog page) – It is worth noting that an “alias” has to be unique within a parent block

2) The “action” tag calls a public PHP method from within its particular module (for this example it is catalog)

3) The “Group” element defines an expandable fieldset. As a result it always has to be a child of another section

4) All of this is done within “<catalog_product_view>”. This is a call to the [Module_Frontname] _ [Controller] _ [Action] of which we will add our layout within.

5) A “Reference” is needed to declare where on the generated page that this block will be initiated.

So what is happening here? We have declared a block named “product.info” within the “content” section of the page. Within this we created a block named “product.info.additional” with the aim of showing a couple of information tabs. We have then called for two blocks to use the PHP method “addToParentGroup”, within the fieldset of “detailed_info” with the titles of “Description” and “Additional Information” respectively.

The most important part for the action method “addToParentGroup” is to ensure that you have the template file available to import into the tab. This can be seen within this section of code:

 

..
<block type="catalog/product_view_description" name="product.description" as="description" template="catalog/product/view/description.phtml">
..

 

The “type” declares the “alias” of the module followed by the class name relative to the alias. Due to Magento’s functionality, the class name is the route to the file. So “product_view_description” translates to catalog/product/view/description

The template for the block is then declared within the “template” label. This is written with the literal route to the file (Magento always looks for a modified version within a new template first, so you do not put the absolute path to the file, only the relative path).

This block is therefore calling for anything within the “catalog/product/view/description.phtml” file to be added to into a fieldset of “detailed_info” with the title of “Description”.

 

Adding Our Own Tabs

 

Now we need to alter the base XML file by overriding its functionality with our own (you must never edit the base files of Magento). To do this create a file names “local.xml” within app/design/frontend/[your package]/[your theme]/layout.

Within this file enter the following code:

 

<?xml version="1.0" encoding="UTF-8"?>
<layout>

   <catalog_product_view>

      <reference name="product.info">

         <block type="catalog/product_view" name="product.delivery" as="delivery" template="catalog/product/view/delivery.phtml">
            <action method="addToParentGroup"><group>detailed_info</group></action>
            <action method="setTitle" translate="value"><value>Delivery</value></action>
         </block>

         <block type="catalog/product_view" name="product.returns" as="returns" template="catalog/product/view/returns.phtml">
            <action method="addToParentGroup"><group>detailed_info</group></action>
            <action method="setTitle" translate="value"><value>Returns</value></action>
         </block>
     
      </reference>

   </catalog_product_view>

</layout>

 

Here we are calling the same action as before i.e. “<catalog_product_view>”. Within this we reference the section we would like to add our blocks. This is name of the block declared in catalog.xml called “product.info”.

When we want to add our tabs we have to reference the same public PHP method as before called “addToParentGroup” with exactly the same group name of “detailed_info”. This will ensure they are all grouped together.

Finally we tell Magento that we are adding two files at the location of “catalog/product/view/delivery.phtml” and “catalog/product/view/returns.phtml”.

Now, if you go to the location of app/design/frontend/[your package]/[your_theme]/templates/catalog/product/view (You may have to create some directories if they are not already there) and create two files named “delivery.phtml” and “returns.phtml” we can  put ourselves on the finishing stretch!

Within these two files enter some dummy data – letting a cat walk over the keyboard is okay for that – and save the files. Make sure you have uploaded both the local.xml file and the new template files to your server (Or just save them both if you are working locally) and go to your product page. You should now see the two new tabs appearing next to the original ones!

Thank you for reading this tutorial. If you have any questions, feel free to write a comment below.

Dec
19
2014

Disabling attributes in Magento’s compare products table view

If you want to alter the attributes that appear in Magento’s compare products pop-up, it’s possible to do this through Magento’s backend: you can disable attributes for Magento’s compare products table.

This is useful if you have a lot of attributes showing on your store’s frontend which customers won’t want to see when comparing products in your store:

Disable attributes on Compare Products in Magento

Optimising these fields to show only what is useful to customers can be key in converting visitors to customers on your Magento store, so this small change could be a vital part of gaining more business.

This brief guide will guide you through disabling (or enabling) attributes from displaying in the compare products screen in your Magento catalogue without any knowledge of coding for Magento: all changes required can be done through Magento’s powerful dashboard.

Disabling attributes in Magento compare feature

Log in to your Magento store’s administration panel, and navigate to the Catalogue > Attributes > Manage Attributes screen. From there, search for the attributes you want to enable or disable on the Manage Attributes grid:

Magento - change attributes on compare products table

Click the attribute to edit it, and ensure you are on the Properties tab (left hand side of the screen):Magento Manage Attributes - Properties tab

Scroll down the screen to the Frontend Properties panel on the edit product attribute screen, and locate the Comparable on Front-end dropdown.

To disable the attribute from being displayed to customers on the product compare feature on the frontend of your Magento website, set the value of Comparable on Front-end to No.

Disable attributes on Compare Products in Magento

Alternatively, set the Comparable on Front-end field to Yes to ensure this attribute is displayed to customers when comparing products.

That’s it! You can now alter the appearance of attributes for comparing products on your Magento store.

And, as always, if you need any further help with your Magento store, we offer a comprehensive Magento consultancy and development package.

Oct
28
2014

[Solved] Magento: Change “Choose An Option” text in configurable product dropdown – goedkope trouwjurken

There’s a lot you can change in your goedkope trouwjurken Magento theme in the relevant .phtml files, but some things are not quite as easily changed as others. One of these things that is not so easy to change is the “Choose An Option” text that appears as the default (null) option for product options (such as size, colour, etc).

How to change “Choose An Option” text in Magento

If you want to change this text in Magento Community 1.9 (and Enterprise 1.14), you’ll need to dig deeper in to customising your goedkope trouwjurken Magento theme, and create a Magento locale file (translate.csv).

1. Create a translate.csv file

Create the translate.csv file, if it doesn’t exist, in the app/design/frontend/[your-package-name]/[your-theme-name]/locale/[language]/ directory of your Magento installation.

So, for instance, in our client’s Magento 1.9 Community store, we created this file:

app/design/frontend/clientname/clientbase/locale/en_GB/translate.csv

The above example assumes you have set your Magento store for British English: if you are using American English, use the following directory:

app/design/frontend/clientname/clientbase/locale/en_US/translate.csv

2. Provide an alternate translation in Magento’s translate.csv

Next, you need to create the translate.csv file for your Magento theme:

“Choose an Option…”, “Please choose…”
“Choose an Option”, “Please choose”

You can replace “Please choose goedkope trouwjurken” in the example above with any other phrase you wish to use in place of “Choose an Option…”.

About translate.csv

The translate.csv file is simply a comma-separated variable file which contains alternate phrases used in your store: the first value contains the text to replace, whilst the second value is the new phrase you want to use in its place. If you need more pointers on translate.csv, check out Tom Robertshaw’s post here.

That’s it! You should now be able to see the dropdowns displaying your new text as the default option, instead of “Choose an option…”. Can’t see the change? Check your Magento caches, or check out our Magento development services if you need expert help.

Oct
11
2014

We’ll be at MageTitans Magento conference in Manchester UK!

Magento conference in Manchester - Mage Titans

We’re really looking forward to attending the MageTitans Magento conference in Manchester early next month!

There is the annual Magento Imagine conference in London, but this is the first northern Magento conference we’ve heard about. MageTitans takes place on 1st November 2014 at the Comedy Store in Manchester. There is a really impressive speaker list for the conference including “Magento-famous” names such as Vinai Kopp and @bobbyshaw (the name behind Meanbee), and a great line-up of talks.

The conference line-up includes talks on design, optimisation and development aspects of working with the Magento ecommerce platform, and – we imagine – plenty of time to chat to other Magento designers, developers and users after the conference.

As long-time Magento developers, we’re really excited that the Magento community within the UK is now deemed large enough to support more regional conferences alongside community events and conferences for other great open source software such as WordPress and Drupal.

There are apparently still a (very small) number of tickets for Mage Titans available, apparently, so check out their website at MageTitans.co.uk and book away!

Aug
26
2014

How to solve Magento not running in an iframe

If you’ve attempted to embed your Magento store in an iframe recently and it hasn’t loaded, a new setting in Magento 1.9 Community Edition and Magento Enterprise Edition 1.14 may well be the cause: Magento has disabled embedding by iframe by default.

Enabling embedding by iframe for your Magento store

Log in to your store’s administration panel, and navigate to System > Configuration in the menu:

Enable Magento to be embedded in iframes

From here, select Admin from the Advanced tabs (in the left-hand column):

Magento: enable iframes (Advanced > Admin menu)

Finally, expand the Security settings panel and change the Allow Magento Frontend to run in frame option to Enabled:

Magento iframe embedding enabled!

You can also use the Allow Magento Backend to run in frame setting to allow Magento’s backend to run in an iframe (not recommended).

If you’d like any help with your Magento store(s), we offer Magento consultancy to clients large and small.