a custom etsy shop for your website

So, for the last couple of days, I’ve been working on a coding project for Proton Paperie & Press — getting a custom shop set up on www.protonpaperie.com. I use etsy for most of my sales these days — they provide a great e-commerce platform with built in traffic, so I didn’t want to change that… but I did want customers visiting my website to be able to see everything I sell there easily. I wanted an easy method that would update my website automatically anytime I changed a listing through etsy….

Luckily, etsy provides an api that’s great for this! Getting this set up does take a little bit of coding knowledge, but it’s nothing too scary. In fact, I knew nothing about accessing apis or writing jQuery 2 days ago, but my shop is up and running beautifully (click below to check out the live version):

Screen Shot 2015-02-20 at 11.34.06 AM

Interested in adding this to your website?

1) Sign up for the etsy api here.

This gives you a personal api_key that is used to access your listing information.

2) Learn a little jQuery.

This step is optional if you just want to copy exactly what I’ve done… but, I think it will be really beneficial if you understand a bit of what’s going on, especially if you don’t have a coding background! I highly recommend codecademy.com’s free course on jQuery. It shows you how HTML, CSS, and jQuery work together to produce lots of cool effects. If you know nothing about HTML or CSS, they also have a course for that! If you don’t know any coding at all (things like loops, if statements, etc), the JavaScript course is also useful!

3) Write code for your shop.

Or copy mine! I’ll walk you through the steps below.

Please note, my website is hosted with SquareSpace, which basically means they take care of all the CSS for me (all the colors, fonts, styling, etc); so, I won’t be addressing that in this tutorial… the shop is perfectly functional without it, just a bit ugly!

First, you need to add a link to the jQuery library to the <head> section of your website. In SquareSpace, they offer a place to inject code into the header, under advanced options. It’s easiest and fastest to let Google handle this for you:


<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>

Everything else will go into the <body> section. In SquareSpace, this is done using a HTML type code block when editing any page.

First, create a <div> that will hold your shop. It needs an ID to separate it from any other divs hanging out on your site:


<div id="shop">
    <!-- this div will hold everything!! -->
</div>

Now the fun part! All of the following stuff would be stuck within
<script type="text/javascript"></script> tags, again inside the <body> of your HTML.

I’m going to break it up into sections to explain everything, but head to jsfiddle if you’d like to run it all together (fork or update from there to play around with it):


// just setting some variables...
var api_key = "your api key here!";
var shop_name = "your shop name here!";

var imgPadding = "15px";

Just put the api_key that etsy gives you in the first variable, and your shop name in the second. The imgPadding bit adjusts the space around your listings. You can change the variable above to make it larger or smaller.

This next function does most of the heavy lifting. We’re going to call it a few times later, once for each section of our shop. Basically, for a given shop section, it finds all the associated listings, grabs the listing picture and turns it into a link back to etsy. It also displays the prices below the listings. Finally, it does a cool effect when someeone hovers over a product — it reduces the opacity a little bit!

// this function adds all the listings with a particular shop_section_id to the website
function populateSection(shopSectionID) {

    $.ajax({
        url: "https://openapi.etsy.com/v2/shops/" + shop_name + "/listings/active.js?api_key=" + api_key + "&includes=MainImage&fields=url,price,title,shop_section_id,description&limit=100",
        dataType: 'jsonp',
        success: function (resp) {

            //display listing images as links
            for (i = 0; i < resp.results.length; i++) {
                if (resp.results[i].shop_section_id === shopSectionID) {
                    //don't show prices:
                    //$("#" + shopSectionID).append('<div style="display: inline-block"><a target="_blank" href="' + resp.results[i].url + '">' + '<img class="pullImg" style="padding:' + imgPadding + '" src="' + resp.results[i].MainImage.url_170x135 + '"</img></a></div>');
                    //show prices:
                    $("#" + shopSectionID).append('<div style="display: inline-block"><a target="_blank" href="' + resp.results[i].url + '">' + '<img class="pullImg" style="padding-top:' + imgPadding + ';padding-left:' + imgPadding + ';padding-right' + imgPadding + '" alt="' + resp.results[i].description + '" src="' + resp.results[i].MainImage.url_170x135 + '"></img></a><center>$' + resp.results[i].price.slice(0, -3) + '</div>');

                }
            }

            // slight opacity fade on mouse over
            $(".pullImg").hover(function () {
                $(this).fadeTo('fast', .7);
            },

            function () {
                $(this).fadeTo('fast', 1);
            });
            // end opacity fade

        },
        //end success block
    });

}

If you don’t want to show the prices, there’s code for that too… just comment out the “show prices” line and remove the commenting from “don’t show prices.” It’s also written to strip the ending (.00) from each price. Remove the “(.slice(0, -3)” if you’d like to show decimal points.

The next function is the shop builder — it looks at the organization of your shop and creates a section on your website to match each section in your shop.

// this function pulls information on how your shop is organized into sections. It creates an area for each section and then populates it with the right listings (by calling the above function)!
function createSections() {
    $.ajax({
        url: "https://openapi.etsy.com/v2/shops/" + shop_name + "/sections.js?api_key=" + api_key,
        dataType: 'jsonp',
        success: function (resp2) {
            for (i = 0; i < resp2.results.length; i++) {
                $('#shop').append("<h2>" + resp2.results[i].title + "</h2><div id=" + resp2.results[i].shop_section_id + "></div>");
                populateSection(resp2.results[i].shop_section_id);
            }
        }
    });
}

Finally, we need to actually call those functions!

// this is the bit of code that starts everything in motion!
$(document).ready(function () {
    //create sections
    createSections();
});

I should note that if your shop isn’t organized into sections, or you don’t have all your listings in sections, you’ll need to do a little tweaking to make this work. It’s not hard — just (1) call the populateSection function instead of createSections(), (2) replace (“#” + shopSectionID) with (“#shop”) in a couple places in the populateSection function, and (3) comment out the if statement relying on knowing the shop_section_id (don’t forget to comment out the closing bracket too!). Like this!

Happy selling! Let me know if you found this useful, I’d love to check out your shop!

Advertisements

One thought on “a custom etsy shop for your website

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s