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

Success.

Shopify Expert
665 170 201

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