Kevin
posted this on May 10, 2012 08:44
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.
Features:
Requirements
Limitations
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
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.
Now we click on Start publishing
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 !
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
1. Main Stack with background information
2. MusicBox Configuration options
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.
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