Ranking supermarket page modules

Edit the titles and comment in the top page
Supermarket 1 Subtitle or slogan Use the mouse on the graph bellow for more details

Put the right values to the graph
The graph is configured trough the javascript in the page. Bellow is the full graph and then explanations of what you have to change. Explanations are between /* and */ in CAPITAL LETTERS



$(document).ready(function {

var rrBarcolor = '#8765d6'; /* HERE YOU DEFINE THE COLOR OF THE BARS IN THE CHART */

var chart = new Highcharts.Chart({  chart: {      renderTo: 'rrGraphWindow',      defaultSeriesType: 'column',      margin: [20, 20, 20, 50] /* THIS DEFINES THE MARGINS, IMPORTANT TO RECONFIGURE IN PLANET 3 */   },   title: {      text: 'Criteria', 					      style: {			display: 'none' // center it			}   },   xAxis: {      categories: [         ' '      ]   },   yAxis: {      min: 0,      title: {         enabled: false      },      labels: {						style: {							color: '#CCC'							},						formatter: function {                                return this.value +' %';                        }					},						max: 100   },   credits: {		enabled: false	},   legend: {   	  enabled: false,      layout: 'vertical',      backgroundColor: '#FFFFFF',      style: {         left: '100px',         top: '70px',         bottom: 'auto'      }   },   tooltip: {      formatter: function {         return ''+ this.series.name +' '+ this.x +': '+ this.y +' %'; }  },   plotOptions: { column: { pointPadding: 0.9, borderWidth: 0, groupPadding: 0.02 }  },        series: [{ name: 'Política de compra e venda de peixe', /* CHANGE THIS VALUE TO THE 1ST CRITERIA */ data: [49.9] /* THIS IS THE VALUE (PERCENTAGE) OF THE SUPERMERARKET IN THIS CRITERIA */

}, {     name: 'Retirar os produtos insustentáveis', /* CHANGE THIS VALUE TO THE 2ND CRITERIA */ data: [83.6]

}, {     name: 'Apoiar os produtos sustentáveis', data: [48.9]

}, {     name: 'Traçabilidade dos produtos', data: [42.4]

}, {     name: 'Etiquetagem dos produtos', data: [22.4]

}, {     name: 'Venda de espécies da Lista Vermelha', data: [23.4]

}, {      name: 'Transparência e informação', data: [23.4]

}  ],   colors: [ rrBarcolor, rrBarcolor, rrBarcolor, rrBarcolor, rrBarcolor, rrBarcolor, rrBarcolor ] });

});

Define location of the supermarket logos
The images are defined in the following html. This should be properly configured once, then just copy/paste. All images should have 50x70px

     

Translate navigation criteria names
This criteria names are the same as the main page, so just copy/paste

 Pol&iacute;tica de compra e venda de peixe</a></li> <li>Retirar os produtos insustent&aacute;veis</a></li> <li>Apoiar os produtos sustent&aacute;veis</a></li> <li>Tra&ccedil;abilidade dos produtos</a></li> <li>Etiquetagem dos produtos</a></li> <li>Venda de esp&eacute;cies da Lista Vermelha</a></li> <li>Transpar&ecirc;ncia e informa&ccedil;&atilde;o</a></li> </ul>

Add the lead for this supermarket
Important: If you want to add just the lead, just delete all inside the div, but not the div tags. Then remove the code class="rrExpandable"

<p title="Read more..." class="rrExpandable">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut a sapien. Aliquam aliquet purus molestie dolor. Integer quis eros ut. Sit amet, consectetuer adipiscing elit. Ut a sapien. Aliquam aliquet purus molestie dolor

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut a sapien. Aliquam aliquet purus molestie dolor. Integer quis eros ut erat posuere dictum. Curabitur dignissim. Integer orci. Fusce vulputate lacus at ipsum. Quisque in libero nec mi laoreet volutpat. Aliquam eros pede, scelerisque quis, tristique cursus, placerat convallis, velit. Nam condimentum. Nulla ut mauris. Curabitur adipiscing, mauris non dictum aliquam, arcu risus dapibus diam, nec sollicitudin quam erat quis ligula. Aenean massa nulla, volutpat eu, accumsan et, fringilla eget, odio. Nulla placerat porta justo. Nulla vitae turpis. Praesent lacus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas tortor metus, pellentesque nec, vehicula vitae, suscipit sed, quam. Aenean scelerisque sodales tortor. Sed purus. Curabitur turpis est, bibendum tristique, porttitor tempor, pulvinar vitae, tortor. Nullam malesuada dapibus orci. Vivamus aliquet tempus velit. Curabitur interdum posuere risus. Duis egestas, ipsum sit amet molestie tincidunt, ligula libero pretium risus, non faucibus tellus felis mattis sapien. Ut eu velit at massa auctor mattis. Nam tristique velit quis nisl.

