spree_pinterest is a Spree extension for adding a Pinterest Pin it
button to your Spree store. Install it by adding it to your Gemfile.
The last project I worked on, the client needed shopping cart capabilities added to thier site. I chose to use the open-source Spree shopping cart Rails engine.
Spree is a great piece of software that doesn’t try to cover every edge case in the e-commerce world. It provides what 98% of most sites need to run an online store. The last project I worked on fell within the other 2% though, and I had to heavily customize it for that particular project. I’ll save those customizations for another post.
Creating a Pin it button
Pinterest provides the instructions for adding a Pin it button on their website. It basically consists of two parts:
link to an
IFRAME which contains the newly-rendered link styled as a button.
Not sure of the reason for the
IFRAME. I honestly didn’t dive in to how
pin_it.js script actually works.
when I ran the
spree extension command:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22
Next, we need to add the link to our views that will get converted to the Pin it buttons. For this extension I decided to add two buttons. One for each image on the products index view just to the left of the price, and one directly under each image on the products show view.
First, I created a helper method that would generate the link:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28
There are two mandatory, and one optional pieces of information you need
to supply in the
href of the link:
- url (mandatory) - This is the product page URL
- media (mandatory) - This is the URL to the image which is being
pinned. In the event you’ve specified an
asset_hostfor your app, or you are using S3 with paperclip, the URL will be used as is. If not, the
urlmethod from paperclip will only be a path, so the helper will prepend the protocol and host.
- description (optional) - This is the description that will be used in the pin
You can see the values being used for each of the variables in lines 6-8 above.
Now we need to add the links to the views. For this I used a Deface override. I created one override file that contains two Deface overrides, one for each view:
1 2 3 4 5 6 7 8 9
For more information on Deface, check out the Using Deface section of the Spree Guides referenced above, and also take a look at the project on GitHub.
I used CSS to postion the button to left of the product price on the index view, and directly under the image on the show view:
1 2 3 4 5 6 7 8 9
I had to use
iframe in the CSS to position the button, not
turns the link into an
That’s it! The extension is complete. Here is what the Pin it button looks like in the default Spree theme:
If you are interested in using the
spree_pinterest extension, just include the gem in your Gemfile.
Also, the extension’s source code is available to browse.
Thanks for reading!