Issue on Required Datepicker in QuickView

Highlighted

Hello Experts!

Recently i added Datepicker in my Product Page Form. and add Javascript code to make it required.

Added following code to product-add-to-cart.liquid :

<div style="width:350px; clear:both;margin-bottom:15px;">
          <div>
          <label for="tourdate">Date:</label>
          <input id="tourdate" type="text" name="attributes[tourdate]" value="{{ cart.attributes.date }}" required />
            
      </div>

 

and

Added following code in Init.js to make it required!

cart: function() {
    $('.add').on('click', function(e) {
      
      if ($('#tourdate').val() == '') {
      alert("Please select Date of Tour!");
      }
      else{

        e.preventDefault();
        var quantity = $(this).closest('form').find('input.quantity').val(),
              productID = $(this).closest('form').find('*[name=id]').val();
        addItem(productID, quantity);
      }
    });

 

The above code is working fine in Product page, but it not working in Quickview.

Please Help me ASAP!

 

Many Thanks!

Bhavesh

 


 

 

Shopify
0 Likes
Highlighted
Shopify Expert
195 0 25

Hi Bhavesh,

I can't see you store but if you could share that would help us resolve your issue.

One issue might be that you are using an id for tourdate. Perhaps you could use a class. The javascript code would look like this.

cart: function() {
    $('.add').on('click', function(e) {
      
      if ($(this).find('.tourdate').first().val() == '') {
      alert("Please select Date of Tour!");
      }
      else{
        e.preventDefault();
        var quantity = $(this).closest('form').find('input.quantity').val(),
              productID = $(this).closest('form').find('*[name=id]').val();
        addItem(productID, quantity);
      }
    });

Another thought is that the event handler is not getting applied to your .add element in the quickview correctly but the jQuery on() function should take care of present and future elements.

This is sort of a shot in the dark so having your store example would be helpful.

-Ryan

Stop Stressing About Shopify You’ve Got Better Things To Do => https://320ny.com/shopify/
0 Likes
Highlighted

Hello

Thanks for interesting in my question!

Please check here the issue of quickview

http://daytrippn.com/collections/all

I need to add product to cart, if and only if the date is selected in quickview!

Thanks!

 

Shopify
0 Likes
Highlighted
Shopify Expert
195 0 25

On the page you supplied the javascript is out of scope as you have numerous tourdate inputs. On the product page you have different html than the quyickviews. 

Try changing your html to this

<div style="width:350px; clear:both;margin-bottom:15px;">
          <div>
          <label for="tourdate">Date:</label>
          <input class="tourdate" type="text" name="attributes[tourdate]" value="{{ cart.attributes.date }}" required />
            
      </div>

Do this for both the product page and the quickviews. 

And your JS to this



cart: function() {

    $('.add').on('click', function(e) {
        var tourDate = $(this).parents('form').first().find('#tourdate').val();
        if (tourDate.val() == '') {
            alert("Please select Date of Tour!");
        } else{
            e.preventDefault();
            var quantity = $(this).closest('form').find('input.quantity').val(),
            var productID = $(this).closest('form').find('*[name=id]').val();
            addItem(productID, quantity);
        }
    });

}

You also have a bug that is leaking memory. See attached screenshot. 

Stop Stressing About Shopify You’ve Got Better Things To Do => https://320ny.com/shopify/
0 Likes
Highlighted

Hello

I added the above code, but now the QuickView option not desiplay on mouse hover of Product box.

thanks!

Shopify
0 Likes
Highlighted
Shopify Expert
195 0 25

You must have removed the code that shows the quickview. Please be careful with what you are removing. 

Stop Stressing About Shopify You’ve Got Better Things To Do => https://320ny.com/shopify/
0 Likes
Highlighted

No. when i used the following code, then it works!

 if (tourDate.val() == '') {
      //alert("Please select Date of Tour!");
      }
      else{
        e.preventDefault();
        var quantity = $(this).closest('form').find('input.quantity').val(),
              productID = $(this).closest('form').find('*[name=id]').val();
        addItem(productID, quantity);
        $('#tourdate').val('');
      }

 

But when i changed it to following code then it not working!

 
           var tourDate = $(this).parents('form').first().find('.tourdate').val();
        if (tourDate.val() == '') {
            alert("Please select Date of Tour!");
        } else{
            e.preventDefault();
            var quantity = $(this).closest('form').find('input.quantity').val(),
            var productID = $(this).closest('form').find('*[name=id]').val();
            addItem(productID, quantity);
        }

 

Shopify
0 Likes
Highlighted
Shopify Expert
195 0 25

The code you posted should have nothing to do with displaying and showing the quickview. 

Plus you have the alert code commented out so I'm not sure what you are trying to do with that.

If you're not comfortable with Javascript this might be hard. I suggest you contacting a Shopify Expert or the jobs board to help you out. 

Stop Stressing About Shopify You’ve Got Better Things To Do => https://320ny.com/shopify/
0 Likes