How can I add range date and location detection on Shopify Dawn?

[xnyjyh]

Hello,

I have a code for Estimate delivery date for my product pages. Using custom CSS section and using the metafields. Works great. 

However, I'm wanting to add range date and location from where the customer are from for better estimation dates, USA has different shipping times than Canada.

How can I add range date and location detection? Thanks

CODE:

<style>
.delivery-date, .delivery-date p, .delivery-date div { display:inline;}
</style>

{% if product.metafields.custom.number_of_days_for_delivery != blank %}
                      <div class="delivery-date">
                        <p><b>Estimated Delivery Date:</b></p>
                          <div id="m-date">
                          {% assign days_to_add = product.metafields.custom.number_of_days_for_delivery | date: "%s" | times: 86400 %}
{% assign future_date = 'now' | date: "%s" | plus: days_to_add | date: "%d %b" %} {{ future_date }}
                         </div>
                      </div>
                      {% endif %}

[Huptech-Web · Accepted solution]

Hello @xnyjyh , To display the range date create another meta field "Range Date For Delivery" and replace your code with the below code. Also, Replace the meta field code for "product.metafields.custom.range_date_for_delivery" with your meta field.

{% if product.metafields.custom.number_of_days_for_delivery_ != blank %}
  <div class="delivery-date">
    <p><b>Estimated Delivery Date:</b></p>
      <div id="m-date">
        {% if product.metafields.custom.range_date_for_delivery != blank %}
          {% assign range_date_add = product.metafields.custom.range_date_for_delivery | date: "%s" | times: 86400 %}
          {% assign range_date = 'now' | date: "%s" | plus: range_date_add | date: "%d %b" %}
        {% endif %}
      {% assign days_to_add = product.metafields.custom.number_of_days_for_delivery_ | date: "%s" | times: 86400 %}
        
  {% assign future_date = 'now' | date: "%s" | plus: days_to_add | date: "%d %b" %}
    {% if range_date %} {{ range_date | append: ' to ' }} {% endif %} {{ future_date }}
    </div>
  </div>
{% endif %}

[xnyjyh]

this is the current metafield i had. on the product page I get only one option to input a number. with this new code, how would I set up the metafield and what would I input in the product metafield option?

[xnyjyh]

UPDATE::: you had underscores at the end of the metafield coding. Once removed, it works great. Thanks!