Hide announcement bar based on GEO location

Solved
Highlighted
New Member
2 0 0

Hi there,

 

I'm looking for some help on the following. I'm trying to hide my custom announcement bar based on IP location. The custom announcement bar has been created following; https://www.envision.io/blogs/ecommerce-pulse/how-to-add-an-announcement-bar-on-your-shopify-store-w.... Theme what I'm using is Debut.

 

Besides that I'm using freegeoip.app for getting the location. The alert outputs in my case "test NL" which is ok. 

 

<script>  

// get the API result via jQuery.ajax
$.ajax({
  url: 'https://freegeoip.app/json/',   
    dataType: 'jsonp',
    success: function(location) {

        // output the "capital" object inside "location"
        alert('test ' + location.country_code);
     
    }
});
  </script>  

What I want is to hide the announcement bar if someone from another country is visiting the website. Beneath is the code from the announcement bar including the location script. Is it possible to get some sort of if / else construction in 

{% if section.settings.message %} referring to location.country_code to hide the announcement bar?

 

 

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

// get the API result via jQuery.ajax
$.ajax({
  url: 'https://freegeoip.app/json/',   
    dataType: 'jsonp',
    success: function(location) {

        // output the "capital" object inside "location"
        alert('test ' + location.country_code);
     
    }
});
  </script>  

{% if section.settings.message %}
  {% if section.settings.home_page_only == false or template.name == 'index'%}
  <style>
    .announcement-bar {
      background-color: {{ section.settings.color_bg }};
      text-align:center;
      {% if section.settings.header_padding > 0 %}
        position:absolute;
        top: -{{ section.settings.header_padding }}px !important;
        left:0;
        width:100%;
        z-index:9;
      {% endif %}
    }
    .announcement-bar p {
      padding:10px 0;
      font-size: {{ section.settings.font_size }}px;
      margin:0 !important;
    }
    .announcement-bar__message,
    .announcement-bar--link {
      color: {{ section.settings.color_text }};
    }
    .announcement-bar--link:hover, 
    .announcement-bar--link:hover .announcement-bar__message {
      color: {{ section.settings.color_text_hover }} !important;
    }
    body {
      position:relative;
      top: {{ section.settings.header_padding }}px !important;
    }
  </style>

  {% if section.settings.message_link == blank %}
  <div class="announcement-bar">
    {% else %}
    <a href="{{ section.settings.message_link }}" class="announcement-bar announcement-bar--link">
      {% endif %}

      {% capture shipping_value %}{{ section.settings.free_shipping_threshold | times: 100 }}{% endcapture %}
      {% assign cart_total = cart.total_price %}
      {% assign shipping_value_left = shipping_value | minus: cart_total %}
      {% assign shipping_value_left_money = shipping_value_left | money %}
      {% capture free_shipping_notqualified %}
        {{ section.settings.free_shipping_notqualified | replace: '[price]', shipping_value_left_money }}
      {% endcapture %}
      {% assign free_shipping_qualified = section.settings.free_shipping_qualified %}
      {% assign announcement_message = section.settings.message_text %}
      
      {% if section.settings.free_shipping_countdown %}
        {% if cart.total_price > 0 %}
          {% assign announcement_message = free_shipping_notqualified %}
        {% endif %}
        {% if shipping_value_left <= 0 %}
          {% assign announcement_message = free_shipping_qualified %}
        {% endif %}
      {% endif %}
      
      <p class="announcement-bar__message">{{ announcement_message }}</p>

      {% if section.settings.message_link == blank %}
      </div>
    {% else %}
    </a>
  {% endif %}

  {% endif %}
{% endif %}

<style>
  
</style>

