App Store API integration

Author: emilbaehr

_config.yml

@@ -7,14 +7,14 @@ app_description     : Wherever some that and kiwi that well
                       one aside canny one preparatory up less therefore 
                       hello oh amid goodness checked.
 app_price           : 4.99
-ios_app_id          : 912209541
+ios_app_id          : 
 android_app_id      :
 
 # Icon, screenshot and header image
-app_icon            : /assets/appicon-1024px.png
-app_video           : /assets/video.mp4
-app_screenshot      : /assets/screenshot.png
-header_image        : /assets/headerimage.png
+app_icon            : ../assets/appicon-1024px.png  # Will automatically populate if you have set the iOS app id.
+app_video           : # ../assets/video.mp4         # Uncomment and replace with path to app preview video. Optimal resolutions: 1242x2688 or 1125x2436.
+app_screenshot      : ../assets/screenshot.png      # Will automatically populate if you have set the iOS app id.
+header_image        : ../assets/headerimage.png     # Replace with custom background image or link to background image.
 
 # Social Links
 facebook_username   : 

_includes/appstoreimages.html

@@ -0,0 +1,28 @@
+<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
+
+{% if site.ios_app_id %}
+
+<script>
+
+$(function() {
+
+    var apiURL = "https://itunes.apple.com/lookup?id={{ site.ios_app_id }}&callback=?";
+
+    $.getJSON(apiURL, function(json) {
+
+        if (json.results && json.results.length) {
+
+            console.info("Image strings loaded from Apple API.");
+            var appInfo = json.results[0];
+
+            $(".headerIcon").attr("src", appInfo.artworkUrl512);
+            $(".appIconLarge").attr("src", appInfo.artworkUrl512);
+            $(".iphoneScreen").attr("src", appInfo.screenshotUrls[0]);
+
+        }
+    });  
+});
+
+</script>
+
+{% endif %}

_includes/head.html

@@ -8,4 +8,5 @@
 	<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
 	<link rel="stylesheet" href="{{ "/css/main.css" | prepend: site.baseurl }}">
 	<link rel="canonical" href="{{ page.url | replace:'index.html','' | prepend: site.baseurl | prepend: site.url }}">
+
 </head> 

_includes/header.html

@@ -9,7 +9,7 @@
 					</clipPath>
 				</defs>
 			</svg>
-			<img class="headerIcon" src="/assets/appicon-1024px.png">
+			<img class="headerIcon" src="{{ site.app_icon }}">
 		</div>
 		<p>{{ site.app_name }}</p>
 	</div>

index.html

@@ -21,12 +21,12 @@
 					</svg>
 					{% if site.app_video %}
 						<div class="videoContainer">
-							<video poster="/assets/Screenshot.png" autoplay="autoplay" controls="controls">
+							<video autoplay="autoplay" controls="controls">
 								<source src="{{ site.app_video }}" type="video/mp4">
 							</video>
 						</div>
 					{% else %}
-						<img class="iphoneScreen" src="site.app_screenshot">
+						<img class="iphoneScreen" src="{{ site.app_screenshot }}">
 					{% endif %}
 				</div>
 				<div class="appInfo">
@@ -38,7 +38,7 @@
 								</clipPath>
 							</defs>
 						</svg>
-						<img class="appIconLarge" src="/assets/appicon-1024px.png">
+						<img class="appIconLarge" src="{{ site.app_icon }}">
 					</div>
 					<div class="appNamePriceContainer">
 						<h1 class="appName">
@@ -60,6 +60,7 @@ <h2 class="appPrice">
 				</div>
 				{% include features.html %}
 				{% include footer.html %}
+				{% include appstoreimages.html %}
 			</div>
 		</div>
 	</div>