We have just released a new version of our Magento Extension ProNav with some cool but not limited to new features…

• Compatible with jQuery version 1.8.2
• Ability to Enable and Disable load of jQuery (useful if you have jQuery elsewhere)
• Ability to Enable and Disable load of jQuery Easing (useful if you have this loaded elsewhere)
• Animate drop down menu with jquery.easing plugin and choose from a range of easing methods
• Define the width of ProNav within configuration
• Choose the position of ProNav, default (to header), left sidebar, right sidebar or in the content
• Choose from a range of pre-installed themes, or create your own using your own stylesheet
• Primary navigation items now support non linked items (primary navigations which may only have a drop down and not needed to click through)
• Drop down menus can now be aligned to either left or right relative to navigation item, as well as to ProNav beginning and end
• Ability to set “no-follow” on primary navigation items

Buy ProNav 3.0 in our Store: View Store

We have also updated our documentation and is now located here: View Documentation

For those of you who don’t know what ProNav is, here’s a quick summary…

ProNav extension works seamlessly with Magento ‘Static blocks’ to deliver a fully customizable mega-drop down navigation for your online store.

Pronav now gives you the ability to dynamically pull in your categories from your Catalog and output them within your drop down (exploded) navigation. Take a look at this simple walk through video to see how easy it is to create a dynamic drop down that can be easily targeted and styled via css.

Many of today’s biggest brands and online retailers such as McDonalds, Ralph Lauren and ASOS are using content driven drop-down menus to provide their customers with a broad overview of their products and services and increase sales. Pronav from Brandammo Commerce, designed by our team or developers and marketing professionals, now allows Magento users to benefit from this style of navigation via a fully customisable, easy to install extension.

Customise ProNav and define levels of sub categories into your drop down menus.

Define the position of your menu, either in the header, left column, right column or even in the content!

Output a Category of products using our ProNav modified templates and/or widgets.

During the development process we come across all sorts of specific tasks that require some creative thoughts to achieve the end result. Learning to think creatively when developing for Magento can not only save you time, but unlock doors to many other possibilities.

We were presented with one of these tasks recently that i thought we would share in the hope it would save someone else some time and maybe spark of a new trail of thought for new possibilities in your Magento store.

Being able to get the ID of the parent category the user is in was the solution to our problem and i’m sure can be used in many different ways. Using this ID we were able offer a different navigation to the user on the iPhone theme we were developing for one of our websites. If you have ever developed an iPhone theme in Magento or any other ecommerce framework you will be familiar with the obstacle of how best to display the navigation in a clear and concise way to the user. Using the parent ID, we were able to show just the categories in the drop down navigation that related to the parent category you are in, with a simple “back to main menu” link to start the user on their journey again.

Here’s the code you will need to get the parent ID.

To find the parent ID you first need to establish the ID of current category you are in.

<?php
$_cat = new Mage_Catalog_Block_Navigation();
$curent_cat = $_cat->getCurrentCategory();
$curent_cat_id = $curent_cat->getId();
?>

With this information you can then find the parent ID and echo out on to the front-end view.

<?php 
$parentId=Mage::getModel(‘catalog/category’)->load($curent_cat_id)->getParentId();
echo $parentId; // $parentId will print your current category’s parent Id
?>

Instead of using CODA or any third party software, you can use MAC’s built in Terminal to connect to your website, as long as you have SSH access.

To Connect:
ssh username@serveraddress.com
it will then ask for a password, enter your password (usually the same as FTP).

if you need to specify a different port other than the default port, type the following instead:
ssh -p 1234 username@serveraddress.com
(where 1234 is the port number)

Taking backups of your website files and databases is hugely important when either updating files, adding extensions or to safeguard any work you might be doing on your server. Using SSH will speed up the process of creating a backup of your data to the manual method of using cPanel in your browser.

Making a database dump in the root of your website directory

After connecting to via SSH to your server, cd to the root of your website. Then past in the below command making sure to replace the highlighted strings with your database information. After this has been entered you will also be asked for your database user password, so make sure you have that handy.

mysqldump –add-drop-table -u username -p tablename > backupfilename.sql

Restoring your database from your backup on the server

If you need to restore you database from the backup you have made using the instructions above, make sure yo are in the root of your website and enter the below command again making sure to change the strings to match your information. Again, you will be asked for the database user password, so make sure you have it ready.

mysql -u username -p tablename < backupfilename.sql

Backup all files and directories

Obviously you will need to take a backup of for files as well as the databases from your site To make a backup of all of the files and directories, connect via SSH and cd to the root of your website. Once there you can run the below command, make sure to swap out the red string with your prefered backup name.

