Recapitulation Payment and delivery Contact information

Contact information

Payment and delivery

Behind the scene

Global configuration

				<script>
					window.apicartConfig = window.apicartConfig || [];
					function apicartConfigure(config){apicartConfig.push(config)}
					apicartConfigure({
						token: "1234567890",
						currencySymbol: '$',
						currencySymbolPositionLeft: true,
						currencySymbolWithSpace: false
					});
				</script>
			
Cart Dropdown

				<script>
					...
					apicartConfigure({
						...
						init: function () {
							apicart.cartDropdown.render({
								el: '.cart-dropdown',
								showQuantityManipulator: true,
								removalButton: '<i class="fa fa-times-circle" data-apicart-cart-remove-item="%dataUrl%" role="button"></i>',
								toggleButton: '<i class="fa fa-shopping-cart fa-lg cursor-pointer"></i> <strong class="cart-dropdown-items-count">%itemsCount%</strong>',
								infoBlock: '<strong>%name%</strong>',
								footerBlocks: [
									function (itemsCount, itemsPrice) {
										return '<div class="text-left">Number of items: ' + itemsCount + '<br>Total price: '
													+ Brackets.getFilter('currency').call(null, itemsPrice);
												+ '</div>';
									},
									'<div class="text-right"><a href="/cart-overview.html" class="btn btn-danger">Finish Order<i class="fa fa-chevron-circle-right ml-1"></i></a></div>'
								]
							});
						}
					});
				</script>
			
Add item to basket forms

				<script>
					...
					apicartConfigure({
						...
						init: function () {
							...
							var quantityManipulators = document.querySelectorAll('.quantity-manipulator');
							Utils.loops.forEach(quantityManipulators, function (key, quantityManipulator) {
								apicart.cartQuantityManipulator.render({
									el: quantityManipulator,
									itemUrl: quantityManipulator.getAttribute('data-item-url'),
									submitButton: 'Add to Cart'
								})
							});
						}
					});
				</script>
			
Popup - item added to basket

				<script>
					...
					apicartConfigure({
						...
						init: function () {
							...
							Utils.eventDispatcher.addListener('item-added-popup', apicart.cart.events.ITEM_ADDED, function (item) {
								var popup = $('#add-to-cart-modal');
								popup.find('.modal-title').html('Cart updated 🎉️');
								popup.find('.modal-body').html('' + item.name + ' was successfully added into the cart!');
								popup.modal('show');
							});
						}
					});
				</script>
			
Order recapitulation

				<script>
					...
					apicartConfigure({
						...
						init: function () {
							...
							apicart.cartOverview.render({
								el: '.cart-overview',
								showQuantityManipulator: true,
								infoBlocks: [
									'<strong>%name%</strong>'
								],
								footerBlocks: [
									function (itemsCount, itemsPrice) {
										return '<p class="text-right">Total price: ' + Brackets.getFilter('currency').call(null, itemsPrice) + '</p>';
									},
									'<div class="text-right"><a href="/payment-and-delivery.html" class="btn btn-danger">Payment and delivery <i class="fa fa-chevron-circle-right ml-1"></i></a></div>'
								]
							});
						}
					});
				</script>
			
Payment and delivery fields

				<select id="shipping-methods" class="custom-select" data-bind="cart.shippingMethod" data-apicart-cart-add-parameter="shippingMethod.id">
					<option disabled selected>---</option>
					{{foreach shippingMethods as shippingMethod}}
						{{returnIf ! shippingMethod.all.enabled}}

						<option value="{{$shippingMethod.all.id}}">{{$shippingMethod.all.name}}</option>
					{{/foreach}}
				</select>
				<select id="payment-methods" class="custom-select" data-bind="cart.paymentMethod" data-apicart-cart-add-parameter="paymentMethod.id">
					<option disabled selected>---</option>
					{{foreach paymentMethods as paymentMethod}}
						{{returnIf ! paymentMethod.all.enabled}}

						<option value="{{$paymentMethod.all.id}}">{{$paymentMethod.all.name}}</option>
					{{/foreach}}
				</select>
				<script>
					...
					apicartConfigure({
						...
						init: function () {
							...
							apicart.paymentMethods.manager.getPaymentMethods(null, function (responseIsOk, response) {
								Brackets.render({
									el: '#payment-methods',
									data: {
										paymentMethods: responseIsOk ? response.data.findPaymentMethods.paymentMethods : null
									}
								});

								Utils.dataBinder.bindData(true);
							});

							apicart.shippingMethods.manager.getShippingMethods(null, function (responseIsOk, response) {
								Brackets.render({
									el: '#shipping-methods',
									data: {
										shippingMethods: responseIsOk ? response.data.findShippingMethods.shippingMethods : null
									}
								});

								Utils.dataBinder.bindData(true);
							});
						}
					});
				</script>
			
Contact information fields

				<input type="email" class="form-control" data-bind="cart.customer.email" data-apicart-cart-add-parameter="shippingAddress.email">
				<input type="text" class="form-control" data-bind="cart.customer.firstName" data-apicart-cart-add-parameter="shippingAddress.firstName">
				<input type="text" class="form-control" data-bind="cart.customer.lastName" data-apicart-cart-add-parameter="shippingAddress.lastName">
				<input type="text" class="form-control" data-bind="cart.payment.streetAndNumber" data-apicart-cart-add-parameter="shippingAddress.streetAndNumber">
				<input type="text" class="form-control" data-bind="cart.payment.town" data-apicart-cart-add-parameter="shippingAddress.city">
				<input type="number" class="form-control" data-bind="cart.payment.zip" data-apicart-cart-add-parameter="shippingAddress.zip">
			
Sent order button

				<script>
					...
					apicartConfigure({
						...
						init: function () {
							...
							Utils.eventDispatcher.addListener('cart-finished', apicart.cart.events.FINISHED, function (ok) {
								var popup = $('.modal');
								popup.find('.modal-title').html('Order sent 🎉️️');
								popup.find('.modal-body').html('<p class="text-center"><strong>Your order has been successfully sent!️️</strong></p><div class="text-center"><small><i>You will be redirected</i></small></div>');
								popup.modal('show');
								setTimeout(function () {
									Utils.dataBinder.removeData('cart');
									window.location.href = "/"
								}, 3000);
							});
						}
					});
				</script>
			

				<button class="btn btn-danger apicart-cart-finish">Finish Order <i class="fa fa-chevron-circle-right ml-1"></i></button>
			
Empty cart flash messages

				<script>
					...
					apicartConfigure({
						...
						init: function () {
							...
							redirectIfCartIsEmpty();

							Utils.eventDispatcher.addListener('empty-cart', apicart.cart.events.UPDATED, function () {
								redirectIfCartIsEmpty();
							});

							function redirectIfCartIsEmpty() {
								if ( ! apicart.cart.manager.hasItems()) {
									Utils.flashMessages.addMessage('Your cart is empty 😱!');
									window.location.href = '/';
								}
							}
						}
					});
				</script>
			

				<script>
					...
					apicartConfigure({
						...
						init: function () {
							...
							if (Utils.flashMessages.hasMessages()) {
								var messages = '';

								Utils.flashMessages.processMessages(function (content) {
									if (messages) {
										messages += '<br>';
									}

									messages += '<div class="text-center"><strong>' + content + '</strong></div>';
								});

								var popup = $('#flash-messages-modal');
								popup.find('.modal-body').html(messages);
								popup.modal('show');
							}
						}
					});
				</script>