Store API

by Laura Kishimoto

HTML

<link rel="stylesheet" href="http://images.mec.ca/media/css/mec_styles_v1_m56577569831289067.css">
<div id="storepage" class="fr-CA">
<hr class="shadow460">

<div id="storehours">
<h2 class="services smallMargin">Opening Hours</h2>
<ul></ul>
</div>

<div class="spacer"></div>
<hr class="shadow460">


</div>

CSS

* { text-align: left; max-width: 460px; }
.clear { clear: both; }
.subtext { font-weight: normal; font-size: 11px; }
.nomargin { line-height: 100%; }

/*===========================
    Store: hours
===========================*/

#storehours { padding-bottom: 10px; }
#storehours ul { margin: 5px 0 10px 0; padding: 0; list-style: none; }
#storehours li { font-weight: bold; margin: 0; padding: 3px 8px; }
#storehours li:nth-of-type(odd) {  background-color: #F3FBF4; }
#storehours li span { font-weight: normal; }

/*===========================
    Store: location
===========================*/

#storelocation { margin-bottom: 15px; }
#storeaddress { width: 47.826086956%; float: left; }
#storedirections { width: 47.826086956%; float: right; }
#storeparking { clear: both; padding: 10px 0; }
#storedirections li a, #storedirections li a:hover { border: 0; width: 50px; display: inline-block; }
#storelocation iframe { width: 100%; height: 300px; }

JavaScript

// checks if page is on the FR site
function isfrench() {
    return $('.fr-CA').length;
}

function next7days(regularhours) {
    var storeday = new Date();
    var next7days = [];
    for (var i = 0; i < 7; i++) {
        var dayofweek = (storeday.getDay() + 6) % 7;
        next7days[i] = regularhours[dayofweek];
        next7days[i].date = storeday.setDate(storeday.getDate() + 1);
    }
    return next7days;
}

// add time in readable format [REMOVE LEADING ZERO]

function parsetime(rawtime) {
    var splittime = $.trim(rawtime).split(":");
    if (isfrench()) {
        if (splittime[1] == '00') {
            splittime[1] = '';
        }
        return parseInt(splittime[0], 10) + "&nbsp;h " + splittime[1];
    }
    else {
        var hour = splittime[0] % 12;
        return hour + ":" + splittime[1] + (splittime[0] < 12 ? 'am' : 'pm');
    }
    return enmonths[month];
}

function storeinfo(data) {

    // friendly variable names
    var regularhours = data[0].hours.regular_hours;
    var holidayhours = data[0].hours.holiday_hours;

    if (data) {

        var enday = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];
        var enmonth = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
        var frday = ['lundi', 'mardi', 'mercredi', 'jeudi', 'vendredi', 'samedi', 'dimanche'];
        var frmonth = ['janvier', 'février', 'mars', 'avril', 'mai', 'juin', 'juillet', 'août', 'septembre', 'octobre', 'novembre', 'décembre'];


        next7days(regularhours);

        for (var i = 0; i < next7days.length; i++) {
            if (isfrench()) {
                $('#storehours ul').append('<li>Test - ' + next7days[i].date + '<span class="flright">' + parsetime(next7days[i].open_time) + ' &agrave; ' + parsetime(next7days[i].close_time) + '</span>' + '</li>');
            }
            else {
                $('#storehours ul').append('<li>' +...