The shop-ajax module:
composer require markguinn/silverstripe-shop-ajax
jQuery and the jsUri JavaScript library (used for URL manipulation).
Install using NPM:
npm install --save-dev jsuri
Or using Bower:
bower install --save jsUri
… or just grab the sources from GitHub.
In your ProductGroupItem.ss
add the ajax
and add-to-cart
classes to your add-to-cart Link. Example:
<% if $canPurchase %>
<a href="$addLink" title="<%t Product.AddToCart "Add to Cart" %>" class="ajax add-to-cart">
<%t Product.AddToCart "Add to Cart" %>
</a>
<% end_if %>
Then add the following JavaScript:
$("a.add-to-cart").each(function(){
var $this = $(this);
var stepper = $('<input type="number" min="1" max="99" step="1" value="1" name="quantity"/>');
stepper.data("target", $this).on("change", function(evt){
var qtty = parseInt($(this).val());
var maxQtty = parseInt($(this).attr("max"));
qtty = Math.min(maxQtty, qtty);
var tgt = $(this).data("target");
var uri = new Uri(tgt.attr("href"));
if(uri.hasQueryParam("quantity")) {
uri.replaceQueryParam("quantity", qtty);
} else {
uri.addQueryParam("quantity", qtty);
}
tgt.attr("href", uri.toString());
});
$this.before(stepper);
});