Country specific message with 'else'

[Zelythcom]

Hello! 

I was working on a custom liquid for my webstore, but bumped into an error when using the 'else'-tag. Hope someone can help me. 

We currently ship to 24 European countries, but if you're not in one of those, I'd also love for my customers to see a message like 'sorry we don't ship to your country (yet)'. I've got the liquid all ready and working, but as soon as someone from outside our shipping countries visits, it falls back on the store's default country and they get to see that country. 

So long story short, my idea:

• The 24 shipping countries should see their estimated shipping time - 3 zones, 3 different estimated dates
• If you're outside the 24 countries, you'll get the message to contact us for more info.

The code I'm currently trying to use (unsuccessful due to the 'else'-tag):

{% if localization.country.iso_code == 'SK' %}
  <p class="eta--scheduler">
	<div class="geo-location">
		{{ localization.country | image_url: width: 15 | image_tag }} &nbsp; You're located in
		<b>{{localization.country}}</b>
	</div>
	<div class="eta-text">
		Place your order by 19:30 today to receive it between <strong><span id="fromDate"></span> and <span id="toDate"></span></strong>*.{{ '//cdnjs.cloudflare.com/ajax/libs/datejs/1.0/date.min.js' | script_tag }}	<script>var fromDate = Date.today().addDays(2);if (fromDate.is().saturday() || fromDate.is().sunday()) {fromDate = fromDate.next().monday();}			          var toDate = Date.today().addDays(3);if (toDate.is().saturday() || toDate.is().sunday()) {toDate = toDate.next().tuesday();}document.getElementById('fromDate').innerHTML = fromDate.toString('dd/MM/yyyy');document.getElementById('toDate').innerHTML = toDate.toString('dd/MM/yyyy');</script>
	</div>
  </p>

{% case localization.country_iso_code %}
 {% when "CZ" %}
 {% when "HU" %}
  <p class="eta--scheduler">
	<div class="geo-location">
		{{ localization.country | image_url: width: 15 | image_tag }} &nbsp; You're located in
		<b>{{localization.country}}</b>
	</div>
	<div class="eta-text">
		Place your order by 19:30 today to receive it between <strong><span id="fromDate"></span> and <span id="toDate"></span></strong>*.{{ '//cdnjs.cloudflare.com/ajax/libs/datejs/1.0/date.min.js' | script_tag }}	<script>var fromDate = Date.today().addDays(2);if (fromDate.is().saturday() || fromDate.is().sunday()) {fromDate = fromDate.next().monday();}			          var toDate = Date.today().addDays(3);if (toDate.is().saturday() || toDate.is().sunday()) {toDate = toDate.next().tuesday();}document.getElementById('fromDate').innerHTML = fromDate.toString('dd/MM/yyyy');document.getElementById('toDate').innerHTML = toDate.toString('dd/MM/yyyy');</script>
	</div>
  </p>
{% endcase %}


{% case localization.country_iso_code %}
 {% when "AT" %}
 {% when "PL" %}
 {% when "DE" %}
 {% when "FR" %}
 {% when "BG" %}
 {% when "RO" %}
 {% when "SL" %}
  <p class="eta--scheduler">
	<div class="geo-location">
		{{ localization.country | image_url: width: 15 | image_tag }} &nbsp; You're located in
		<b>{{localization.country}}</b>
	</div>
	<div class="eta-text">
		Place your order by 19:30 today to receive it between <strong><span id="fromDate"></span> and <span id="toDate"></span></strong>*.{{ '//cdnjs.cloudflare.com/ajax/libs/datejs/1.0/date.min.js' | script_tag }}	<script>var fromDate = Date.today().addDays(3);if (fromDate.is().saturday() || fromDate.is().sunday()) {fromDate = fromDate.next().monday();}			          var toDate = Date.today().addDays(4);if (toDate.is().saturday() || toDate.is().sunday()) {toDate = toDate.next().tuesday();}document.getElementById('fromDate').innerHTML = fromDate.toString('dd/MM/yyyy');document.getElementById('toDate').innerHTML = toDate.toString('dd/MM/yyyy');</script>
	</div>
  </p>
{% endcase %}


{% case localization.country_iso_code %}
 {% when "ES" %}
 {% when "BE" %}
 {% when "LU" %}
 {% when "NL" %}
 {% when "DK" %}
 {% when "EE" %}
 {% when "FI" %}
 {% when "SE" %}
 {% when "IR" %}
 {% when "LT" %}
 {% when "LV" %}
 {% when "PT" %}
 {% when "IT" %}
 {% when "HR" %}
  <p class="eta--scheduler">
	<div class="geo-location">
		{{ localization.country | image_url: width: 15 | image_tag }} &nbsp; You're located in
		<b>{{localization.country}}</b>
	</div>
	<div class="eta-text">
		Place your order by 19:30 today to receive it between <strong><span id="fromDate"></span> and <span id="toDate"></span></strong>*.{{ '//cdnjs.cloudflare.com/ajax/libs/datejs/1.0/date.min.js' | script_tag }}	<script>var fromDate = Date.today().addDays(3);if (fromDate.is().saturday() || fromDate.is().sunday()) {fromDate = fromDate.next().monday();}			          var toDate = Date.today().addDays(6);if (toDate.is().saturday() || toDate.is().sunday()) {toDate = toDate.next().tuesday();}document.getElementById('fromDate').innerHTML = fromDate.toString('dd/MM/yyyy');document.getElementById('toDate').innerHTML = toDate.toString('dd/MM/yyyy');</script>
	</div>
  </p>
{% endcase %}




{% else %}
  <p class="eta--scheduler">
	<div class="geo-location">
		{{ localization.country | image_url: width: 15 | image_tag }} &nbsp; You're located in
		<b>{{localization.country}}</b>
	</div>
	<div class="eta-text">
		Sorry, we don't ship to&nbsp;
		<b>{{localization.country}}</b>
		&nbsp;(yet). Contact us for possibilities.
	</div>
  </p>
{% endif %}

Hope someone can help me out so I can display the right message to everyone visiting! 

Thomas

www.Zelyth.com

[TikitaTech · Accepted solution]

Hi @Zelythcom!

Your original code had some independent conditional blocks that made the flow a bit tricky to follow, which may have been causing your issue. Try out the structure below - it should make things smoother. Let me know how it goes!

{% if localization.country.iso_code %}
  {% case localization.country.iso_code %}
    {% when "SK" %}
      <!-- supported country logic for "SK" -->
    {% when "CZ", "HU" %}
      <!-- supported country logic for "CZ", "HU" -->
    {% when "AT", "PL", "DE", "FR", "BG", "RO", "SL" %}
      <!-- supported country logic for these countries -->
    {% when "ES", "BE", "LU", "NL", "DK", "EE", "FI", "SE", "IR", "LT", "LV", "PT", "IT", "HR" %}
      <!-- supported country logic for these countries -->
    {% else %}
      <p class="eta--scheduler">
        <div class="geo-location">
          {{ localization.country | image_url: width: 15 | image_tag }} &nbsp; You're located in
          <b>{{ localization.country }}</b>
        </div>
        <div class="eta-text">
          Sorry, we don't ship to <b>{{ localization.country }}</b> (yet). Contact us for possibilities.
        </div>
      </p>
  {% endcase %}
{% else %}
  <p>Country code not found.</p>
{% endif %}

[Zelythcom]

Thanks @TikitaTech ! Really helpful 😁

[tim]

Also,  localization is not geolocation. This is what customers selected from the menu you've provided (unless you have an App which does it for them).

So If I come and my country is not on a list I will stay at the default one, and see the messages for default one.

If you need to do your own handling of geolocation, do it with JS.

Check https://community.shopify.com/c/shopify-apps/is-the-api-for-the-new-geolocation-app-accessible-for-c...