Change the Datepickers Settings Based on Products in the Cart 📅

If you gather dates with Giftship’s Datepicker tool, and would like your customers to select a date only one time per order, but need to conditionally change the datepickers settings based on the products in your cart, this article is for you!

If you collect delivery dates on a per-product basis, then you can accomplish everything outlined below using the product options feature within Giftship – no code required.

Please note, the following is an advanced tutorial, that requires code changes to your theme. It is always recommended to make edits to an unpublished theme, so you do not effect your live site in case of mistakes.

Step 1: Add the snippet to your theme.

First, navigate to Shopify Admin -> Online Store -> Themes -> Actions -> Edit Code.

In the left hand bar, click Snippets, then “add a new snippet”. Name your snippet “giftship-conditional-datepicker” for easy reference later.

Copy all of the below code into your new snippet, and click save.

{% if template contains 'cart' %}
<script>
  
  /**
   * This script will read from the products tags, and re-initialize Giftship's datepicker on the cart page based on the products specific requirements 
   *
   * To configure, tag a product with the corresponding options, along with the configuration value, after an underscore.
   *
   *****************
   * Options
   *
   * Max Date:
   *   format: gs_max_date_%formateddate% 
   *   example: gs_max_date_2020-09-31
   *
   * Lead Time:
   *   format: gs_lead_time_%numberOfDays% 
   *   example: gs_lead_time_14
   *
   * Additional Disabled Dates:
   *   format: gs_disabled_date_%formateddate% 
   *   example: gs_disabled_date_2020-09-31
   *
   */
  
  var GsLoaded = function() {

    
    // Only run this function if Giftship is installed
    if (typeof Gs == 'undefined' || !Gs.datepicker || Gs.datepicker.enable !== 1) {
      return false;
    }
    
    var maxDates      = [];
    var leadTimes     = [];
    var disabledDates = Gs.options.datepicker.disabled_dates;
    var maxDate       = Gs.options.datepicker.max_date; 
    
    // Build arrays of min and max dates based on the product tags
    
    {% for item in cart.items %}

      {% assign tags = item.product.tags %}

      {% for tag in tags %}

        {% if tag contains "gs_max_date" %}
          maxDates.push("{{ tag | replace: "gs_max_date_", "" }}");
        {% endif %}

        {% if tag contains "gs_lead_time" %}
          leadTimes.push("{{ tag | replace: "gs_lead_time_", "" }}");
        {% endif %}
                        
        {% if tag contains "gs_disabled_date" %}
          disabledDates.push("{{ tag | replace: "gs_disabled_date_", "" }}");
        {% endif %}                 

      {% endfor %}

    {% endfor %}
                        
    // Configure Giftship's settings
                        
    Gs.options.datepicker.disabled_dates = disabledDates;
    
    if (maxDates.length > 0) {
      
      Gs.options.datepicker.max_date = maxDates.reduce(function (pre, cur) {
        return Date.parse(pre) > Date.parse(cur) ? cur : pre;
      });
      
    }
    
    if (leadTimes.length > 0) {
      
      leadTimes.push(Gs.options.datepicker.lead_time);
      
      Gs.options.datepicker.lead_time = leadTimes.reduce(function (pre, cur) {
        return pre < cur ? cur : pre;
      });
      
    }
                        
    // Re-initialize the datepicker
    
    Gs.datepicker.init();

                      
  };
  
</script>

{% endif %}

Now that you have saved your snippet, open up your theme.liquid file under the “Layout” section in your theme editor. Right before the closing body html tag, paste the following code, then click save.

{% include 'giftship-conditional-datepicker' %}

In the top of the snippet you just added, there are instructions on how to tag your products, so that Giftship will recognize your new dynamic settings.

It is important to follow the exact format for dates, otherwise, the script will not work.