Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
shopify ajax add to cart
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<script>
var cartCount = {{ cart.item_count }};
$(document)
.ready(function() {
{% if cart.item_count != 0 %}
$('#cart-number')
.replaceWith('<a href="/cart" id="cart-number">View cart(' + cartCount + ')</a>');
{% endif %}
$('.modal--overlay')
.on('click', function() {
var overlay = $('.modal--overlay');
closeModal(overlay);
});
});
function addItem(form_id) {
$.ajax({
type: 'POST',
url: '/cart/add.js',
dataType: 'json',
data: $('#' + form_id)
.serialize(),
success: addToCartOk,
error: addToCartFail
});
}
function showCart() {
$.ajax({
type: 'POST',
url: '/cart/add.js',
dataType: 'json',
data: $('#' + form_id)
.serialize(),
success: addToCartOk,
error: addToCartFail
});
}
function addToCartOk(product) {
cartCount++;
$('.modal')
.html('<span class="close" id="close">✕</span>' + product.title + ' was added to the cart!');
$('#cart-number')
.replaceWith('<a href="/cart" id="cart-number">View cart(' + cartCount + ')</a>');
openModal();
}
function addToCartFail(obj, status) {
$('.modal')
.html('<span class="close" id="close">✕</span> The product you are trying to add is out of stock.');
openModal();
}
//Modal Actions
//center modal based on window size
function centerModal() {
var modal = $('.modal.open');
var mWidth = modal.outerWidth();
var mHeight = modal.outerHeight();
var width = $(window)
.width();
var height = $(window)
.height();
if ((width % 1) != 0) {
width = Math.round(width);
}
if ((height % 1) != 0) {
height = Math.round(height);
}
var topPos = (height / 2) - (mHeight / 2);
var leftPos = (width / 2) - (mWidth / 2);
modal.css({top: topPos, left: leftPos});
}
//open modal and overlay
function openModal() {
$('.modal')
.removeClass('hidden')
.addClass('open');
$('.modal--overlay')
.removeClass('hidden')
.addClass('open');
$('body')
.css('overflow', 'hidden');
centerModal();
}
//close modal and overlay
function closeModal(overlay) {
$(overlay)
.addClass('hidden')
.removeClass('open');
$('.modal.open')
.addClass('hidden')
.removeClass('open');
$('body')
.css('overflow', 'auto');
}
</script>
<style>
.modal {
max-width: 575px;
background: white;
border: 5px solid #111;
padding: 50px 65px;
position: fixed;
z-index: 1000;
}
.modal .close {
position: absolute;
top: 10px;
right: 20px;
font-size: 20px;
cursor: pointer;
}
.modal--overlay {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 100;
background-color: rgba(0, 0, 0, 0.4);
}
.hidden {
display: none;
}
</style>
<a id="cart-number" href="/cart"></a>
<div class="modal hidden" id="download-modal"></div>
<div class="modal--overlay hidden"></div>
<!--product form-->
<form action="/cart/add" method="post" enctype="multipart/form-data" id="add-to-cart-{{ product.handle }}">
<!--product add to cart-->
<button
class="single-product__add-to-cart u-b6"
type="submit"
name="add"
data-add-to-cart
{% unless current_variant.available %}disabled="disabled"{% endunless %}
onclick="addItem('add-to-cart-{{ product.handle }}'); return false;">
<span data-add-to-cart-text>
{% if current_variant.available %}
{{ 'products.product.add_to_cart' | t }}
{% else %}
{{ 'products.product.sold_out' | t }}
{% endif %}
</span>
</button>
<!--end product add to cart-->
</form>
<!--end product form-->
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment