We wanted a simple way to display our client list using Custom Fields. Using built-in WordPress functions, it is pretty simple to pull information from Custom Fields. With Custom Field structure like this:

Name: client
Value: Name|Work_Done|Description|URL

You can use the get_post_meta() function to loop through all of the ‘client’ fields and pull the value for each and display to your page.

ORIGINAL CODE:

<?php
	$allOptions = get_post_meta($post->ID, 'client', false);
	if($allOptions) {

		foreach ($allOptions as $option) {
			$fullValue = explode ("|", $option);
			$name = $fullValue[0];
			$work = $fullValue[1];
			$text = $fullValue[2];
			$url = $fullValue[3];
		}

	}
?>

The problem comes if you want to control the way the output is displayed. The get_post_meta() function does not provide a SORT property. So in order to control the order of display, we simply added an additional component to the VALUE field, a ‘sort order’.

Name: client
Value: Sort|Name|Work_Done|Description|URL

Rather than just display the information in the initial foreach() loop, we stored the data into a new array, based on the SORT item for use later.

NEW CODE:

<?php
	$client_array = array();
	$allOptions = get_post_meta($post->ID, 'client', false);
	if($allOptions) {
		foreach ($allOptions as $option) {
			$fullValue = explode ("|", $option);
			$order = $fullValue[0];
			$client_array[$order] = $option;
		}
	}
	rsort($client_array, SORT_NUMERIC);
?>

With the data now stored in an sorted array, we can now loop through the new array and display the information in any order we want.

Why: Because Magento rocks and Scene 7 rocks. Together, they can create an inspiring user experience!

Who: For the business who desires real interactivity, and for developers who desire to implement Scene 7 capabilities with Magento.

We recently were approach by a company who knew about Scene 7′s capabilities and they wanted their Magento store to do the following:

1. Replace all product and category images with Scene 7 composited images

2. Allow the user to “build” a custom product based off of product options, and reflect the user selections in the product image

3. Create a unique user experience in their Magento store

Why could this be useful? Well, take a few minutes to learn more about what Scene 7 and Magento integration can do together. Soon, when the project is completed – we’ll have some examples to share.

What was our process in approaching this? Let me give a high-level outline our take on integrating the two systems.

First off, we looked at how we can utilize Scene 7 url’s instead of native Magento URLs. So we decided to override the catalog image helper so we could add custom functions to composite the appropriate URLs to build the image via a specified URL string.

Secondly, we interfaced this custom helper with the Scene 7 backend and some Javascript to build the desired product images. We did this by creating a function inside of the new helper to be able to do all URL string manipulation based off of product options changed by the user on the frontend.

Thirdly, we went through and determined every theme file that needed modifying to use the function that built the Scene 7 URLs and reflect the composited image.

As an overview, we took the following approach:

1. Created the right images in Scene 7 to use in correlation with Magento.

2. Created product options in Magento

3. Overlaid JS to the product options to be used as variables within our Helper function

4. Manipulated the URL string and returned the composited URL to build the product image (based off of the user-selected product options)

The site has yet to go live, though keep in touch with Elias updates and you will see the finished product.

So, what screencasts would you like to see? Drop us a comment and let us know…

While reading along in some of the forums (located here: http://www.ndoherty.com/blog/2007/10/29/coda-slider-11/), I noticed some are wanting an “auto-slide” feature for this thing (great job by the way Niall Doherty).

jQuery(window).bind("load", function() {
	jQuery("div#slider1").codaSlider()
	// jQuery("div#slider2").codaSlider()
	// etc, etc. Beware of cross-linking difficulties if using multiple sliders on one page.

	//call every __ seconds
	  var autoSlide = setInterval(function()
	  {
		$("#left-link").click();
		}, 10000);

});

jQuery(this).before(”<div class=’stripNavL’ id=’stripNavL” + j + “‘><a href=’#’ id=’left-link’>Left</a><\/div>”);