Blog Sections Open

Recalculating Shopkeeper Totals When Quantity Buttons Change

If your cart uses custom plus and minus controls, make sure the Shopkeeper quantity update logic runs after every value change.

Shopkeeper recalculates totals correctly when its expected quantity inputs change through the normal form flow. Problems appear when the project adds custom plus and minus buttons and updates the quantity field manually without triggering the same recalculation logic.

The pattern

Wrap the quantity input with custom controls, change the input value on click, and then trigger the same update event Shopkeeper listens for.

$('.item-counter .plus').on('click', function (e) {
  e.preventDefault();
  const $input = $(this).siblings('.shk-count');
  $input.val(parseInt($input.val() || 0, 10) + 1).trigger('change');
});

$('.item-counter .minus').on('click', function (e) {
  e.preventDefault();
  const $input = $(this).siblings('.shk-count');
  const next = Math.max(1, parseInt($input.val() || 1, 10) - 1);
  $input.val(next).trigger('change');
});

Why this is usually enough

Most cart recalculation issues are not about Shopkeeper parameters at all. The cart just never receives the event that tells it the quantity changed. Once you trigger the expected update path, totals, subtotals, and dependent widgets begin to behave normally again.

Newer post

Rendering the Active Wayfinder Item as Plain Text Instead of a Link

How to keep the current menu item visible in Wayfinder while removing the clickable link from the active page.

Older post

Making Infinite Scroll Work with Fancybox Galleries

How to keep Fancybox working after new images are appended to a page with infinite scroll.