Creating a Configurable Product

Customers can select options when they see a configurable product, e.g. colour or size. This is useful when you want them to click on a generic product name and then tailor the product to suit their needs.

The first thing you have to do is create any new attributes you require. After specifying the values for these, you then create a new attribute set. Drag the new attributes into a new group called Selectable Options.

Next, you create the configurable product. Select the new attribute set and then select only the options you wish to include for this product. You can see by doing this that you could have one attribute set per configurable product type, or you could have one configurable product for all products in the shop.

After doing this you can assign simple products to the configurable product by clicking on Associated Products and selecting them. If the simple products don’t appear in the list as expected, then it’s most probable you either haven’t set the attribute scope to Global (required for all configurable product attributes) or you have assigned a different attribute set to the product.

Rule #1: Attributes used in configurable products need to have a global scope.
Rule #2: Simple products assigned to configurable products need to be assigned the same attribute set.

Top Menu (Category) Page Links

At some point you might need to add a link to a page on the top menu bar, the menu bar where the category anchor links appear. The steps are as follows.

  1. Create a new category named after the name of the link.
  2. Go to Url Rewrite Management. Select the newly created category and note down the target path. During setup this was catalog/category/view/id/21. Set Redirect to Permanent (301). Then save.
  3. Next click Add URL Rewrite. Select Custom. Type the name of the page link in the ID Path field. Type the target path copied in (b) to Request Path. Type the URL for the page in the Target Path field. This must be different to the name entered in the category to prevent a circular reference. Last, select Permanent (301) in the Redirect list. Then save.

Adding a Language Pack

The default Magento build comes with the en-US language pack. To install a local language pack you can either use Magento Connect or do it manually. As Magento Connect doesn’t always work it’s often simpler and quicker to do it manually.

A good tutorial is here: http://www.geekieblog.com/2011/10/adding-a-new-language-to-magento/ but the basic steps are:

  • Grab the translation files
  • Upload them to the appropriate directories as they appear in the download
  • Change you store view locale
  • Delete the cache
  • Refresh the page

Magento Connect Invalid Server Response

The reason for the following error message being shown during an attempt to install an extension in Magento version 1.5 or 1.6 is that the Magento Connect 2.0 extension key needs to be used.

Invalid server response for http://magento-community

When searching for the extension make sure you select the correct version using the dropdown before agreeing to the terms and conditions.

 

Magento Connect File Permissions

Downloading extensions using the web based Magento Connect manager requires the directories and files to be writable. SSH into the root directory of the Magento installation and execute the following.

find . -type d -exec chmod 777 {} ;

Once complete, reset by issuing the following via SSH when running php as a module.

find . -type f -exec chmod 644 {} ;
find . -type d -exec chmod 755 {} ;
chmod o+w var var/.htaccess includes includes/config.php app/etc
chmod 550 pear
chmod 550 mage #for magento 1.5+
chmod -R o+w media

Instructions are valid for version 1.5 upwards.

Less secure | More secure 

 

Editing the Magento local.xml

Rather than edit the layout xml files and risk problems during an upgrade, it’s best to use local.xml in your design package default directory. The first use of this file is to prevent blocks from appearing. Simply add the following code with the relevant block listed.

<?xml version="1.0" ?>
 <layout>
  <default>
   <remove name="left.permanent.callout" /> <!--the dog-->
   <remove name="right.permanent.callout" /> <!--back to school-->
   <remove name="catalog.compare.sidebar" /> <!--product compare-->
   <remove name="paypal.partner.right.logo" /> <!--paypal logo-->
   <remove name="cart_sidebar" /> <!--cart sidebar-->
   <remove name="left.reports.product.viewed" /> <!--recently viewed prod-->
   <remove name="right.reports.product.viewed" /> <!--recently viewed prod-->
   <remove name="right.reports.product.compared" /> <!--recently compared prod-->
  </default>
 </layout>

You can find the names of the blocks by viewing the appropriate xml file. To find the xml file, turn on the developer hints and look at the directory listed after the template directory. This is the xml file. Locate this in your base package and note the names of the blocks you want to prevent from appearing.

Here’s an example from classyllama.com:

<?xml version="1.0"?>
<layout version="0.1.0">
 
<default>
 
	<reference name="head">
		<!-- Magento looks in /skin/frontend/<INTERFACE>/<THEME>/js/buyprinting.js for this file -->
		<action method="addItem"><type>skin_js</type><name>js/buyprinting.js</name></action>
 
		<!-- This removes the item that was set in the page.xml file -->
		<action method="removeItem"><type>skin_js</type><name>js/iehover-fix.js</name></action>
 
		<!-- Magento looks in /js/prototype/element.storage.js for this file -->
		<action method="addJs"><name>prototype/element.storage.js</name></action>
 
		<action method="addCss">
