Creating a Magento Extension that uses a jQuery Plugin

Ajax, API's, E-commerce, JQuery, Magento, plugins

While developing the DevoutGeek.com site, I created a number of Magento extensions. The first extension that I created was Configurable Colors. This extension creates color swatches in place of the color drop-down for configurable products. I created a jQuery plugin to display the color swatches and make ajax calls to the extensions controller method to display the relevant images. Through a bit of trial and error, I learned a great deal about creating Magento extensions (and incorporating jQuery into them).

There are many articles that discuss how to create Magento extensions, so this post discusses how to incorporate a jQuery plugin into the extension. For information on how to create an extension, read this.

Continue reading

Checkout My New Site - T-shirts For Geeks

Using Responsive Menus with CodeIgniter

Ajax, Codeigniter, JQuery, plugins

In a previous post (A jQuery Responsive Menu Plugin), I discussed how to use the gpResponsiveMenu jQuery plugin to create responsive menus. While developing the plugin, I tested the options with CodeIgniter (I use CodeIgniter for my demo site). I had to make minor changes to the CodeIgniter navigation in order to use the plugin.

Continue reading

Checkout My New Site - T-shirts For Geeks

A Responsive Menu jQuery Plugin

Ajax, JQuery, plugins

While doing the final testing of DevoutGeek.com, I found that I did not like the way the main menu displayed on smaller devices (Ipads, phones, etc). I took a good bit of time implementing a responsive design on DevoutGeek.com, but the main menu did not flow to my liking. So I decided to create a jQuery plugin. I have seen other responsive menu plugins, but most implement a single strategy (i.e, change the menu into a drop-down select). The plugin that I created, gpResponsiveMenu, has 6 options that are implemented based upon media queries. The plugin can be used with both primary and secondary navigation (simultaneously).

Continue reading

Checkout My New Site - T-shirts For Geeks

JQuery Plugin: Mobile Page Switcher

Ajax, Javascript, JQuery, Mobile, plugins

After I created the mobile sub-domain for GrasshopperPebbles, I needed a solution that would allow a user to switch to the mobile view at any time. I prefer giving the user the option to switch to a mobile view rather than a device-sniffing approach. So I created simple jQuery Plugin (gpMobilePageSwitcher) that displays an icon and a link to the mobile view. But the plugin doesn’t just take the user to the home page of the mobile sub-domain, it takes the user to the mobile view of the same page they are viewing.

Continue reading

Checkout My New Site - T-shirts For Geeks

jQuery Plugin: gpImageRotate – Create Portfolios, Carousels, Galleries, and more

Ajax, JQuery, plugins

A few years ago, I created the jQuery plugin imBannerRotater. I have tweaked this plugin for various projects over the years, but I recently made so many changes to the plugin that I decided to create a new plugin: gpImageRotate. The code in the new plugin is more optimized than the original. And, not only did I enhance the existing functionality, I added 4-5 additional image rotation options. Lastly, one of the major reasons that I decided to create a new plugin is that I am working on a Drupal module based upon the plugin and so I changed the code so that the Drupal module could easily interact with it – so the naming convention for many of the styles is more verbose than the original imBannerRotater plugin.

Continue reading

Checkout My New Site - T-shirts For Geeks

jQuery Plugin: imMultiLineList – A Multi-Line ListBox plugin.

Ajax, JQuery, plugins

I have been working on a project where I needed a ListBox that displays multiple lines of information per row. The user must select from a list of offices, but many of the office names are the same and the only way to distinguish one office from the other is by the office address. Because a ListBox does not allow multiple lines in each row, I decided to create the imMultiLineList jQuery plugin. This plugin will turn any div into a multi-line multi-select list. And because I need to interact with the plugin, I decided to create it using an Object Oriented approach.

The imMultiLIneList plugin is fairly simple to use. Multiple items can be added to the list ajaxally using a JSON object, but the plugin will also allow single items to be manually added.

Continue reading

Checkout My New Site - T-shirts For Geeks

JQuery Plugin: imGoogleMaps-0.9.2, Custom Marker Icons

Ajax, API's, Google Maps, JQuery, plugins

I recently had to update my imGoogleMaps JQuery Plugin due to problems that arose from the Geocode request rate limitations. As I researched the problem, I delved even more into the Google Maps API. Although this is a minor release, I decided to add custom marker icons to this version. Now you should be able to easily add custom markers to your Google Maps without having to worry about creating the underlying Google Maps API code – JQuery and the imGoogleMaps plugin helps you create a customized map in the fraction of the time. I also added the ability to display a phone number and a description for each address in the infoWindow.

Continue reading

Checkout My New Site - T-shirts For Geeks

A JQuery Progress Bar Plugin

Ajax, JQuery, plugins

While working on the imGoogleMaps upgrade, I realized that I had to add a progress bar. Rather than creating the progress bar functionality in imGoogleMaps, I decided to create a separate JQuery plugin – imProgressBar. It was simple to develop and easy to use – and I even took the time to create over 20 bar graphics.

Continue reading

Checkout My New Site - T-shirts For Geeks

JQuery Plugin: imGoogleMaps 0.9 – Multiple Addresses, Street View

Ajax, Google Maps, JQuery, plugins

I finally found the time to upgrade imGoogleMaps JQuery plugin. When I first began the upgrade, my plan was to only add the handful of items that were requested by a few users (and fix a few bugs). When the upgrade was complete, I had incorporated the GStreetviewPanorama object and Street View Overlay into the plugin. I also added the ability to plot multiple addresses ajaxally via a json object and add a business name to the infoWindow.

Continue reading

Checkout My New Site - T-shirts For Geeks