Blog

Last week we deployed another successful Magento ecommerce website. To track the visitors we signed up for a free Google Analytics account, and then plugged their tracking code into the admin section of the Magento administrator area. When we applied the API, the site quickly confirmed that the tracking code was in place through the Google Analytics dashboard.

We then waited 48 hours, and then logged in to see how many visitors hit the site. Turns out that none of the visitors were being tracked! Using the error console within Firefox we reloaded the page, and found the problem instantly. Turns out the Magento coders totally messed up when creating their Google Analytics API. Take a look for yourself, here's the JavaScript they used:

    (function() {
        var ga = document.createElement('script');
        ga.type = 'text/javascript'; ga.async = true;
        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') +
        '.google-analytics.com/ga.js';
        (document.getElementsByTagName('head')[0] || 
        document.getElementsByTagName('body')[0]).appendChild(ga);
    })();

    _gaq.push(["_setAccount", "UA-XXXXXXXX-1"]);
    _gaq.push(["_trackPageview", "/"]);

This is how it should read:

var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-XXXXXXXX-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') +
 '.google-analytics.com/ga.js';
(document.getElementsByTagName('head')[0] || 
document.getElementsByTagName('body')[0]).appendChild(ga);
})();

As you can see the Magento coders have it all out of order, and forgot the most important line of code that created the “_gaq” object:

var _gaq = _gaq || [];

We can only assume that this API is broken on all Magento builds! To fix this, remove the tracking code from the Magento Google API in the admin area, then use the JavaScript given to you by Google Analytics, and place it in the footer of your website. Whala! Your site is now tracking visitors appropriately with no errors in the error console.

The following is a guide for those folks that want to setup a proper development environment for building out a Magneto cart on your local windows box. I’m one of those old school developers that like’s to have a multi-phased approach when it comes to developing, testing and deploying a website. The first step of this process is to get your local windows development box setup to properly run the MySQL Database, the Apache Web server and most importantly trick your machine into believing it’s the actual server that hosts the domain.

Now, we’ve checked online and seen a bunch of places saying that this is not possible and to have Magento working on a Windows box and that you need to install Ubuntu to get this working. This couldn’t be farther from the truth and just adds unneeded complexity. So let’s keep it as simple as possible.

1. Download the XAMPP from Apache Friends: http://www.apachefriends.org/en/xampp-windows.html. We’re currently using XAMPP Version 1.6.6a, however, feel free to use the latest. Which has some differences and some Apache/MySQL extensions turned on default, but it will all work the same.
   1. It’s a very simple install and you can follow the instructions without really changing any of the defaults. However, for the sake of this document, we’ll change the install directory to the use the original settings that XAMPP used to come with and install to:
      1. C:\apachefriends\xampp
2. Once XAMPP is installed, we’ll need to setup our environment to handle multiple site development as well as for properly running Magento. We’re a web development shop, so we find that we need to work on multiple sites as once to properly support our customers.
   1. For the purpose of this document, we’ll be building out a website for CleanEase.
      1. Navigate out to your “C:\apachefriends\xampp\htdocs” directory and create the new “cleanease” folder:
         
3. We’ll then need to make sure that both the Apache & MySQL environments are setup for what Magento needs.
   1. MySQL
      1. We’ll need to edit the configuration files to support the InnoDB transactional storage engine otherwise you’ll get nowhere fast. Navigate out to your local my.cnf file found at: C:\apachefriends\xampp\mysql\bin\my.cnf. Open this up into your text editor of choice and make sure that the InnoDB settings are not commented out. It should looks something like this:
         1. # Comment the following if you are using InnoDB tables
            #skip-innodb
            innodb_data_home_dir = "C:/apachefriends/xampp/mysql/"
            innodb_data_file_path = ibdata1:10M:autoextend
            innodb_log_group_home_dir = "C:/apachefriends/xampp/mysql/"
            innodb_log_arch_dir = "C:/apachefriends/xampp/mysql/"
            ## You can set .._buffer_pool_size up to 50 - 80 %
            ## of RAM but beware of setting memory usage too high
            innodb_buffer_pool_size = 16M
            innodb_additional_mem_pool_size = 2M
            ## Set .._log_file_size to 25 % of buffer pool size
            innodb_log_file_size = 5M
            innodb_log_buffer_size = 8M
            innodb_flush_log_at_trx_commit = 1
            innodb_lock_wait_timeout = 50
         2. Make sure that the “skip-innodb” line is commented out, but all the other settings can use the defaults that are already specified. Save and close the file.
      2. We usually have MySQL installed as a service, so get into your Services Control Panel and restart it:
         
   2. Apache
      1. Configuring the php.ini file
         1. We’ll need to enable a few extensions for Magento to work properly. To do this, open up your php.ini file. The version of XAMPP we use (Version 1.6.6a ) has two php.ini files, however, the one that is really used by the web server is found in the Apache bin directory:
            1. C:\apachefriends\xampp\apache\bin\php.ini
               1. Note: On the newer version of XAMPP, we’ve found that they’ve finally cleaned things up and only have one php.ini file found in C:\apachefriends\xampp\php\php.ini. So please make sure to update this file.
         2. Make sure the following extensions are active. Meaning, that you just need to remove the “;” (semi-colon) character out from in front of it:
            1. extension=php_mcrypt.dll
               extension=php_curl.dll
               extension=php_pdo_mysql.dll
               extension=php_pdo.dll
      2. Configuring the httpd.conf file
         1. You’ll find this file located at:
            1. C:\apachefriends\xampp\apache\conf\httpd.conf
         2. Enable URL rewrites:
            1. You can do this by remove the “#” hash character in front of the following line:
               1. LoadModule rewrite_module modules/mod_rewrite.so
         3. Change the Document Root to point to the website you wish to work on, in this case, we want to change this to the CleanEase project:
            1. DocumentRoot "C:/apachefriends/xampp/htdocs/cleanease"
            2. IMPORTANT: This is the best way to go about installing a local version of Magento on your box and will allow you to easily deploy this out to your production environment without having to jump through a bunch of extra hoops.
      3. We usually have Apache installed as a service, so get into your Services Control Panel and restart it:
         
