Step 2 – Create two files called index.html and display.js<\/h3>\n
If you are a Mac user you can do this with TextWrangler<\/a>. You can download TextWrangler from the App store. If you are using Windows, you can use Sublime Text<\/a> instead. In this guide we’ll use TextWrangler. Step 2.b) Create file display.js<\/strong><\/p>\n Here’s how the ‘save as’ window for display.js should look like:<\/p>\n In this step you need to open the files with TextWrangler. display.js file<\/strong>: For display.js copy and paste the following code: Index.html<\/strong> File: For index.html\u00a0copy and paste the following code: NOTE<\/strong>:\u00a0If you are adding the content of the index.html file to an already existing file, please pay close attention to the order of the <link rel=”stylesheet” and <script src= lines at the top and bottom of the file. Their order is important to the functionality of the program.<\/p>\n For this part, go to https:\/\/github.com\/kaimallea\/isMobile<\/a>\u00a0and follow the instructions below:<\/p>\n Here’s how the code pasted into the file isMobile.js should look like:<\/p>\n At this stage your PassDisplay folder should contain five files (display.js, index.html, isMobile.js, pk-pass-display.min.css and pk-pass-display.min.js).<\/p>\n Once you are in the PassDisplay folder again, you can double click on index.html and you will notice that the page is blank. This is normal, as you\u00a0have not supplied a pass id for the program to read yet. In order to do so, please add the following piece of text to your URL and complete the next step:<\/p>\n ?pid=<\/em><\/p>\n You need to have a pass id in order to complete this step. You can find pass id after you create a template and issue passes through\u00a0the PassKit Portal<\/a>. If you don’t have one pass id yet, you can use the following one as a test:<\/p>\n i1BgjTJt6aYL37\u00a0<\/em><\/p>\n So your URL will look something like this:<\/p>\n And here’s an example of how your landing page could look like:<\/p>\n
\nNOTE<\/strong>: From this point onwards, if you are using Windows, each time you read ‘TextWrangler’ please perform the same action with ‘Sublime Text’ or the Windows version of the text editor of your choice.
\nStep 2.a) Create file index.html<\/strong>
\nIn order to create the file index.html follow the instructions below:<\/p>\n\n
\n
![\"Screen](\"https:\/\/dxjl3qy52c1o9.cloudfront.net\/wp-content\/uploads\/2016\/12\/14092122\/Screen-1.png\" "\\"\\"")
<\/h1>\nStep 3 – Copy the following codes in the respective file<\/h3>\n
\n
\n(function (angular, $, isMobile) {
\n\/\/ Main driver of Angular functionality<\/code>
\nangular.module(\"myApp\", [\"pk-pass-display\"])
\n.config([\"$locationProvider\", function($locationProvider) {
\n$locationProvider.html5Mode({enabled:true,requireBase:false});
\n}])
\n.controller(\"passCtrl\", [\"$scope\", \"$window\", \"$http\", \"$location\", passController]);
\n\/\/ This is the function that checks if your pass is valid and what type of device you are using
\nfunction passController($scope, $window, $http, $location) {
\n\/\/ This section checks the end of your url for the pass id
\nvar passId = $location.search().pid;
\n$scope.passId = passId;
\nconsole.log(passId);<\/code>
\n$scope.passDisplayError = passDisplayError;
\n$scope.passDisplayLoaded = passDisplayLoaded;
\n\/\/ The list below contains all of the initial true\/false values that can change in the function
\n$scope.passLoaded = false;
\n$scope.passValid = true;
\nvar bundleLink = \"https:\/\/api-pass.passkit.net\/v2\/passes\/\" + passId + \"\/bundle?static=true\";
\n$scope.passLinkIos = bundleLink;
\n$scope.passLinkPlayStore = \"https:\/\/play.google.com\/store\/apps\/details?id=com.passesalliance.wallet&referrer=\" + encodeURIComponent(bundleLink);
\n$scope.androidIntent = function(){doIntent('pass2u', '\/\/import\/'+ encodeURIComponent(bundleLink), 'com.passesalliance.wallet');};
\n$scope.passLink = encodeURIComponent($location.absUrl());
\nfunction passDisplayError() {
\n$scope.passValid = false;
\n$scope.passLoaded = true;
\n}
\nfunction passDisplayLoaded(pass) {
\n$scope.passValid = !pass.isInvalid;
\n$scope.passLoaded = true;
\n}
\n}<\/code>
\n\/\/ Copy and paste this section directly
\nfunction doIntent(intentScheme, intentCommand, intentPackage) {
\n\/\/ do the intent
\nif (navigator.userAgent.match(\/Android\/)) {
\nvar intentUrl = intentScheme + \":\" + intentCommand;
\nif (\/Chrome[\\\/\\s](\\d+\\.\\d+)\/.test(navigator.userAgent)) {
\nvar versionChrome=new Number(RegExp.$1);
\nif (\/OPR[\\\/\\s](\\d+\\.\\d+)\/.test(navigator.userAgent)) {
\nintentUrl = intentScheme + \":\" + intentCommand;
\n}else if(\/FBAV[\\\/\\s](\\d+\\.\\d+)\/.test(navigator.userAgent)){
\nintentUrl = intentScheme + \":\" + intentCommand;
\nwindow.location = intentUrl;
\n}else {
\nif (versionChrome > 18) {
\nintentUrl = \"intent:\" + intentCommand + \"#Intent;scheme=\" + intentScheme + \";package=\" + intentPackage + \";end\";
\nwindow.location = intentUrl;
\n}
\n}
\n}
\nif ( intentUrl === intentScheme + \":\" + intentCommand) {
\nvar iframe = document.createElement(\"iframe\");
\niframe.style.border = \"none\";
\niframe.style.width = \"0\";
\niframe.style.height = \"0\";
\niframe.setAttribute(\"id\", intentPackage);
\niframe.src = intentUrl;
\ndocument.body.appendChild(iframe);
\n}
\n}
\n}
\n\/\/ detects what kind of device you are using
\n$( document ).ready(function() {
\n\/\/ detect iPhone
\nif (isMobile.apple.phone || isMobile.apple.ipod) {
\ndocument.getElementById(\"ios\").style.display=\"block\";
\nconsole.log(\"ios\");
\n}
\n\/\/ detect android
\nelse if (isMobile.android.phone || isMobile.android.tablet) {
\ndocument.getElementById(\"android\").style.display=\"block\";
\nconsole.log(\"android\");
\n} else {
\n\/\/ show desktop
\ndocument.getElementById(\"browser\").style.display=\"block\";
\nconsole.log(\"browser\");
\n}
\n});
\n})(window.angular, window.jQuery, window.isMobile);<\/code>
\nHere’s how the code pasted into the file dispaly.js should look like:<\/p>\n![\"Screen](\"https:\/\/dxjl3qy52c1o9.cloudfront.net\/wp-content\/uploads\/2016\/12\/14092208\/Screen-2.png\" "\\"\\"")
<\/h1>\n
\n<!DOCTYPE html>
\n<html>
\n<head>
\n<link rel=\"stylesheet\" href=\"https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/3.3.7\/css\/bootstrap.min.css\">
\n<link rel=\"stylesheet\" type=\"text\/css\" href=\"pk-pass-display.min.css\">
\n<\/head>
\n<!--This line allows all of the Angular variables to be included in the rendering of the page-->
\n<body >
\n<!--This section validates your pass and the device your using-->
\n<div class=\"col-xs-12 center download-page\" >
\n<!--Checks that your pass is valid-->
\n<div data-ng-app=\"myApp\" data-ng-controller=\"passCtrl\" data-ng-show=\"passValid\">
\n<pk-apple-pass pass-id=\"{{passId}}\" bg-color=\"#000\" language=\"{{language}}\" on-error=\"passDisplayError()\" on-loaded=\"passDisplayLoaded(pass)\"><\/pk-apple-pass>
\n<\/div><\/code>
\n<!--Checks that your pass is valid and if your device is Ios.--><\/code>
\n<div id=\"ios\" style=\"display:none;\">
\n<!--If your device is Ios then specific button links will be supplied-->
\n<a class=\"button-link\" ng-href=\"{{passLinkIos}}\"><img ng-src=\"include\/images\/{{languageText[language].linkLang}}\/btn-applewallet.png\" alt=\"Add to Apple Wallet\" \/><\/a>
\n<\/div>
\n<!--Checks that your pass is valid and if your device is Android--><\/code>
\n<div id=\"android\" style=\"display:none;\">
\n<!--If your device is Android then specific button links will be supplied-->
\n<div class=\"button-link\" ng-click=\"androidIntent()\"><img ng-src=\"include\/images\/{{languageText[language].linkLang}}\/btn-pass2u.png\" alt=\"Add to Pass2U\" \/><\/div>
\n<a class=\"button-link\" ng-href=\"{{passLinkPlayStore}}\"><img ng-src=\"include\/images\/{{languageText[language].linkLang}}\/btn-googleplay.png\" alt=\"Get it on Google Play\" \/><\/a>
\n<\/div>
\n<!--Checks that your pass is valid and if your device is a desktop using a browser-->
\n<div id=\"browser\" style=\"display:none;\">
\n<!--If your device is a desktop using a browser, you will be shown a QR code-->
\n<div class=\"qr-code\"><img ng-src=\"https:\/\/d1ye292yvr7tf6.cloudfront.net\/images\/barcode.php?m={{passLink}}&f=qr&e=UTF-8&x2=1\" \/><\/div>
\n<\/div>
\n<!--These are all of the javascript libraries needed-->
\n<script src=\"https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.11.2\/jquery.min.js\"><\/script>
\n<script src=\"https:\/\/ajax.googleapis.com\/ajax\/libs\/angularjs\/1.6.0-rc.2\/angular.min.js\"><\/script>
\n<script src=\"https:\/\/momentjs.com\/downloads\/moment-with-locales.min.js\"><\/script>
\n<script src=\"isMobile.js\" charset=\"utf-8\" type=\"text\/javascript\"><\/script>
\n<script src=\"display.js\"><\/script>
\n<script src=\"pk-pass-display.min.js\"><\/script>
\n<\/body>
\n<\/html><\/code>
\nHere’s how the code pasted into the file index.html should look like:<\/p>\n![\"Screen](\"https:\/\/dxjl3qy52c1o9.cloudfront.net\/wp-content\/uploads\/2016\/12\/14092240\/Screen-3.png\" "\\"\\"")
<\/h1>\nStep 4 –\u00a0download the pk-pass-display.min.css \/ pk-pass-display.min.js directly to your files<\/h3>\n
\nIn order to perform this task, please follow the instructions below:<\/p>\n\n
Step 5 – Create isMobile.js file<\/h3>\n
\n
![\"Screen](\"https:\/\/dxjl3qy52c1o9.cloudfront.net\/wp-content\/uploads\/2016\/12\/14092307\/Screen-4.png\" "\\"\\"")
<\/h1>\nStep 6 – Open index.html in your browser<\/h3>\n
Step 7 – Add your pass ID after the =<\/h3>\n
file:\/\/\/xxx\/yyy\/zzz\/passDisplay\/index.html?pid=i1BgjTJt6aYL37<\/em><\/h6>\n
![\"Screen](\"https:\/\/dxjl3qy52c1o9.cloudfront.net\/wp-content\/uploads\/2016\/12\/14092328\/Screen-5.png\" "\\"\\"")
<\/h1>\nNow it’s your turn<\/h3>\n