Home

Get Started

The simplest way to get started with Juice is to add it to a user interface.  So let's step through it here.

Prerequisites

Firstly, you need a web page or web site that you can access the html code to edit.  This doesn't necessarily mean that you need full editing capability.  The minimum you need is the ability to add a small snippet of html in to the header or the body of the page.

 Secondly, you need a web server where you can load the JavaScript code that Juice uses.  In preference this would be the same server that serves your web site.  If that is not possible you may use an alternative server, but it is recommended that such a server should have a performance profile at least as good as your main server so as not to impact on performance.  Amazon S3 storage has proved to perform well in this regard.

The Steps 

  1. Get Juice - follow the simple instructions on the Get Juice page to download the latest version of the Juice zip file.
  2. Unzip the file and upload the files it contains to your chosen web server, placing them in a suitable directory below the web server root directory such as /js.  The rest of these instructions will assume that you use this location.
  3. Copy the example_extend.js file from the examples directory of the Juice installation in to the /js directory, giving it a name that is relevant to your installation such as extend_my_interface.js for instance.
  4. Edit the extend_my_interface.js file to uncomment some of the entries to, initially, just enable the ExtendedByJuice Extension. Thus: 

    //example_extend.js

    //Example localised Juice extention file

    //Replace all references to {mySite} with url to where Juice is hosted for your site and uncomment lines.

    jQuery(document).ready(function () {

    juice.setDebug(false);

    // juice.loadCss("http://{mySite}/js/juiceDefault.css");

    // juice.loadJs("http://{mySite}/js/juiceOverlay-0.3.js");

    // juice.loadCss("http://{mySite}/juiceOverlay.css");

    juice.loadJs("/js/extensions/extendedbyJuice.js");

    // juice.loadJs("http://{mySite}/js/extensions/GoogleAnalytics.js");

    juice.onAllLoaded(runExtensions);

    });

     

    function runExtensions(){

    new extendedbyJuice(juice);

    // Replace UA-XXXXXXX-XX with your Google Analytics ID(s) - comma separated if there is more than one

    // new gasJuice(juice,"UA-XXXXXXX-XX");

    }

     
  5. Next we need to edit the Juice script calls in to your web page.  Below are the three lines you need to add to your page.  You can insert them anywhere, but by preference insert them as near the end of the page as possible.

    <script type="text/javascript" src="/js/jquery-1.3.2.min.js"></script>

    <script type="text/javascript" src="/js/juice.js"></script>

    <script type="text/javascript" src="/js/extend_my_interface.js"></script>

  6. Refresh your browser and you should see 'Extended by the Juice Project' appended to your page.

For more product specific examples check out the following: