While Shopify is a very powerful tool for eCommerce businesses to showcase their products and customize their website to suit their specific needs, when it comes to the nitty gritty coding details, sometimes even Shopify falls short. In this blog we are going to focus on a very specific piece of it that you may or may not have run into before, but if you do, you’ll know how to brave the mountain.

Let’s start at the top. Unlike languages like PHP, there is no reliable way to grab the query string part of a URL in Shopify, since we cannot access the POST data directly in templates. It’s just a little quirk that they must not have foreseen would be useful, so they didn’t allow us to do it.

If you’re lost here’s a quick examples:

If you are looking at this URL...

http://www.website.com/first_name=John&last_name=Doe

And then in the code you wanted to grab the first name and last name parameters and then display the name John Doe on the page. What you would need to do is parse that information from that URL.

Now that we are on the same page, I should note that there is a highly experimental attempt to do it, as outlined in this article, but as the article mentions, it is not a solution that is suitable for production websites, so we can’t rely on it.

So what do we do? Because there is no way to do this in native liquid code, we must settle for a javascript based solution. This is the only option that reliably works on Shopify, that I have found.

HERE ARE THE STEPS:

• First of all, we add this function to grab all of the query string parameters from the URL.

function getQueryStringParameters() {
     var parameters = {}, hash;
     var q = document.URL.split('?')[1];
     if(q != undefined) {
         q = q.split('&');
         for(var i = 0; i < q.length; i++) {
             hash = q[i].split('=');
             parameters[hash[0]] = hash[1];
         }
     }
     return parameters;
 }

• This function returns any found parameters as a JSON object, so we also add a function to test if the object contains any data or if it is empty.

function isEmpty(obj) {
 for(var key in obj) {
 if(obj.hasOwnProperty(key))
 return false;
 }
 return true;
}

•  Next, we add some code to run when the page loads and invokes these functions to get the parameters and do something with them

$(document).ready(function() {
 var parameters = getQueryStringParameters();
 if(isEmpty(parameters) == false) {
 $.each(parameters, function(key, value) {
 console.log(key, value);
 });
 }
});

• Once we get here, we call our getQueryStringParameters and assign the JSON object it returns to a variable called “parameters”.
• Next, assuming the variable contains some data, we loop through the JSON object and grab the parameter’s key and value data.
• Let’s try this out using an example.

Let’s say the URL we want to parse is

http://www.website.com/?first_name=John&last_name=Doe

… and we are looking to get first name and last name parameters.

When we load the page and view our browser console we see that the code has parsed the query string parameters, and is outputting the keys and values for both the first name and last name.

• From here we can simply put these values to use however we need to in whatever manner you would like to output this information.

Although this may seem like a minor and fairly insignificant detail, when your client asks for their Shopify site to return a value from the URL you’ll wish you had some handy tools on how to get around it, and now you do!

At least until the next update… but until then, go parse some URLs!