Adding a Colorbox Popup to Magento Category or Product Pages

We recently had a request to add a popup to certain category or product pages in Magento. The administrator wanted the ability to control the content and turn this feature on for individual products.

A jQuery library called Colorbox is quite useful for this sort of thing. This brief video walks through the theory and provides an overview of how to add a colorbox popup for category and product pages.

Due to the fact that Magento currently (as of CE version 1.7) uses Prototype as the stock Javascript library, adding jQuery libraries will frequently conflict with Prototype.

This video doesn’t cover all the steps or theory, that would take quite some time. But here is the video that might give you an idea of where to start on adding this feature.

Colorbox Video Poster Frame

Creating a Custom Home Page in Magento

Creating a Custom Home Page in Magento

Creating a Custom Home Page in Magento

 

This is a screencast of a presentation titled “Creating a  Custom Home Page in Magento” that I gave to the Midwest Magento Meetup group in Chicago on June 12, 2013. The presentation covers:

  • Design and Coding Concepts
  • Identifying parts of the page
  • Decisions about which parts to allow the admin to update
  • See how the home page is built

The presentation was designed for a short (10-minute) timeslot, so it is missing necessary detail about specifically how to perform some aspects of the page creation due to this constraint.

Hopefully you will find this useful. The live site upon which this presentation was modeled is Shop Silver Nest, a client of Landmann InterActive whose business is interior design.

YouTube Version (lower resolution)

10 SEO Steps for CMS and Magento Sites

Here are Landmann InterActive’s top 10 SEO best practice tips for 2012 for itPage CMS and Magento sites. We add every itPage CMS and Magento ecommerce site that we develop to our Google Webmaster account and submit them to Google to kick-start your rankings. Site owners should follow these best practice steps to get your content in the best possible order for good search engine placement.

1. URL and Keywords

Our CMS uses the title of the page as the URL, so to take advantage of Google’s ranking of pagenames in URLs, make sure to create your page with the relevant keywords or keyphrases in the title.

For example, if your keywords are “blue plastic widgets”, create title with some variation of the phrase, such as “Creative Blue Plastic Widgets for your Kid”. This would yield a URL something like this: http://www.yourdomain.com/creative-blue-plastic-widgets-for-your-kid”

Magento users should consider the keywords desired and enter an appropriate page name in the product “URL Key” field, instead of accepting the default. Make sure that this is a unique value. This will be used as the URL.

Don’t use ampersands, question marks, dashes or underlines in your page title as they will adversely affect the rankings, and some of these characters have special meanings in the URL.

2. Page Content

Unique, creative page content always ranks high in Google, and this year has shown that it is more important than ever. Make sure you write copy in the manner that a person would read it. Use the keywords or keyphrases somewhere within the first two sentences of the first paragraph on the page. Make sure that you do not duplicate pages, as that is a negative mark and will reduce your rankings.

3. Title Tags

When your HTML title tag exactly matches the search the user enters in Google, then it is 100% relevant and you will get a higher ranking. Use this format:: Primary Keyword – Secondary Keyword | Brand or Company Name. Notice the vertical bar before the Brand or Company Name. Research has shown that this order is important.

Most SEO tools that check pages allow about 140 characters in the Title, but Google shows only about 70 characters on its search results page (also known as the “organic” listings).

In the itPage CMS, every page can have its own unique HTML title (look at the “SEO Tailoring” pane).

In the Magento admin, this information can be changed for products by clicking on the “Meta Information” link on the product page.

If you need to use them, hyphens and underscores are better to use as phrase separators. Remember to never use a question mark or an ampersand, as these have special significance in a URL.

4. Meta Keywords Tag

According to Google’s Webmaster Central Blog, the “keywords” meta tag doesn’t count in their rankings, but there is some evidence that other search utilities do use it. Our recommendation is that you should enter keywords relevant for each page.

In the itPage CMS, every page can have its own unique HTML keywords (look at the “SEO Tailoring” pane).

In the Magento admin, this information can be changed for products by clicking on the “Meta Information” link on the product page.

5. Subdirectory vs. Subdomain

As far as Google is concerned, a subdirectory gets a better preference in rankings. Will will help you determine your site structure when we develop the site. It can be a consideration if you have a blog or informational content. It is not usually a concern on Magento sites, as all pages are typically under the same subdomain (www, for example).