tar -vcf backup-name.tar .

TIP: When moving around into different directories via SSH, you can print out all of the files and directories in the current directory you are in so you can be sure you are in the right place. To do this simply type ls

Reindexing the data in Magento is a common task most developers and store owners will have to carry out, but sometimes the re-indexing can take a very long time and cause the operation to time-out. A quicker way to achieve the re0-indexing of your store data is via SSH.

If you are not familiar with using SSH you should try and read up on the basics first and should only be attempted when you are comfortable with what you are doing.

Once you have connected to your server via SSH, cd to the root of your Magento installation and then run

php shell/indexer.php reindexall

Wait for each line to notify you the reindexing has been successful before closing your connection. The feed back will look like the below.

Product Attributes index was rebuilt successfully
Product Prices index was rebuilt successfully
Catalog URL Rewrites index was rebuilt successfully
Product Flat Data index was rebuilt successfully
Category Flat Data index was rebuilt successfully
Category Products index was rebuilt successfully
Catalog Search Index index was rebuilt successfully
Stock Status index was rebuilt successfully
Tag Aggregation Data index was rebuilt successfully
Customer Points Index index was rebuilt successfully
-bash-4.1$

In some cases, you may want to have your customer account navigation on the right rather than magento’s default left. To do that you will need to reference “right” (as well as setting the template to 2columns-right).

The orders link is located in sales.xml and newsletter link is located in newsletter.xml

I have omitted billing agreements and recurring profiles, but you can add the links into customer_account_navigation

The code below can be placed in your local.xml of your themes layout directory.

<customer_account>
		<reference name="root">
            <action method="setTemplate"><template>page/2columns-right.phtml</template></action>
        </reference>
        <reference name="right">
        	 <block type="customer/account_navigation" name="customer_account_navigation" before="-" template="customer/account/navigation.phtml">
                <action method="addLink" translate="label" module="customer"><name>account</name><path>customer/account/</path><label>Account Dashboard</label></action>
                <action method="addLink" translate="label" module="customer"><name>account_edit</name><path>customer/account/edit/</path><label>Account Information</label></action>
                <action method="addLink" translate="label" module="customer"><name>address_book</name><path>customer/address/</path><label>Address Book</label></action>
            </block>
            <remove name="cart_sidebar" />
            <remove name="catalog.compare.sidebar" />
            <remove name="tags_popular"/>
        </reference>
        <reference name="customer_account_navigation">
            <action method="addLink" translate="label" module="sales"><name>orders</name><path>sales/order/history/</path><label>My Orders</label></action>
            <action method="addLink" translate="label" module="newsletter"><name>newsletter</name><path>newsletter/manage/</path><label>Newsletter Subscriptions</label></action>
            <action method="addLink" translate="label" module="downloadable"><name>downloadable_products</name><path>downloadable/customer/products</path><label>My Downloadable Products</label></action>
        </reference>
	</customer_account>

For a project I needed to find a way to pull out more than one image per product in list.phtml (category page) but also pulling out a certain size , the below code allows you to load all the images for that specific product, you can then manipulate the image either adding classes to it or adding inline styles.

<?php
                		//get images for product
	                	$product = Mage::getModel('catalog/product')->load($_product->getId());
						$helper = Mage::Helper('catalog/image');
		                foreach ($product->getMediaGalleryImages() as $image) {
		                    echo "<img src='" . $this->helper('catalog/image')->init($this->getProduct(), 'thumbnail', $image->getFile())->resize(243) . "' />";
		                }
	                ?>

Here is a simple way to output multi select dropdown custom attributes and split them into its own so you can manipulate them, i.e. you may have multiple images representing the different technologies of a certain product.

The below shows this, I have transformed the attributes into lowercase, and attached each image element with a class in relation to the name of the attribute (replacing spaces with hyphens).

<?php
						$attributes = $_product->getAttributes();
						$technologies = $attributes['product_technologies']->getFrontend()->getValue($_product);
						$technologies = strtolower($technologies);
						$technologiesList = explode(", ", $technologies);
						foreach ($technologiesList as &$value) {
							$value = str_replace(" ", "-", $value);
						   	echo "<img class='tech-". $value ."' src='" . Mage::getBaseUrl(Mage_Core_Model_Store::URL_TYPE_SKIN) . "frontend/default/SKIN-NAME/images/product-technologies/" . $value . ".png'/>";
						}
					?>

Here is a quick plugin I recently created, I know there are already a lot of existing alternatives, but here is one I recently created for one of our clients.

