• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

Elias Interactive

We Grow Beautiful Websites

  • Blog
  • Show Search
Hide Search

Development

Sorting Data from Custom Fields in WordPress

Luke Whitson · Nov 17, 2009 · 9 Comments

With the redesign of the Ei Site, we wanted to take advantage of certain features native to WordPress, one of which was Custom Fields.

Having a custom web design based on the needs of your particular business and customers optimizes conversion rates of site visitors, a key aspect of growing your business and brand presence online

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.

Integrate InLine Flash FLV Videos with JQuery "Lightbox" Plugin – FancyBox

Luke Whitson · Jul 12, 2009 · 24 Comments

I recently spend some time integrating an existing Flash FLV video, from a third party, into an existing application using the JQuery “Mac-Style Lighbox” plugin, FancyBox. Within FancyBox, the existing FLV/JavaScript code provided to us worked properly on all browsers that I tested, with the usual exception, IE6. Upon further investigation, I found that it not only did not work on IE6, but IE7 and IE8 as well. While IE6 is to be expected, 7 and 8 were not.

The easy solution would have been to require the third party to re-export the video into a more usable format for our purposes. But I wanted to see what it would take to get the current code to work within our implementation.

I looked over some old code where I had integrated FLV video and found a simple difference. The provided code used JavaScript to embed the Flash object, similar to the following:

<script type="text/javascript">
swfobject.embedSWF(
'player.swf',
{file:'/video.flv',width:'407',height:'320'}
);

</script>

While this code worked fine when embedding the video directly into a page, it did not work in our FancyBox window when viewing with IE.

I am sure there are other solutions, but the quick solution I found was to simply embed the code in the standard Object/Embed method used to embed other video formats, rather than using JavaScript to embed the video file:

<object ...>
<embed
src="player.swf"width="407"
height="320"
wmode="transparent"
flashvars="file=video.flv&autostart=true"/>
</embed>
</object>

FancyBox is a very nice “lightbox” plugin for those using the JQuery library. If your FLV video is not working in IE with your lightbox implementation, try changing the way it is embedded into the page, it may just be as simple as that.

UPDATE:

Here is a little more elaboration on the code I used to get the flash working.

First, make sure you have the “custom.js” file created that makes the function calls for each lightbox that you want to use. In that file you will want a line that looks something like:


$("a.myvideo").fancybox({ params here ]);

Then in the page you want to call the video from, you will have a link that launches the video. Something like

<a class="myvideo" href="#divcontainingvideo">Link</a>.

Below that you will place the hidden <div> layer containing the actual embed source for the flash video.


<div style="display:none" id="divcontainingvideo">
<embed
src="path/to/sourcefile.swf"
width="400"
height="300"
wmode="transparent"
flashvars="file=path/to/sourcfile.flv&autostart=true"
/>
</div>

Scene7 Integration With Magento eCommerce

Lee Taylor · Jul 6, 2009 · 15 Comments

What: Straightforward overview on our approach for integrating Scene 7 with Magento eCommerce.

At ecombusinesshub offers a detailed look at dropshipping. You’ll learn what it is, how it works, and how to set up a dropshipping business.

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 and have a better understanding of the self service definition

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.

Magento and Scene 7 Integration: 3 Part Series

Lee Taylor · Jun 2, 2009 · 5 Comments

Hey All,

Here’s a head’s up for those interested in Scene 7 integration with Magento.

We’re excited for what Scene 7 brings to the table, and we hope to see it more throughout the Magento community in the near future. In an effort to back that up, we’re going to come out with a 4-part series on a project we recently did to integrate Scene 7 with Magento.

For those interests that are being peaked, feel free to check back with us to catch up on the following:

1. How we integrated the two (a high-level overview of Magento and Scene 7)

2. How to structure Magento for Scene 7

3. How to structure Scene 7 for Magento

We’ll try to keep it as straight-forward and basic as we can, as we’re very excited to see the Magento community start utilizing Scene 7 more.

Cheers,

Lee

Magento Featured Products: A More Convenient Way To Display Featured Products On The Home Page

Lee Taylor · May 25, 2009 · 54 Comments

About: How To Show / Display Featured Products On The Home Page (Conveniently)

Who’s Interested: Informative to the technical gurus
What: An alternative direction on how to show featured products on your Magento storefront home page
Magento Version Relevance: Any
Magento Store Setup: Any

My thought: “Why not let the Admin choose what products to display on the home page like every other category?”

If you’ve been involved in the community dialogue that constantly evolves through the Magento boards, you may have run across a topic mainly focused on ways for developers to display featured products on the home page.

There have been many directions taken with this, including the following as only a few to mention:

  1. Install a extension and configure
  2. Create an attribute, assign each product a value for that attribute, and then display products based upon the value they contain for that attribute
  3. Use the CMS template code to display a certain category

I didn’t want to override any other solutions, but simply offer another approach – one that does not do the following:

  • Modify any core code
  • Require per-product management
  • Install any extension

After my review, I still wanted a way that was more convenient for our client/administrators to be able to manage the products that display on their home page. Going through each product can become cumbersome, so what if they had one specific category that gets displayed all the time, and any products within it show up on the home page? That’s what I went for, and came up with the following:

  1. Create a new “structural block” within Magento (see example, thanks Inchoo)
  2. Create a (hidden) category within the Magento Admin
  3. Modify the structural block to display that category in a specific way
  4. Set the Category Id

Here are the files/modifications:

Structural Block

  • app/design/frontend/*/*/template/catalog/product/featured-products.phtml
