Create a gist now

Instantly share code, notes, and snippets.

Embed
Display a message if the product is already in the cart
{% 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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment