Sjoerdjanssenen
1/2/2017 - 10:30 PM

Checks AirPod store availability by using JavaScript to query Apple's servers. Created with Textastic and works great with its built-in web

Checks AirPod store availability by using JavaScript to query Apple's servers. Created with Textastic and works great with its built-in web preview. Uses YQL and JSONP to work around JavaScript's same origin policy. Inspired by https://gist.github.com/omarshahine/f8eb4598af4f1767ab1a9f01662e74b1

airpod_availability.html
content_copyfile_download
<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
    <title>Check AirPod availability in Apple Stores</title>
    <style>
        body {
            font-size: 12px;
            font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
            padding: 1em;
        }
        
        table {
            max-width: 100%;
            width: 500px;
            text-align: left;
            border-collapse: collapse;
            border: 1px solid #69c;
            margin-bottom: 1em;
        }
        
        table th {
            padding: .5em;
            font-weight: normal;
            font-size: 1.1em;
            color: #039;
            border-bottom: 1px solid #69c;
        }
        
        table td {
            padding: .5em;
            color: #669;
            font-size: 1em;
        }
    </style>
    <!-- using jQuery to easily make JSONP calls -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script>
        function insertHeaderRow(thead, text) {
            var row = thead.insertRow(-1);
            var th = document.createElement("th");
            th.innerHTML = text;
            th.colSpan = 2;
            row.appendChild(th);
        }

        function insertRow(tbody, text1, text2) {
            var row = tbody.insertRow(-1);

            var cell1 = row.insertCell(0);
            cell1.innerHTML = text1;
            var cell2 = row.insertCell(1);
            cell2.innerHTML = text2;
        }


        function checkZipCode(country, zip, partnum) {
            var table = document.createElement("table");
            document.body.appendChild(table);

            var header = table.createTHead();
            var tbody = table.createTBody();

            insertHeaderRow(header, "Checking AirPods for " + country.toUpperCase() + ", " + zip);

            // the JSON url to get
            // see http://brianbrunner.com/2016/09/20/iphone-pickup.html for details
            var url = "http://www.apple.com/" + country + "/shop/retail/pickup-message?parts.0=" + partnum + "&location=" + zip;
            // use YQL (Yahoo! Query Language) to circumvent JavaScript cross origin limitations
            var yql = 'http://query.yahooapis.com/v1/public/yql?q=' + encodeURIComponent('select * from html where url="' + url + '"') + '&format=json&callback=?';

            //console.log(url);

            // use JQuery to make a JSONP call to YQL
            $.getJSON(yql, function(data) {
                var json = data.query.results.body.content;
                var obj = JSON.parse(json);

                obj.body.stores.forEach(function(store, index) {
                    var availability = store.partsAvailability[partnum].storePickupQuote;

                    insertRow(tbody, store.city, availability);
                });
            });
        }


        function checkAvailability() {
            checkZipCode("us", "98112", "MMEF2AM/A");
            checkZipCode("de", "60313", "MMEF2ZM/A");
        }
    </script>
</head>

<body onload="checkAvailability()">
</body>

</html>