Knowledge Base / FAQ/User Guides

MusicBox - Store Edition (Gdoc Spreadsheet Playlist with Links)

Kevin
posted this on May 10, 2012 08:44

The key steps covered in this article...

After the great reception of MusicBox we had been asked if we could make a playlist but, also allow for links back to your own Amazon or iTunes listed album pages. We took the opportunity to make a few changes along the way to make this all possible in this new Stack element that integrates a playlist, audio player and additional link buttons. However, the killer feature is that this is all controlled and managed from a simple Google Doc (spreadsheet) so you can make changes on the fly without a republish!

Perfect for displaying track samples whether you are a in a band, musician, voice-artist or just want to show off those audio tracks with friends and family.
No coding experience is required all you need to follow are these three easy steps that we cover in more detail with our User Guide.

  • setup a simple list in a Google Docs to your media, artwork and store links
  • Publish your Google document
  • Add the MusicBox Store Stack element to your page with your document key

 

Features:

  • No PHP required
  • integrated mp3 player and playlist
  • create a list in a Google Doc (spreadsheet), changes made in the document update the player track list. You can also share the document with other editors or your clients.
  • support images in the player (can be for each track if you like)
  • Add links to your Amazon, iTunes purchase page
  • additional support for links to CartLoom digital products, a very nice shopping cart made by YabDab
  • looks and plays great in Firefox, Safari, iPad and iPhone

Requirements

  • A public (published) Google doc matching the format we describe in our User Guide
  • MP3 tracks need to be public on the web, if it cannot be opened in a standalone browser window then the player will work correctly.

 

Limitations

  • only one musicbox store-playlist stack in a page for now
  • no mixing in the same page with other MusicBoxes

MusicBox - Google Spreadsheet Log in and Create Spreadsheet (1)

?name=MusicBox_-_Google_Spreadsheet_Log_in_and_Create_Spreads_1.jpg

Before we get into the MusicBox and the Options itself . Let us go over what the playlist configuration file looks like in the Google Spreadsheet

So log into your Google Account and select Drive or if you are using Google Applications then choose Documents.

Log into http://docs.google.com
And Create a New Spreadsheet

MusicBox - Google Spreadsheet Document Structure (2)

?name=MusicBox_-_Google_Spreadsheet_Document_Structure__2_.jpg

So first all we do the following here in our new document do not add additional columns

1. Give it a Title: something meaningful so you know what the document is about when you go back and edit it or share it !

Add Titles to Row 1, the text can be anything you want or even in your own language as we ignore this row when importing . These are purely for allowing you to remember what type of data goes in each column :) when you make edits in the future.

2. First Column = the Artist
3. Second Column = Title of the Track
4. Third Column = location of the mp3 media file , it need to be public on the web, if it cannot be opened in a standalone browser window then the player will work correctly.
5. Fourth Column = price we accept for example 0.99 or for some Europeans 0,99
6. Fifth Column = the actual link you want with the cart , this can be another url , iTunes, Amazon Page or even a CartLoom link
note we only accept Cartloom links like 'https://xxxxxxxx.cartloom.com/cart/add?pid=61261' do not add class or any other html
7. Sixth Column = Cover Art for the track , needs to be a square image minimum of 125x125 pixels

In the Stack option we already have a link to one of our test Spreadsheets loaded with this information. Go ahead and create your own .

Now we are ready to publish the spreadsheet (very important) otherwise MusicBox Store cannot do anything with the stack element in Rapidweaver.

MusicBox - Google Spreadsheet Publish to the Web (3)

?name=MusicBox_-_Google_Spreadsheet_Publish_to_the_Web__3_.jpg

Now we click on Start publishing

MusicBox - Google Spreadsheet Document key (4)

?name=MusicBox_-_Google_Spreadsheet_Document_key___4_.jpg

A handy tip is to check the 'Automatically republish when changes are made ' as shown above, this ensures that any changes you or your document collaborators make are published .

Once you have selected Start Publishing your document key will now be available to use in the MusicBox Store Stack Options.

Keep a note of your key as we will be going back to this in the MusicBox configuration !

Adding the MusicBox Stack element

?name=Adding_the_MusicBox_Stack_element.jpg

After you have successful installed the MusicBox Stack and restarted Rapidweaver.

Create a new Project and Add A Stack Page

Open the Stacks Library and search for 'musicbox' at the time of writing there are only two variations available.

Drag the 'MusicBox Store edition to your Stacks Page

MusicBox Stack element - Edit Mode

?name=MusicBox_Stack_element_-_Edit_Mode.jpg

1. Main Stack with background information
2. MusicBox Configuration options

MusicBox Stack element - Configuration (Store edition)

?name=MusicBox_Stack_element_-_Configuration__Store_edition_.jpg

1. The Google Spreadsheet Document Key that we just created earlier. Before you enter your document key make sure that this field is empty beforehand otherwise MusicBox will not show a playlist.
2. currency symbol
3. Track Title Font color
4. Track Info Font color for Artist name
5. Player /PlayList Background
6. Track Item color
7. Track Playing Color
8. Track Hover Color
9. Buy Text Color ( the hover state take the color you set for the Track Item)

IMPORTANT
You cannot add more than one MusicBox Store per Stacks Page ( we may change this in the future but for now just one Store List in a Page)
If you are having problems with the player ensure that you verify these settings to your Gdoc before opening a Support Ticket and provide a link to a test page too.

MusicBox Stack element - Preview Mode

?name=MusicBox_Stack_element_-_Preview_Mode.jpg

Now you can remotely manage the changes in the playlist without republishing your Rapidweaver page.

Our Sample configuration has tracks linked ot itunes, CartLoom, Amazon

CartLoom Users: You still need to add the additional cart code into your oage for the View cart to work correctly