Last week we quietly launched an Elias module store. Now you can purchase 8 different modules to enhance, extend & enjoy your Magento storefront. Keep an eye on the module store as we add several more modules over the next few weeks. And let us know if you need a module for your store that hasn’t been built yet.

Considering the woes that can come with installing a SSL certificate. Yesterday, we ran into an issue with a client that I wanted to note, just in case anyone else may benefit from the scenario and solution.

Scenario

We had the Magento integrated with SVN and have a post-commit hook that auto-deploys into our root directory on the server. We originally had the httpdocs folder and the httpsdocs folder mirroring each other so that the httpsdocs folder would handle SSL (https) requests and the httpdocs would handle all other non-SSL requests.

As we were installing our SSL certificate, we changed the base_url and the secure_base_url to the appropriate (specific) URLs in place of the {{unsecure_url}} and {{secure_url}} generic values. All of a sudden, as soon as SSL installation was complete, the frontend would no longer transition from the “shopping cart” (url: http://cart.crankbrothers.com/checkout/cart/) into the “checkout” (url: https://cart.crankbrothers.com/checkout/onepage/). The checkout URL would redirect back into the shopping cart.

Solution

We realized that the sub-domain and shared docroot setup (httpdocs and httpsdocs, together) could be creating the issue. Thus, we simplified our setup (cheers Eric Dennis) to make httpdocts the separate docroot for both HTTP and HTTPS requests.

Game, set, match. Problem solved. By the way, you should check out Crank Brothers for a working example

Hope this helps save time for someone else!

Hi All,

Figured I’d share a quick Magento snippet (There are several I’d like to share each day. For some reason this particular one seemed quick enough to post).

Want to change the number of products that display in the Magento Category listing?

You’ll need to modify these two files:

• app/design/frontend/default/YourThemeName/layout/catalog.xml (default theme line 198)
• app/design/frontend/default/YourThemeName/layout/catalogsearch.xml (default theme line 61)

See the screenshot for the variable columnCount()? In order to change that, go to the following file and add in this snippet:

• app/design/frontend/default/YourThemeName/layout/catalog.xml (default theme line 198)

<action method="setColumnCount"><columns>3</columns></action> <!-- set your own number -->

And also this snippet:

• app/design/frontend/default/YourThemeName/layout/catalogsearch.xml (default theme line 61)

<action method="setColumnCount"><columns>3</columns></action> <!-- set your own number and insert <em>inside</em> the "search_result_list" block tags-->

Tonight I was setting up a staging environment for a client of ours so they would have the ability to “visually” interact with the recent data migration our team has performed (OSCommerce to Magento, in case anyone was wondering).

Here’s the error I was receiving:

ERROR 1064 (42000) at line 382: You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use near ‘USING BTREE,
KEY `FK_ATTRIBUTE_VARCHAR_ENTITY` (`entity_id`),
KEY `FK_CATALO’ at line 9

The reason behind this is that there is an inconsistency in the way the export syntax was being handled as I imported into the staging environment (which evidently has a different MySQL version running). Thus, the staging site was expecting different syntax for the following:

–
– Table structure for table `catalog_category_entity_varchar`
–
DROP TABLE IF EXISTS `catalog_category_entity_varchar`;
CREATE TABLE `catalog_category_entity_varchar` (
`value_id` int(11) NOT NULL AUTO_INCREMENT,
`entity_type_id` smallint(5) unsigned NOT NULL DEFAULT ‘0′,
`attribute_id` smallint(5) unsigned NOT NULL DEFAULT ‘0′,
`store_id` smallint(5) unsigned NOT NULL DEFAULT ‘0′,
`entity_id` int(10) unsigned NOT NULL DEFAULT ‘0′,
`value` varchar(255) NOT NULL DEFAULT ”,
PRIMARY KEY (`value_id`),
UNIQUE KEY `IDX_BASE` (`entity_type_id`,`entity_id`,`attribute_id`,`store_id`) USING BTREE,
KEY `FK_ATTRIBUTE_VARCHAR_ENTITY` (`entity_id`),
KEY `FK_CATALOG_CATEGORY_ENTITY_VARCHAR_ATTRIBUTE` (`attribute_id`),
KEY `FK_CATALOG_CATEGORY_ENTITY_VARCHAR_STORE` (`store_id`)
) ENGINE=InnoDB AUTO_INCREMENT=697 DEFAULT CHARSET=utf8;

As a rule of thumb, one can either

• (1) head over to the MySQL Developer Documentation for syntax reference
• (2) or simply check out a recent Magento export from the server they are trying to import into and determine how the “USING BTREE” statement was handled. Likewise, I simply removed the following:

UNIQUE KEY `IDX_BASE` (`entity_type_id`,`entity_id`,`attribute_id`,`store_id`) USING BTREE,

and replaced it with this:

UNIQUE KEY `IDX_BASE` USING BTREE (`entity_type_id`,`entity_id`,`attribute_id`,`store_id`),

Hope this helps someone who is experiencing the same error and spending way too much time trying to understand the incompatible syntax.

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

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.

Who: Anyone who works with Magento (especially clients who are running a store) and could benefit from a more in-depth understanding of Magento best practices.
What: SVN and Magento (a sweet relationship)
Why: Because whether you are a client or a developer, your life can be made easier by using SVN and reaping its benefits

Quick Summary:

1. High-level explanation of SVN
2. Who should use SVN
3. Why it should be used
4. Specific things to watch out for with Magento
5. Bonus: optional tools

1. A high-level explanation SVN

“SVN” (aka “Subversion”) changes and improves the development process. It is an “enhancement” to “CVS” which allows developers to maintain local, staging, and production environments. This is a best proactive for most software development (and Magento) projects. SVN relates to “Git” (though some prefer one more than the other) and is free to use.

Simply put, SVN is a tool that keeps a revision history of code over a period of time. You keep project code located within the repository and pull a copy of the entire code with one simple command (a total of about 6 seconds). In addition, any updates to the code are committed to the repository, which allows anyone who is “linked” to the repository to sync their code with the latest changes via one click of a button. A simultaneous, multi-user environment is thus organized for development and proper administration.

Just to reiterate – there are an incredible number of benefits to SVN… too many to mention here.

2. Who should use SVN

Everyone who works with Magento should use SVN. As a rule of thumb, SVN should be used in any significant software development project (unless you use Git).

3. Why SVN should be used

SVN allows multiple developers to build simultaneously in an organized fashion with a detailed history of the progress. This ensures that the live storefront (production environment) is always intricately cared for (read open for business). Every developer has experienced early on in their career the inevitable mistake of removing a file via FTP, only left to realize that file is lost in space and no longer retrievable. But large cocktails are no longer necessary to cope with such an event thanks to SVN. The developer’s life becomes easier; and the client’s business is safer. When used properly, SVN ensures reliability, integrity, speed, and fall-back recovery.

4. Specific things to watch out for with Magento

In our experience, there are a few specifics to watch out for when using SVN with Magento. Without getting too technical, here are a few things we’ve learned along the way:

+ You need to watch out for the caching within Magento. Utilizing SVN:Ignore is the key to allowing the local environment to cache correctly. I would recommend setting SVN to “ignore” for the following (at least) when maintaining separate environments:

• app/etc/local.xml (or use SVN lock instead for this)
• media/catalog/product/cache
• var/

+ If you use Beanstalk then you can streamline SVN managing with the “Deployment” tool within BeanstalkApp’s repository storage.

+ Use a test script. We’ve learned the hard way to stick to a quality test script as we merge different branches into the main SVN repository (used for production). Maintain a staging environment and use the test script from every angle prior to going “live” to production with the new changes.

+ For phases of a project, it helps to create a “branch” for each phase and a staging environment for each branch (assuming the project is large enough to call for it). This makes it easier to rollback and merge updates.

+ We prefer to keep the entire Magento directory maintained via a SVN repo. We do this so that we can upgrade, modify, and perform other changes locally prior to streamlining the changes to the staging and production environments.

5. Bonus: optional tools

At Elias, we fancy apps that make our lives easier. We invest a lot of time researching and trying out new apps to see how well they fit our business. So far we have found a few SVN tools that are worth mentioning. (Note: these may be Apple-specific. Forgive us):

• VersionsApp: A high-quality desktop application that allows one to manage repositories locally for streamlined management of code.
• BeanstalkApp: A sweet as online SVN storage service to host repositories full of code, revisions, and a great interface for management.
• Coda App: A quality code editor that integrates with SVN
• TextMate: Another quality code editor with SVN integration
• MAMP: A personal Mac server with Apache, Mysql and PHP
• VirtualHostX: A virtual hosting utility that works well with MAMP
• VirtualBox: A sweet virtualization product to run multiple operating systems
• Spoon.net: A browser-compatibility testing tool we’re just becoming familiar with

Those of you who are already familiar with SVN know that there is obviously much more to rave about. This post is intended to be a simplified “business use-case” for SVN and explanation of why it is a Magento best practice. We welcome you to chime in with other suggestions for us all to benefit from!

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>


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

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.

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

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 here for 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

Read the rest of this entry »