{"id":124,"date":"2019-01-21T18:08:47","date_gmt":"2019-01-21T18:08:47","guid":{"rendered":"https:\/\/justinstolpe.com\/blog\/?p=124"},"modified":"2019-01-21T19:19:48","modified_gmt":"2019-01-21T19:19:48","slug":"custom-fortnite-item-shop-with-php-html-css","status":"publish","type":"post","link":"https:\/\/justinstolpe.com\/blog\/2019\/01\/21\/custom-fortnite-item-shop-with-php-html-css\/","title":{"rendered":"Custom Fortnite Item Shop with PHP, HTML, CSS"},"content":{"rendered":"<p><center><br \/>\n<iframe loading=\"lazy\" width=\"560\" height=\"315\" src=\"https:\/\/www.youtube.com\/embed\/hjMqHb4_ubs\" frameborder=\"0\" allow=\"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/center><br \/>\nToday we will be learning how to create a custom Fortnite item shop so we can display daily items on our own webpage. We will use PHP to talk to the Fortnite API, and get us back a list of items on the item shop for the current day. We will then use HTML\/CSS to style up the list of items we got back from the API and create our own item shop.<\/p>\n<h3><strong>Step 1: Connect to the Fortnite API<br \/>\n<\/strong><\/h3>\n<p>First thing we need is an API key. This will be passed along with each call we make to any of the API endpoints. You can get your API key here <a href=\"https:\/\/fortnitetracker.com\/site-api\" target=\"_blank\" rel=\"noopener\">https:\/\/fortnitetracker.com\/site-api<\/a><\/p>\n<p>We are going to be using the store endpoint to retrieve the current items on the item shop. Here is the function we will use to hit the store endpoint, pass along our API key as a header, and get back the list of store items.<\/p>\n<pre class=\"lang:php decode:true\" title=\"Fortnite API\">\/**\r\n * Get store data from the fortnite api and save it in a json file\r\n *\r\n * @param String $date of the store to save\r\n *\r\n * @return void\r\n *\/\r\nfunction getStoreDataFromAPI( $date ) {\r\n    \/\/ store api endpoint, we hit those endpoints!\r\n    $apiUrlEndpointStore = 'https:\/\/api.fortnitetracker.com\/v1\/store';\r\n\r\n    \/\/ curl setup\r\n    $ch = curl_init();\r\n    \r\n    \/\/ specify the store endpoint\r\n    curl_setopt( $ch, CURLOPT_URL, $apiUrlEndpointStore );\r\n\r\n    \/\/ pass our api key along as the TRN-Api-Key header\r\n    curl_setopt( $ch, CURLOPT_HTTPHEADER, array(\r\n        'TRN-Api-Key:' . FN_API_KEY\r\n    ) );\r\n\r\n    \/\/ set a few other things to make curl happy\r\n    curl_setopt( $ch, CURLOPT_RETURNTRANSFER, TRUE );\r\n    curl_setopt( $ch, CURLOPT_HEADER, FALSE );\r\n    curl_setopt( $ch, CURLOPT_SSL_VERIFYPEER, FALSE );\r\n\t\t\r\n    \/\/ response from the store endpoint\r\n    $response = curl_exec( $ch );\r\n\r\n    \/\/ create a file titled 'YYYY-MM-DD' and save the json repsonse to the file\r\n    $storeFile = fopen( 'store_json_files\/' . $date . '.json', 'w' );\r\n    fwrite( $storeFile, $response );\r\n    fclose( $storeFile );\r\n}<\/pre>\n<p>To avoid API limits, we are going to save the store items into a JSON file. We will then read the items from this JSON file instead of hitting the API. We will hit the API one time per day and save the response in a JSON file named by date. For example 2019-01-20.json would hold items for the item shop on the 20th. Since we will have an item shop JSON file for each day, we can go back and look at what was on the item shop in the past as long as we have a JSON file for that day.<\/p>\n<h3><strong>Step 2: Style It Up<br \/>\n<\/strong><\/h3>\n<p>Once we have our data. We can go ahead and start giving it a nice Fortnite look and feel. If we want our item shop to feel like Fortnite, we need the correct font face. Here is the font face I am using.<\/p>\n<pre class=\"lang:css decode:true\" title=\"Fortnite Font\">@font-face {\r\n    font-family: 'Fortnite';\r\n    src: url( 'BurbankBigCondensed-Bold.otf' );\r\n}<\/pre>\n<p>The other important thing is to match colors. We want to make sure our items have the same rarity color as Fortnite. Here are the rarity colors I found by inspecting the Fortnite tracker website.<\/p>\n<pre class=\"lang:css decode:true\" title=\"Fortnite Rarity Colors\">.rarity-fine {\r\n    background: #fb9625;\r\n}\r\n\r\n.rarity-quality {\r\n    background: #7907a5;\r\n}\r\n\r\n.rarity-sturdy {\r\n    background: #3dc7ff;\r\n}\r\n\r\n.rarity-handmade {\r\n    background: #5bad03;\r\n}<\/pre>\n<h3><strong>Custom Fortnite Item Shop<br \/>\n<\/strong><\/h3>\n<p><a href=\"https:\/\/justinstolpe.com\/blog\/wp-content\/uploads\/2019\/01\/item-shop-screenshot.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-129\" src=\"https:\/\/justinstolpe.com\/blog\/wp-content\/uploads\/2019\/01\/item-shop-screenshot.png\" alt=\"item shop screenshot\" width=\"1149\" height=\"828\" srcset=\"https:\/\/justinstolpe.com\/blog\/wp-content\/uploads\/2019\/01\/item-shop-screenshot.png 1149w, https:\/\/justinstolpe.com\/blog\/wp-content\/uploads\/2019\/01\/item-shop-screenshot-300x216.png 300w, https:\/\/justinstolpe.com\/blog\/wp-content\/uploads\/2019\/01\/item-shop-screenshot-768x553.png 768w, https:\/\/justinstolpe.com\/blog\/wp-content\/uploads\/2019\/01\/item-shop-screenshot-1024x738.png 1024w\" sizes=\"auto, (max-width: 767px) 89vw, (max-width: 1000px) 54vw, (max-width: 1071px) 543px, 580px\" \/><\/a><\/p>\n<p>Put everything together and we get our own Fortnite item shop! I only highlighted what I thought were the key elements for setting up our own custom Fortnite item shop. The full code is up on GitHub.<\/p>\n<p style=\"text-align: center;\"><strong>Links<\/strong><\/p>\n<p><a href=\"https:\/\/www.justinstolpe.com\/blog_code\/fortnite_item_shop\/\" target=\"_blank\" rel=\"noopener\"><strong>Live Demo<\/strong><\/a><\/p>\n<p><a href=\"https:\/\/www.youtube.com\/watch?v=hjMqHb4_ubs\" target=\"_blank\" rel=\"noopener\"><strong>YouTube Video<\/strong><\/a><\/p>\n<p><strong><a href=\"https:\/\/github.com\/jstolpe\/blog_code\/tree\/master\/fortnite_item_shop\" target=\"_blank\" rel=\"noopener\">Code on GitHub<\/a><\/strong><\/p>\n<p>That is going to do it for this post! Leave any comments\/questions\/concerns below and thanks for stopping by the blog!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Today we will be learning how to create a custom Fortnite item shop so we can display daily items on our own webpage. We will use PHP to talk to the Fortnite API, and get us back a list of items on the item shop for the current day. We will then use HTML\/CSS to &hellip; <\/p>\n<p class=\"link-more\"><a href=\"https:\/\/justinstolpe.com\/blog\/2019\/01\/21\/custom-fortnite-item-shop-with-php-html-css\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Custom Fortnite Item Shop with PHP, HTML, CSS&#8221;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":125,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6,11,10,9],"tags":[7,15,13,8],"class_list":["post-124","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-coding","category-css","category-html","category-php","tag-coding","tag-css","tag-html","tag-php"],"_links":{"self":[{"href":"https:\/\/justinstolpe.com\/blog\/wp-json\/wp\/v2\/posts\/124","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/justinstolpe.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/justinstolpe.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/justinstolpe.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/justinstolpe.com\/blog\/wp-json\/wp\/v2\/comments?post=124"}],"version-history":[{"count":14,"href":"https:\/\/justinstolpe.com\/blog\/wp-json\/wp\/v2\/posts\/124\/revisions"}],"predecessor-version":[{"id":127,"href":"https:\/\/justinstolpe.com\/blog\/wp-json\/wp\/v2\/posts\/124\/revisions\/127"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/justinstolpe.com\/blog\/wp-json\/wp\/v2\/media\/125"}],"wp:attachment":[{"href":"https:\/\/justinstolpe.com\/blog\/wp-json\/wp\/v2\/media?parent=124"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/justinstolpe.com\/blog\/wp-json\/wp\/v2\/categories?post=124"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/justinstolpe.com\/blog\/wp-json\/wp\/v2\/tags?post=124"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}