Mashup Helper tutorial

About this document.

This tutorial shows how to use the Mashup Helper in order to create an online store with inventory stored in a Google Spreadsheet. The store will accept payments using Google Checkout.

Step 1: Put some data into a spreadsheet and publish it.

I prepared a sample spreadsheet that we will use for this tutorial.

You can make your own spreadsheet by going to docs.google.com.

To make you own spreadsheet

• Click on this link to make your own copy of my spreadsheet.
• Save the spreadsheet by clicking [Save] button or [Start autosaving] link.
• Publish your spreadsheet by clicking [Share] -> [Publish as a webpage] -> [Publish now]
• Optionally click on [Automatically republish when changes are made] and [Re-publish now]

Step 2: Display the data in a table.

2.1: Specify how to load the information and where to render it.

We specify the place where we want the data to be rendered by placing a <div> element marked with class="data-onload" annotation.

We add id="product-list" attribute so we can refer to this data source later.

We use data-uri="..." annotation on that element to specify the URL of the spreadsheet. You can get the URL by opening the spreadsheet and copying the content of your browser's address bar.

The data-template="product-list-template" annotation refers to the name of the template that we will use to render the data.

The data from our spreadsheet will come back as a list of objects.

Each object corresponds to a row from the spreadsheet and contains name-value pairs. The names correspond to the column names and the values to the values for the named column in that row.

2.2: Specify the template to render the data.

In order to render the data as HTML, Mashup Helper uses OpenSocial Templates. The template is specified inside a <script type="text/os-template" name="product-list-template"> element.

OpenSocial Templates allow us to repeat a snippet of HTML code for each element from a list of objects by using repeat="${list-of-objects}" annotation. Here list-of-objects must be an expression for the list of objects that we want to render. In our case it is simply repeat="${rows}". By placing this annotation on a <tr repeat="${rows}"> element, we will render each row from our spreadsheet in a separate table row.

We insert column names such as ${shortname}, ${price}, ${image}, etc. in places where we want actual values to be inserted. Note how ${image} is used to specify a value of an src attribute.

2.3: Try it!

The complete HTML document that can render our spreadsheet is shown below.

You can see it in action here.

Step 3: Adding a search control

In order to load data from a Google Spreadsheet, Mashup Helper uses Google Spreadsheeds GData API list-based feed.

The only thing that you need to know about the list-based feed at this point, is that it supports a search parameter q=some keywords. This parameter instructs the API to return only records matching the specified keywords.

Lets create a search control. We want to control the parameter named q on the datasource specified by id="product-list".

In order to do so we will add an input <input> element to the page, annotate it with data-control="product-list" attribute and name="query-q" attribute.

You can see it in action here.

Step 4: Adding Google Checkout shopping cart

In order to enable Google Checkout shopping cart we need to annotate our template with product keywords and specify a place where we want to have the add-to-cart button located.

In the template fragment below, please note class="product", class="product-xxxx" and class="googlecart-add-button" annotations. They tell the shopping cart script where to find information about the product that the shopper wants to add to the shopping cart.

We also need to add the cart's script tag.

You can see it in action here.

Please note that the mid=801947958809860 parameter in the script above specifies a Google Checkout merchant account. You will need to replace it with your own Merchant ID.

For details about Google Checkout shopping cart please refer to this detailed tutorial.

Resources.

For more information about:

• Google Checkout shopping cart go here.
• Google Spreadsheeds GData API go here.