Hide products based on ipaddress of the customer

Solved
Highlighted
Tourist
6 0 0

I am trying to hide the products based on geolocation of the customers using javascript. I am usign the below code. I am unable to hide the products based on the below code.

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>

$(document).ready ( function()
{

$.getJSON('//freegeoip.app/json/', function(location) {

{% for product in collection.products %}
var productitems = {};

productitems.title = "{{ product.title }}";
productitems.vendor = "{{ product.vendor }}";
productitems.available = "{{ product.available }}";
productitems.id = "{{ product.id }}";

if (location.country_code === 'IN' && productitems.vendor === 'XYZ')
{
{% assign sold_out = false %}
}
else
{
{% assign sold_out = true %}

}
{% endfor %}
});
});
</script>

Please help me. I dont want to use any app for this. I want to achieve this programatically.
Thank you

0 Likes
Shopify Partner
593 41 118

You don't appear to be handling what's being returned by the IP lookup service. See here for a few examples of what is returned by some of these services --> https://stackoverflow.com/questions/391979/how-to-get-clients-ip-address-using-javascript. You have to parse out the IP address in the service's response and then conditionally handle however you'd like.

0 Likes
Highlighted
Tourist
6 0 0

location.countrycode is giving me exactly what I need. That's not the problem. Problem is, I am unable to hide the product based on the condition in client side. It should be on the server side. But I am unable to pass the country code to server side. The easiest solution is get the location based on the ipaddress on server side, but all the services seem to be on client side using javascript. Please help.

0 Likes
Highlighted
Shopify Partner
88 14 28

This is an accepted solution.

Hi,

It looks like you are mixing client and server scripts together and trying to hide the product on the server side itself which will not work. You will need to hide the product(s) in javascript itself.

Here is an example for assigning the sold_out property of the javascript product object based on location + vendor.

$(document).ready(function () {
    var productItems = [];
    {% for product in collection.products %}
        var productitem = {};
        productitem.title = "{{ product.title }}";
        productitem.vendor = "{{ product.vendor }}";
        productitem.available = "{{ product.available }}";
        productitem.id = "{{ product.id }}";
        productitem.sold_out = true; // or assign it to the default product.sold_out
        productItems.push(productitem);
    {% endfor %}

    $.getJSON('//freegeoip.app/json/', function (location) {
        var location = location.country_code;
        if (location === 'IN') {
            for (var product of productItems) {
                if (product.vendor === 'XYZ') {
                    product.sold_out = false;
                }
            }
        }
    });
});

 

1 Like
Highlighted
Tourist
6 0 0

Thank for your quick reply. Everything works till I enter the if condition. The alert statement is also giving me the right product titles. But still the products are visible. I am really stuck here.

I want to hide the products when the condition is true. Please help.

if (product.vendor === 'XYZ') {
var title = product.title;
alert(title);
product.sold_out = false;
}

0 Likes
Highlighted
Shopify Partner
593 41 118

The nature of Shopify Liquid is that it's server-side and has little/no knowledge of the client-side. If you look at this thread you'll see some specifics --> https://stackoverflow.com/questions/56790741/unable-to-find-visitors-location-in-liquid-code-shopify.  A workaround would be to inspect the Customer property once they've signed into the online shop. Then at least you could see their general location. I do a fair amount of ASP.NET development and that platform allows some server-side querying of a customer's ISP IP and whatnot. But Shopify's Liquid leaves the client-side as a black box to a certain degree.

0 Likes
Highlighted
Tourist
6 0 0

Thanks Jayvin for all the support. You solved somehing that nobody solved. Really appreciate all your help and support. Thank you very much

0 Likes