4. Next, go out and download Magento, you can find the No Registration download page here: http://www.magentocommerce.com/download/noregister. Make sure to get the “Full Release - stable version” download and don’t mess around with the other ones, I’ve found that they just lead you down the wrong path and take far too long for an install process. For this document, we’re using version 1.3.2.4, which we downloaded on 2/10/2010 and now I see another version 1.4.0.0 as of 2/12/2010. Why do these guys put out so many releases so quickly?
   
5. Once this is downloaded, you’ll want to exact the zip file into the CleanEase folder: C:\apachefriends\xampp\htdocs\cleanease.
   
   
   As you can see from the files in the zip, it will still extract them to a “magento” folder, so we’ll just need to move all of those files one level up:
   
6. Setting up your “hosts” file
   1. This is the most IMPORTANT step throughout all of this process. Without this step, the cookies of the Magento install will not work properly and the database will not properly install when going through the Magento setup.
   2. You can find your local “hosts” file in the following location:
      1. C:\WINDOWS\system32\drivers\etc\hosts
         1. There is no file extension, but you can easily open this in Notepad or any text editor.
   3. Make sure to add the following domain entry to point to your localhost IP address:
      1. 127.0.0.1 www.cleanease.com
      2. It’ll look something like this:
         
   4. Save the file
7. Create an empty database called “cleanease” within your phpMyAdmin instance:
   
8. Now that you’ve done all the setup, it’s now time to hit your local instance via your favorite web browser to start the Magento Installation Wizard. Open up the www.cleanease.com website in your browser, and if you did all the above setup correctly, you’ll see the first part of the Magento installation screen:
   1. 
   2. Feel free to use the default settings for the Localization:
      
   3. Make sure to enter in the “cleanease” database name, check also check the following:
      1. Skip Base URL validation before next step
      2. Use Web Server (Apache) Rewrites
      3. 
   4. This part of the process will take a bit of time as its building out the database and setting up your environment. However, if all works well, it will take to the final step of the wizard to create the administrator user:
      

Once you get through this portion, it will ask you if you want to go visit the frontend or login to the backend. Feel free to login to the backend to start setting things up. A few things to note:

• You can always use a different domain, it would be best to use the one you wish to ultimately install to.
• In addition, you can use any database name or directory name you wish, but just make sure you use ones that are consistent with the domain name so you can easily track them.
• Make sure to edit your httpd.conf file, specifically the DocumentRoot value to the directory you wish to run your other Magento instances.

Now that we’ve got this process down, we can finally use proven development techniques to get our websites looking exactly the way our clients want on our local boxes before we move them to production.

Enjoy!

Clothing The Masses Through eCommerce Solutions

The cream always rises to the top, but mixing it up is what Free Gold Watch does best. With their streetwear appeal, and Hollywood couture styling, designer Matthew Henri exposes the hype in everything from Louis Vuitton monogram and Gucci print, to rap legends and celebrities.

As store front only retailers struggle with profitability, and the important holiday season approaches, it was a necessity for the urban streetwear brand Free Gold Watch to launch their eCommerce website fast. Concerned about keeping a creative touch with added functionality, JVF Consulting integrated Magento into framework of their website. With the big streetwear brands dominating the mainstream shoppers online, it was time Free Gold Watch took their crown with the help of JVF Consulting.

With the functionality of Magento, Free Gold Watch can now control every aspect of their online store, from merchandising to promotions and more. They're now reaching more customers by utilizing the features of the Magento retailing functionality. There are no limits to creativity with JVF Consulting, our designers are here to ensure your vision is properly portrayed on the world wide web.

With the launch of the Free Gold Watch online store they have expanded their market to the world, and the analytics are proving it. Within 1 week of the stores launch the average visitors to the site have hit almost 1000 unique visitors, all which have a good conversion rate and stay on the site for over a minute and a half. Their blog, which also attracts visitors from around the world, is quite popular and offers an insight to the people behind the label and the clothes they make.

The Search Engine Optimization features coupled with the friendly user experience will attract and convert more qualified customers. Already the implantation of the basic meta tags have lead to business growth through organic search results.

JVF Consulting is committed to providing the best eCommerce solution possible. This commitment extends to any website or blog we launch that partners with eCommerce sites. We know how important custom features are to merchants, that's why JVF is here to solve any frustrations you may have with your current setup, or help answer any questions about your future projects.

Free Gold Watch headquarters is located at 1798 McAllister St. in San Francisco, CA. That would be the Western Addition for you local yocals. If you don't find what you want there, or on their new eCommerce website, you can find the Free Gold Watch collection at these retailers: Karmaloop, The Giant Peach, and Turntable Lab.