Smugmug Trick: Adding an Image to the Cart via Link

Note: This article applies only to anyone using Smugmug. As always, use the information at your own risk. If your Smugmug account goes berserk, be sure you know enough to undo anything contained herein. As always, photoKandy Studios isn't liable for anything that might go wrong.

Okay -- legalese done-and-out-of-the-way, we can get on to it.

Sometimes when you're linking to an image on Smugmug, you would like to prompt the user to add the image to the cart immediately, rather than hoping that they will click the "Buy" button, and then click "This Photo". The reasons you might want to do this vary, but I've seen the question asked several times on the customization forums, so I thought I'd share how you can accomplish it.



So, first, a demo: http://sm.photokandy.com/Album/Buildings-and-Architecture/Collonsville-IL/12510869_HHeMy#897188584_yGPiS?addToCart=yes

When you click the link above, you should be taken to the photo's page. Nearly immediately, the "Buy This Photo" window should appear, prompting you to add the image to the cart.

So, if you'd like to add this functionality to your site, it just takes just a little bit of javascript, and the willingness to "tinker", but it isn't too hard to get working.

First, add the following code to your "Bottom Javascript" block in the "Advanced Customizer". (This is located in your Smugmug Control Panel)

function addToCart ()
{
  if (window.location.toString().indexOf("addToCart=yes") > -1 )
  {
    var uri = window.location.toString();
    var hashLocation = uri.indexOf ("#");
    if (hashLocation > -1)
    {
      var qmLocation = uri.indexOf ("?");
      var img = uri.substring(hashLocation+1, qmLocation);
      var imgSplit = img.split ("_");
      addCartSingle(imgSplit[0],imgSplit[1]);
    }
  }
}

YE.onDOMReady ( addToCart );

The code isn't all that complex; here's what it does in a nutshell:

• window.location.toString() is the web address of the page. In the case of a photo, it's the huge, long link like I used in the demo.
• indexOf("addToCart=yes") searches the web address for the "addToCart=yes" portion. If it's there, the script knows we need to show the "Buy This Photo" window.
• We can do this using addCartSingle, but we need to know the image's unique key (the "897188584_yGPiS"), and we need it in both pieces (before and after the underscore).
• First we find the "#" in the link; the image's unique identifier comes after this. We do this with indexOf ("#").
• If we find it, we next search for the question mark we have to put before "addToCart=yes".
• Once that is found, we split the string at the underscore and call addCartSingle which then does all the really hard work.

Next, you should be able to link to the image from other sites (like blog posts or Facebook, etc.) and if you just add "?addToCart=yes" to the end, it'll prompt the user to add the image to their cart automatically. Just remember that the code as presented above is really picky -- any variation in the case or spelling is going to cause it to fail, so make sure to spell it exactly and use the correct case. (If you're a programmer, though, you could change the code to accept all sorts of things...)

Pretty nifty, right? (I thought so. If you don't think so, maybe the next trick down the line will be more up your alley... I'll cross my fingers!)

So for now, I'll close the bag of tricks and trot one out sometime later. Until then, keep on smugging along!