/*
Magento

NOTICE OF LICENSE

This source file is subject to the Academic Free License (AFL 3.0) that is bundled with this package in the file LICENSE_AFL.txt. It is also available through the world-wide-web at this URL:
http://opensource.org/licenses/afl-3.0.php
If you did not receive a copy of the license and are unable to obtain it through the world-wide-web, please send an email to license@magentocommerce.com so we can send you a copy immediately.

DISCLAIMER

Do not edit or add to this file if you wish to upgrade Magento to newer versions in the future. If you wish to customize Magento for your needs please refer to http://www.magentocommerce.com for more information.

@category   design_default
@package    Mage
@copyright  Copyright (c) 2008 Irubin Consulting Inc. DBA Varien (http://www.varien.com)
@license    http://opensource.org/licenses/afl-3.0.php  Academic Free License (AFL 3.0)
*/

<?php
/*
Product list template

@see Mage_Catalog_Block_Product_List
*/
?>

<?php //$_productCollection=$this->getLoadedProductCollection()

//var_dump($cModel); echo $cModel->getName(); die;

$cat_id = "7"; // category_id for "Featured Products"
$_productCollection = Mage::getResourceModel('catalog/product_collection')
->addAttributeToSelect(array('name', 'price', 'small_image'), 'inner')
->addCategoryFilter(Mage::getModel('catalog/category')->load($cat_id));

?>

<?php if(!$_productCollection->count()): ?>
<div class="padder">
<div class="note-msg">
<?php echo $this->__('There are no products matching the selection.') ?>
</div>
</div>
<?php else: ?>

<? // Removed List Mode ?>

<?php // Grid Mode ?>
<?php $_iterator = 0; ?>
<?php $_collectionSize = $_productCollection->count() ?>
<?php //var_dump($_productCollection->count()); ?>
<div class="listing-type-list catalog-listing padder">
<table cellspacing="0" class="generic-product-grid" id="product-list-table">
<?php $i=0; foreach ($_productCollection as $_product): ?>
<?php if ($i++%2==0): ?>
<tr>
<?php endif ?>
<td>
<p class="product-image">
<a href="<?php echo $_product->getProductUrl() ?>" title="<?php echo $this->htmlEscape($this->getImageLabel($_product, 'small_image')) ?>">
<img src="<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->resize(95, 95); ?>" alt="<?php echo $this->htmlEscape($this->getImageLabel($_product, 'small_image')) ?>" title="<?php echo $this->htmlEscape($this->getImageLabel($_product, 'small_image')) ?>" />
</a>
<h5><a href="<?php echo $_product->getProductUrl() ?>" title="<?php echo $this->htmlEscape($_product->getName()) ?>"><?php echo $this->htmlEscape($_product->getName()) ?></a></h5>
<?php //echo $this->getPriceHtml($_product, true) ?>

</p>
</td>
<?php if ($i%2==0 	&#37; $i!=$_collectionSize): ?>
</tr>
<?php endif ?>
<?php endforeach ?>
<?php for($i;$i%2!=0;$i++): ?>
<td class="empty-product">	&#37;</td>
<?php endfor ?>
<?php if ($i%2==0): ?>
</tr>
<?php endif ?>
</table>
<script type="text/javascript">decorateTable('product-list-table')</script>
</div>

<?php endif; ?>
  • app/design/frontend/*/*/template/cms/home.phtml (modify path/to/your/cms/page/home.phtml to be specific to your needs)
<?php //Home Page View ?> <div>
<?php //display featured products ?>
<?php echo $this->getChildHtml('featured.products') ?>
</div>
  • app/design/frontend/*/*/layout/page/page.xml
<?xml version="1.0"?>
<layout version="0.1.0">
<!-- Default layout, loads most of the pages -->
<!-- Insert into existing page.xml file, do not replace this with your current file -->
<default>
<block type="core/text_list" name="featured.products" as="featured.products"/>
</default>
</layout>

Create new Category

This ccould be called “Featured Products”) and set the Admin->Catalog->Manage Categories->specificCategoryName->General Information->”Is Active” = “No”.

Display structural block

Either via CMS page or .phtml page through the CMS page:
(modify path/to/your/cms/page/home.phtml to be specific to your needs)

  • CMS Page: {{block type=”core/template” template=”path/to/your/cms/page/home.phtml”}}
  • .phtml page: inside CMS page->Custom Design:
<reference name="content">
<remove name="cms_page" />
<block name="home_page" type="core/template" template="path/to/your/cms/page/home.phtml">
<block name="featured.products" type="catalog/product_list" template=
"catalog/product/featured-products.phtml" />
</block>
</reference>
<reference name="root">
<action method="setTemplate">
<template>page/1column.phtml</template>
</action>
</reference>

Set Your Category Id

Now you should be able to checkout the code in the featured-products.phtml, and match the “7” to your actual product category id. (see category id within the Admin->Catalog->Manage Categories->Your Category).


Now, any product inside that category gets displayed on the home page!

Please feel free to download the structural block files and place into your theme structure relative to the root Magento directory.

And take a look at the site we’ve used it on with our client, Keramikos Kitchen.

Let us know your thoughts!

Appreciative,
Lee

  • « Go to Previous Page
  • Go to page 1
  • Go to page 2
  • Go to page 3
  • Go to page 4
  • Go to page 5
  • Go to Next Page »

Primary Sidebar

From the blog

Magento SVN Usage – Best Practices

How to Create Reusable Apple Mail Templates [video]

I’d rather buy from Harry Potter

The Ecommerce Solution You’ll Find Refreshing (drumroll)

Liberating Constraints

More Posts

Connect with us

  • Facebook
  • RSS
  • Twitter
Affiliate Disclaimer

© 2025 · Elias Interactive · Built on the Genesis Framework

  • Blog
  • Affiliate Disclaimer
  • Home