Display a message if the product is already in the cart

booking-guard.liquid

{% comment %}

Checks if the product is already in the cart and if
so hides the booking form and displays a message.

Install Instructions:

1. Create a new snippet called 'booking-guard' and paste this code.

2. Include this new snippet in the existing booking-form snippet, and set the initial style of the booking form 
to hidden.

For example:
- Before:
<div class="booking-form">

- After:
{% include 'booking-guard' %}
<div class="booking-form" style="display:none">

3. Add a CSS class of 'hide-if-already-in-cart' to anything you want to hide when the 
   product is already in the cart (e.g. the Add To Cart submit button)
   
4. If you theme uses 'Ajax Add to Cart' disable it (via Theme Settings). The product page needs to be 
   reloaded when a product is added to the cart for this code to work properly.

{% endcomment %}

<p class="bta-loading">Checking availability. Please wait...</p>

<div id="variant-in-cart" style="display:none">
  <p>This product is already in your cart.</p>
  <p><a class="remove-items" href="#">Remove it</a> to change dates, or <a href="/cart">continue to the cart</a>.</p>
</div>

<script>
  CartGuard = function(f, cart, product, productConfig) {
    this.cart = cart;
    this.form = f;
    this.productCapacityType = productConfig.indexOf('capacity_type=0') != -1;
    this.productId = product.id;
    
    f.data('bta.cartGuard', this);
    
    $('.booking-form', f).wrap('<div class="hide-if-already-in-cart" style="display:none">');
    $('.booking-form', f).show();

    var _this = this;

    $('.remove-items', f).click(function() {
      _this.removeCartItems(); 
      return false;
    })

    f.on('bta.dataLoaded bta.upcomingEventsLoaded', function(btaForm, data) {
      $('.bta-loading').hide();
      _this.checkCartContents();
    });

    f.on('change', '.single-option-selector', function() {
      if ($('.bta.hasDatepicker').length) {
        _this.checkCartContents();
      }
    });
  }
  
  CartGuard.prototype.removeCartItems = function() {
    var params = {updates:{}},
        items = this.cart.items;

    if (this.productCapacityType) { // remove all of this product's variants from the cart
      for (var i = 0; i < items.length; i++) {
        if (items[i].product_id == this.productId) {
          params.updates[items[i].variant_id] = 0;
        }
      }
    } else {
      params.updates[bta.findSelectedVariantId()] = 0;
    }

    var post = $.ajax({
      type: "POST",
      url: '/cart/update.js',
      data: params,
      dataType: 'json'
    });
    
    post.done(function() {
      window.location.href = window.location.pathname;        
    }).fail(function(jqXHR, textStatus, errorThrown) {
      alert("error");
    });  
  };

  CartGuard.prototype.iterateCart = function(cb) {
    for (var i = 0; i < this.cart.items.length; i++) {
      result = cb.call(this, this.cart.items[i]);
      if (typeof(result) == 'boolean' && !result) break;
    }
  };
  
  CartGuard.prototype.checkCartContents = function() {
    var exists = false,
        currentVariantId = parseInt(bta.findSelectedVariantId(), 10),
        _this = this;
    
    this.iterateCart(function(item) {
      if (item.product_id == _this.productId &&
          _this.productCapacityType ? true : item.variant_id == currentVariantId) {
        exists = true;
        return false;
      }
    });
    
    if (exists) {
      $('#variant-in-cart', this.form).show();
      $('.hide-if-already-in-cart', this.form).hide();
    } else {
      $('#variant-in-cart', this.form).hide();
      $('.hide-if-already-in-cart', this.form).show();
    }
  };
    
  // inject style
  var css = '.hide-if-already-in-cart {display:none};',
      style = document.createElement('style');

  style.type = 'text/css';
  style.styleSheet ? style.styleSheet.cssText = css : style.appendChild(document.createTextNode(css));
  (document.head || document.getElementsByTagName('head')[0]).appendChild(style);

  // use native event as jQuery may not be loaded until the end of the document
  document.addEventListener("DOMContentLoaded", function(event) { 
      if (sessionStorage.getItem('btaBookingGuard.cartVisited') === 'true') {
        sessionStorage.setItem('btaBookingGuard.cartVisited', 'false');
        location.reload(true);
      } else {
        sessionStorage.setItem('btaBookingGuard.cartVisited', 'true');
      }
      
      $('form[action="/cart/add"]').each(function() {
         new CartGuard($(this), {{ cart | json }}, {{ product | json }}, '{{ product.metafields.bookthatapp.config }}');
      });
  });
</script>