juice-project.org

Prism 3 is a hosted catalogue solution which uses a themes system for adjusting its look and feel. To add Juice to a Prism theme, you will need to do the following:

• Download a copy of your current theme
• Add the Juice files to your theme in a sub-folder
• Re-upload your new theme

All Prism tenancies have a sandbox, a copy of your catalogue that is designed to experiment with new customisations. It is recommended you make any modifications there first and then copy the theme across to the main tenancy when complete.

Downloading Your Current Theme

1. Go to the Prism admin site and log in using your customer details.
2. Click on the link to the tenancy you wish to modify (your sandbox in the first instance).
3. Click the theme link.
4. Click the Download Theme Backup button.
5. Save the download on your machine
6. Unzip the contents of the theme file to a working location so you can edit them.

Adding Juice Scripts

Before you can add the scripts you will need to download a copy of the latest version. This is currently version 0.7. It can be found on the downloads page.

You will also need a text editor to edit the file. Notepad will do, though ideally a web editor of some kind (NOT MS Word as this may cause issues with the file later on).

Follow these steps:

1. Create a folder called js in the theme folder.

Unzip the Juice download into the js folder. So the structure looks as follows (folders in square braces):

[theme]
  [js]
    [examples]
    [extensions]
    [metadefs]
    [panels]
    jquery-1.4.4.min.js
    juice.min.js
    juiceDefault.css
  footer.html
  header.html
  headerlinks.html
  homepage.html

You may see additional files or folders, but these are the essential ones to get Juice working!

2. Create a extend file for your catalogue

Copy the file /examples/talis-prism/extend-simple.js to the js folder and rename it to extend_my_prism.js.

Open up the footer.html theme file. It should look like this:

<div class="footerStyle">
    Powered by <a href="http://www.talis.com/prism/">Talis Prism</a>
</div>

Append the new lines in bold to the file:

<div class="footerStyle">
    Powered by <a href="http://www.talis.com/prism/">Talis Prism</a>
</div>
<!-- Juice 0.7 Warning! Removing the following will disable Juice Extensions -->  
<script type="text/javascript" src="assets/-/js/jquery-1.3.2.min.js"></script>  
<script type="text/javascript" src="assets/-/js/juice.js"></script>
<script type="text/javascript" src="assets/-/js/metadefs/talis_prism_metadef.js"></script>
<script type="text/javascript" src="assets/-/js/extend_my_prism.js"></script>

3. Save the file.

Note the src attribute uses the Prism convention for addressing files stored in the tenancy theme. You do not need the full url as Prism has a base url set for your tenancy and will prepend it to file names. Note also that if you are already using jQuery to add scripting to your tenancy you do not need the

Re-Uploading the Theme

1. Create a Zip archive of the contents of your local working theme folder (not the folder itself).
2. Go to the Prism admin site and log in using your customer details.
3. Click on the link to the tenancy you wish to modify (your sandbox in the first instance).
4. Click the theme link.
5. Scroll down and click the Replace File with Zip button.
6. Find your new theme zip file and select it.
7. Click the Upload File button.
8. Run  resettenantcache on your tenancy
9. Browse the tenancy home and check the theme is working and "Extended by Juice" appears in the footer.
10. Grab a cup of tea to celebrate!

Juice 0.7 should now be working! To modify and add new extensions follow the same steps again. You should only need to edit the extend_my_prism.js file from here on in...

Note: Some extensions require a Google API key, you can get one from the Google Loader site.