Hide products based on ipaddress of the customer

Solved
deepthiandi
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
Greg_Kujawa
Shopify Partner
1016 83 226

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
deepthiandi
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
Jayvin
Shopify Partner
162 24 34

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;
                }
            }
        }
    });
});

 

deepthiandi
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
Greg_Kujawa
Shopify Partner
1016 83 226

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
deepthiandi
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
okbertrand
New Member
8 0 0

Hello @deepthiandi 

This topic is quite exactly what I want to do : Hide some products based on IP location (China, HK).

I would like to use the code fixed by @Jayvin, adapting it for my store : hide a product if the IP location.countrycode is CN.

Also, can you tell me where can I put the code ?

Thank you very much.

Yannick

0 Likes
Greg_Kujawa
Shopify Partner
1016 83 226

The code that was accepted as the solution is client-side JavaScript. So you would put this into the Shopify theme pages that display products. 

0 Likes
okbertrand
New Member
8 0 0

Thank you @Greg_Kujawa I will try to add the JS Code on the theme.liquid page.

What will be the code to hide product ?

For example :

$(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 === ‘CN') {
            for (var product of productItems) {
                if (product.vendor === 'XYZ') {
                    HIDE PRODUCT ?
                }
            }
        }
    });
});

0 Likes