6. Crosslinking and Internal Linking

Internal Linking is defined as linking from one part of your site to another, and crosslinking is defined as linking to another site that also links back to yours. This is an important contributing factor to rankings. There is evidence that good linking, especially with higher-traffic sites, will boost your search engine rankings.

You can do your own internal linking with the itPage CMS or Magento. Crosslinking, on the other hand, requires the cooperation of the other site admin. This takes time and effort, but pays off in better rankings.

7. Site Speed

In their Webmaster blog, Google says that site speed is now important for ranking. Our itPage CMS has been speed-optimized and delivers good results. Magento sites can be slow – ask us about how to optimize your Magento site for best performance as there are definitely a range of options that we use to tweak the site to make it faster.

8. Server Location

For domains that have a top-level name (domain ending with .com, .net, .org, etc.), Google will do a lookup on the location of your website to see where the server is physically located. This means that if the majority of your traffic will be from the United States, the server should be located in the United States.

9. Rich Content

Rich content (videos, testimonials, Facebook and Twitter feeds) will help your rankings because the content will appear next to search results. Roll over the double-chevron to the right of any Google search results page to see a page snippet.

10. Social Indicators

Both Bing and Google use social indicators as a ranking factor. See the searchdengineland.com article by Jordan Kasteler. In addition, Google places special emphasis on entries that have been flagged with the Google +1 button. See the Google Webmaster Central YuTube channel.

Conclusion

We hope this article helps you find success in higher rankings.

REFERENCES

Google’s Webmaster Central – <http://www.google.com/webmasters/>
Search Engine Land’s article on Social Content – <http://searchengineland.com/21-types-of-social-content-to-boost-your-seo-103625>
Google Webmster Central YouTube Channel – <http://www.youtube.com/GoogleWebmasterHelp>

Heirarchy of Irritating Ways to Communicate with Your Web Team

There are good ways to communicate, and bad ways. The bad ways don’t convey the message, they leave clearly-formed questions unanswered, and create frustration and confusion in the process. Having been through this recently, here is my take on the heirarchy of irritating ways to communicate with your team on a web project:

From most irritating (6) to least:

6. Video of project manager going through in painful but vague detail, replying to only a few of the questions that you posed
5. Annotated PDF with circles and arrows, providing in excruciating detail things that are very obvious and could be conveyed with a single sentence.
4. Microsoft Word document with embedded graphics (such as the new banner you’re supposed to use)
3. Basecamp
2. E-mail

And the least-irritating way to communicate:

1. A better issue tracking system

If I was cruel, I would post examples, but I won’t. Someday I will be disciplined enough to require ALL my customers to use my issue tracking system.

Solving Magento “Undefined Index” error on Database Restore

If you’ve ever moved a Magento database from one server to another, perhaps taking a devel site live, you might have seen an error something like this:

