Reach Theme

⚠️ Note: If your theme has recently been updated, some steps may require adjustment. 💾.

Product Page

Include the booking-form snippet at line 34 in snippets/product-atc.liquid.

Cart page

Change the code at line 55 in snippets/cart-item.liquid.

Original:

    <div class="cart-item-column-slide" data-cart-item-column-slide>
      {% if cart_mini %}
        {% assign quantity_id = '' %}
      {% else %}
        {% assign quantity_id = 'updates_' | append: item.id %}
      {% endif %}

      {%
        include 'quantity',
        id: quantity_id,
        name: 'updates[]',
        value: item.quantity
      %}
    </div>

Updated:

    <div class="cart-item-column-slide" data-cart-item-column-slide>
      {% if item.product.metafields.bookthatapp.config %}
      <div data-quantity>
        {{- item.quantity -}}
        <input type="hidden" id="updates_{{ item.id }}" name="quantity"  value="{{ item.quantity }}" data-quantity-input/>
        {% comment %} Just here to prevent JS errors {% endcomment %} 
        <button class="form-element-quantity-decrement" type="button" style="display:none" data-quantity-decrement></button>
        <button class="form-element-quantity-increment" style="display:none" data-quantity-increment></button>
      </div>
      {% else %}
        {% if cart_mini %}
          {% assign quantity_id = '' %}
        {% else %}
          {% assign quantity_id = 'updates_' | append: item.id %}
        {% endif %}

        {%
          include 'quantity',
          id: quantity_id,
          name: 'updates[]',
          value: item.quantity
        %}
      {% endif %}
    </div>

Theme Style

Add the following to the end of assets/theme.scss.liquid:

/* BookThatApp */
.booking-form {
  flex: 1 0 100%;
  display: flex;
  margin-top: 10px;

  input.datepicker {
    width: 100%;
    background: {
      image: url('{{ "calendar.png" | asset_url }}');
      repeat: no-repeat;
      position: right 10px center;
    }
  }
}