Setting Delivery Date picker in Shopify for specific items only

Question

I'm trying to get the delivery date picker in Shopify to only be available for specific items please. Here's the code I currently have..

{{ '//code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css' | stylesheet_tag }}
{{ '//ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js' | script_tag }}

<div class="pickadate">
  <p>
    <label for="date">Pick a pick up date:</label>
    <input id="date" type="text" name="attributes[date]" value="{{ cart.attributes.date }}" />
    <span style="display:block" class="instructions"> <strong>Please note, cleanses need to be picked up between 9am and 10am from:</strong> <br /><br /><strong>The Juice Parlor</strong><br />5658 Cahuenga Blvd,<br />North Hollywood, CA 91601.</span>
  </p>
</div>

<script>
jQuery(function() {
  jQuery("#date").datepicker( { 
    
    minDate: +2, 
    maxDate: '+2M',
    beforeShowDay: jQuery.datepicker.noWeekends
  } );
  
});
</script>

{% comment %}
  To remove days of the week that aren't Saturday and Sunday, use this:
  http://stackoverflow.com/questions/2968414/disable-specific-days-of-the-week-on-jquery-ui-datepicker
{% endcomment %}

<script>
    jQuery(document).ready(function() {

        jQuery('input[name="checkout"], input[name="goto_pp"], input[name="goto_gc"]').click(function() {
            if (jQuery('#date').val() == '') {
                alert("You must pick a pick up date.");
                return false;
            } else {
                jQuery(this).submit();
            }
        });
    });
</script>

I only want to have the code require and even show the delivery date option if the item in the cart is for "Cleanse" only.

And if there are 2 items in the cart.. like a cleanse and a t-shirt... I only want the date picker to be available for the "Cleanse" please.

"Cleanse" is it product title? Can you also include a HTML how you rendering line items in your shopping cart — Victor Leontyev, Oct 24 '17 at 07:31
Sure here is the link to the cart: https://the-juice-parlor.myshopify.com/cart — DC FLASH, Oct 25 '17 at 19:21
There is a basic t-shirt item and a cleanse item on the site for testing purposes. — DC FLASH, Oct 25 '17 at 19:21

score 0 · Accepted Answer · answered Oct 26 '17 at 18:07

Something like this will work for you. This code is checking if in your cart you have Cleanse item, then it's showing date picked and making this datepicker as required

{% assign productTitleStr =  cart.items | map: 'title'| uniq | join: ', ' %}
{% if productTitleStr contains 'Cleanse' %}
    <link href="//code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" media="all" />
    <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js" type="text/javascript"></script>

    <div class="pickadate">
        <p>
            <label for="date">Pick a pick up date:</label>
            <input id="date" type="text" name="attributes[date]" value="" required/>
            <span style="display:block" class="instructions"> <strong>Please note, cleanses need to be picked up between 9am and 10am from:</strong> <br /><br /><strong>The Juice Parlor</strong><br />5658 Cahuenga Blvd,<br />North Hollywood, CA 91601.</span>
        </p>
    </div>

    <script>
        jQuery(document).ready(function() {
            jQuery("#date").datepicker( {
                minDate: +2, 
                maxDate: '+2M',
                beforeShowDay: jQuery.datepicker.noWeekends
            });
            jQuery('input[name="checkout"], input[name="goto_pp"], input[name="goto_gc"]').click(function() {
                if (jQuery('#date').val() == '') {
                    alert("You must pick a pick up date.");
                    return false;
                } else {
                    jQuery(this).submit();
                }
            });
        });
    </script>
{% endif %}

Amazing! Worked! Thank you! – DC FLASH Oct 26 '17 at 18:54 — DC FLASH, Oct 26 '17 at 18:54

Setting Delivery Date picker in Shopify for specific items only

1 Answers1