Add a booking deposit product to the cart

booking-deposit.liquid

{% comment %}

Adds deposit products to the cart based on how many 
booking products are in the cart.

Instructions:
1. Create a snippet called 'booking-deposit' and paste the contents of this gist. Also create a new Deposit product (must be visible in Online channel)

2. Include the snippet in cart.liquid (at the bottom):
  {% include 'booking-deposit' %}

3. (still in cart.liquid) Make the quantity field read only for rental and deposit products:
{% if item.product.metafields.bookthatapp.config or item.product.handle == 'deposit' %}
  // show quantity amount and make the input field a hidden one
{% else %}
  // normal quantity input here
{% endif %}

4. (still in cart.liquid) Don't allow removal of deposit products:
{% unless item.product.handle == 'deposit' %}
  // normal remove code here
{% endunless %}

{% endcomment %}

{% assign deposit_id = all_products['deposit'].variants.first.id %}

<script>
  Depositor = {
    updateQuantity: function(qty) {
      var data = { 
        updates: {
          {{ deposit_id }}: qty 
        } 
      };
      
      jQuery.ajax({
        type: 'POST',
        url: '/cart/update.js', 
        data: data, 
        dataType: 'json',
        success: function() { document.location.href = '/cart'; },
        error: function(jqXHR, textStatus, errorThrown) {
          console.log([jqXHR, textStatus, errorThrown]);
        }
      });
    }
  }
  
  {% assign deposit_count = 0 %}
  {% assign bta_product_count = 0 %}

  {% for item in cart.items %}
    {% if item.id == deposit_id %}
      {% assign deposit_count = item.quantity %}
    {% endif %}

    {% if item.product.metafields.bookthatapp.config %}
      {% capture bta_product_count %}{{ bta_product_count | plus: 1 }}{% endcapture %}
    {% endif %}
  {% endfor %}
  {% assign bta_product_count = bta_product_count | plus:0 %}
  
  // load api.jquery.js using async
  var s = document.createElement( 'script' );
  s.setAttribute('src', "{{ 'api.jquery.js' | shopify_asset_url }}");
  s.async = true;
  document.body.appendChild(s);        

  document.addEventListener("DOMContentLoaded", function(event) {
  {% if cart.items.size == 1 and deposit_count == 1 %}
    // no products other than deposit in cart
    Depositor.updateQuantity(0); 
  {% elsif deposit_count != bta_product_count %}
    // products: {{ bta_product_count }} / deposits: {{ deposit_count }}
    Depositor.updateQuantity({{ bta_product_count }});
  {% endif %}
  });
</script>

Hi I'm trying to set this up on my shopify store, but need a little help! I need to charge a rental deposit for a selection of products on my site, (all in the same category) When the customer adds one of the items in the rental category, a deposit is automatically added to the basket too. I've completed steps 1. and 2. above - but am unsure where to type in the steps 3-4? I have no coding knowledge, so would really appreciate just a few more instructions! Thank you :)

Sorry @Sheib I didn't see your comment until now. Please send an email to [email protected] for help with this.

I have emailed them but they say they don't support this and have referred me back to here :(

Hi @Sheib - email me at [email protected] and I'll see if I can help.

Hi, I am hoping to get some extra instructions on this too please! Step 3 to 4 have stumped me...