<stylesheet>css/buyprinting.css</stylesheet></action>
	</reference>
 
	<reference name="header">
		<!-- This adds a CMS block that can be called from the template file
		associated with the header block. -->
		<block type="cms/block" name="cms_quick_help">
			<action method="setBlockId"><block_id>quick_help</block_id></action>
		</block>
 
		<!-- The remove tag removes the blocks with the specified name from the layout -->
		<remove name="top.menu"/>
		<remove name="store_language"/>
		<remove name="breadcrumbs"/>
	</reference>
 
	<reference name="top.nav">
		<remove name="catalog.topnav"/>
	</reference>
 
	<reference name="left">
		<remove name="left.newsletter"/>
		<remove name="left.permanent.callout"/>
		<remove name="catalogsearch.leftnav"/>
 
		<!-- When you use the remove tag, it removes any blocks with the specified name from
			the entire layout, regardless of the context. So, if I remove right.newsletter in
			the <default> context and that name is used in say the <catalog_product_view> context,
			then both blocks will be removed.  Because remove operates on the global context,
			you can only remove an element once.  Since <remove name="right.newsletter" /> is
			being called in catalogsearch.xml, we have to unset it, or else we'll get an error.
 
			The line below only unsets the block from the parent's context, not the global
			layout context -->
		<action method="unsetChild"><name>right.newsletter</name></action>
	</reference>
 
	<reference name="right">
		<!-- Some blocks have to be removed using remove, others via unsetChild.
			I've not spent the time digging into the code to figure out why -->
		<remove name="right.permanent.callout"/>
		<remove name="catalog.compare.sidebar"/>
		<remove name="left.reports.product.viewed"/>
		<action method="unsetChild"><name>sale.reorder.sidebar</name></action>
		<action method="unsetChild"><name>wishlist_sidebar</name></action>
		<action method="unsetChild"><name>right.reports.product.viewed</name></action>
		<remove name="cart_sidebar"/>
	</reference>
 
</default>
 
<!-- CATALOG PAGES -->
	<catalog_product_view><!-- 2columns-right -->
		<reference name="root">
			<action method="setTemplate"><template>page/2columns-left.phtml</template></action>
		</reference>
		<reference name="content">
			<reference name="product.info">
				<block type="cms/block" name="cms_product_info_tabs">
					<action method="setBlockId"><block_id>product_info_tabs</block_id></action>
				</block>
				<block type="catalog/product_view" name="product.clone_prices" as="prices" template="catalog/product/view/price_clone.phtml"/>
				<action method="unsetChild"><name>tierprices</name></action>
				<action method="unsetChild"><name>addto</name></action>
				<remove name="addto"/>
				<reference name="product.info.options.wrapper.bottom">
					<action method="unsetChild"><name>product.tierprices</name></action>
				</reference>
			</reference>
		</reference>
	</catalog_product_view>
 
</layout>

Relative URLs in Magento

Rather than hard code urls in static blocks whenever possible you should use the Magento code to generate relative urls. All you need to do is add the following into your anchor tag and change page to the name of the page you want to link to. Magento will do the rest.

<a href="{{store url="page"}}>Page</a>
<a href="{{store direct_url="page.html"}}>Page</a>
<a href="{{store url="page" _query="a=param_a&b=param_b"}}>Page</a>
For more on urls go to: http://magebase.com/magento-tutorials/quick-tip-using-the-store-template-directive-in-magento/.

Magento File Permissions

When installing a new version of Magento it’s necessary to reset the permissions on some directories and files. This explains which to reset for version 1.6.1.0.

The /media and /var directories should be writable at group level and so need to be reset to 755. The /media directory contains web accessible files such as images, while the /var directory is used for temporary files used by the cache and for sessions as well as import/export files. Note that it is only the directories that need to be writable, not the files. You’ll need to do a recursive edit to all directories within these.

Additionally, on doing the 1.6.1.0 installation specific files cropped up as requiring to be writable. Directories change from 755 to 775 and files change from 644 to 664. You need to return these to their original values after installation for security reasons.

