'Uncategorized' Category

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

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.