How to Customize the Fine Art America Shopping Cart Widget

Thanks to Abbie Shores’ tutorial on customizing the Fine Art America widget (she is the Community and Technical Support Manager at Fine Art America/Pixels.com), I was able to write this JavaScript code to control the Fine Art America widget and embed the store into my website. This is all pretty geeky, and you’ll need to know your way around WordPress and JavaScript to get it working on your site, but I decided to share it with anyone who may be interested. I embed the code into two pages. On the main embedded store, I set the “slug” in WordPress to “os” (https://www.dvtwist.com/os/). On the popup store I set the slug to “ps” (https://www.dvtwist.com/ps/). Here are some examples:

Go to the online store: https://www.dvtwist.com/os/ with the link back to this page. Go to the online store without the link back: https://www.dvtwist.com/os/?sl=0

Go to a specific photo: https://www.dvtwist.com/os/?p=sea-of-despair-surfer-on-a-wave-in-cayucos-california-darin-volpe.html. Go to the same photo but in canvas: https://www.dvtwist.com/os/?p=sea-of-despair-surfer-on-a-wave-in-cayucos-california-darin-volpe.html&f=canvas-prints

Go to the Trains and Railroading collection: https://www.dvtwist.com/os/?c=trains+railroading. Go to same collection but show metal prints: https://www.dvtwist.com/os/?c=trains+railroading&f=metal+prints

Search for “Bald Eagle“: https://www.dvtwist.com/os/?h=bald+eagle. And search for acrylic bald eagles: https://www.dvtwist.com/os/?h=bald+eagle&f=acrylic+prints

Here is an example of my Santa Margarita Mercantile photo in a popup. This requires a lightbox plugin. I use Easy Fancybox, and you will need to edit the block in html mode (sample below.) Note that this code will only work with the Easy Fancybox plugin. See the example of this paragraph’s code below:

<p>Here is an example of my <a class="fancybox-iframe" href="/ps/?p=the-merc-general-store-in-santa-margarita-california-darin-volpe.html">Santa Margarita Mercantile</a> photo in a popup.</p>

If you choose to use my script, be sure to find the link for the store and put in your own artist ID. You’ll also want to customize the height – you’ll have to test what works on your page. Look for the “link” variable near the end bottom of the script. Abbie’s tutorial shows how to get the member ID for your account. You’ll also want to find references to www.dvtwist.com and replace those with your own site. There are probably some other tweaks you’ll need to make since I didn’t write this to be universal.

var link="https://fineartamerica.com/widgetshoppingcart/artwork.html?memberidtype=artistid&memberid=198373&domainid=0&showheader=0&height=20000&autoheight=false"
+gallery_category+gallery_tag+gallery_format;

Now that you know what you can do with it, here’s the code:

<script>
// POPUP STORE NEEDS TO HAVE ITS OWN PAGE SO A TEMPLATE THAT DOESN'T INCLUDE HEADERS AND FOOTERS CAN BE APPLIED, BUT THE CODE IS THE SAME TO MAKE IT SO I ONLY HAVE TO EDIT ONE SET OF CODE FOR BOTH PAGES. THE PAGE IF POPUP STORE IS "/ps" AND PATH IF ONLINE STORE IS "/os" 

// Get 1st three characters of the store: "/ps" or "/os"
var pageURL=window.location.pathname;
var pageType=pageURL.substring(0,3);
</script>

<script>
// SECTION TO GET ALL VARIABLES FROM THE URL
function getUrlVars() {
   var vars = {};
   var parts = window.location.href;
// Hack to fix location.url problems when photo title starts with a number - title link must include # sign as first character
   if(parts.substr(24,4)=="os/#") {parts = parts.replace("os/#","os/?p=");}
   if(parts.substr(24,4)=="ps/#") {parts = parts.replace("ps/#","ps/?p=");}

   parts=parts.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) {
      vars[key] = value;
   });
   return vars;
}

// Set default format for GALLERY using "+" and ending in "s"
// Set default format for PHOTO USING "-" and NO "S"
// For standard FAA format, set to ""
// Example: var default_gallery_format="canvas+prints";
// Example: var default_photo_format="metal-print";
// Example: var default_photo_format="";

//var default_gallery_format="canvas+prints";
var default_gallery_format="";
var default_photo_format="";

// THE FOLLOWING VARIABLES ARE SUPPORTED:
// p = Photo (The name of the photo from the Pixels URL)
// If your photo URL is https://pixels.com/featured/sea-of-despair-surfer-on-a-wave-in-cayucos-california-darin-volpe.html becomes p=sea-of-despair-surfer-on-a-wave-in-cayucos-california-darin-volpe.html

// f= Format (What FAA calls the "Product")
// Example: https://pixels.com/featured/sea-of-despair-surfer-on-a-wave-in-cayucos-california-darin-volpe.html?product=canvas-print
// Some allowed options are f=canvas-print / f=puzzle / f=weekender-totebag / etc.

// c= Category (What FAA calls "Collections")
// Example: https://pixels.com/profiles/darin-volpe/collections/trains+railroading
// c=trains+railroading

// h= Hunt (I would have used "s" for Search, but that was already taken...)
// Example: https://pixels.com/profiles/darin-volpe/art/otter
// h=otter

var photo=getUrlVars()["p"];
var format=getUrlVars()["f"];
var category=getUrlVars()["c"];
var search=getUrlVars()["h"];

// Adding "vc=1" displays the cart
var viewCart=getUrlVars()["vc"];

// Adding "sl=0" supresses the link back when page is called from another internal page. 
var showLink=getUrlVars()["sl"];
// END SECTION TO GET VARIABLES FROM URL