{% schema %}
  {
    "name": "Announcement bar",
    "settings": [
      {
        "type": "header",
        "content": "General"
      },
      {
        "type": "checkbox",
        "id": "message",
        "label": "Show announcement",
        "default": false
      },
      {
        "type": "checkbox",
        "id": "home_page_only",
        "label": "Home page only",
        "default": false
      },
    {
        "type":   "range",
        "id":     "header_padding",
        "min":    0,
        "max":    100,
        "step":   1,
        "unit":   "px",
        "label":  "Header padding",
        "default":   0,
    "info":   "Pushes page content down below announcement bar (only needed on some themes)"
      },
    {
        "type": "header",
        "content": "Content"
      },
      {
        "type": "text",
        "id": "message_text",
        "label": "Text",
        "default": "Announce something here"
      },
    {
        "type": "checkbox",
        "id": "free_shipping_countdown",
        "label": "Show free shipping countdown",
    "info": "Tells the customer how much they need to add to their cart to receive free shipping (only appears when at least one item is in the cart).",
        "default": false
      },
    {
        "type":   "range",
        "id":     "free_shipping_threshold",
        "min":    5,
        "max":    100,
        "step":   1,
        "unit":   "€",
        "label":  "Free shipping threshold",
        "default":   20,
    "info":   "The amount at which customers receive free shipping (must match your shipping settings)."
      },
    {
        "type": "textarea",
        "id": "free_shipping_notqualified",
        "label": "Free shipping (not qualified) message",
        "default": "Add just [price] to your cart to receive free shipping!"
      },
    {
        "type": "textarea",
        "id": "free_shipping_qualified",
        "label": "Free shipping (qualified) message",
        "default": "Your order qualifies for free shipping!"
      },
      {
        "type": "url",
        "id": "message_link",
        "label": "Link",
        "info": "Optional"
      },
    {
        "type": "header",
        "content": "Fonts and colors"
      },
      {
        "type": "color",
        "id": "color_bg",
        "label": "Background color",
        "default": "#333333"
      },
      {
        "type": "color",
        "id": "color_text",
        "label": "Text color",
        "default": "#ffffff"
      },
    {
        "type": "color",
        "id": "color_text_hover",
        "label": "Link hover color",
        "default": "#eeeeee"
      },
    {
        "type":   "range",
        "id":     "font_size",
        "min":    8,
        "max":    36,
        "step":   1,
        "unit":   "px",
        "label":  "Font size",
        "default":   14
      }
    ]
  }
{% endschema %}

Thx for the help!

 

0 Likes
Highlighted
Shopify Expert
667 170 233

This is an accepted solution.

Hi, @pgoeij ,

This is Evita from On The Map.

 

You can try adding if statement in ajax request and add display:none.

 

$.ajax({
  url: 'https://freegeoip.app/json/',   
    dataType: 'jsonp',
    success: function(location) {
        alert('test ' + location.country_code);
// If the country_code is NOT 123 if (location.country_code != 123) { $('.announcement-bar').css('display', 'none'); } } });

 

Best,
Evita

On The Map Marketing | Developing custom Shopify Sites & Apps is our thing

- Install our latest app Accessibly - Makes your store accessible for everyone, helps to avoid fines
- Inc 5000 | Shopify Parners | 20+ stores launched | 300+ active clients
- Need help with your Shopify store? Reach out to us!
0 Likes
Highlighted
New Member
2 0 0

Hi Evita,

 

Thx! That did the trick.

 

Do you know if it's possible to use a counter so that this is only executed once per session? If I browse to another page the Ajax request is executed again, toggling the bar for milliseconds from visible to hidden.

 

Best,

 

Pedro

0 Likes
Highlighted
Explorer
191 3 12

Hi there!

I see you have solved the problem. But here is one more solution for your future consideration.

You may potentially use Geo Targetly. It can detect your visitors' locations based on their IPs. With its Geo Bars tool, you can easily create location rules for targeted locations within a few steps. Individual rules can set designs, text, colors for the associated announcement bars. When visitors' locations match your rules, it will dynamically display announcement bars on your website page. Shopify platform is perfectly supported.

Hope it helps!

0 Likes