Add a comment / review system to your store

Printfection does not include any native way for shoppers to leave you comments or provide feedback. Most blogs and websites today have a mechanism for this, and now thanks to a couple of external free services, you too can have this feature in your Printfection store.

The desired outcome

Ideally, what we would like to end up with is an easy to manage system that allows shoppers to leave a comment on the page that they are viewing. The comment would then be moderated by the store owner and then approved for display. We would also want to make sure that there is no possibility of comment spamming.

As a side attraction, it would also be good if we could have the most recent comments displayed in the side bar of our store as well, so that people could see the recommendations and be linked to the product or section being commented on.

The Solution

Web 2.0 is a wonderful thing, with a number of awesome services that can embedded in other websites popping up all over the place. One of these is Intense Debate, a provider of a simple to install commenting system that has been designed to be embedded into a blog or similar websites. The good news is that it can just as easily be added to your Printfection store. The service includes all the moderation, anti spam  and thread management tools that we require. It can even output an RSS feed that we can then use to display recent comments in the sidebar.

You can see it in action here: Ukulele Shirt World

Setting it up

The first thing you will need to do is head on over to Intense Debate and set up an account.

  1. Enter the url of your Printfection Store and press “Get Intense Debate”
  2. Create a new account by entering your details
  3. Click on the Javascript Snippet button
  4. Copy all of the text from the top box and paste it into notepad or something similar for use later and press finish

You will now be at the Intense Debate settings page for the store that you have just set up. You might want to change a couple of settings here under Comment Posting and Email Notifications to further control the way that comments are added.

Adding it to your store

The code that you copied to notepad in step 4 above, needs to be added to the Base HTML of your store. The best place to put it is directly after the ##content## tag. This will put it in the main area of your store below your products and products.

I personally don’t like to have the comments on the Home page of my store, so I put the following HTML into the Home Page HTML section:



<style>
#idc-container {display: none !important}
</style>

It will still appear everywhere else, just not on the front page.

Styling the comments box

Intense Debate has done a great job of adding IDs and class names to all of the generated content, so your options for styling the comments box is good. The main area can be styled using the ID #idc-container:

#idc-container {margin: 10px !important; border: 1px solid #333; padding: 10px !important}

Getting the latest comments

Now that we have the comments system in place, we need to be able to have a display of the latest comments somewhere in our store. This can be accomplished by using the RSS that is generated by Intense Debate together with a TeePlates service that converts RSS for display on your store.

You can find your comment RSS URL by right clicking on the RSS icon on the Overview page of Intense Debate. It will look something like: http://www.intensedebate.com/allBlogCommentsRSS/1955

Once you have that URL you need to fire up the TeePlates RSS to PF builder. It’s pretty simple to use, just enter he RSS url and select the options that you want. As a guide, best results are obtained if you set Show Channel to “No” and Show / Hide Item Descriptions to “100”. Set all the others to taste. You can then preview your feed or generate the code used for embedding the feed into your store.

Style the feed

The feed is very easy to style and will also inherit most of your existing CSS. If you need help styling the feed further, refer to the feed style tool here:  

I would love to see this in action, so if anyone is going to use this, please leave a comment.

 

30.12.2007. 23:18

Casey on 31.12.2007. 12:06

Gavin,

Great idea! I happen to know the Intese Debate folks! They were recent graduates of the TechStars program in Boulder, CO.

LoungeActor on 31.12.2007. 15:53

Hello Gavin - Great tool here. Looks like I have the code correct - yet the comment section still appears only on my main page - and not at all on any other pages - Plus I have a bit of code left behind right above the section designs.....?

Can you see what I omitted?
Thanks

Gavin Smith on 31.12.2007. 17:41

LoungeActor,

The left over bit of code is because you have two tags in your home page HTML. Make sure it matches above.

I can see the comments box on each of your pages, it just is slow to load occasionally.

Greg Wambach on 11.01.2008. 23:11

Gavin,

I love this comment thing, but am lost (as usual) once I generate the javascript via your Teeplates RSS to PF tool where do I put it? Does it go in the HTML section or the CSS section? I would appreciate any help you can offer.

Thank you

Gavin Smith on 12.01.2008. 23:06

javascript goes in the HTML, probably best in the base HTML

Cartesian Bear on 21.04.2008. 16:43

I notice the Intense Debate java code is giving me a comment listing without going through your RSS to PF tool. If I like the way this looks, is there a reason I should use your tool instead?

Gavin Smith on 24.04.2008. 15:44

The RSS tool can be used to put an agregated list somewhere on your site. You don't have to use it.

Sam on 30.07.2008. 08:35

Thanks for sharing this Gavin! TeePlates makes working with my Printfection shop fun, with or without sales! ;)