Winkelwagen

P283-00 / V283-00

Standaard winkelwagen overzicht van de transactie module.

Let op dit product en view deelt de product nummer en view nummer met de winkelwagen knop.


Voorvertoning

Alvast beginnen met een basis opmaak?

Neem de onderstaande code over in de website om alvast met een basis opmaak te beginnen.
CSS
.cart-wrapper {
	margin: 2rem 0;
}
.cart-alert {
	padding: 2rem 1.5rem;
	margin-bottom: 30px;
	border-radius: var(--panel-radius);
	background-color: var(--primary-bg);
	text-align: center;
}
.cart-form .cart-details,
.cart-form .cart-discount,
.cart-form .cart-items,
.cart-form .cart-payment-methods,
.cart-form .cart-summary {
	padding: 2rem 1.5rem 1rem;
	margin-bottom: 30px;
	border-radius: var(--panel-radius);
	background-color: var(--primary-bg);
}
.cart-form .cart-summary .cart-price-excl,
.cart-form .cart-summary .cart-price-vat,
.cart-form .cart-summary .cart-price-delivery-excl,
.cart-form .cart-summary .cart-price-delivery-vat,
.cart-form .cart-summary .cart-price-discount-excl,
.cart-form .cart-summary .cart-price-discount-vat,
.cart-form .cart-summary .cart-price-total-excl {
	display: none;
}
.cart-form .cart-discount details:not([open]) {
	margin-bottom: 0.75rem;
}
.cart-form .cart-discount details summary {
	position: relative;
	margin-right: 2rem;
	list-style: none;
}
.cart-form .cart-discount details summary::after {
	font: var(--fa-font);
	font-size: 1rem;
	content: "\f054";
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;

	display: inline-block;
	width: 1rem;
	height: 1rem;
	position: absolute;
	top: 50%;
	right: -1.5rem;
	line-height: 1;
	text-align: center;

	transition-property: transform;
	transition-duration: 250ms;
	transform: translateY(-50%);
}
.cart-form .cart-discount details[open] summary::after {
	transform: translateY(-50%) rotate(90deg);
}
.cart-form .btn-success {
	margin-bottom: 30px;
}
.cart-form .position-sticky-top {
	/* If the navigation is sticky add it to the offset. */
	/* top: var(--navigation-height); */
}
/* Move asside for the admin bar. */
@media screen and (min-width: 991px) {
	[data-logged="true"] .cart-form .position-sticky-top {
		top: 3.125rem;
		/* If the navigation is sticky add it to the offset. */
		/* top: calc(3.125rem + var(--navigation-height)); */
	}
}