在 Shopify 中仅针对特定商品设置交货日期选择器

Question

我正在尝试让 Shopify 中的交货日期选择器仅适用于特定商品。这是我目前拥有的代码..

{{ '//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>

如果购物车中的商品仅用于“清洁”，我只想让代码要求，甚至显示交货日期选项。

如果购物车中有 2 件商品.. 像清洁剂和 T 恤...我只希望日期选择器可用于“清洁剂”。

Answer 1

这样的东西对你有用。此代码检查您的购物车中是否有 Cleanse 商品，然后显示选择日期并根据需要制作此日期选择器

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