Standardizing jQuery in Magento Extensions and Themes

Ajax, E-commerce, JQuery, Magento

I’m not that familiar with Prototype (Magento’s default Javascript library), so I use jQuery with most of the Magento extensions that I create. Although I use $.noConflict to avoid conflicts with Prototype and other jQuery versions, there are times when multiple versions of jQuery are loaded. This generally causes Javascript errors with either my extension or another extension/theme that is loaded on the page (depending upon which is loaded first).

To avoid conflicts for future Magento theme and extension developers, I created the jQuery Update extension. Similar to Drupal’s jQuery Update module, this extension will standardize the use of jQuery and jQuery UI within Magento.

Continue reading

Checkout My New Site - T-shirts For Geeks

ui.imFeedBack – A JQuery UI Feedback Widget

Ajax, JQuery, UI Widgets

When the web20.digitalvilliage site was nearly complete, I wanted to add a contact form. I like the feedback tabs that I have been seeing on websites recently (displayed on the right or left of the page), so I decided to build one. I was already using a JQuery UI theme on the site, so I decided to create a JQuery UI widget so that the color scheme of the feedback form would match the color scheme on the site.

This ui.imFeedBack widget is extremely versatile. The feedback tab can be placed on the right or left and can even be displayed as a dialog.

Continue reading

Checkout My New Site - T-shirts For Geeks

JQuery UI Part 2: UI Dialog

Ajax, JQuery

In Part 1 of using the JQuery UI, I discussed how to customize and download all the compenents. In Part 2, I will discuss the using the UI widgets, specifically the UI dialog. Before you can use the UI dialog, you must first download the necessary files. Read Part 1 to learn more about downloading the file. I’m using a minified version of the JQuery UI widgets, to include a custom Theme. Remember from Part 1, that the customized build includes ui.core.js and other relevant files:

<link rel="stylesheet" type="text/css" href="js/jquery/jquery-ui/css/jquery-ui-1.7.2.css"><script type="text/javascript" src="js/jquery/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery/jquery-ui/jquery-ui-1.7.2.custom.min.js"></script>

Initializing the UI dialog is simple. First create a container to hold the dialog:

<div id="container" title="My Title">

Then add code in the header section of your web page:

?View Code JAVASCRIPT
$(document).ready(function() {
       $('#container').dialog();
});

I can also add options to the dialog:

?View Code JAVASCRIPT
$('#container').dialog(
       autoOpen: false,
       modal: true,
       width: 600,
       buttons: {
             "OK": function() {
                 //do something;
                 $(this).dialog("close");
              },
             "Cancel": function() {
                 $(this).dialog("close");
             }
       },
       show: 'drop',
       bgiframe: true
);

autoOpen: When set to true (the default), the dialog will appear when it is initialized. When set to false, the dialog will appear when dialog(‘open’) is called.

modal: If set to true, the all items below the dialog will be disabled. Modal dialogs create an overlay below the dialog but above other page elements.

buttons: Use the buttons option to add buttons to the dialog and create events for each.

show: There are many effects that can be applied to the dialog. In the example above, the ‘drop’ effect has been added. This will caused the dialog to drop into place on open. To view other effects, go to the UI Demo page.

bgiframe: When true, the bgiframe plugin will be used, to fix the issue in IE6 where select boxes show on top of other elements, regardless of zIndex. Requires including the bgiframe plugin. Future versions may not require a separate plugin.

Click here to view more options for the UI dialog.

As you can see, the UI Dialog is quite easy to use.

Note: Make sure that you initialize dialog button outside the button’s click event. In other words, don’t do this:

?View Code JAVASCRIPT
$('#button').click(function() {
      $('#container').dialog();
})

While this will display the dialog, it will not display again after it has been closed. So do this instead:

?View Code JAVASCRIPT
$('#container').dialog({autoOpen: false});
$('#button').click(function() {
      $('#container').dialog(open);
})

Enjoy.

Checkout My New Site - T-shirts For Geeks

Using The JQuery UI – Part 1

Ajax, JQuery

Although I have used some of the JQuery UI widgets in the past, I really began to explore the JQuery UI in a recent project. One of the reasons that I like using the UI widgets is that I can standardize on a set of components (plugins) that have a consistent look and feel as well as a consistent coding standard.

Continue reading

Checkout My New Site - T-shirts For Geeks