We’ve been looking around for ages and we’ve finally realized that Shopify does NOT offer you a product search feature by title.
It sounds crazy, right?
To be honest, searching for products by the title should be one of the most important features that they should include in Products API. But unfortunately, it’s not there.
Say for instance you have a product with a title 2023 Best Basketball Item.
If you try to browse your store URL and add the GET /admin/api/2019-10/products.json?title=item
Product API should return the item above. But instead, they will throw you the following JSON result:
{"products":[]}
Code language: JSON / JSON with Comments (json)No result. Sad.
Getting Started
In this Shopify app development tutorial, we’re going to provide you a very easy solution on how to search for products by title using Shopify product API.
Before we get started, we’ll assume that you have been following our Shopify app development tutorial series and you are using the very same files that we are using for this project.
If in case you’re using Laravel or other programming languages, fear not because everything is just the same except the code.
Okay, let me explain to you first how the process goes.
First, you will need an input box. This is where the search term is going to be retrieved.
And then, if the user pressed the enter button. We’ll make an AJAX call and pass the search term into another PHP file.
Now, since we’re going to use AJAX– that means we’re going to create another PHP file. Inside this PHP file, we’ll return all of the products from the Product API. However, we have to make sure that we filter this process by title only. Otherwise, it will take years to be processed especially if the merchant has thousands of products.
Once the Product API is finished, we’ll compare our search term to the title of each product. One by one.
Sounds too complicated?
Let us show you how to do it!
Searching Products by Title
Like we said above, to be able to make a search, we will need an input box.
Let’s say we have the following index.php file:
<?php
require_once("inc/functions.php");
$requests = $_GET;
$hmac = $_GET['hmac'];
$serializeArray = serialize($requests);
$requests = array_diff_key($requests, array( 'hmac' => '' ));
ksort($requests);
$token = "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"; //Add your access token here
$shop = "weeklyhow"; //subdomain of your store URL
?>
<!DOCTYPE html>
<html>
<head>
<title>Shopify Example App</title>
</head>
<body>
<h1>Shopify App Example by WeeklyHow</h1>
<input type="text" id="search" name="search" placeholder="Search for item">
<input type="hidden" id="subdomain" name="subdomain" value="<?php echo $shop; ?>">
<div id="products"></div>
</body>
</html>Code language: HTML, XML (xml)You may have noticed that we have also created a hidden input. This hidden input is used for storing our shop subdomain. Which a requirement for our shopify_call() function.
To display the search result, we’re going to use the div element with an id of products.
Read more:
Searching Products with AJAX
Now that we have the input box, it’s time for us to use AJAX. If you don’t know what is AJAX, it means processing a JavaScript asynchronously or without refreshing the page. It’s very useful for updating elements dynamically.
With that being said, let’s add the following code just before the </body> tag.
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
$('#search').keypress(function (e) {
if (e.which == 13) {
var search = $(this).val();
var shop = $('#subdomain').val();
$.ajax({
type: "POST",
url: "search.php",
data: {
term: search,
subdomain: shop
},
dataType: "html",
success: function(response){
$('#products').html(response);
}
});
return false;
}
});
</script>Code language: HTML, XML (xml)Yes, we’re going to use jQuery for this tutorial so it will be much easier to understand what’s going on. Although, you are free to use vanilla JS.
The Search PHP file
Create a new PHP file and make sure you name it search.php. (Refer to the AJAX URL’s value.
<?php
require_once("inc/functions.php");
$html = '';
$search_term = $_POST['term'];
$shop = $_POST['subdomain'];
$token = 'xxxxxxxxxxxxxxxxxxxxxxxxx'; //replace with your access token
$array = array(
'fields' => 'id,title'
);
$products = shopify_call($token, $shop, "/admin/api/2019-10/products.json", $array, 'GET');
$products = json_decode($products['response'], JSON_PRETTY_PRINT);
foreach ($products as $product) {
foreach ($product as $key => $value) {
if( stripos( $value['title'], $search_term ) !== false ) {
$html .= '<p>' . $value['title'] . '</p>';
}
}
}
echo $html;
?>Code language: HTML, XML (xml)And that’s it we’re done! As we said before, the process is very simple. All we need is to do first is to get all the products in the Product API and then for each product we’re going to compare its title to our search term using stripos() function.stripos() is a function used for finding the position of a string in another string. However, this time, we used the function for checking if the string exists in the title of the product that’s also why we used the comparison operator !==.
In a nutshell, if you do stripos( 'WeeklyHow is awesome!', 'weeklyhow' ) !== false, it will return a value of 1 which is true in boolean form.
Example
Say for instance we used the search term ‘women‘ on the product search page.
We should have the following search result.
Now if we do that in our Shopify app, we should see the following results.
Conclusion
That’s it! You can now search for products in your Shopify app using the code above.
Up to this point, we still don’t understand why Shopify didn’t include this filter to make it much easier to retrieve products. However, we think it’s also okay to do it ourselves. At least we learned something.
If you have questions, feel free to let us know in the comments below!
Hello sir
please give any toturials on shopify webhook api like orders event and cart event.
pls provide homepage edit using Shopify app