Debut theme datepicker error for estimated delivery.

Solved
jonis
Tourist
6 1 5

Hello,

I have made snippet for estimated delivery for my shop in codepen, but I have some troubles to insert in my debut theme. In console I see "Uncaught TypeError: $(...).datepicker is not a function" so what would be the error? Can someone help?

1)I created snippet called "estimated.liquid".

2) After that I pasted html code there and js script pasted in bottom of theme.js

3) And for finish I added jquery, moment.js, jqueryui to my header.liquid in <head> tags.

And still get that error.

Here is codepen

https://codepen.io/kokars/pen/ZEKWXoQ 

 

And here is my page - Worker Cheetah Rival Foam Ball Blaster Toy & Upgrade kit – Nerfchoice.com

0 Likes
jonis
Tourist
6 1 5

This is an accepted solution.

<div class="delivery-option__container">
<div class="brand__group">
  <div class="delivery-header">
  </div>
  <div class="delivery-option">
    <label>
      <span>Order placed</span>
    </label> 
    <label data-delivery-offset="0"></label>
  </div>
  <div class="delivery-option">    
    <label>
      <span>Order ships</span>
    </label>
    <label data-delivery-offset="1"></label>
  </div>
  <div class="delivery-option">
    <label>
      <span>Delivered</span>
    </label>
    <label data-delivery-offset="8"></label> -
    <label data-delivery-offset="21"></label>
  </div>
</div>
                             
</div>

<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>

<script>
  function estimateDelivery(){
  moment().format();
  var selectedDate = $('#datepicker').datepicker('getDate'); 
  
  $('[data-delivery-offset]').each(function(){
    var offset = $(this).data('delivery-offset');
    var shipDate = moment(selectedDate).add(offset, 'days').format('D MMM');
    $(this).text(shipDate);
  });  
};

estimateDelivery();
</script>

Fixed it myself. Here is snippet if someone needs it something like this.  Create new snippet file add this code and insert this {% render ‘snippet-name’ %} where you whant to be displayed. Sorry no CSS for this snippet.

0 Likes