Shopify Archives - Page 2 of 5

So you have finally learned how to display products using Shopify Product REST API. However, you have a bit of a problem, you want to display products with pagination and the only thing you think you can do is to create an array of products and display them depending on their keys.Believe it or not, it's not actually a bad idea but offers a TON of work.Shopify Product API (version 2021-07 and beyond) provides a link header that you can use for requesting paginated REST Admin API endpoints and that's what we're going to learn today.Keep in mind that before proceeding, you must know already how to use Shopify API or you have created a Shopify app using our Shopify app development tutorial.If in case this is your first time, we highly suggest you read our tutorial below.Read more: How To Create Shopify Apps from Scratch Video Tutorial If you prefer watching video tutorials, you can watch the video version of this article here: https://www.youtube.com/watch?v=T57ycyxy2QY Getting Started Before you can create pagination, it's important to understand that this will only work for API version 2021-01 and beyond. So if you're using an old version of the API, then we highly recommend you to go to your app settings and update your API version. Another important thing is to understand how the product API works. By default, you can return up to 50 products per page but you can also maximize the number up to 250 products.Each page will provide you a set of links (aka. page info) in the header that you can use to go to the next or previous set of items.To properly explain this... Let's say we have 200 products, and we want to display 10 products per page.If we are on the very first page of our products, the API will give us just one link in the header, for us to be able to go to the next page.If we are on the second page, the API will give us two links in the header, one for the previous page and one for the next page.And so on, and so forth. REST API Function If this is your first time working with PHP, keep in mind that we are using the following functions.php. In this PHP file, we have a function that allows us to do API calls. So if you don't have this function, you won't be able to get products from Shopify API. <?php function rest_api($token, $shop, $api_endpoint, $query = array(), $method = 'GET', $request_headers = array()) { $url = "https://" . $shop . $api_endpoint; if (!is_null($query) && in_array($method, array('GET', 'DELETE'))) $url = $url . "?" . http_build_query($query); $curl = curl_init($url); curl_setopt($curl, CURLOPT_HEADER, TRUE); curl_setopt($curl, CURLOPT_RETURNTRANSFER, TRUE); curl_setopt($curl, CURLOPT_FOLLOWLOCATION, TRUE); curl_setopt($curl, CURLOPT_MAXREDIRS, 3); curl_setopt($curl, CURLOPT_SSL_VERIFYPEER, FALSE); curl_setopt($curl, CURLOPT_CONNECTTIMEOUT, 30); curl_setopt($curl, CURLOPT_TIMEOUT, 30); curl_setopt($curl, CURLOPT_CUSTOMREQUEST, $method); $request_headers[] = ""; $headers[] = "Content-Type: application/json"; if (!is_null($token)) $request_headers[] = "X-Shopify-Access-Token: " . $token; curl_setopt($curl, CURLOPT_HTTPHEADER, $request_headers); if ($method != 'GET' && in_array($method, array('POST', 'PUT'))) { if (is_array($query)) $query = json_encode($query); curl_setopt ($curl, CURLOPT_POSTFIELDS, $query); } $response = curl_exec($curl); $error_number = curl_errno($curl); $error_message = curl_error($curl); curl_close($curl); if ($error_number) { return $error_message; } else { $response = preg_split("/\r\n\r\n|\n\n|\r\r/", $response, 2); $headers = array(); $header_data = explode("\n",$response[0]); $headers['status'] = $header_data[0]; array_shift($header_data); foreach($header_data as $part) { $h = explode(":", $part); $headers[trim($h[0])] = trim($h[1]); } return array('headers' => $headers, 'data' => $response[1]); } } Displaying Products If you have been following us for a while, then you probably know already how to display Shopify products using PHP and Shopify API.Let's say we have the following code: Shopify Example App $value){ echo ' ' . $value['title'] . ' '; } } ?> The code above will simply display all the products you have in your store like below. In total, we have 27 products.Now, the next thing that we're going to do is to make limitations for our API. Let's say we just want to display 5 products per page.To do that, we need to create an array where we indicate how many items we want to display using the parameter limit. $array = array( 'limit' => 5 ); $products = rest_api($access_token, $shop_url, "/admin/api/2021-07/products.json", $array, 'GET'); $products = json_decode($products['data'], true); Awesome! Now we're just displaying the first 5 products. Previous & Next Buttons Now that we have successfully displayed and limit our products. Let's create the buttons that we're going to use to navigate to the next page (...and also the previous page of course).Just underneath your unordered list element, add the following code. ">Previous ">Next Awesome! Updating functions.php If you're using the same function that we used for developing Shopify apps, then you'll most likely encounter the very same bug that we experience whenever we use the rest_api() function.If you use the said function just for the sake of returning Shopify's response, then you might think that there's no problem at all. However, when you use the function to get headers, specifically for making pagination. You will notice that there's something wrong/missing and that is the link header. The main reason why that's happening is because of the 'colons' in the header.The functions.php file is simply using the explode() function to create an array for the header. Then loop through each key in the array, and explode once again with the help of colon this time. That's also where the issue starts to develop.Since URLs have their own colon (https://), the function explode will obviously malfunction.So with all that being said, let's update our functions.php.Look for the following lines of code: foreach($header_data as $part) { $h = explode(":", $part); $headers[trim($h[0])] = trim($h[1]); } and change it to... foreach($header_data as $part) { $h = explode(":", $part, 2); $headers[trim($h[0])] = trim($h[1]); } The file functions.php is located in inc folder. Very simple, we only have to add a limit to our explode function. If the explode function hits the first separator, it should end the process.Now let's go back to our index file and update the following code: $array = array( 'limit' => 5 ); $products = rest_api($access_token, $shop_url, "/admin/api/2021-07/products.json", $array, 'GET'); $products = json_decode($products['data'], true); to... $array = array( 'limit' => 5 ); $products = rest_api($access_token, $shop_url, "/admin/api/2021-07/products.json", $array, 'GET'); $headers = $products['headers']; $products = json_decode($products['data'], true); foreach ($headers as $key => $value) { echo ' [' . $key . '] =>' . $value . ' '; } In the code above, we simply created a new variable and retrieved the headers.And then underneath the $products variable, we check each value inside the $headers variable using foreach functionYou should have the following output. If you look closely, you can clearly see that the link key only a value of ; rel="next".That's because the rest of its value is being converted to an HTML tag instead of a string. So if you go to your inspector, you will see that everything was enclosed with the tag. To solve that issue, we need to create our own function to extract the string between the angle brackets.So open your functions.php file once again and just underneath your rest_api() function, add the following code. //shopify_call() { ... } <--- make sure you add the code outside this function function str_btwn($string, $start, $end){ $string = ' ' . $string; $ini = strpos($string, $start); if ($ini == 0) return ''; $ini += strlen($start); $len = strpos($string, $end, $ini) - $ini; return substr($string, $ini, $len); } Going back to index.php file. And just underneath the foreach() function, add the following code. $nextPageURL = str_btwn($headers['link'], ' '); $nextPageURLparam = parse_url($nextPageURL); parse_str($nextPageURLparam['query'], $value); $page_info = $value['page_info']; Next, we'll update our Next button's data-info attribute from. ">Next to... " data-rel="next" data-store=" ">Next Scripting Shopify Pagination with AJAX We basically got everything we need to display our products and pagination. Now let's work with AJAX so we can retrieve the next and previous products.Just before your body closing tag, add the following code. $('button').on('click', function(e) { var data_info = $(this).attr('data-info'); var data_rel = $(this).attr('data-rel'); var data_store = $(this).attr('data-store'); if(data_info != '') { $.ajax({ type: "GET", url: "pagination.php", data: { page_info: data_info, rel: data_rel, url: data_store }, dataType: "json", success: function(response) { console.log(response); if( response['prev'] != '' ) { $('button[data-rel="previous"]').attr('data-info', response['prev']); } else { $('button[data-rel="previous"]').attr('data-info', ""); } if( response['next'] != '' ) { $('button[data-rel="next"]').attr('data-info', response['next']); } else { $('button[data-rel="next"]').attr('data-info', ""); } if( response['html'] != '' ) { $('#product-list').html(response['html']); } } }); } }); Don't forget to save your files. The Pagination Script Now that we have finally programmed our index file, let's create a new PHP script for our AJAX. Of course, we'll call it pagination.php. <?php require_once("inc/functions.php"); $shop_url = $_GET['shop']; $access_token = 'shpca_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx'; $rel = $_GET['rel']; $page_info = $_GET['page_info']; First of all, we need to get everything that we need such as our access token, our shop subdomain, and the data values that we passed through AJAX.Next, we'll create the API. So just underneath the code, add the following: //Create an array for the API $array = array( 'limit' => 5, 'page_info' => $page_info, 'rel' => $rel ); $products = rest_api($access_token, $shop_url, "/admin/api/2021-07/products.json", $array, 'GET'); Next, we'll create everything we need for our headers, check if the link header contains two page_infos, otherwise retrieve the default value. //Get the headers $headers = $products['headers']; //Create an array for link header $link_array = array(); //Check if there's more than one links / page infos. Otherwise, get the one and only link provided if( strpos( $headers['link'], ',' ) !== false ) { $link_array = explode(',', $headers['link'] ); } else { $link = $headers['link']; } Next, we'll create another set of variables and check if the $link_array count is greater than one. If it is, then we take the two page_infos from each link array. Otherwise, just get what's provided. //Create variables for the new page infos $prev_link = ''; $next_link = ''; //Check if the $link_array variable's size is more than one if( sizeof( $link_array ) > 1 ) { $prev_link = $link_array[0]; $prev_link = str_btwn($prev_link, ' '); $param = parse_url($prev_link); parse_str($param['query'], $prev_link); $prev_link = $prev_link['page_info']; $next_link = $link_array[1]; $next_link = str_btwn($next_link, ' '); $param = parse_url($next_link); parse_str($param['query'], $next_link); $next_link = $next_link['page_info']; } else { $rel = explode(";", $headers['link']); $rel = str_btwn($rel[1], '"', '"'); if($rel == "previous") { $prev_link = $link; $prev_link = str_btwn($prev_link, ' '); $param = parse_url($prev_link); parse_str($param['query'], $prev_link); $prev_link = $prev_link['page_info']; $next_link = ""; } else { $next_link = $link; $next_link = str_btwn($next_link, ' '); $param = parse_url($next_link); parse_str($param['query'], $next_link); $next_link = $next_link['page_info']; $prev_link = ""; } } And last but not least, we'll create the variable for our frontend to display the next set of products. //Create and loop through the next or previous products $html = ''; $products = json_decode($products['data'], true); foreach($products as $product) { foreach($product as $key => $value) { $html .= ' ' . $value['title'] . ' '; } } Seriously though, this is the last...Let's encode everything into JSON and pass it back to AJAX. //Then we return the values back to ajax echo json_encode( array( 'prev' => $prev_link, 'next' => $next_link, 'html' => $html ) ); Save all your files and you should have the following output. Conclusion If you have reached this part then good job! You have successfully learned how to create pagination for your Product API. Obviously, there are plenty of other ways to do this but this tutorial is just to give you an idea that it is possible to make paginations for products.If you have concerns or questions, don't hesitate to let us know in the comments below!