Fixed

V283-01

Geeft een knop weer die naar de transactie module's winkelwagen toegaat. Let wel op de knop zal al automatisch de opmaak overnemen van de andere knoppen op de website. Dus als hier al bijvoorbeeld rondingen op ingesteld zijn dan zullen deze ook al automatisch hierop toegepast worden.

Door onderstaande opmaak wordt de knop een zweevende knop die over de website heen komt te liggen en altijd rechts onder in beeld blijft.

Hoe te gebruiken?

Voeg de HTML tag voor de partial toe aan de pagina <nc-transaction-cart></nc-transaction-cart>. Neem vervolgens onderstaande CSS over in de website's stylesheet.

Voorvertoning

CSS
Kopiëren/* Fix the cart button to the viewport. */
[data-partial="transaction-cart"] .transaction-cart-link {
	position: fixed;
	z-index: 5;
	bottom: 3rem;
	right: 0;
	margin-right: 15px;
	min-width: unset !important;
	color: white !important;
}
@media screen and (min-width: 576px) {
	[data-partial="transaction-cart"] .transaction-cart-link {
		right: calc(50vw - calc(var(--container-width) / 2));
	}
}
/* Hide the button in the shopping cart. */
body:has(.cart-wrapper) [data-partial="transaction-cart"] .transaction-cart-link {
	display: none;
}
/* Hide the button title. */
[data-partial="transaction-cart"] .transaction-cart-link .transaction-cart-link-title {
	display: none;
}
[data-partial="transaction-cart"] .transaction-cart-link .transaction-cart-link-icon {
	margin-right: 0.5rem;
}