HTML:
Make sure each tip is within its own element (“tip-item“), the HTML below shows the “activator” (the element that gets mouseover), this has a class attached to it called “tip-specific-class“, and the next element is the tooltip itself with the same class, the class must be the same to ensure the plugin knows which tip relates to which element.

<div class="tip-item">
	<div class="activator tip-specific-class">Hover Over Me - I can be an image as well!</div>
	<div class="tip tip-specific-class">
		<p>ToolTip Content - Put anything you like in here!</p>
	</div>
</div>

CSS:
Make sure the .tip-item has a position set to relative.

<style type="text/css" media="screen">

	.activator {
		background:#0099ff;
		width:100px;
		height:100px;
		padding:20px;
		cursor:pointer;
	}

	.tip-item {
		position:relative;
	}

	.tip {
		display:none;
		width:200px;
		height:100px;
		background:red;
		padding:20px;
		position:absolute;
		top:0px;
		left:0px;
		z-index:1;
		border-radius: 10px;
		-moz-border-radius: 10px;
		-webkit-border-radius: 10px;
		box-shadow:1px 1px 5px #000;
		-moz-box-shadow:1px 1px 5px #000;
		-webkit-box-shadow:1px 1px 5px #999;
	}

</style>

JS:
The default options of the plugin.

var defaults = {
		tipClass: 'tip', //the class name for your tip
		tipFadeEasing: 'easeOutQuint', //easing method
		tipFadeDuration: 200, //fade duration
		tipOpacity: 1, //opacity of tip when mouseover
		tipOffset: 10 //offset the tip relative to mouse cursor in pixels
	};

Initialise the plugin:
The following initialises the plugin, i have changed the opacity to 0.9 and offset the tip by 20px just as an example.

jQuery(function(){
		jQuery('.activator.tip-specific-class').BAToolTip({
			tipOpacity: 0.9,
			tipOffset: 20
		});
	})

View Demo

Download Source Files (including example): jquery.BA.ToolTip

There are times when you need to exclude posts belonging to certain categories in your custom pages or archives, after scouring the internet, i take no credit for these, but this can simply be achieved by using the following code snippets:

Exclude a category from custom pages or archive pages in wordpress:

The following applies to all date archive pages and hides posts which are listed in category 6.
(place this code into your theme’s functions.php file)

function exclude_stuff($query) {
if ( $query->is_date) {
		$query->set('cat', '-6');
}
return $query;
}
add_filter('pre_get_posts', 'exclude_stuff');

Exclude a category from the Archives Dropdown and updates count (in brackets)

The example below excludes posts in category ID 6:

add_filter( 'getarchives_where', 'customarchives_where' );
add_filter( 'getarchives_join', 'customarchives_join' );

function customarchives_join( $x ) {
	global $wpdb;
	return $x . " INNER JOIN $wpdb->term_relationships ON ($wpdb->posts.ID = $wpdb->term_relationships.object_id) INNER JOIN $wpdb->term_taxonomy ON ($wpdb->term_relationships.term_taxonomy_id = $wpdb->term_taxonomy.term_taxonomy_id)";
}

function customarchives_where( $x ) {
	global $wpdb;
	$exclude = '6'; // category id to exclude
	return $x . " AND $wpdb->term_taxonomy.taxonomy = 'category' AND $wpdb->term_taxonomy.term_id NOT IN ($exclude)";
}

Just came across this recently… a time-lapse video of the night sky from an International Space Station by NASA… quite amazing!

Source: space.com

Brandammo are pleased to have been involved in the post production and printing of the White Ribbon Alliance Exhibition “Dreams for my Daughter”

The exhibition is being shown at the south bank centre, London 8-11^th March

Launched for the 100^th International Women’s Day, 8 March 2011, Dreams for My Daughter is a unique collection of photographs and writings inspired by Hadhya Yahya Mohammed Al-Zawm, a young woman from Yemen where White Ribbon Alliance is campaigning for a legal minimum age for marriage. In a speech she gave at an event hosted by The White Ribbon Alliance’s Global Patron Sarah Brown, adhya said her mother had a dream for her – not to be married at nine as she had been, and to get an education.

The images have been shot by award winning photographer Joanna Vestey who has worked with many charity’s including World vision, The red cross, and Amnesty International.

If you get a chance its worth a look to see these amazing images and to show support for this important issue.

Following 50 hours of judging from a panel featuring 40 key figures from across the industry, The Brandammo Dunlop Biomimetics campaign is on the official roll call of short listed nominees for the Best International Sport Marketing Campaign category for the Sport Industry Awards 2012.

The campaign was selected from a high standard of entries including all the big boys, and to have earned a place on the shortlist represents an immense achievement for Bill and the team.

We will let you know how we get on.

