Sitecore sites language versions overview

Sitecore sites language versions overview

I just created a simple file using plain html, css and javascript to be able to gather all our language versions of our Sitecore web sites on one plain overview page.

This is a great way to be able to visualize and compare all the language versions of your sites on one single web page!

Overview of all the language versions of an enterprise web site.

How does it work?

Select which data source you would like to display; published web (web database) or working content (master). Then copy/paste the desired Sitecore item id to the input field to be able to see the language versions on that item page on all the sites.

This module is
published at the
Sitecore Marketplace.

Setup

Just change this parameter to your content management server address:

var domain='CMS SERVER DOMAIN ADDRESS';

and this one populating the languages you have in your solution:

var languages = ['en','sv-se','da-dk','nb-no','fi-fi','co-uk','en-au','en-us','it-it','de-de','de-at','de-ch','fr-ch','fr-fr','es-es','nl-nl','fr-be']

Features

Responsive web design – adapt to different screen resolutions
One time page load. Changing the input variables does not make the page reload. It just updates
Selectable published data (web database) or working content (master)
Copy/paste the desired Sitecore item id to the input field to be able to see the language versions on that item page on all the sites
Simple to configure code; domain name in a variable, languages in a array list
On hover, the sites are zooming in
Each site is tagged with a badge on top of the iframe to be able to identify
Clicking the badge navigates to the site in a new window

Download code file or copy/paste the code from this source:

<html>
<head>
	<title>Web Sites Overview</title>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
</head>

<body>

<style>
form { width:100%; text-align:center; }
a { text-decoration:none; }
#input { text-align:center; margin:4px 0; }
#sites { margin: 30px 75px; }

.wrap {
	position: relative;
    /*width: 23%; /*32%; /*320px;*/
	min-width:290px;
    height: 220px;
    padding: 0;
    overflow: hidden;
	float: left;
	margin: 2px;
    border: 1px solid #a1a1a1;
    padding: 4px;
	text-align:center;
	background-color:#eee;
	
    -webkit-transition: all 0.5s ease; /* Safari and Chrome */
  	-moz-transition: all 0.5s ease; /* Firefox */
  	-o-transition: all 0.5s ease; /* IE 9 */
  	-ms-transition: all 0.5s ease; /* Opera */
  	transition: all 0.5s ease;
}

.wrap:hover {
    -webkit-transform:scale(1.5); /* Safari and Chrome */
    -moz-transform:scale(1.5); /* Firefox */
    -ms-transform:scale(1.5); /* IE 9 */
    -o-transform:scale(1.5); /* Opera */
     transform:scale(1.5);
	 
	z-index:1000;
}

.frame {
    position: absolute;
    top: 0;
    left: 0;
    width: 1150px; /*1280px;*/
    height: 870px;
    border: 0;
    -ms-transform: scale(0.25);
    -moz-transform: scale(0.25);
    -o-transform: scale(0.25);
    -webkit-transform: scale(0.25);
    transform: scale(0.25);
    
    -ms-transform-origin: 0 0;
    -moz-transform-origin: 0 0;
    -o-transform-origin: 0 0;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
}
body { font-family: sans-serif; background-color:#ccc; margin:0; padding:0; }
h1 { font-size:16px; margin:0 0 4px;}

.badge {
	position: relative;
	border-radius: 50%;
	behavior: url(PIE.htc); /* remove if you don't care about IE8 */
	width: 35px;
	height: 17px;
	padding: 10px 0;
	background-color: #0076b5;
	border: 2px solid #fff;
	color: #fff;
	text-align: center;
	box-shadow: 6px 6px 5px #888;

	font: 16px Arial, sans-serif;
}
.badge > span { color:#ccc; }
.badge:hover {
	top:8px;
	box-shadow: 2px 2px 1px #888;
}

input { width:320px; margin-left:10px; }
#submit { 
    border-radius: 3px;
	border-top:1px solid #fff;
	border-left:1px solid #fff;
	border-right:1px solid #000;
	border-bottom:1px solid #000;
    background: #bdbf00;
	width:100px;
	height:30px;
	margin-left:10px;
	color:#fff;
	padding:4px 10px;
}
input[type="radio"] { width:20px; }

</style>


<form action="/">
	<div id="input">
		<strong>Database:</strong> <input type="radio" name="database" value="web" checked>Web<input type="radio" name="database" value="master">Master
		<span style="margin-left:40px;"><strong>ItemId:</strong> <input id="itemid" type="text" name="address" value="{1273B77D-4393-4711-9302-10BCA73266AA}"></span>
		<span id="submit">Submit</span>
	</div>

	<div id="sites"></div>
</form>

<script>

var domain='CMS SERVER DOMAIN ADDRESS';
var database = document.querySelector('input[name="database"]:checked').value;
var languages = ['en','sv-se','da-dk','nb-no','fi-fi','co-uk','en-au','en-us','it-it','de-de','de-at','de-ch','fr-ch','fr-fr','es-es','nl-nl','fr-be']

var item_parameter = 'sc_itemid=';
var languages_parameter = 'sc_lang=';
var database_parameter = 'sc_content=';

$(document).ready(function() {
	var html = "";
	var urel = "";
	for(var i=0, l = languages.length; i < l; i++) {
		html += '<div id="' + languages[i] + '" class="wrap">';
			url = domain + '?' + languages_parameter + languages[i];
			html += '<iframe class="frame" src="' + url + '"></iframe>';
			html += '<a href="' + url + '" target="_blank">';
				html += '<div class="badge">';
				if(languages[i].substr(-2)=='ch') {
					html += '<span>' + languages[i].substring(0,2) + '</span>';
				}
				html += languages[i].substr(-2);
				html += '</div>';
			html += '</a>';
		html += '</div>';
	}
	$("#sites").append(html);
});

function update() {
  var itemid = $('#itemid').val();

  var database = document.querySelector('input[name="database"]:checked').value;
  
  for(var i=0, l = languages.length; i < l; i++){
	var url = domain + '?' + item_parameter + itemid + '&' + languages_parameter + languages[i] + '&' + database_parameter + database;
	$('#'+languages[i]).find("iframe").attr('src', url);
	//console.log(items[i]);
  }
}

$("#itemid").change(function() {
	update();
});

$('input[type="radio"]').on('click change', function(e) {
	update();
});
</script>
</body>
</html>

Finally you might want an shortcut to the page directly from the Sitecore Start button?

Log in to Sitecore
Switch to the core database by typing &sc_content=core in the url
Create a new Start menu action under the /sitecore/content/Documents and settings/All users/Start menu/Left/ node
Display name: Sites Overview
Icon: Network/32×32/earth_view.png
Tool tip: Compare page on all sites.
Message:

RunExternal(\"http://PATH TO CMS/overview.html\", \"\", \"Network/32x32/earth_view.png\", \"Sites Overview\")

Create a link to a web page under the Sitecore Start Button.

Sitecore 8 Launchpad

In Sitecore 8 I created an launch icon from the Launch pad welcome screen.

Log in to Sitecore
Switch to the core database by typing &sc_content=core in the url
Search for item {11FEE71B-C63E-42C8-9319-8883A9A9DD20} which is under this node sitecore\Client\Applications\Launchpad\PageSettings\Buttons\ContentEditing
Duplicate the ContentEditor-item and name it Sites Overview
Item name: Sites Overview
Text: Sites Overview
Icon: Network/32×32/earth_view.png
Link: ../../../overview.html
OpenNewTab check it