a:2:{i:0;s:136:"Notice: Undefined index:  0  in /Library/WebServer/Documents/yoursite.com/app/code/core/Mage/Core/Model/Mysql4/Config.php on line 92";i:1;s:776:"#0 /Library/WebServer/Documents/yoursite.com/app/code/core/Mage/Core/Model/Mysql4/Config.php(92): mageCoreErrorHandler(8, 'Undefined index...', '/Library/WebSer...', 92, Array)
#1 /Library/WebServer/Documents/yoursite.com/app/code/core/Mage/Core/Model/Config.php(268): Mage_Core_Model_Mysql4_Config->loadToXml(Object(Mage_Core_Model_Config))
#2 /Library/WebServer/Documents/yoursite.com/app/code/core/Mage/Core/Model/App.php(263): Mage_Core_Model_Config->init(Array)
#3 /Library/WebServer/Documents/yoursite.com/app/Mage.php(434): Mage_Core_Model_App->init('', 'store', Array)
#4 /Library/WebServer/Documents/yoursite.com/app/Mage.php(455): Mage::app('', 'store', Array)
#5 /Library/WebServer/Documents/yoursite.com/index.php(65): Mage::run()
#6 {main}";}

This is Magento complaining about not finding the correct default website data. Now you might be thinking, “What’s the deal? I did a database dump and import…”

The problem is the import process to the new MySQL database.

MySQL defaults to an ID of 1. Unless explicitly told, it will silently change values of 0 to 1, thus breaking the site functionality.

To cure this problem, add this at the top of the database dump before importing:

SET SQL_MODE="NO_AUTO_VALUE_ON_ZERO";

This does just what it appears to do — tells MySQL to user 0 instead of it’s automatic value, which is usually 1.

I use Navicat, a wonderful SQL client. But it has this one little problem — it doesn’t add this particular useful phrase to the dump. By adding the above SQL command at the top of the file, a reimport fixes it. Problem solved.

Using jQuery and Lasso to Automatically Populate a Form

Autopopulate Initial Pageload

Initial page load should display the "Slidertype Settings" information

This article will show you how to create an AJAX-based autolookup that is triggered from making a selection on a dropdown. It gets the records via an AJAX request and populates a form based on the values in the database.

If you would like to get an idea how an AJAX request works, this article is for you. The example is modifying configuration settings for two different slider types (NivoSlider or SudoSlider), and is part of the itPage content management system. This article’s intended audience is web developers.

Tools Needed

You will need a good code editor to examine and change the files. I work on a Mac, and my code editor of choice is BBEdit, although sometimes Eclipse is handy. It is also helpful to have some way to examine traffic between the browser and the server on a low level. I use Firefox as my default browser. The Firebug plugin for Firefox is invaluable for seeing what is happening with AJAX requests, which is the way this code functions. In the case of a page that does a database lookup, by using Firebug you can see the data returned from the lookup page in its raw form. If you make a mistake in modifying the files, the Javascript or data probably will be invalid and nothing will happen at all. This can be quite frustrating, as there are few clues as to what might be wrong. Firebug gives you an idea about what is happening.

You will also need a working installation of MySQL and Lasso Professional. This code doesn’t use any custom tags, so you should be able to run it fairly easily. This code is tested on Lasso version 8.5.

How Autolookup Works – Code Walkthrough

The user calls the page auto1.lasso, which is a standalone example here but actually is part of a content management system for administering jQuery-based NivoSlider or SudoSlider data.

On auto1.lasso, which is the web page that the user calls, there are two Javascripts. The first one (see line 11 of auto1.lasso) fires immediately on pageload to get values from a database via an AJAX request. The AJAX request is sent to autolookup_p.lasso, which is a page that does a database lookup based upon the select item and returns an HTML snippet to the calling page.

The calling page (line 71 of auto1.lasso) contains this code:

<table id="SliderConfigs">

The result of the AJAX request updates the HTML ID “SliderConfigs”, and this results in the configuration records being displayed. The utility of this is when (in this example) loading default configuration settings from upon adding a record. If no records are found a ghosted error message will display.

On initial page load there will be no value from the dropdown, so this bit of code sets the value:

// Process the request from the select
Var('SliderTypeIDSubmit' = Action_Param('SliderTypeID'));
If($SliderTypeIDSubmit != '');
//    'SliderTypeID selected: '+($SliderTypeIDSubmit)+'<br>\n';
Else;
 $SliderTypeIDSubmit = '1';
//    'SliderTypeID NOT selected, setting to '+($SliderTypeIDSubmit)+'<br>\n';
/If;

Autolookup Firebug Output

After the initial page load, when the user makes a selection from the “Slider Type” dropdown, the second Javascript (see line 17 of auto1.lasso) is triggered and does an AJAX query (a behind-the-scenes query) to the page autolookup_p.lasso to create a web page fragment. This fragment is then returned to the calling page (auto1.lasso) and is used to build the “SliderType Settings” part of the page.

Installing the Examples

  1. Download the example files from the Resources link at the bottom of this article.
  2. Copy everything to the root of your webserver.
  3. Create a database named “jquery_demo”, then load the jquery_demo.sql file. You should see two tables created (cms_sliderconfig and cms_slidertype).
  4. Enable Lasso Security for the new database.

Autocomplete Database Lookup Example (Lasso Code)

Run the example by loading “auto1.lasso” file. Optionally, with Firebug running, check the response page. You should see an external call to “autolookup_p.lasso” which is the page that fetches records from the database and builds the output that is then displayed by the original (calling) page.

HINT: You can actually hit autolookup_p.lasso in a browser to see the partial HTML that is created. This is a pretty useful for debugging. Direct access to AJAS-based pages is also a security risk and should considered as a page to be protected.

See the screenshot (at the top of this article) for an example of what correct data should look like.

Conclusion

Autolookup is a great feature that can be added to your website to enhance the user experience, and can be used in quite a variety of ways. Hopefully you find these working examples helpful.

Resources

1. Download the Using jQuery Autocomplete with Lasso code for these examples. This should have all the files you need to run the examples.

2. Files used here are part of the jQuery UI. See especially the jQuery.ajax() command. All the files you need are included in the demo; this link is included as a learning resource.

Using jQuery Autocomplete with Lasso

Autocomplete creates the dropdown when something is typed into the input field.

Autocomplete is the feature of a website when you type something into a box and up pops a list of possible selections. Google has recently added this feature on its search page. Autocomplete can give your users a very nice, fast, AJAX-based method to do lookups.

This article gives several examples of how to use jQuery’s Autocomplete feature with both a simple list of selections (in a static Javascript array) or using a database lookup. Also included is working code for a PHP example from another site. If you would like to get autocomplete working on your site, this article is for you. Or if you know or are interested in Lasso vs. PHP coding styles, this might provide a good example. This article’s intended audience is web developers.

Tools Needed

You will need a good code editor. I work on a Mac, and my code editor of choice is BBEdit. It is also helpful to have some way to examine traffic between the browser and the server on a low level. I use Firefox as my default browser. The Firebug plugin for Firefox  is invaluable for seeing what is happening with AJAX requests, which is the way this code functions. In the case of a page that does a database lookup, by using Firebug you can see the data returned from the lookup page in its raw form. If you make a mistake in modifying the files, the Javascript or data probably will be invalid and nothing will happen at all. This can be quite frustrating, as there are few clues as to what might be wrong. Firebug gives you an idea about what is happening.

You will also need a working installation of MySQL and Lasso Professional. This code uses a custom tag encode_json, which handles the JSON encoding of the data returned from the Lasso page back to the calling page. This code is tested on Lasso version 8.5.

How Autocomplete Works

On the web page that the user calls there is a Javascript running. When the user types into an input box, the Javascript intercepts the keystrokes (based upon a minimum number of keystrokes set in the Javascript), then does an AJAX query (a behind-the-scenes query) to a database to get a web page fragment. This fragment is then used to build the popup menu of terms.

Installing the Examples

  1. Download the example files from the Resources link at the bottom of this article.
  2. Copy everything to the root of your webserver.
  3. Put the contents of the LassoStartup folder to your server’s LassoStartup and restart Lasso.
  4. Set up a database called whatever you want, then load the projects.sql file to create a projects table.
  5. Enable Lasso Security for the new database.
  6. Change the Inline code to use the same database name that you set up.

Screenshot of the autocomplete simple example.

Autocomplete Simple Example (Lasso Code)

The Lasso Simple example contains a file called autocomplete.lasso. This example builds a list of project names from the database. By a “simple” example we mean that this lookup creates a simple Javascript array, which is an array containing only one field that can be used for autocomplete. This might be useful for a name field or possibly an address or city.

The “simple” example queries the database and builds an array in-place, it does not use an AJAX call to an external lookup page. To see what it does, load the page and look at the source code. You should see a Javascript array with your data.

With Firebug running, check the response page. You won’t see any external calls, which is correct as it is all done within the original Lasso page.

If you want to also pull in an ID field or other fields from a database lookup, then you need to use the Database Lookup Example.

Screenshot showing the autocomplete lookup working.

Screenshot of the autocomplete database response. See the bottom half of the screen for the Firebug output showing the data being returned back to the calling page.

Autocomplete Database Lookup Example (Lasso Code)

The Database Lookup example builds a list of project names and IDs from the database. This would be pretty handy in any situation where you have a related table with IDs where you want to store the ID, and not the name field.

In this example, the names (or, more precisely, the label) is displayed in the autocomplete. When an entry is selected, the ID is populated to the ID form box. If you don’t want to display this, it could easily be changed to a hidden form field to make it less distracting to the user.

Run the example by loading “project_poc.html”. Try entering different three-letter combinations to see what autocomplete returns. With Firebug running, check the response page. You should see an external call to “project_lookup.lasso” which is a page that fetches records from the Projects table and builds the output that is then displayed by the original (calling) page.

See the screenshot (above) for an example of what correct data should look like.

Screenshot of a PHP version of autocomplete in action.

Screenshot of autocomplete PHP response page. See the bottom part of the screenshot for Firebug displaying the data being returned.

Autocomplete Database Lookup Example (PHP Code)

We have included a set of PHP files from Using jQuery UI’s Autocomplete to Populate a Form, which is a very nice description of how this works in PHP. These files are provided solely for comparison on how Lasso operates versus PHP.

Conclusion

Autocomplete is a great feature that can be added to your website to enhance the user experience. Hopefully you find these working examples helpful.

Resources

1. Download the Using jQuery Autocomplete with Lasso code for these examples. This should have all the files you need to run the examples.

2. jQuery Autocomplete can be built as a part of the jQuery UI. A prebuilt version is included with the code examples.

3. The PHP example was lifted from “Using jQuery UI’s Autocomplete to Populate a Form” and only minimally modified. Full credit to www.af-design.com. Check out that article for a full description of the PHP way of doing this.

How to Select a Content Management System (part 4)

This is part four of a four-part series on how to choose a content management system. It is directed toward end-users, but developers may find some tips here too. Feel free to leave your comments.

11. What options are there for tech support?

What happens when you have questions or something needs to be fixed? That’s where tech support comes into the picture.

Open-Source – A potential concern is whether the platform comes with support. Open-source platforms come with no support. The user, or the developer that they hire, must be knowledgeable in the operation of the platform to get the most benefit. Since there is no single vendor that creates the platform, tech support is usually handled ad-hoc through the user community. This happens by way of technical e-mail lists, forums, or knowledge databases. When questions arise, the user or developer must know how to sift through typically a very large volume of information to find the answer to the particular question they are faced with. If you are considering hiring a developer who will be using an open-source platform, make sure that the proposal specifies the level of tech support.

Commercial – With a commercial platform, the options are usually limited to the software vendor that created the platform. Levels of support range from free e-mail support, a limited amount of time or number of issues per month that are included at a fixed rate, to a full maintenance contract specifying response times and service levels. Telephone support may be (but is not always) an option. The most common type of commercial support is a paid plan in the form of “maintenance blocks” purchased through the vendor. The client is allocated so many minutes per block or month.

12. Who retains ownership of the site?

There are concerns of intellectual property with website content, and we certainly aren’t going to cover this in-depth here. Based in copyright law, the current generally-accepted practice is that the user owns their data (database, images, uploaded files, any templates or graphics that were provided for the development fee covered). This applies regardless of the platform used. You should get free access to your data and files.

The contract with the developer and hosting provider should clearly define who owns which content. It’s a hackneyed phrase, but you really should consult an intellectual property attorney for advice on ownership.

OK, so now make a choice!

Start with the CMS Matrix, look over the features, have a conversation with a developer, and you will begin to see a path take shape. The most important thing is to get started!

How to Select a Content Management System (part 3)

This is part three of a four-part series on how to choose a content management system. It is directed toward end-users, but developers may find some tips here too. Feel free to leave your comments.

7. What is the difference between open-source and commercial CMS platforms?

The ethos of open-source projects dictate that a group of developers contribute or approve code to add to the codebase. Generally speaking, the code that runs the CMS is available free for anybody to use. The fact that the code is free says nothing about the feature set. Open-source systems run the spectrum from very basic through extremely complicated, and run sites from very small sites with a few pages, to huge, enterprise-level sites. Licensing is covered by various forms of open-source licenses.

The code for commercial systems, on the other hand, is the intellectual property of the developer. It is typically not an option to install third-party add-ons or to hire other developers to modify the code. In this situation, the customer is buying a service from the developer, and the site is not portable. The platform code may or may not be for sale. Licensing is specific to each developer and varies widely.

8. How flexible are the CMS platforms?

This question refers to two things: Whether the CMS will handle the needs of the design, and whether the CMS will handle the data requirements.

Data Flexibility – Look for answers to these questions:

  1. What are the specific needs you have to collect or display data?
  2. Will the stock platform do everything you want, or is it missing something?
  3. If any features are missing, are these easily available through plug-ins or modules?
  4. If you need to have some new feature created, does the developer have the ability to create them?

Design Flexibility – Some things to consider here:

  1. If you have a design in mind, will the platform easily accommodate it?
  2. Does the platform make use of templates or skins?
  3. Are the templates easy to use?
  4. Can a designer modify the files?
  5. Is there a way to visualize the templates?
  6. To what extent does a developer need to be involved?

9. How easy to install is the CMS platform?

To some extent the options are influenced by where you will be hosting your site. Some large providers offer “standard” packages. Make sure they will do what you want!

Open-Source – Nearly all of these need a developer to be involved in the installation and configuration. The are many options to configure that an experienced developer can work through with little trouble. Some of these include webserver virtual host setup and redirecting, database connections, user permissions, file permissions, storage space, memory allocation, spam prevention software setup, search engine optimization settings.

Commercial – Installation will almost certainly be handled by the developer.

10. How easy to upgrade is the CMS platform?

Some platforms are far easier to upgrade than others. Open-source platforms are usually updated quite frequently. The problem is that your site is not magically updated – somebody has to do it. Is that covered in the proposal? Some developers will automatically upgrade their sites, which can give you “free” new features.

Sites created on a commercial platform may or may not have automatic upgrades. New features may be offered on an included basis, or you might have to pay for a new revision. That is worth exploring, as the cost could be substantial.

How to Select a Content Management System (part 2)

This is part two of a four-part series on how to choose a content management system. It is directed toward end-users, but developers may find some tips here too. Feel free to leave your comments.

CMS Matrix

Download the CMS Matrix and compare the features of seven different content management systems.

2. What is the difference between a blog and a CMS?

A blog platform (like WordPress, used to write this blog), is a special-purpose type of platform that has a limited feature-set. Blogs are suitable for a limited-range of duties. WordPress excels as a blog, but is not a full-featured CMS. Some features of blogs are the ability to write articles (posts), solicit reader comments, and engage the audience in discussions about a particular topic. They also have features to submit content to various content networks such as Facebook, Delicious, Twitter or StumbleUpon (among others). If you need only this type of feature set, then you need a blog, so look for a blog platform.

A typical CMS has many features that blogs do not have – image galleries, testimonials, contact forms, some type of user architecture that can be extended, private user areas, advanced search engine features, etc. It might be the case that you need both a blog and a CMS.

3. Which platform will you be using?

Platform refers to the name of the CMS. The choice of platform determines what features are standard. Some platforms you may recognize include Acumium, DotNetNuke, Drupal, ExpressionEngine, Joomla!, WordPress, itPage.

An important point is that if you are an end-user you may not have much choice of a platform, as most of these are not systems you just simply install and use. They take quite a bit of configuration and deep technical knowledge and skills to get them operational and customized. If you are considering working with a developer, they probably will have a platform to recommend. Then the task becomes evaluating the features and cost.

4. What are the feature sets of some popular CMS platforms?

What do you need, what will you use? The CMS Matrix contains over 50 factors that will help you evaluate a CMS. Download it, print it out, and check off which features will be needed for your site.

If you are evaluating developers, ask them about the various features of the CMS they are recommending and how that platform compares to those on the matrix.

5. How easy to use is the CMS administration area?

The ability of an end-user to easily operate the system is arguably the single most important criteria in evaluation. A potential problem with any CMS platform is that it must be created with the end user in mind. The programmers creating the platform must ensure that the admin experience is intuitive. Many CMS platforms fail this test, as they are primarily developer tools that are not suitable for non-technical users.

So how do you tell? Get a demo! Any developer you are considering engaging should give you a free, no-obligation walk-through of the administration area so you have some idea of how it works.

6. How much does a CMS-based site cost to develop and maintain?

Pricing stategies and fees cover a huge range, as do client expectations of the features and support they will get for the money. If you intend to work with a developer, get a written proposal from them for the site development. Make sure that the proposal clearly states the costs, the services offered, the vendor responsibilities, the client involvement, hosting agreement, ownership and licensing of code and data.

Here are some questions to ask them:

  1. How much is the initial development fee?
  2. How much is the hosting cost?
  3. How much is a platform upgrade (maintenance)?
  4. Is there a support or maintenance contract offered or needed?
  5. How is work done after the initial development billed?
  6. How portable is the site (the hit by a bus scenario)?
  7. What is the site backup plan (data, images, system files)?
  8. What type of access is included (FTP, CMS admin, SSH)?