Shop - Cart and checkout features


Adding products to the cart

Add products to the cart is most often handled by a simple ajax request:

zaj.ajax.get('shop/cart/add/?product={{product.id}}', '{{#url_cart#}}');

You can also set the quantity that you wish to add:

zaj.ajax.get('shop/cart/add/?product={{product.id}}&quantity=2', '{{#url_cart#}}');

And you can add several products to the cart:

zaj.ajax.get('shop/cart/add/?product[{{product1.id}}]=1&product[{{product2.id}}]=3', '{{#url_cart#}}');

…where the key is the product id, and the value is the quantity you want to add.

If successful, ‘ok’ is returned by the ajax script and the user is sent to #url_cart#. Of course, you can override this functionality with a callback function:

zaj.ajax.get('shop/cart/add/?product={{product.id}}', function(r){
  if(r == 'ok') alert('Added successfully!');
  else alert('Failed to add: '+r);
});

Finally, there is an option to clear the cart completely before adding a new product. Use this only if you must by adding &clear=yes to the request.

Removing products from the cart

Removing products works the same as adding them, only a different endpoint is called. You can use all modes mentioned above. If you do not specify the quantity, it will remove all the items of the given product from your cart:

zaj.ajax.get('shop/cart/remove/?product={{product.id}}', '{{#url_cart#}}');

One-click shopping mode

If user accounts are enabled on a page, then a user who is logged in can skip the whole checkout process and immediately send an order with a single click.

One-click shopping will not validate whether the user has provided any billing information. So, this is recommended for electronic products (such as purchasing subscriptions) and/or in cases where the billing address is already given by the user at an earlier stage. You can also use it for PayPal payments where the billing address can be provided on PayPal.

Here’s how:

zaj.ajax.get('shop/cart/add/?product={{product.id}}&clear=yes', function(){
  submit_single_click('paymentmethod_id', 'shippingmethod_id');
});

Important! Notice that we added the &clear=yes option to the request. This will clear the current cart contents and add only what you specify in the current request. For one-click shopping this is often the desired way, but you can remove that option if you wish to order the full cart contents.

Displaying the cart and checkout page

By default, the cart and the checkout page are on a single page. You can modify the url_cart setting for your locale in the shop.en_US.lang.ini file. Then just go to http://example.com/YOUR_URL_CART_SETTING/ to display the cart page.

If this does not work, make sure you have properly set up the shop friendly urls and that you have no conflicting WordPress pages or controller methods.

Outlast Web & Mobile Development (c) 2023 | Privacy Policy |