Creating an interactive AJAX cart drawer in Shopify improves the purchasing experience by allowing consumers to manage their carts in real-time. This tutorial will lead you through the process of creating a dynamic cart drawer that allows users to modify product variants, such as sizes, right from the cart. In addition, we will include a feature that displays tailored product recommendations, providing customers with a seamless and enjoyable shopping experience. By taking these steps, you may improve your store's user experience, increase customer satisfaction, and possibly increase sales through more interactive cart management.
Step 1: Add dropdown for all variant options in cart drawer file
<div class="cart-item" data-line-item-key="{{ item.key }}">
<select class="size-selector" data-variant-id="{{ item.variant_id }}">
{% for variant in item.product.variants %}
<option
value="{{ variant.id }}"
{% if item.variant.id == variant.id %}
selected
{% endif %}
>
{{ variant.title }}
</option>
{% endfor %}
</select>
</div>
Step 2: Allow Users to Change Product Variant (Size)
<script>
$(document).on('change', '.size-selector', function() {
var variantId = $(this).val();
var lineItemKey = $(this).closest('.cart-item').data('line-item-key');
var qty = $(this).closest('.cart-item').find('.quantity__input').val();
var selectedText = $(this).find('option:selected').text();
$('#option_data').html(variantId);
console.log('Selected variant ID:', variantId);
$.ajax({
type: 'POST',
url: '/cart/change.js',
data: {
id: lineItemKey,
quantity: 0
},
dataType: 'json',
success: function(response) {
$.ajax({
type: 'POST',
url: '/cart/add.js',
data: {
items: [{
id: variantId,
quantity: qty
}]
},
dataType: 'json',
success: function(response) {
showUpdateMessage(selectedText);
setTimeout(function() {
refreshCartDrawer(variantId);
}, 2000);
},
error: function(error) {
console.log('Error adding new variant:', error.responseText);
}
});
},
error: function(error) {
console.log('Error removing old variant:', error.responseText);
}
});
});
function showUpdateMessage(updatedSize) {
$('#CartDrawer').append('<div class="cart-update-message">Size updated to: ' + updatedSize + '</div>');
$('.cart-update-message').fadeIn();
setTimeout(function() {
$('.cart-update-message').fadeOut();
}, 3000);
}
function refreshCartDrawer(variantId) {
$.ajax({
url: '/cart',
dataType: 'html',
success: function(data) {
$('#CartDrawer').html($(data).find('#CartDrawer').html());
$('.size-selector option[value="' + variantId + '"]').prop('selected', true);
},
error: function(error) {
console.log('Error refreshing cart:', error.responseText);
}
});
}
</script>
Step 3: Create a snippet file
First create the metafield of the product and then go to every product and add the recommended product accordingly.
<div class="recommended-products">
<h3>Recommended for You</h3>
<ul>
{% for product_id in item.product.metafields.custom.recommended_product.value %}
<li>
<img src="{{ product_id.featured_image | img_url: 'small' }}" alt="{{ product_id.title }}">
<p>{{ product_id.title }}</p>
<span id="option_data"></span>
<span>{{ product_id.price | money }}</span>
<div class="cart-item" data-line-item-key="{{ item.key }}">
<select class="size-selector" data-variant-id="{{ item.variant_id }}">
{% for variant in item.product.variants %}
<option
value="{{ variant.id }}"
{% if item.variant.id == variant.id %}
selected
{% endif %}
>
{{ variant.title }}
</option>
{% endfor %}
</select>
</div>
</li>
{% endfor %}
</ul>
</div>
Step 4: Test Cart Drawer
Check if the product variants are updated and recommended products are updated automatically or not.
Congratulations! You have now created a fully working and dynamic AJAX cart drawer for your Shopify store. You've improved the shopping experience for customers by allowing them to alter product variants and view dynamic recommendations. Make care to thoroughly test all features, including variant updates and recommended items, to ensure they perform as expected.
Implementing these steps can result in a more positive purchasing experience, perhaps increasing conversions and client loyalty. Stay tuned for more updates to help you optimize your Shopify store and make the most of your e-Commerce business!
WhatsApp