// SECTION TO CONVERT VARIABLES TO FAA LINK FORMAT
if(category) {
   gallery_category="&galleryname="+category
}
else {
   gallery_category=""
}

if(search) { 
   search=search.replace(/\//g,''); gallery_tag="&tag="+search
}
else {
   gallery_tag=""
}

if(format)
 { gallery_format="&product="+format; }
else if(default_gallery_format!="") {
   gallery_format="&product="+default_gallery_format;
}
else {
   gallery_format="";
}

if(format) {
   photo_format="&product="+format;
}
else if(default_photo_format!="") {
  photo_format="&product="+default_photo_format;
}
else {
  photo_format="";
}
// END SECTION TO CONVERT VARIABLES TO FAA LINK FORMAT

// SECTION TO BUILD FAA LINK FROM VARIABLES
// Show shopping cart if anything is in the "vc" variable
if(viewCart) {
var link = "https://fineartamerica.com/widgetshoppingcart/shoppingcart.html?memberidtype=artistid&memberid=198373&domainid=0&showheader=0&flagwidget=true&widgettype=standard&height=6000"
}

// To do photo page if a photo is passed in the "p" variable
else if(photo) {
   if(photo_format.charAt(photo_format.length-1)=="s") {
      photo_format= photo_format.substring(0,photo_format.length-1);
   }
   var photo_format=photo_format.replace("+","-");
   var link = "https://fineartamerica.com/featured/" + photo + "?" + photo_format + "&memberidtype=artistid&memberid=198373&domainid=0&showheader=0&flagwidget=true&widgettype=standard&height=6000"
}

// If no cart or photo, run with other variables
else {

var link="https://fineartamerica.com/widgetshoppingcart/artwork.html?memberidtype=artistid&memberid=198373&domainid=0&showheader=0&height=20000&autoheight=false"
+gallery_category+gallery_tag+gallery_format;
}
// END SECTION TO BUILD FAA LINK FROM VARIABLES
</script>

<script>
// SECTION TO SHOW LINK BACK TO REFERRING PAGE

function toTitleCase(str) {
    str = str.toLowerCase().split('-');
    for (var i = 0; i < str.length; i++) {
        str[i] = str[i].charAt(0).toUpperCase() + str[i].slice(1);
    }
    return str.join(' ');
};

// If the URL includes "sl=0" OR the page is "/ps" (popup store) do nothing, else show a link to referrer
// If the referrer is not www.dvtiwst.com set showLink to "0" so we never refer back to another host
// If the referrer is "https://www.dvtwist.com" with nothing after it we don't show link
// Page title to display is built from URL so it won't be exact


if(document.referrer == "https://www.dvtwist.com/") { showLink = "0" }
var fromDVTwist = document.referrer.split('/')[2];
if(fromDVTwist != "www.dvtwist.com") { showLink = "0" }

if(showLink =="0" || pageType == "/ps") {
// This displays nothing if either the showlink variable is "0" or if it's a popup store.
}
else {
   var referrer = document.referrer;
// Strip all variables out of referrer URL
   qPos = referrer.indexOf("?");
   if(qPos > 0 ) {   referrer = referrer.substr(0,qPos);}
   var pageTitle = referrer.substring(0, referrer.length-1);
   var pageTitle = pageTitle.substring(pageTitle.lastIndexOf("/") + 1);
   var pageTitle = toTitleCase(pageTitle);
   document.write("<a href="+referrer+">Return to \""+pageTitle+"\"</a>");
}
// END SECTION TO SHOW LINK BACK TO REFERRING PAGE
</script>

<script>
// This sets the size of the browser windows so the embedded store is small enough to fit
var viewportHeight = window.innerHeight; // Get height of browser window
var headerHeight=250; // Get height of top header/main menu section

var frameHeight = "nothing"; // Declare variable?
if (pageType == "/ps") { frameHeight=viewportHeight+"px"; }
if (pageType == "/os") { frameHeight=viewportHeight-headerHeight+"px"; }
</script>

<script type="text/javascript" src="https://fineartamerica.com/widgetshoppingcart/widgetscripts.php"></script>

<script>
document.write('<iframe id="pixelsshoppingcartiframe" src='+link+' style="display: inline-block; width: 100%; max-height: '+frameHeight+'; height: '+frameHeight+'; border: none; overflow: hidden;" onload="window.scrollTo(0,0);" )=""></iframe>');
</script>

10 Comments

  1. Shawn Boyle

    This is a great script. I’m going to integrate the code into the site I’m building now. I did make a couple small modifications. So now, on a category, it can load with the sort feature ( bestsellers, recent uploads, etc ). Also, instead of using the slug, “/os”, it’s changed to “/gallery”, which I thought was better and easier for visitors to remember.

    1. I ordered a t-shirt by creating a buyer account to see what the experience would be for someone who is not a seller. It was actually kind of weird. The return address was something like S. Brothers Co. (No FAA or Pixels return address) – I don’t know if that was just because it was a shirt – and the packing list was Pixels. I also get a regular Pixels.com emails promoting Pixels. Those emails do occasionally have a “new items from artists you’ve purchased from” that includes my new photos.

  2. Duminda

    Thank you for sharing this great piece of code. It worked like a charm when embedding FAA’s prints shopping cart to my website.

    I am now trying to figure out a way to use the same code to embed their image licensing shopping cart (https://licensing.pixels.com). Any idea which parts of the code need be changed to get that working?

  3. Carol Henrichs

    Thank you! Thank you for being so generous and sharing your code.
    This is exactly what I was looking for!
    Like Duminda, I’m searching for a way to adapt this for use on the licensing site too, but this is going to allow me to reduce the storage used on my webhost by serving photos from FAA.

Leave a Reply to KJ Cancel reply

Your email address will not be published. Required fields are marked *