Conditionally Showing Datepicker Blocks Based on Product Types in Cart Using the Hidden Input Block

In this tutorial, we will demonstrate how to conditionally show or hide a Datepicker block based on whether a product of type “REQUIRES-DRY-ICE” is in the cart, drawer cart and multi-address cart using the Hidden Input Block.

Please note: This is an advanced tutorial and should be completed by a qualified Shopify developer familiar with Javascript. If you are not working with a developer and would like us to handle this for you, we can do so for a flat fee of $100 USD. Payment can be made by navigating to the following URL: https://shop.gist-apps.com

Step 1: Duplicate Your Live Theme

It is good practice to work on a development theme.

Step 2: Upload Snippet

Create a JS file named “giftship-dry-ice” in the “assets” folder and copy and paste the following code:

(() => {
  const MODULE = {

    init: function() {
      MODULE.events();
    },

    events: function() {

      // HANDLES FULL CART PAGE
      document.addEventListener('giftship.loaded', (e) => {
        if (window.Gs && Gs.state && Gs.state.page_type === "cart") {
          MODULE.handlers.checkSingleCart(false);
        }
      });

      // HANDLES DRAWER CART
      document.addEventListener('giftship.drawer-cart.opened', (e) => {
        var cartData = e.detail?.cartData || null;
        MODULE.handlers.checkSingleCart(true, cartData);
      });
      document.addEventListener('giftship.drawer-cart.item-updated', (e) => {
        var cartData = e.detail?.cartData || null;
        MODULE.handlers.checkSingleCart(true, cartData);
      });

      // HANDLES MULTISHIPPING CART
      document.addEventListener('giftship.shipping.rate-loaded', (e) => {
        if (window.location.pathname && window.location.pathname.includes('a/gs/cart/confirm')) {
          var index = e.detail.index;
          var shippingLineVariants = e.detail?.address?.variants || [];
          MODULE.handlers.checkMultiCart(index, shippingLineVariants);
        }
      });
        
    },

    handlers: {

      checkSingleCart: function(isDrawerCart, initialCartData = null) {

        MODULE.actions.conditionallyFetchCartData()
        .then((cartData) => {

          if (!cartData) {
            console.warn("Invalid cart data", cartData);
            return;
          }

          var requiresDryIce = cartData.items.some(item => item.product_type === "REQUIRES-DRY-ICE");
  
          var inputSelector = (isDrawerCart) ? '#gsDrawer input[name="attributes[_type]"]' : '#gsAppContainer input[name="attributes[_type]"]';
          var hiddenInput = document.querySelector(inputSelector);
    
          MODULE.actions.attemptPopulateHiddenInput(
            hiddenInput,
            requiresDryIce,
            isDrawerCart,
            function() {
              return document.querySelector(inputSelector);
            }
          );
          
        })
        .catch((err) => {
          console.warn("An error occurred handling single cart.", err);
        });

      },

      checkMultiCart: function(index, lineVariants) {

        var requiresDryIce = lineVariants.some(item => item.product_type === "REQUIRES-DRY-ICE");
  
        var inputSelector = `#gsGroup${index} input[name^="attributes[_type"]`;
        var hiddenInput = document.querySelector(inputSelector);
  
        MODULE.actions.populateHiddenInput(hiddenInput, requiresDryIce, false);
  
      }
      
    },

    actions: {

      conditionallyFetchCartData: function(cartData = null) {

        if (cartData && cartData.items && cartData.items.length) {
          return cartData;
        }
  
        return new Promise((resolve, reject) => {
  
          fetch('/cart.js')
          .then((res) => res.json())
          .then(res => resolve(res))
          .catch((err) => {
            reject(err);
          });
    
        });
    
      },

      attemptPopulateHiddenInput(hiddenInput, requiresDryIce, isDrawerCart, getHiddenInput, attempts = 0) {

        if (hiddenInput) {
          MODULE.actions.populateHiddenInput(hiddenInput, requiresDryIce, isDrawerCart);
          return;
        }
    
        if (attempts >= 5) {
          console.warn("Could not find hidden input to populate.");
          return;
        }
    
        attempts += 1;
    
        setTimeout(function() {
          var newHiddenInput = getHiddenInput();
          MODULE.actions.attemptPopulateHiddenInput(newHiddenInput, requiresDryIce, isDrawerCart, getHiddenInput, attempts);
        }, 750);
    
      },
          
      populateHiddenInput(hiddenInput, requiresDryIce, isDrawerCart) {
        
        if (!hiddenInput) {
          console.warn("Hidden input not found.", hiddenInput)
          return;
        }
    
        hiddenInput.value = (requiresDryIce) ? 'true' : 'false';
    
        MODULE.actions.checkConditions(isDrawerCart);
    
      },
    
      checkConditions(isDrawerCart) {
    
        if (isDrawerCart) {
          Gs.drawerCart.actions.checkConditions();
        } else {
          Gs.cartOptions.actions.checkConditions();
        }
        
      }
      
    }
    
  };

  MODULE.init();
    
})();

Step 3: Edit theme.liquid and Include Snippet

At the bottom of this document, directly above the closing </body> tag, paste the following code:

<script src="{{ 'giftship-dry-ice.js' | asset_url }}" defer="defer"></script>

Step 4: Add custom javascript to Multiship

Visit Giftship’s general settings > tab: Multiship and paste this into the following Shipping Address Page Custom JavaScript.

var loadJS = function(url, location){
  var scriptTag = document.createElement('script');
  scriptTag.src = url;
  location.appendChild(scriptTag);
};

loadJS("{{ 'giftship-dry-ice.js' | asset_url }}", document.body);

Step 5: Set Up a Cart Option Set

Create a cart option set and navigate to Display Settings. Make sure the cart set is set for display.

Step 6: Add a Hidden Input Block

Create a hidden input block. You can name the input anything, but for this tutorial, use “_type” and remember to uncheck “Ignore value.”

Step 7: Add the Datepicker Blocks

Create the first datepicker block and move to the display rules tab.