Who doesn’t remember dancing in their bedroom to “Buffalo Stance” by the amazing Neneh Cherry? Come on……we all did, and some still do!

It was a really pleasure to work on these shots with Jamie and the team at Pop mag (out now)

If you just need a manual list of years for a dropdown going back to 1900, copy and paste the following…

Please Select...
2012
2011
2010
2009
2008
2007
2006
2005
2004
2003
2002
2001
2000
1999
1998
1997
1996
1995
1994
1993
1992
1991
1990
1989
1988
1987
1986
1985
1984
1983
1982
1981
1980
1979
1978
1977
1976
1975
1974
1973
1972
1971
1970
1969
1968
1967
1966
1965
1964
1963
1962
1961
1960
1959
1958
1957
1956
1955
1954
1953
1952
1951
1950
1949
1948
1947
1946
1945
1944
1943
1942
1941
1940
1939
1938
1937
1936
1935
1934
1933
1932
1931
1930
1929
1928
1927
1926
1925
1924
1923
1922
1921
1920
1919
1918
1917
1916
1915
1914
1913
1912
1911
1910
1909
1908
1907
1906
1905
1904
1903
1902
1901
1900

Found this very useful from CSSBakery - To prevent unstyled text flashing up on the page before cufon is shown, apply .cufon-loading class onto elements which you have set cufon.

.cufon-loading h1 {
 visibility: hidden !important;
}

The Brief: Create a site that helps people plan their wedding or an element of it. Remember, this is the biggest day of their lives, so make sure the design strikes the right note!

Here’s a sneak peek of my entry into .net magazine wedding sites website build off, the magazine should be out in shops in the next week or so! Be sure to get it to grab a better look! I will post up detailed pics later!

.net Magazine Issue 223 (January 2012) – Page 112

The Magazine is now out, you can buy it from http://www.netmagazine.com or pop into WH Smiths or your local newsagent! You can view the full design here: http://mos.netmagazine.com/build/kt-223.jpg

Click the Image to view full size.

Using the awesome carouFredSel, I’ve integrated it into a full screen carousel, so it scrolls the whole width and height of your browser window, if the body height is shorter than your browser height, the browser height will take precendence and vice versa.

Credit for the carousel goes to carouFredSel, I merely made it work to provide a fullscreen width and height solution into a plugin. You will need to get the carouFredSel Plugin and the jQuery Easing Plugin. It currently works with the latest carouFredSel plugin which is 5.1.3 as of posting, and probably will work with revised versions. This plugin has been tested in Latest Chrome, FireFox and Safari, IE 7,8 & 9. Please use the latest jQuery Release too.

Script Header:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript" src="jquery.easing.1.3.js"></script>
<script type="text/javascript" src="jquery.carouFredSel-5.1.3-packed.js"></script>
<script type="text/javascript" src="jquery.fsCarousel.1.0.js"></script>

Script Initialisation:

<script type="text/javascript">
$(function(){
	$('#background-slides').fsCarousel();
});
</script>

Defaults:

	var defaults = {
		slideClass: '.slide', //the class name for your slides
		scrollEasing: 'easeInOutQuint', //easing method
		scrollPauseDuration: 5000, //pause duration of slide
		scrollDuration: 500, //duration of a scroll
		autoPlay: true
	};

CSS:

<style type="text/css">

	* {margin:0; padding:0}
	body {background: #ccc; color:#fff; margin:20px; font-family:Arial, Helvetica, sans-serif; font-size:11px}
	a {color:#fff}

	/* Background Carousel */
	#background-slides {position:absolute; top:0px; left:0px}
	.slide {float:left}

	.slide.redbg {background:red}
	.slide.orangebg {background:orange}
	.slide.greenbg {background:green}

	#container {width:950px; margin:0 auto; height:1500px; background:#fff; position:relative}

</style>

HTML:

	<div id="background-slides">
		<div class="slide redbg">1</div>
		<div class="slide orangebg">2</div>
		<div class="slide greenbg">3</div>
	</div>

	<div id="container">Content Container</div>

Download Plugin and Source Files: jquery.fsCarousel.1.0

View the Demo

Just came across something cool from the awwwards.com blog - using minimal colours and type, Viktor Hertz created these very creative pieces…

View More Posters at awwwards.com

It was great to see the amazing work of our creative team in this mornings edition of ShortList and the latest FHM. Dunlop asked Brandammo to develop and produce the ad campaign for their new Dunlop retro range. From the photo shoot, to the post production the brandammo team worked feverishly to meet and exceed client expectations. We hope you all like the ad’s

Vist www.dunlopretro.com for more on this range.

View Work