In deze categorie staan alle groenten uit eigen land. De meeste groenten en fruit halen wij bij boeren en tuinders in de buurt. Lekker lokaal dus. Omdat wij nu ook in Vlaanderen bezorgen, staan de Belgische groenten ook onder eigen land.
lees meer
{
// Then, we'll animate the thumbnail to the cart. This will take ~700ms.
$animate(0.7);
}, 10);
// When the thumbnail is animating, we'll also start the process to hide the thumbnail again.
// This will take 700 ms as well, so we'll start this animation after ~500ms already, so that
// it is roughly ready when the thumbnail is in the cart again.
setTimeout(() => {
$el.style.opacity = '0';
$el.style.zIndex = '-10'; // unsetten zIndex is benodigd omdat anders onderdelen niet aanklikbaar zijn op de pagina
// After the complete process is finished and the thumbnail is invisible again, we'll reset
// the animation again.
$animateReset();
isAnimating = false;
}, 712);
"
x-init="$animateReset()"
x-animate="{
top: (document.querySelector('.cart-icon').getBoundingClientRect().top + 20) + 'px',
left: (document.querySelector('.cart-icon').getBoundingClientRect().left + 20) + 'px',
width: '20px',
height: '20px',
opacity: '1.0'
}"
x-animate.reset="{
top: ($refs.reference.getBoundingClientRect().top - 200) + 'px',
left: ($refs.reference.getBoundingClientRect().left + 100) + 'px',
width: '200px',
height: '200px',
opacity: '0.0',
}">
{
// Then, we'll animate the thumbnail to the cart. This will take ~700ms.
$animate(0.7);
}, 10);
// When the thumbnail is animating, we'll also start the process to hide the thumbnail again.
// This will take 700 ms as well, so we'll start this animation after ~500ms already, so that
// it is roughly ready when the thumbnail is in the cart again.
setTimeout(() => {
$el.style.opacity = '0';
$el.style.zIndex = '-10'; // unsetten zIndex is benodigd omdat anders onderdelen niet aanklikbaar zijn op de pagina
// After the complete process is finished and the thumbnail is invisible again, we'll reset
// the animation again.
$animateReset();
isAnimating = false;
}, 712);
"
x-init="$animateReset()"
x-animate="{
top: (document.querySelector('.cart-icon').getBoundingClientRect().top + 20) + 'px',
left: (document.querySelector('.cart-icon').getBoundingClientRect().left + 20) + 'px',
width: '20px',
height: '20px',
opacity: '1.0'
}"
x-animate.reset="{
top: ($refs.reference.getBoundingClientRect().top - 200) + 'px',
left: ($refs.reference.getBoundingClientRect().left + 100) + 'px',
width: '200px',
height: '200px',
opacity: '0.0',
}">
{
// Then, we'll animate the thumbnail to the cart. This will take ~700ms.
$animate(0.7);
}, 10);
// When the thumbnail is animating, we'll also start the process to hide the thumbnail again.
// This will take 700 ms as well, so we'll start this animation after ~500ms already, so that
// it is roughly ready when the thumbnail is in the cart again.
setTimeout(() => {
$el.style.opacity = '0';
$el.style.zIndex = '-10'; // unsetten zIndex is benodigd omdat anders onderdelen niet aanklikbaar zijn op de pagina
// After the complete process is finished and the thumbnail is invisible again, we'll reset
// the animation again.
$animateReset();
isAnimating = false;
}, 712);
"
x-init="$animateReset()"
x-animate="{
top: (document.querySelector('.cart-icon').getBoundingClientRect().top + 20) + 'px',
left: (document.querySelector('.cart-icon').getBoundingClientRect().left + 20) + 'px',
width: '20px',
height: '20px',
opacity: '1.0'
}"
x-animate.reset="{
top: ($refs.reference.getBoundingClientRect().top - 200) + 'px',
left: ($refs.reference.getBoundingClientRect().left + 100) + 'px',
width: '200px',
height: '200px',
opacity: '0.0',
}">
{
// Then, we'll animate the thumbnail to the cart. This will take ~700ms.
$animate(0.7);
}, 10);
// When the thumbnail is animating, we'll also start the process to hide the thumbnail again.
// This will take 700 ms as well, so we'll start this animation after ~500ms already, so that
// it is roughly ready when the thumbnail is in the cart again.
setTimeout(() => {
$el.style.opacity = '0';
$el.style.zIndex = '-10'; // unsetten zIndex is benodigd omdat anders onderdelen niet aanklikbaar zijn op de pagina
// After the complete process is finished and the thumbnail is invisible again, we'll reset
// the animation again.
$animateReset();
isAnimating = false;
}, 712);
"
x-init="$animateReset()"
x-animate="{
top: (document.querySelector('.cart-icon').getBoundingClientRect().top + 20) + 'px',
left: (document.querySelector('.cart-icon').getBoundingClientRect().left + 20) + 'px',
width: '20px',
height: '20px',
opacity: '1.0'
}"
x-animate.reset="{
top: ($refs.reference.getBoundingClientRect().top - 200) + 'px',
left: ($refs.reference.getBoundingClientRect().left + 100) + 'px',
width: '200px',
height: '200px',
opacity: '0.0',
}">
{
// Then, we'll animate the thumbnail to the cart. This will take ~700ms.
$animate(0.7);
}, 10);
// When the thumbnail is animating, we'll also start the process to hide the thumbnail again.
// This will take 700 ms as well, so we'll start this animation after ~500ms already, so that
// it is roughly ready when the thumbnail is in the cart again.
setTimeout(() => {
$el.style.opacity = '0';
$el.style.zIndex = '-10'; // unsetten zIndex is benodigd omdat anders onderdelen niet aanklikbaar zijn op de pagina
// After the complete process is finished and the thumbnail is invisible again, we'll reset
// the animation again.
$animateReset();
isAnimating = false;
}, 712);
"
x-init="$animateReset()"
x-animate="{
top: (document.querySelector('.cart-icon').getBoundingClientRect().top + 20) + 'px',
left: (document.querySelector('.cart-icon').getBoundingClientRect().left + 20) + 'px',
width: '20px',
height: '20px',
opacity: '1.0'
}"
x-animate.reset="{
top: ($refs.reference.getBoundingClientRect().top - 200) + 'px',
left: ($refs.reference.getBoundingClientRect().left + 100) + 'px',
width: '200px',
height: '200px',
opacity: '0.0',
}">
{
// Then, we'll animate the thumbnail to the cart. This will take ~700ms.
$animate(0.7);
}, 10);
// When the thumbnail is animating, we'll also start the process to hide the thumbnail again.
// This will take 700 ms as well, so we'll start this animation after ~500ms already, so that
// it is roughly ready when the thumbnail is in the cart again.
setTimeout(() => {
$el.style.opacity = '0';
$el.style.zIndex = '-10'; // unsetten zIndex is benodigd omdat anders onderdelen niet aanklikbaar zijn op de pagina
// After the complete process is finished and the thumbnail is invisible again, we'll reset
// the animation again.
$animateReset();
isAnimating = false;
}, 712);
"
x-init="$animateReset()"
x-animate="{
top: (document.querySelector('.cart-icon').getBoundingClientRect().top + 20) + 'px',
left: (document.querySelector('.cart-icon').getBoundingClientRect().left + 20) + 'px',
width: '20px',
height: '20px',
opacity: '1.0'
}"
x-animate.reset="{
top: ($refs.reference.getBoundingClientRect().top - 200) + 'px',
left: ($refs.reference.getBoundingClientRect().left + 100) + 'px',
width: '200px',
height: '200px',
opacity: '0.0',
}">
{
// Then, we'll animate the thumbnail to the cart. This will take ~700ms.
$animate(0.7);
}, 10);
// When the thumbnail is animating, we'll also start the process to hide the thumbnail again.
// This will take 700 ms as well, so we'll start this animation after ~500ms already, so that
// it is roughly ready when the thumbnail is in the cart again.
setTimeout(() => {
$el.style.opacity = '0';
$el.style.zIndex = '-10'; // unsetten zIndex is benodigd omdat anders onderdelen niet aanklikbaar zijn op de pagina
// After the complete process is finished and the thumbnail is invisible again, we'll reset
// the animation again.
$animateReset();
isAnimating = false;
}, 712);
"
x-init="$animateReset()"
x-animate="{
top: (document.querySelector('.cart-icon').getBoundingClientRect().top + 20) + 'px',
left: (document.querySelector('.cart-icon').getBoundingClientRect().left + 20) + 'px',
width: '20px',
height: '20px',
opacity: '1.0'
}"
x-animate.reset="{
top: ($refs.reference.getBoundingClientRect().top - 200) + 'px',
left: ($refs.reference.getBoundingClientRect().left + 100) + 'px',
width: '200px',
height: '200px',
opacity: '0.0',
}">
{
// Then, we'll animate the thumbnail to the cart. This will take ~700ms.
$animate(0.7);
}, 10);
// When the thumbnail is animating, we'll also start the process to hide the thumbnail again.
// This will take 700 ms as well, so we'll start this animation after ~500ms already, so that
// it is roughly ready when the thumbnail is in the cart again.
setTimeout(() => {
$el.style.opacity = '0';
$el.style.zIndex = '-10'; // unsetten zIndex is benodigd omdat anders onderdelen niet aanklikbaar zijn op de pagina
// After the complete process is finished and the thumbnail is invisible again, we'll reset
// the animation again.
$animateReset();
isAnimating = false;
}, 712);
"
x-init="$animateReset()"
x-animate="{
top: (document.querySelector('.cart-icon').getBoundingClientRect().top + 20) + 'px',
left: (document.querySelector('.cart-icon').getBoundingClientRect().left + 20) + 'px',
width: '20px',
height: '20px',
opacity: '1.0'
}"
x-animate.reset="{
top: ($refs.reference.getBoundingClientRect().top - 200) + 'px',
left: ($refs.reference.getBoundingClientRect().left + 100) + 'px',
width: '200px',
height: '200px',
opacity: '0.0',
}">
{
// Then, we'll animate the thumbnail to the cart. This will take ~700ms.
$animate(0.7);
}, 10);
// When the thumbnail is animating, we'll also start the process to hide the thumbnail again.
// This will take 700 ms as well, so we'll start this animation after ~500ms already, so that
// it is roughly ready when the thumbnail is in the cart again.
setTimeout(() => {
$el.style.opacity = '0';
$el.style.zIndex = '-10'; // unsetten zIndex is benodigd omdat anders onderdelen niet aanklikbaar zijn op de pagina
// After the complete process is finished and the thumbnail is invisible again, we'll reset
// the animation again.
$animateReset();
isAnimating = false;
}, 712);
"
x-init="$animateReset()"
x-animate="{
top: (document.querySelector('.cart-icon').getBoundingClientRect().top + 20) + 'px',
left: (document.querySelector('.cart-icon').getBoundingClientRect().left + 20) + 'px',
width: '20px',
height: '20px',
opacity: '1.0'
}"
x-animate.reset="{
top: ($refs.reference.getBoundingClientRect().top - 200) + 'px',
left: ($refs.reference.getBoundingClientRect().left + 100) + 'px',
width: '200px',
height: '200px',
opacity: '0.0',
}">
{
// Then, we'll animate the thumbnail to the cart. This will take ~700ms.
$animate(0.7);
}, 10);
// When the thumbnail is animating, we'll also start the process to hide the thumbnail again.
// This will take 700 ms as well, so we'll start this animation after ~500ms already, so that
// it is roughly ready when the thumbnail is in the cart again.
setTimeout(() => {
$el.style.opacity = '0';
$el.style.zIndex = '-10'; // unsetten zIndex is benodigd omdat anders onderdelen niet aanklikbaar zijn op de pagina
// After the complete process is finished and the thumbnail is invisible again, we'll reset
// the animation again.
$animateReset();
isAnimating = false;
}, 712);
"
x-init="$animateReset()"
x-animate="{
top: (document.querySelector('.cart-icon').getBoundingClientRect().top + 20) + 'px',
left: (document.querySelector('.cart-icon').getBoundingClientRect().left + 20) + 'px',
width: '20px',
height: '20px',
opacity: '1.0'
}"
x-animate.reset="{
top: ($refs.reference.getBoundingClientRect().top - 200) + 'px',
left: ($refs.reference.getBoundingClientRect().left + 100) + 'px',
width: '200px',
height: '200px',
opacity: '0.0',
}">
{
// Then, we'll animate the thumbnail to the cart. This will take ~700ms.
$animate(0.7);
}, 10);
// When the thumbnail is animating, we'll also start the process to hide the thumbnail again.
// This will take 700 ms as well, so we'll start this animation after ~500ms already, so that
// it is roughly ready when the thumbnail is in the cart again.
setTimeout(() => {
$el.style.opacity = '0';
$el.style.zIndex = '-10'; // unsetten zIndex is benodigd omdat anders onderdelen niet aanklikbaar zijn op de pagina
// After the complete process is finished and the thumbnail is invisible again, we'll reset
// the animation again.
$animateReset();
isAnimating = false;
}, 712);
"
x-init="$animateReset()"
x-animate="{
top: (document.querySelector('.cart-icon').getBoundingClientRect().top + 20) + 'px',
left: (document.querySelector('.cart-icon').getBoundingClientRect().left + 20) + 'px',
width: '20px',
height: '20px',
opacity: '1.0'
}"
x-animate.reset="{
top: ($refs.reference.getBoundingClientRect().top - 200) + 'px',
left: ($refs.reference.getBoundingClientRect().left + 100) + 'px',
width: '200px',
height: '200px',
opacity: '0.0',
}">
{
// Then, we'll animate the thumbnail to the cart. This will take ~700ms.
$animate(0.7);
}, 10);
// When the thumbnail is animating, we'll also start the process to hide the thumbnail again.
// This will take 700 ms as well, so we'll start this animation after ~500ms already, so that
// it is roughly ready when the thumbnail is in the cart again.
setTimeout(() => {
$el.style.opacity = '0';
$el.style.zIndex = '-10'; // unsetten zIndex is benodigd omdat anders onderdelen niet aanklikbaar zijn op de pagina
// After the complete process is finished and the thumbnail is invisible again, we'll reset
// the animation again.
$animateReset();
isAnimating = false;
}, 712);
"
x-init="$animateReset()"
x-animate="{
top: (document.querySelector('.cart-icon').getBoundingClientRect().top + 20) + 'px',
left: (document.querySelector('.cart-icon').getBoundingClientRect().left + 20) + 'px',
width: '20px',
height: '20px',
opacity: '1.0'
}"
x-animate.reset="{
top: ($refs.reference.getBoundingClientRect().top - 200) + 'px',
left: ($refs.reference.getBoundingClientRect().left + 100) + 'px',
width: '200px',
height: '200px',
opacity: '0.0',
}">
{
// Then, we'll animate the thumbnail to the cart. This will take ~700ms.
$animate(0.7);
}, 10);
// When the thumbnail is animating, we'll also start the process to hide the thumbnail again.
// This will take 700 ms as well, so we'll start this animation after ~500ms already, so that
// it is roughly ready when the thumbnail is in the cart again.
setTimeout(() => {
$el.style.opacity = '0';
$el.style.zIndex = '-10'; // unsetten zIndex is benodigd omdat anders onderdelen niet aanklikbaar zijn op de pagina
// After the complete process is finished and the thumbnail is invisible again, we'll reset
// the animation again.
$animateReset();
isAnimating = false;
}, 712);
"
x-init="$animateReset()"
x-animate="{
top: (document.querySelector('.cart-icon').getBoundingClientRect().top + 20) + 'px',
left: (document.querySelector('.cart-icon').getBoundingClientRect().left + 20) + 'px',
width: '20px',
height: '20px',
opacity: '1.0'
}"
x-animate.reset="{
top: ($refs.reference.getBoundingClientRect().top - 200) + 'px',
left: ($refs.reference.getBoundingClientRect().left + 100) + 'px',
width: '200px',
height: '200px',
opacity: '0.0',
}">
{
// Then, we'll animate the thumbnail to the cart. This will take ~700ms.
$animate(0.7);
}, 10);
// When the thumbnail is animating, we'll also start the process to hide the thumbnail again.
// This will take 700 ms as well, so we'll start this animation after ~500ms already, so that
// it is roughly ready when the thumbnail is in the cart again.
setTimeout(() => {
$el.style.opacity = '0';
$el.style.zIndex = '-10'; // unsetten zIndex is benodigd omdat anders onderdelen niet aanklikbaar zijn op de pagina
// After the complete process is finished and the thumbnail is invisible again, we'll reset
// the animation again.
$animateReset();
isAnimating = false;
}, 712);
"
x-init="$animateReset()"
x-animate="{
top: (document.querySelector('.cart-icon').getBoundingClientRect().top + 20) + 'px',
left: (document.querySelector('.cart-icon').getBoundingClientRect().left + 20) + 'px',
width: '20px',
height: '20px',
opacity: '1.0'
}"
x-animate.reset="{
top: ($refs.reference.getBoundingClientRect().top - 200) + 'px',
left: ($refs.reference.getBoundingClientRect().left + 100) + 'px',
width: '200px',
height: '200px',
opacity: '0.0',
}">
{
// Then, we'll animate the thumbnail to the cart. This will take ~700ms.
$animate(0.7);
}, 10);
// When the thumbnail is animating, we'll also start the process to hide the thumbnail again.
// This will take 700 ms as well, so we'll start this animation after ~500ms already, so that
// it is roughly ready when the thumbnail is in the cart again.
setTimeout(() => {
$el.style.opacity = '0';
$el.style.zIndex = '-10'; // unsetten zIndex is benodigd omdat anders onderdelen niet aanklikbaar zijn op de pagina
// After the complete process is finished and the thumbnail is invisible again, we'll reset
// the animation again.
$animateReset();
isAnimating = false;
}, 712);
"
x-init="$animateReset()"
x-animate="{
top: (document.querySelector('.cart-icon').getBoundingClientRect().top + 20) + 'px',
left: (document.querySelector('.cart-icon').getBoundingClientRect().left + 20) + 'px',
width: '20px',
height: '20px',
opacity: '1.0'
}"
x-animate.reset="{
top: ($refs.reference.getBoundingClientRect().top - 200) + 'px',
left: ($refs.reference.getBoundingClientRect().left + 100) + 'px',
width: '200px',
height: '200px',
opacity: '0.0',
}">
{
// Then, we'll animate the thumbnail to the cart. This will take ~700ms.
$animate(0.7);
}, 10);
// When the thumbnail is animating, we'll also start the process to hide the thumbnail again.
// This will take 700 ms as well, so we'll start this animation after ~500ms already, so that
// it is roughly ready when the thumbnail is in the cart again.
setTimeout(() => {
$el.style.opacity = '0';
$el.style.zIndex = '-10'; // unsetten zIndex is benodigd omdat anders onderdelen niet aanklikbaar zijn op de pagina
// After the complete process is finished and the thumbnail is invisible again, we'll reset
// the animation again.
$animateReset();
isAnimating = false;
}, 712);
"
x-init="$animateReset()"
x-animate="{
top: (document.querySelector('.cart-icon').getBoundingClientRect().top + 20) + 'px',
left: (document.querySelector('.cart-icon').getBoundingClientRect().left + 20) + 'px',
width: '20px',
height: '20px',
opacity: '1.0'
}"
x-animate.reset="{
top: ($refs.reference.getBoundingClientRect().top - 200) + 'px',
left: ($refs.reference.getBoundingClientRect().left + 100) + 'px',
width: '200px',
height: '200px',
opacity: '0.0',
}">
{
// Then, we'll animate the thumbnail to the cart. This will take ~700ms.
$animate(0.7);
}, 10);
// When the thumbnail is animating, we'll also start the process to hide the thumbnail again.
// This will take 700 ms as well, so we'll start this animation after ~500ms already, so that
// it is roughly ready when the thumbnail is in the cart again.
setTimeout(() => {
$el.style.opacity = '0';
$el.style.zIndex = '-10'; // unsetten zIndex is benodigd omdat anders onderdelen niet aanklikbaar zijn op de pagina
// After the complete process is finished and the thumbnail is invisible again, we'll reset
// the animation again.
$animateReset();
isAnimating = false;
}, 712);
"
x-init="$animateReset()"
x-animate="{
top: (document.querySelector('.cart-icon').getBoundingClientRect().top + 20) + 'px',
left: (document.querySelector('.cart-icon').getBoundingClientRect().left + 20) + 'px',
width: '20px',
height: '20px',
opacity: '1.0'
}"
x-animate.reset="{
top: ($refs.reference.getBoundingClientRect().top - 200) + 'px',
left: ($refs.reference.getBoundingClientRect().left + 100) + 'px',
width: '200px',
height: '200px',
opacity: '0.0',
}">
{
// Then, we'll animate the thumbnail to the cart. This will take ~700ms.
$animate(0.7);
}, 10);
// When the thumbnail is animating, we'll also start the process to hide the thumbnail again.
// This will take 700 ms as well, so we'll start this animation after ~500ms already, so that
// it is roughly ready when the thumbnail is in the cart again.
setTimeout(() => {
$el.style.opacity = '0';
$el.style.zIndex = '-10'; // unsetten zIndex is benodigd omdat anders onderdelen niet aanklikbaar zijn op de pagina
// After the complete process is finished and the thumbnail is invisible again, we'll reset
// the animation again.
$animateReset();
isAnimating = false;
}, 712);
"
x-init="$animateReset()"
x-animate="{
top: (document.querySelector('.cart-icon').getBoundingClientRect().top + 20) + 'px',
left: (document.querySelector('.cart-icon').getBoundingClientRect().left + 20) + 'px',
width: '20px',
height: '20px',
opacity: '1.0'
}"
x-animate.reset="{
top: ($refs.reference.getBoundingClientRect().top - 200) + 'px',
left: ($refs.reference.getBoundingClientRect().left + 100) + 'px',
width: '200px',
height: '200px',
opacity: '0.0',
}">
{
// Then, we'll animate the thumbnail to the cart. This will take ~700ms.
$animate(0.7);
}, 10);
// When the thumbnail is animating, we'll also start the process to hide the thumbnail again.
// This will take 700 ms as well, so we'll start this animation after ~500ms already, so that
// it is roughly ready when the thumbnail is in the cart again.
setTimeout(() => {
$el.style.opacity = '0';
$el.style.zIndex = '-10'; // unsetten zIndex is benodigd omdat anders onderdelen niet aanklikbaar zijn op de pagina
// After the complete process is finished and the thumbnail is invisible again, we'll reset
// the animation again.
$animateReset();
isAnimating = false;
}, 712);
"
x-init="$animateReset()"
x-animate="{
top: (document.querySelector('.cart-icon').getBoundingClientRect().top + 20) + 'px',
left: (document.querySelector('.cart-icon').getBoundingClientRect().left + 20) + 'px',
width: '20px',
height: '20px',
opacity: '1.0'
}"
x-animate.reset="{
top: ($refs.reference.getBoundingClientRect().top - 200) + 'px',
left: ($refs.reference.getBoundingClientRect().left + 100) + 'px',
width: '200px',
height: '200px',
opacity: '0.0',
}">
{
// Then, we'll animate the thumbnail to the cart. This will take ~700ms.
$animate(0.7);
}, 10);
// When the thumbnail is animating, we'll also start the process to hide the thumbnail again.
// This will take 700 ms as well, so we'll start this animation after ~500ms already, so that
// it is roughly ready when the thumbnail is in the cart again.
setTimeout(() => {
$el.style.opacity = '0';
$el.style.zIndex = '-10'; // unsetten zIndex is benodigd omdat anders onderdelen niet aanklikbaar zijn op de pagina
// After the complete process is finished and the thumbnail is invisible again, we'll reset
// the animation again.
$animateReset();
isAnimating = false;
}, 712);
"
x-init="$animateReset()"
x-animate="{
top: (document.querySelector('.cart-icon').getBoundingClientRect().top + 20) + 'px',
left: (document.querySelector('.cart-icon').getBoundingClientRect().left + 20) + 'px',
width: '20px',
height: '20px',
opacity: '1.0'
}"
x-animate.reset="{
top: ($refs.reference.getBoundingClientRect().top - 200) + 'px',
left: ($refs.reference.getBoundingClientRect().left + 100) + 'px',
width: '200px',
height: '200px',
opacity: '0.0',
}">