<p class="rrParentHide">Hide this text</a>

Add the texts for the criteria
For each of the criteria edit and change the text bellow. And please note that:

99% Creates a Green 99%

99% Creates an Orange 99%

99% Creates a Red 99%

and

Adds a thumb up (to the best supermarket)

Adds a thumb down (to the worst supermarket)

Of course you should translate the tool tip text "Worst supermarket in this criteria" and "Best supermarket in this criteria"

Criteria 1 99% <p class="rrExpandable">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut a sapien. Aliquam aliquet purus molestie dolor. Integer quis eros ut. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut a sapien. Aliquam aliquet purus molestie dolor. Integer quis eros ut erat posuere dictum. Curabitur dignissim. Integer orci. Fusce vulputate lacus at ipsum. Quisque in libero nec mi laoreet volutpat. Aliquam eros pede, scelerisque quis, tristique cursus, placerat convallis, velit. Nam condimentum. Nulla ut mauris. Curabitur adipiscing, mauris non dictum aliquam, arcu risus dapibus diam, nec sollicitudin quam erat quis ligula. Aenean massa nulla, volutpat eu, accumsan et, fringilla eget, odio. Nulla placerat porta justo. Nulla vitae turpis. Praesent lacus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas tortor metus, pellentesque nec, vehicula vitae, suscipit sed, quam. Aenean scelerisque sodales tortor. Sed purus. Curabitur turpis est, bibendum tristique, porttitor tempor, pulvinar vitae, tortor. Nullam malesuada dapibus orci. Vivamus aliquet tempus velit. Curabitur interdum posuere risus. Duis egestas, ipsum sit amet molestie tincidunt, ligula libero pretium risus, non faucibus tellus felis mattis sapien. Ut eu velit at massa auctor mattis. Nam tristique velit quis nisl. <p class="rrParentHide">Hide this text</a>

Found species
Configure the found species for this supermarket

Create the images and legends
The first step is to make sure you have:
 * 1) The images from the raking properly set up, accordingly to the red list
 * 2) The links to each specific page in the ranking (if you use the International red list template, it works by adding ?id=x to the url)
 * 3) All images are with the main common name as caption and they are sorted alphabetically

Remove the species you have not found for the supermarket
For example removing this code

 <img alt="Atuns" title="Atuns" src="http://static.greenpeace.org/int/flash/campaigns/oceans/ranking_pt/images/peixes/bluefin-tuna.jpg" /> </a> Atuns</a>

would remove tuna from this supermarket page

Configure the send a message to your supermarket
Full code with comments

Is this your supermarket? As a costumer you have the right to ask your supermarket to improve their seafood purchasing policy. Send them an e-mail now!

Send to: <p id="rrEmails" title="Copy this addresses to your e-mail"> first.name@domain.com, second.name@domain.com

<ul> <li>1st example</a></li> <li>2nd example</a></li> </ul> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut a sapien. Aliquam aliquet purus molestie dolor. Integer quis eros ut erat posuere dictum. Curabitur dignissim. Integer orci. Fusce vulputate lacus at ipsum. Quisque in libero nec mi laoreet volutpat. Aliquam eros pede, scelerisque quis, tristique cursus, placerat convallis, velit. Nam condimentum. Nulla ut mauris. Curabitur adipiscing, mauris non dictum aliquam, arcu risus dapibus diam, nec sollicitudin quam erat quis ligula. Aenean massa nulla, volutpat eu, accumsan et, fringilla eget, odio. Nulla placerat porta justo. Nulla vitae turpis. Praesent lacus. Aliquam aliquet purus molestie dolor. Integer quis eros ut erat posuere dictum. Curabitur dignissim. Integer orci. Fusce vulputate lacus at ipsum. Quisque in libero nec mi laoreet volutpat. Aliquam eros pede, scelerisque quis, tristique cursus, placerat convallis, velit. Nam condimentum. Nulla ut mauris. Curabitur adipiscing, mauris non dictum aliquam, arcu risus dapibus diam, nec sollicitudin quam erat quis ligula. Aenean massa nulla, volutpat eu, accumsan et, fringilla eget, odio. Nulla placerat porta justo. Nulla vitae turpis. Praesent lacus. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut a sapien. <script type="text/javascript"> $("#usual1 ul").idTabs; <p id="rrHelpNote">Copy the e-mail addresses and one of the example messages above to your e-mail and tell your supermarket that...

