Skip to main content

Updating the shopping cart

Updating the shopping cart with user feedback

The REST API makes it possible to update elements in the online store without having to reload the entire page. In this example, the REST API is used to update the number of items in the shopping cart and to display a preview of the shopping cart for three seconds after the customer has added an item to it.

REST URIs that are used:

The code displayed in this example can be inserted after any button that is used for ItemView templates and that has a CLASS attribute with the value add_Basket_Item.

Requirements

The following requirements must be met for this case example:

  • Basic knowledge of the framework jQuery

  • Use of the design callisto_light

Saving items on the server

Use the REST URI /rest/checkout/basketitemslist/ with the POST method to save items in the shopping cart on the server.

An example call is displayed below. It sends an item to the server via REST.

<script type="text/javascript">
		$.ajax(
		"/rest/checkout/basketitemslist/",
		{
			type: 'POST',
			dataType: 'json',
			data: article,
			success: function ()
			{
							},
			error: function ()
			{
							}
		}
	);
</script>

Updating the frontend

Once an item has been placed in the shopping cart on the server, the elements in the frontend need to be updated so that the customer sees the new item quantity. First, the REST interface queries the new number of items in the shopping cart.

Calculating the number of items in the shopping cart

Use the REST URI /rest/checkout/basketitemslist/ with the GET method to query the current number of items in the shopping cart.

Customers might place several copies of some items in the shopping cart and only one copy of other items. As such, it is necessary to iterate all of the items and add up the total quantity. The items in the shopping cart are located in the data array of the response object, which is passed to the success function. The property BasketItemQuantity indicates the quantity of an item. The jQuery element $('#basket_quantity') is updated once the total number of items in the shopping cart has been calculated. This element displays the number of items in the shopping cart.

An example REST call is displayed below. It queries and adds the number of items in the shopping cart.

<script type="text/javascript">
		$.ajax(
		"/rest/checkout/basketitemslist/",
		{
			type: 'GET',
			dataType: 'json',
						success: function(response)
			{
								var count = 0;
				$.each(response.data, function(i, el)
				{
					count += el.BasketItemQuantity;
				});

								$('#basket_quantity').text(count);

								$("[data-plenty-basket-empty]").removeClass("disabled");
			},
			error: function()
			{
							}
		}
	);
</script>

Updating the shopping cart list

In this step, the old shopping cart list is replaced by the new list. The REST URI /rest/itemview/container_itemviewbasketpreviewlist/ returns an HTML fragment, which simply needs to be inserted at the appropriate location.

Just as in the previous example, the HTML fragment is located in the response object, which is passed to the success function. It is also located in the data array. Use the jQuery selector $('[data-plenty-remotetabs-id="aside"]') to select the HTML element that contains the shopping cart preview in the design callisto_light. The old shopping cart list is removed by applying the jQuery function empty() to the selected element. This ensures that multiple copies of the shopping cart list are not displayed in the shopping cart preview. Use the jQuery selector $(".isBasketPreview > .dropdown-menu") to display the shopping cart preview for a few seconds. We recommend using the native JavaScript function setTimeout() to specify when the shopping cart preview should disappear.

An example code is displayed below. It updates the shopping cart preview and displays the shopping cart for three seconds.

<script type="text/javascript">
		$.ajax(
		"/rest/itemview/container_itemviewbasketpreviewlist/",
		{
			type: "GET",
			dataType: "json",
						success: function(response)
			{
								$('[data-plenty-remotetabs-id="aside"]').empty().append($(response.data[0]));

								$(".isBasketPreview > .dropdown-menu").fadeIn();
				setTimeout(function()
				{
										$(".isBasketPreview > .dropdown-menu").removeAttr("style");
				}, 3000);
			},
			error: function()
			{
							}
		}
	);
</script>

Summarized example code

The following example code includes all of the operations that were described on this page. They update the number of items in the shopping cart, update the shopping cart in the header area and display the shopping cart preview for three seconds.

<button type="button" class="btn btn-primary add_To_Basket">
	<span class="glyphicon glyphicon-shopping-cart"></span> add to shopping cart
</button>
<script type="text/javascript">
	(function($)
	{
				var article = JSON.stringify(
					[{
						BasketItemItemID: $ID, 									BasketItemPriceID: $PriceID, 							BasketItemQuantity: 1 								}]);

				$(".add_To_Basket").click(function()
		{
						$.ajax(
				"/rest/checkout/basketitemslist/",
				{
					type: 'POST',
					dataType: 'json',
					data: article,
					success: function ()
					{
						
												$.ajax(
							"/rest/checkout/basketitemslist/",
							{
								type: 'GET',
								dataType: 'json',
								success: function(response)
								{
									
									var count = 0;
									$.each(response.data, function(i, el)
									{
										count += el.BasketItemQuantity;
									});

																		$('#basket_quantity').text(count);

																		$("[data-plenty-basket-empty]").removeClass("disabled");
								},
								error: function()
								{
																	}
							}
						);

												$.ajax(
							"/rest/itemview/container_itemviewbasketpreviewlist/",
							{
								type: "GET",
								dataType: "json",
								success: function(response)
								{
									
																		$('[data-plenty-remotetabs-id="aside"]').empty().append($(response.data[0]));

																		$(".isBasketPreview > .dropdown-menu").fadeIn();
									setTimeout(function()
									{
																				$(".isBasketPreview > .dropdown-menu").removeAttr("style");
									}, 3000);
								},
								error: function()
								{
																	}
							});
					},
					error: function ()
					{
											}
				}
			);
		});
	})(jQuery);
</script>
To top