Tag: open source

BigCommerce Bulk Coupon Code Importer

By Ashish Datta | 17 Comments on BigCommerce Bulk Coupon Code Importer

A buddy of mine has an eCommerce storefront through BigCommerce, a hosted eCommerce solution. He was looking to run a Gilt City promotion, so he would have to import ~150 coupon codes into BigCommerce.

My friend spent some time looking around for an import codes feature and I would have assumed that a solution like BigCommerce would support a CSV import for coupon codes as well. However, we Googl’ed around a bit and it turns out BigCommerce does not support CSV imports for coupon codes. We stumbled upon this discussion on the BigCommerce forums discussing this shortcoming at length.

On the forum thread, someone had previously developed an iMacros script to automate importing the codes. Unfortunately, I tried using the iMacros script without any success. It looks like BigCommerce has updated the HTML on the page which is breaking the script. Anyway, looking at the iMacro and the opaque syntax I decided it would be easier to whip together a Chrome extension to automate creating coupon codes so decided to move forward with that.

Chrome extensions naturally lend themselves to automating things like this since it’s pretty straightforward to use the background page to maintain any state and hold variables and then use a content script to manipulate the DOM of the page and submit any forms that you need to.

You can grab the extension here http://setfive.com/misc/BigComm Importer.crx you’ll obviously need to be running Google Chrome for it to work.

Also, fork it at https://github.com/adatta02/bigcommerce-coupon-importer

What it does is add a “Bulk Import” button to the “Coupon Codes” page on your BigCommerce site – http://[yourstore].mybigcommerce.com/admin/index.php?ToDo=viewCoupons

If you click that button, a copy of the “add code” form will be displayed along with a textbox. You’ll just need to fill out the form, enter a list of coupon codes you want to create – one per line, and then click “Start Import”.

Your browser will automatically go through and create all your coupon codes. Thats it!

As always, let me know if you run into any issues or have any comments.

Internet Explorer Extension Quickstart and Skeleton

By Ashish Datta | 6 Comments on Internet Explorer Extension Quickstart and Skeleton

Recently, one of our clients was looking to build a prototype/proof of concept browser extension for Firefox, Chrome, and Internet Explorer. We were basically looking to inject a script, run it in user space, and modify some of the page’s DOM – like a trimmed down Greasemonkey script.

Doing this in Chrome and Firefox is pretty straightforward since the extensions are built Javascript, this is actually how I built the prototype tru.ly extensions. Unsurprisingly, the “odd man out” is Internet Explorer, this is my first time looking into writing an IE extension and the experience was pretty jarring so hopefully this synopsis can save you some time and frustration.

The first sign of trouble was that there doesn’t seem to be an official Microsoft guide on writing IE extensions. There’s just a bunch of ad-hoc tutorials, some MSDN articles, and then code samples built against every possible combination of language and library.

As it turns out, Internet Explorer has actually supported extensions since IE5 using a technology called Browser Help Objects and continues to support them via BHOs through IE9. In contrast to Chrome and Firefox’s Javascript based extensions, a BHO is a Windows DLL and consequently must be written and compiled using your choice of a Win32 compatible programming language. Given this and from the discussions I saw, the most popular choice seems to be to use C++/ATL to create a COM DLL. Being that I’m deathly afraid of C++ and that this approach was described as “COM DLL hell” I decided to see what else was possible.

After a bit more poking around I found out that it’s possible to use C# and .NET’s Interop libraries to scaffold enough to get the DLL loading into IE. This Code Project article walks through the process but it has several typos and the download containing the files seems to have gone missing. I fixed the typos and built it successfully – you can grab the files from GitHub here.

From my extremely rough understanding of C#, what the code does is create an interface from C# managed code to the unmanaged COM code that IE uses to communicate with extensions. Then, the code registers an event handler to be called once the DOM has finished rendering.

In order to actually build the project, you’ll need to do the following:

  • Install a copy of Visual Studio – I used VS Express 2010 which is free.
  • You’ll then need to import my VS project and build your DLL. If it complains about references to SHDocVw or IHTMLDocument2 you’ll just need to make sure that references to the two DLLs in Greyhound/ exist in your VS project.
  • Once the DLL is built, you’ll need to register it with RegAsm – this is a bit tricky since you need to use the correct version of RegAsm available on your system. This article explains where it should be located. Once you locate it, run the following: 
C:\[path to your .NET library]\RegAsm.exe /codebase bin\Release\Greyhound.dll

Thats it. Now start Internet Explorer and once the DOM on a page finishes loading you should see an alert box being generated via Javascript that your DLL is injecting.

The magic is all happening in the following function:

public void OnDocumentComplete(object pDisp, ref object URL)
{
   IHTMLDocument2 doc = (IHTMLDocument2)webBrowser.Document;
   doc.parentWindow.execScript("var d=window.document,s=d.createElement('script'),h=d.getElementsByTagName('body')[0];s.src='http://twitlabs.net/sayhello.js.php';h.appendChild(s);");
}

You’ll just need to edit that script tag to load your own Javascript.

Anyway, pretty gnarly stuff. It’s also extremely frightening that IE extensions are basically full fledged programs that have full reign over your entire system. No sandboxed, no permission limitations, just a fully integrated program that people “casually” download off the Internet.

Toggle non-consecutive checkboxes with jQuery UI

By Ashish Datta | Leave a Comment on Toggle non-consecutive checkboxes with jQuery UI

You’re all probably familiar with the UI convention of allowing users to select ALL or NONE for a list of checkboxes (like in Gmail). Recently I was working on a project that had a large table full of checkboxes (imagine a 10×10 grid) where the user would need to toggle some but not all of the checkboxes in a given row. And to make matters more complex, they would need to toggle groups of non-consecutive checkboxes (say 15, skip 10, 5, etc.). I threw on the thinking cap but couldn’t think of any similar interactions I’d seen and couldn’t think of a particularly good way to achieve this.

Enter jQuery UI. I happened to stumble across the jQuery UI Selectable documentation and realized it would provide a good UI experience to toggle some but not all of the checkboxes. The code to implement this is surprisingly simple:

Note: You don’t actually need the div container – that was just for JSFiddle.

And then the Javascript (jQuery + jQuery UI):

You can check out a live demo at http://jsfiddle.net/whMyQ/3/

As always, questions and comments are welcome!

Facebook: How-to force users to LIKE page

By Ashish Datta | 28 Comments on Facebook: How-to force users to LIKE page

With Facebook’s move to deprecate FBML for tabs the documentation around how to make a “please Like! before…” has become much more choppy and inconsistent. Anyway, I recently found myself in a position where I needed to make this happen so here goes.

With in-line FBML deprecated, the only way to accomplish this without using a third party branded solution is to create a Facebook iframe app. Here are the steps you need to take to get something up using PHP and the Facebook PHP SDK.

1. Create a new Facebook Application at https://developers.facebook.com/apps

2. Configure your new Facebook App the enable “Website” and “Page Tab”. You’ll need to enter a valid URL for the following fields:

  • Site URL
  • Page Tab URL
  • Secure Page Tab URL

You’ll also want to use a HTTPs URL since Facebook sessions default to HTTPs by default and your iframe will be marked insecure if its over vanilla HTTP. For this walk through, lets assume were using https://www.setfive.com/fb/index.php? as the URL.

3. Now, you’ll want to add your new App to a Facebook Page. The easiest way to do this is to use this URL https://www.facebook.com/dialog/pagetab?app_id=YOUR_APP_ID&next=YOUR_URL replacing YOUR_APP_ID and YOUR_URL with your App ID and then a URL that is derived from your endpoint (or even just your endpoint). When you load that URL, you’ll be prompted to add your app to a page – select the page you want and submit the form.

4. The final piece is throwing together the actual PHP script. You’ll need the Facebook PHP SDK available on GitHub – https://github.com/facebook/php-sdk. Clone that and then this is the PHP script you’ll need:

And thats it! Now you’ll be able to gate content from non-fans while growing the fanbase of your Facebook Page.

Drop any questions in the comments.

Fixing blank CCK Location fields in Views

By Ashish Datta | Leave a Comment on Fixing blank CCK Location fields in Views

Recently, we inherited a Drupal 6 site via a client of ours and ran into a pretty irritating bug with the Location module.

The site had been configured to allow users to create profiles using Node Profile along with the Location to allow users to input their street addresses.

Anyway, the issue was that when we created a View that included Location fields the fields were always rendering as blank even when we confirmed there was data in the database. A bit of poking around lead to this issue.

It turns out that due to an optimization in CCK or Views that the tables that have the data for the location fields are not getting JOIN’ed in when the view is executed. Unfortunately, the patch provided on the issue doesn’t work on the latest 3.x release of the Location module.

The fix that worked for us is #14 (copied below)

/**
* Preprocess hook for location().
*/
function yourtheme_preprocess_location(&$variables) {
  if (!isset($variables['location']['name']) && isset($variables['location']['lid'])) {
    $variables['location'] = array_merge($variables['location'], location_load_location($variables['location']['lid']));
    template_preprocess_location($variables);
  }
}

Basically, you’ll need to add the above snippet to a template.php file in your theme and change the name to reflect the theme you’re using. What this function does is basically pre-process the location fields to pull in the data so that the View will work properly.

Anyway, enough blogging it’s football time.