Ad

Setting Delivery Date Picker In Shopify For Specific Items Only

- 1 answer

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.

Ad

Answer

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 target="_blank" rel="nofollow noreferrer" 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 %}
Ad
source: stackoverflow.com
Ad