Configure the Updates and Links
Using this module will allow you to add links to blog posts about the supermarket or tweets (one or the other, but not both)

RSS feed version
The address of the RSS feed must be configured on the link bellow and in the file general interaction

Html
Configure the link and the text

Updates and links (RSS):

Subscribe the RSS feed</a>

Javascript in General Interaction
Configure the link and the title


 * - UPDATES AND LINKS RSS MODULE - */

$('#rrUpdatesFeed').gFeed({ 	        url: 'http://links.greenpeace.pt/category/blogues/feed/', 	        title: 'Updates and Links' 	    });

And make sure that in the header there's a script link to the jquery.gfeed.js file

Alternative: Use Twitter module instead of RSS feed module
If you don't have an RSS from a blog to link to you can use Twitter. With the current configuration it grabs the last tweets including a word. In the example bellow the account is "greenpeace" and the word "climate"

Html
Replace the html of the RSS module by:

Updates and links: Follow Greenpeace on Twitter</a>

Javascript
And replace the add the bellow code on the header. The "from:greenpeace" defines the account (For Portugal would be greenpeacept) and the "phrase=Auchan" defines a word that has to be on the tweet to be included. Finally replace "searching twitter..." by the translation in the page language

jQuery(document).ready(function($){

/* UPDATES AND LINKS TWITTER MODULE */ $("#tweetHere").tweet({       count: 3,        query: "from:greenpeace&phrase=Auchan",        loading_text: "searching twitter..."    });

})

What do this percentages mean?
This module is exactly the same in every page. Translate once and copy/paste.

Configure the criteria values
You should also add the hover values for the supermarket the the appropriate supermarket javascript file supermarket1.js, supermarket2.js, supermarket3.js...


 * 1) Define the right percentage for each criteria of this supermarket:  text("99%")
 * 2) Define the right color: rrGreenScore, rrOrangeScore or rrRedScore
 * 3) The code is sorted
 * 4) #rrNavigationCriteria li:nth-child(1) is the first criteria
 * 5) #rrNavigationCriteria li:nth-child(2) is the second criteria

$(document).ready(function{ /* SCORING BY CRITERIA */

function rrClean{ $("#rrScoreCriteria").removeClass("rrGreenScore").removeClass("rrOrangeScore").removeClass("rrRedScore"); $("#rrScoreCriteria").empty;

};

/* li:nth-child(1) Is the 1st criteria, li:nth-child(2) the second */

$("#rrNavigationCriteria li:nth-child(1), #rrTextInGraph div:nth-child(1)").hover(function{		$("#rrScoreCriteria").addClass("rrGreenScore").text("99%"); /* Use addClass rrGreenScore, rrOrangeScore or rrRedScore */	}, function{		rrClean;	});

$("#rrNavigationCriteria li:nth-child(2), #rrTextInGraph div:nth-child(2)").hover(function{

$("#rrScoreCriteria").addClass("rrOrangeScore").text("69%"); /* Use addClass rrGreenScore, rrOrangeScore or rrRedScore */

}, function{ rrClean; });

$("#rrNavigationCriteria li:nth-child(3), #rrTextInGraph div:nth-child(3)").hover(function{		$("#rrScoreCriteria").addClass("rrRedScore").text("39%"); /* Use addClass rrGreenScore, rrOrangeScore or rrRedScore */

}, function{ rrClean; });

$("#rrNavigationCriteria li:nth-child(4), #rrTextInGraph div:nth-child(4)").hover(function{

$("#rrScoreCriteria").addClass("rrRedScore").text("31%"); /* Use addClass rrGreenScore, rrOrangeScore or rrRedScore */

}, function{ rrClean; });

$("#rrNavigationCriteria li:nth-child(5), #rrTextInGraph div:nth-child(5)").hover(function{

$("#rrScoreCriteria").addClass("rrRedScore").text("29%"); /* Use addClass rrGreenScore, rrOrangeScore or rrRedScore */

}, function{ rrClean; });

$("#rrNavigationCriteria li:nth-child(6), #rrTextInGraph div:nth-child(6)").hover(function{

$("#rrScoreCriteria").addClass("rrRedScore").text("19%"); /* Use addClass rrGreenScore, rrOrangeScore or rrRedScore */ }, function{ rrClean; });	$("#rrNavigationCriteria li:nth-child(7), #rrTextInGraph div:nth-child(7)").hover(function{

$("#rrScoreCriteria").addClass("rrRedScore").text("9%"); /* Use addClass rrGreenScore, rrOrangeScore or rrRedScore */ }, function{ rrClean; });	/* END SAYING WICH SPECIES ARE IN WHICH SUPERMARKETS */

});