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

Store Design
, , , , ,
1

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 %}
2

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 %}
  
    

**Estimated Delivery 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 }}
    

  

{% endif %}
3

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?

#11.png
#11.png695×708 13.5 KB

4

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

5

Hi @xnyjyh
You can use the above code to set the delivery date using metafields. For location functionality, you need to use the Location API. This API allows us to detect the customer’s location and update the date range accordingly. Feel free to contact me if you have any questions.