/var/www/vhosts/domain/httpdocs/magento/media/
/var/www/vhosts/domain/httpdocs/magento/var/
/var/www/vhosts/domain/httpdocs/magento/media/xmlconnect/custom/ok.gif
/var/www/vhosts/domain/httpdocs/magento/media/xmlconnect/system/ok.gif
/var/www/vhosts/domain/httpdocs/magento/media/xmlconnect/original/ok.gif
/var/www/vhosts/domain/httpdocs/magento/var/package/Mage_Core_Modules-1.6.1.0.xml
/var/www/vhosts/domain/httpdocs/magento/var/package/Lib_Js_Ext-1.6.0.0.xml
/var/www/vhosts/domain/httpdocs/magento/var/package/Interface_Frontend_Base_Default-1.6.1.0.xml
/var/www/vhosts/domain/httpdocs/magento/var/package/Lib_Js_TinyMCE-3.3.7.0.xml
/var/www/vhosts/domain/httpdocs/magento/var/package/Interface_Install_Default-1.6.1.0.xml
/var/www/vhosts/domain/httpdocs/magento/var/package/Lib_ZF_Locale-1.11.1.0.xml
/var/www/vhosts/domain/httpdocs/magento/var/package/Lib_Js_Calendar-1.51.1.xml
/var/www/vhosts/domain/httpdocs/magento/var/package/Mage_Downloader-1.6.1.0.xml
/var/www/vhosts/domain/httpdocs/magento/var/package/Lib_Js_Prototype-1.7.0.0.2.xml
/var/www/vhosts/domain/httpdocs/magento/var/package/Interface_Frontend_Default-1.6.0.0.xml
/var/www/vhosts/domain/httpdocs/magento/var/package/Mage_All_Latest-1.6.1.0.xml
/var/www/vhosts/domain/httpdocs/magento/var/package/Magento_Mobile-1.6.0.0.22.0.xml
/var/www/vhosts/domain/httpdocs/magento/var/package/Mage_Locale_en_US-1.6.1.0.xml
/var/www/vhosts/domain/httpdocs/magento/var/package/Mage_Compiler-1.6.0.0.xml
/var/www/vhosts/domain/httpdocs/magento/var/package/Lib_LinLibertineFont-2.8.14.0.xml
/var/www/vhosts/domain/httpdocs/magento/var/package/Lib_ZF-1.11.1.0.xml
/var/www/vhosts/domain/httpdocs/magento/var/package/Lib_Mage-1.6.1.0.xml
/var/www/vhosts/domain/httpdocs/magento/var/package/Mage_Centinel-1.6.1.0.xml
/var/www/vhosts/domain/httpdocs/magento/var/package/Lib_Google_Checkout-1.5.0.0.xml
/var/www/vhosts/domain/httpdocs/magento/var/package/Phoenix_Moneybookers-1.3.0.xml
/var/www/vhosts/domain/httpdocs/magento/var/package/Lib_Varien-1.6.1.0.xml
/var/www/vhosts/domain/httpdocs/magento/var/package/Mage_Core_Adminhtml-1.6.1.0.xml
/var/www/vhosts/domain/httpdocs/magento/var/package/Interface_Adminhtml_Default-1.6.1.0.xml
/var/www/vhosts/domain/httpdocs/magento/var/package/Lib_Js_Mage-1.6.1.0.xml
/var/www/vhosts/domain/httpdocs/magento/var/package/Lib_Phpseclib-1.5.0.0.xml

To use MagentoConnect for an install write permissions need to be applied to all magento files including the root Magento directory. All files and folders need to be reset to 655 after installation.

Installing from shell is advisable. For instructions go to http://www.magentocommerce.com/wiki/1_-_installation_and_configuration/magento_filesystem_permissions.

Magento Category Page Image Resize

You may want to increase the size of the images shown on the category pages of your Magento theme. To do so open list.phtml in [codetext]app/design/frontend/yourpackage/yourtheme/template/catalog/product/[/codetext]. Search for the code below and edit the sizes listed.

<img src="<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->resize(225, 225); ?>” width="225" height="225" alt="<?php echo $this->htmlEscape($this->getImageLabel($_product, 'small_image')) ?>” title="<?php echo $this->htmlEscape($this->getImageLabel($_product, 'small_image')) ?>” />

Magento Trials and Tribulations

I’ve just exited from a rather scary period trying to upgrade Magento 1.2.0.1 to Magento 1.4.0.1. After getting scripts so that I could migrate customers, orders and products, I set up 1.4.0.1 locally. After a few hours of trying I managed to get all the data into the database.

However, it was then I realised the amount of work that was required to redo the template files and the CSS.

Nevertheless, I went to set up a test version remotely. This is where things fell apart. I decided to attempt an incremental upgrade from 1.2.0.1 through to 1.4.0.1 using Magento Connect. My reasons were clear: to avoid the need to do a clean installation.

However, don’t try to do this, especially if you have another version of Magento on the same server and you’re using the data from that version. The upgrade won’t deal with the jump between versions – something I should have anticipated. The other issue was that despite my attempts at removing all urls to the live site from the test site’s database, I must have missed some as after running the magento upgrade suddenly the live database had 255 tables rather than the original 212!

Woe is me! My upgrade ignored the test and upgraded the live database …

So, I quickly switched the live version with a backup I’d taken and restored the database to this. However, the products wouldn’t show and the neither would the admin. I told the client, who was very understanding, and promised to make good quickly. But, to my surprise a little while later the whole site was back up and running. I can only think there was a cache issue on the server.

I will do the upgrade but it’s going to be done with far more research and analysis than I had done. Magento is great software but it’s still immature, especially the open source version. You can’t play with it expecting it to be lenient with you preventing you from doing something you shouldn’t. Also, documentation is informal so you do have to piece things together to work out how to do something.

That said, I’d rather use the open source version than pay £8k – £15k for a team to manage the installation and upkeep.