Inhoudsopgave
- De Driefase Reis van Googlebot
- Server-Side Rendering (SSR) of Pre-Rendering
- Dynamische Rendering Implementeren
- De Rendering Pad Optimaliseren
- Gebruik van Polyfills en Differentiële Levering
- Betekenisvolle HTTP-statuscodes
- Het Vermijden van Zachte 404-fouten
- Juiste Gebruik van Canonical Tags
- Effectief Gebruik van Robots Meta Tags
- Titels en Meta Beschrijvingen Verbeteren
Introductie
Stel je voor dat je ontelbare uren investeert in het ontwikkelen van een prachtige en interactieve website met JavaScript-technologieën, om erachter te komen dat zoekmachines je inhoud niet effectief kunnen indexeren. Hoe dynamisch JavaScript de webervaring ook maakt, het introduceert uitdagingen voor zoekmachineoptimalisatie (SEO), wat de ontdekking en ranking van je inhoud kan belemmeren. Het begrijpen van hoe je ervoor kunt zorgen dat je JavaScript-inhoud doorzoekbaar is, is essentieel als je wilt dat je website zijn volledige potentieel bereikt.
JavaScript heeft de manier waarop websites worden gebouwd veranderd, met krachtige mogelijkheden die het web interactiever en boeiender maken. Deze flexibiliteit heeft echter een prijs. Zoekmachines moeten JavaScript verwerken om de inhoud te begrijpen, wat veel middelen kan vereisen en soms problematisch is. Daarom is het waarborgen dat JavaScript-inhoud doorzoekbaar is een cruciale stap in het behouden van de zichtbaarheid van je site en het ervoor zorgen dat een breder publiek toegang heeft tot je aanbiedingen.
Deze blog zal je begeleiden door het doolhof van het zorgen dat je JavaScript-inhoud toegankelijk blijft voor zoekmachines. We zullen de betrokken processen ontrafelen, haalbare strategieën verkennen en de beste praktijken benadrukken om je applicatie te optimaliseren voor zichtbaarheid in zoekmachines. Aan het einde van deze post ben je uitgerust met praktische inzichten en actiegerichte stappen om de SEO van je JavaScript-gedreven website te verbeteren. Laten we beginnen!
Inzicht in de Basisprincipes van JavaScript SEO
JavaScript biedt eindeloze mogelijkheden voor het creëren van dynamische, boeiende webervaringen. Het brengt echter unieke uitdagingen met zich mee als het gaat om SEO. Het vindbaar maken van je webapplicaties die afhankelijk zijn van JavaScript is essentieel voor het aantrekken en behouden van gebruikers via zoekmachines zoals Google. Het begrijpen van de interactie van Googlebot met JavaScript is de eerste stap naar het doorzoekbaar maken van JavaScript-inhoud.
De Driefase Reis van Googlebot
-
Doorzoeken: Googlebot haalt de pagina op. Het leest aanvankelijk het robots.txt-bestand om te bevestigen of het de pagina's kan doorzoeken. Als het is toegestaan, gaat het verder. Het blokkeren van kritieke JavaScript-bestanden via robots.txt kan voorkomen dat Google je inhoud rendert en indexeert.
-
Wachten op Rendering: Na het eerste doorzoeken wordt de pagina in een wachtrij geplaatst voor rendering. Deze fase kan variëren van enkele seconden tot langer, afhankelijk van de middelen van Google.
-
Rendere en Indexeren: Zodra de pagina is gerenderd door een evergreen-versie van Chromium, voert Googlebot de JavaScript uit, parseert HTML, en plaatst uiteindelijk URL's van de gerenderde inhoud in een wachtrij voor verdere crawling, om te zorgen dat alle dynamische inhoud zichtbaar en correct geïndexeerd is.
Dit begrip vormt de basis voor het optimaliseren van JavaScript voor zoekzichtbaarheid.
Tips en Beste Praktijken om Doorzoekbaarheid te Garanderen
Server-Side Rendering (SSR) of Pre-Rendering
Deze opties stellen zoekmachines in staat om je inhoud efficiënter te doorzoeken, aangezien de inhoud server-side wordt gerenderd voordat het de client bereikt. Server-side rendering zorgt ervoor dat zoekmachines een volledig gerenderd HTML-bestand ontvangen, waardoor het gemakkelijker wordt om te crawlen en te indexeren. Populaire frameworks zoals Next.js maken gebruik van server-side rendering om de SEO te verbeteren.
Dynamische Rendering Implementeren
Voor sites die client-side moeten blijven, is dynamische rendering een alternatief. Dit houdt in dat statische HTML-versies aan crawlers worden aangeboden terwijl de dynamische ervaring aan gebruikers wordt gegeven. Hoewel Google client-side rendering ondersteunt, kan een zware afhankelijkheid van JavaScript de rendering vertragen, wat de doorzoekbaarheid beïnvloedt. FlyRank’s AI-Powered Content Engine kan helpen om geoptimaliseerde inhoud te genereren die je renderingstrategie efficiënt aanvult. Leer meer over onze contentcapaciteiten hier.
De Rendering Pad Optimaliseren
Zorg ervoor dat de initiële HTML van je website een snelle herkenning van zichtbare en toegankelijke inhoud mogelijk maakt. Dit wordt bereikt door het toepassen van een gestroomlijnde renderingsstrategie en het toegankelijk houden van kritieke bronnen voor zoekmachines. Taken zoals het minimaliseren van client-side JavaScript voor kritieke componenten kunnen de renderingstijden versnellen, waardoor de inhoud toegankelijker wordt voor bots.
Gebruik van Polyfills en Differentiële Levering
JS-frameworks evolueren snel, maar niet alle functionaliteiten worden volledig gerenderd door Google. Het integreren van polyfills zorgt ervoor dat functies werken op verschillende browseromgevingen. Differentiële levering richt functionaliteiten specifiek op bepaalde browsers om optimale presentatie en functionaliteit te waarborgen zonder de doorzoekbaarheid te beïnvloeden.
Betekenisvolle HTTP-statuscodes
Geef duidelijke HTTP-statuscodes om Googlebot's indexeringsacties te begeleiden, zoals het gebruik van 404-fouten voor niet-bestaande pagina's of 301-omleidingen voor verplaatste inhoud, wat zorgt voor een soepele navigatie en indexering op je site.
Het Vermijden van Zachte 404-fouten
In Single Page Applications (SPA's), gebruik de History API in plaats van fragmenten voor navigatie tussen weergaven om valkuilen zoals zachte 404's te vermijden, en ervoor te zorgen dat URL's toegankelijk en duidelijk blijven voor zoekmachines om te indexeren.
Juiste Gebruik van Canonical Tags
Zorg ervoor dat canonical tags correct zijn geconfigureerd, zodat zoekmachines de juiste URL voor indexering kunnen identificeren. Hoewel JavaScript deze tags kan injecteren, is het ideaal om waar mogelijk server-side methodieken te gebruiken om configuratieproblemen aan de clientzijde te vermijden.
Effectief Gebruik van Robots Meta Tags
Maak verstandig gebruik van robots meta tags om indexeringsgedragingen te controleren zonder per ongeluk belangrijke pagina's te blokkeren. Juiste technieken voor JavaScript-injectie zorgen ervoor dat dynamische inhoud toegankelijk blijft, maar toch beheersbaar in termen van zichtbaarheid voor zoekmachines.
Titels en Meta Beschrijvingen Verbeteren
JavaScript kan dynamisch meta beschrijvingen en titels genereren die betekenisvol zijn voor de context van je pagina. Unieke, beschrijvende
en meta beschrijvingen helpen zowel gebruikers als zoekmachines om je inhoud beter te interpreteren.</p>
<h2>Praktijkvoorbeelden en Gevallenstudies</h2>
<p>Illustreren van de succesvolle toepassing van deze principes heeft de samenwerking van FlyRank met verschillende bedrijven opmerkelijke verbeteringen in SEO-resultaten opgeleverd.</p>
<ul>
<li><p>In de <a href="https://flyrank.com/blogs/case-studies/hulkapps">HulkApps Gevallenstudie</a> heeft FlyRank geholpen een 10x toename in organisch verkeer te bereiken door strategieën zoals renderoptimisaties en gestructureerde inhoudimplementaties.</p>
</li>
<li><p>Evenzo heeft FlyRank voor <a href="https://flyrank.com/blogs/case-studies/releasit">Releasit</a> hun webaanwezigheid verfijnd, waardoor de betrokkenheid en zichtbaarheid aanzienlijk zijn toegenomen.</p>
</li>
</ul>
<p>Deze voorbeelden onderstrepen de effectiviteit van het toepassen van moderne tactieken voor het beheren van de zichtbaarheid van JavaScript-inhoud, wat vervolgens de indexering en prestaties verbetert.</p>
<h2>De Rol van Toegankelijkheid</h2>
<p>Een website moet navigeerbaar en bruikbaar zijn voor alle gebruikers, zelfs degenen die browsers gebruiken die geen JavaScript uitvoeren. Zorg ervoor dat essentiële inhoud beschikbaar wordt zonder zware afhankelijkheid van JavaScript. Testen met behulp van tools of weergave-rendering in tekstmodus zijn praktische strategieën om ervoor te zorgen dat de inhoud verschijnt zoals verwacht.</p>
<h2>Conclusie</h2>
<p>De doorzoekbaarheid van JavaScript-inhoud is een cruciale factor in het bepalen van het succes van een website in zoekresultaten. Terwijl rendertechnieken en strategisch gebruik van SEO-principes krachtige rollen spelen, is het ook belangrijk om continu aan te passen aan de evoluerende aard van SEO.</p>
<p>Door de basisinteracties van JavaScript met zoekmachines te begrijpen en bewezen SEO-praktijken toe te passen zoals server-side rendering of betekenisvolle meta-implementaties, kan je site zichtbaar, relevant en concurrerend blijven. Het benutten van FlyRank’s datagestuurde strategieën <a href="https://flyrank.com/pages/our-approach">Onze Aanpak</a> kan effectief de digitale voetafdruk van je site verbeteren, zodat je dynamische inhoud een breder, betrokken publiek bereikt.</p>
<p>Om de SEO van je webapplicaties verder te verfijnen, maak gebruik van FlyRank's gelokaliseerde contentaanbiedingen <a href="https://flyrank.com/pages/localization">Localisatie Diensten</a> om natuurlijk te schalen en internationale markttoegang te behouden.</p>
<h2>FAQs</h2>
<p><strong>Vraag 1: Kan ik JavaScript gebruiken voor het instellen van meta-tags zoals beschrijvingen of canonical URL's?</strong><br>Ja, JavaScript kan dynamisch meta-tags instellen, inclusief canonical URL's en beschrijvingen. Voor robuuste SEO is het echter aan te raden om deze waar mogelijk aan de serverzijde te plaatsen, aangezien sommige zoekmachines JavaScript mogelijk niet volledig uitvoeren.</p>
<p><strong>Vraag 2: Hoe verbetert server-side rendering de SEO voor JavaScript-intensievere websites?</strong><br>Server-side rendering (SSR) levert vooraf gerenderde HTML-pagina's aan zoekmachinebots, waardoor hun crawling- en indexeringsproces wordt vereenvoudigd omdat ze directe toegang hebben tot de inhoud zonder extra JavaScript uit te voeren.</p>
<p><strong>Vraag 3: Is het nodig om JavaScript-functies te testen op compatibiliteit met oudere browsers?</strong><br>Ja, gebruik polyfills om ervoor te zorgen dat JavaScript-functies correct functioneren op oudere browsers die geen native ondersteuning hebben, waardoor zowel de gebruikerservaring als de SEO-doorzoekbaarheid wordt verbeterd.</p>
<p><strong>Vraag 4: Hoe kan FlyRank het wereldwijde bereik van inhoud verbeteren?</strong><br>FlyRank's <a href="https://flyrank.com/pages/localization">Localisatie Diensten</a> passen je site aan voor verschillende talen en culturen, wat zorgt voor geoptimaliseerde levering en contextrelevantie voor internationale doelgroepen, waardoor je bereik en betrokkenheid worden vergroot.</p>
<p>Continu evolueren samen met de vooraanstaande SEO-strategieën zoals die door FlyRank worden aangeboden, garandeert zowel huidige naleving als gereedheid voor toekomstige ontwikkelingen in zoekmachine technologie.</p>
</div>
<div class="lg:w-1/3 text-gray mt-16 sticky top-[112px] lg:h-screen">
<div class="bg-white text-center p-5 rounded-lg mb-8">
<img
src="https://cdn.shopify.com/s/files/1/0609/8023/2259/files/envelope-icon.svg?v=1732181353"
alt="Envelope Icon"
class="mx-auto"
>
<div class="text-dark font-extrabold mb-5 uppercase text-xl">Enjoy content like this?</div>
<div class="text-dark text-xl mb-3">Join our newsletter and 20,000 enthusiasts</div>
<div class="sidebar-newsletter opacity-0 transition-opacity duration-500 h-[129px]">
<div id="shopify-block-AOFJqZjlUdWtqOXZib__forms_inline_9wMQFJ" class="shopify-block shopify-app-block"><div
id='AOFJqZjlUdWtqOXZib__forms_inline_9wMQFJ'
data-form-root='true'
data-forms-id='forms-root-254557'
data-forms-text-color='#0f1217'
data-forms-button-background-color='#0f1217'
data-forms-button-label-color='#ffffff'
data-forms-links-color='#1878b9'
data-forms-errors-color='#e02229'
data-forms-text-alignment='center'
data-forms-alignment='center'
data-forms-padding-top='5'
data-forms-padding-right='0'
data-forms-padding-bottom='0'
data-forms-padding-left='0'
></div>
<script>
window['ShopifyForms'] = {
...window['ShopifyForms'],
currentPageType: "article"
};
</script>
</div>
</div>
</div>
<div class="bg-dark-800 text-center p-5 rounded-lg">
<img
src="https://cdn.shopify.com/s/files/1/0609/8023/2259/files/download-icon.svg?v=1732109891"
alt="Download Icon"
class="mx-auto mb-3"
>
<div class="text-xl mb-8">
<span class="font-bold">DOWNLOAD FREE</span><br>
BACKLINK DIRECTORY
</div>
<a
href="/cart/41940050214979:1?checkout&attributes[first_visit]=%2Fnl%2Fblogs%2Fseo-hub%2Fhow-to-ensure-javascript-content-is-crawlable"
class="btn btn-green w-full"
>
Download
</a>
</div>
</div>
</div>
</div>
</div>
<style>
table tr:first-child {
background-color: #86628d;
}
table th:first-child,
table td:first-child {
font-weight: bold;
}
th,
td {
border: 1px solid #ccc;
padding: 10px;
text-align: left;
}
</style>
</section><div id="shopify-section-template--16867507732547__demo_promo_K9myJY" class="shopify-section demo"><div class=" px-6 md:px-8 py-12 lg:py-32 bg-green">
<div class="container text-dark text-center">
<div class="w-full md:w-8/12 mx-auto">
<h2 class="mb-8 text-4xl sm:text-5xl">LATEN WE JE MERK NAAR NIEUWE HOOGTEN STUWEN</h2>
<div class="mb-5"><p>Als je klaar bent om door het lawaai heen te breken en een blijvende impact online te maken, is het tijd om de krachten te bundelen met FlyRank. Neem vandaag nog contact met ons op, en laten we jouw merk op een pad naar digitale dominantie zetten.</p></div>
<div class="flex flex-col">
<div>
<a class="btn btn-dark text-gray mt-8" href="/nl/pages/contact">
Vraag een demo aan
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
<footer id="shopify-section-footer" class="shopify-section footer"><div class="footer-container px-6 md:px-8 py-16 md:py-24 overflow-hidden relative">
<img
src="https://cdn.shopify.com/s/files/1/0609/8023/2259/files/footer-background.png?v=1730813000"
alt="Image Background"
class="object-contain absolute w-full z-0 bottom-0 2xl:bottom-auto 2xl:top-1/3"
>
<div class="container flex flex-col-reverse md:flex-row z-10 relative flex-wrap">
<div class="w-full md:w-1/2 text-gray mt-16 md:mt-0">
<div>
<img
src="https://cdn.shopify.com/s/files/1/0609/8023/2259/files/flyrank-logo-large.svg?v=1730983842"
alt="logo"
>
</div>
<div class="w-full md:w-2/3 my-12"><p>Als je klaar bent om door de ruis heen te breken en een blijvende impact online te maken, is het tijd om de krachten te bundelen met FlyRank.</p></div>
<div class="flex">
<a
href="https://x.com/flyrank_ai"
target="_blank"
class="bg-green w-[50px] h-[50px] inline-block flex justify-center items-center mr-3 rounded-full hover:opacity-[0.8] transition-all"
><img
src="https://cdn.shopify.com/s/files/1/0609/8023/2259/files/icon-twitter.svg?v=1729166778"
alt="twitter"
></a>
<a
href="https://www.facebook.com/people/FlyRank/61566930002846/"
target="_blank"
class="bg-green w-[50px] h-[50px] inline-block flex justify-center items-center mr-3 rounded-full hover:opacity-[0.8] transition-all"
><img
src="https://cdn.shopify.com/s/files/1/0609/8023/2259/files/icon-facebook.svg?v=1729166777"
alt="facebook"
></a>
<a
href="https://www.instagram.com/flyrank.ai/"
target="_blank"
class="bg-green w-[50px] h-[50px] inline-block flex justify-center items-center mr-3 rounded-full hover:opacity-[0.8] transition-all"
><img
src="https://cdn.shopify.com/s/files/1/0609/8023/2259/files/icon-instagram.svg?v=1729166777"
alt="instagram"
></a>
</div>
</div>
<div class="w-full md:w-1/2 grid gap-4 grid-cols-2 sm:grid-cols-3">
<div class="">
<div class="text-dark-100 mb-5 sm:mb-12 uppercase font-medium">Bedrijf</div>
<ul>
<li class="mb-3">
<a href="/nl/pages/over" class="text-gray-50 capitalize">
Over ons
</a>
</li>
<li class="mb-3">
<a href="/nl/pages/onze-aanpak" class="text-gray-50 capitalize">
Onze aanpak
</a>
</li>
<li class="mb-3">
<a href="/nl/pages/verwijzingen" class="text-gray-50 capitalize">
Verwijzingen
</a>
</li>
<li class="mb-3">
<a href="https://www.flyrank.com/pages/contact?utm_source=website&utm_medium=footer" class="text-gray-50 capitalize">
Neem Contact Op
</a>
</li>
</ul>
</div>
<div class="">
<div class="text-dark-100 mb-5 sm:mb-12 uppercase font-medium">Verkennen</div>
<ul>
<li class="mb-3">
<a href="/nl/pages/inhoud" class="text-gray-50 capitalize">
Artikelen
</a>
</li>
<li class="mb-3">
<a href="/nl/blogs/gevalstudies" class="text-gray-50 capitalize">
Case Studies
</a>
</li>
<li class="mb-3">
<a href="/nl/pages/prijsstelling" class="text-gray-50 capitalize">
Prijsstelling
</a>
</li>
<li class="mb-3">
<a href="/nl/pages/veelgestelde-vragen" class="text-gray-50 capitalize">
FAQs
</a>
</li>
</ul>
</div>
<div class="mt-5 sm:mt-0">
<div class="text-dark-100 mb-5 sm:mb-12 uppercase font-medium">Juridisch</div>
<ul>
<li class="mb-3">
<a href="/nl/policies/terms-of-service" class="text-gray-50 capitalize">
Voorwaarden van Dienst
</a>
</li>
<li class="mb-3">
<a href="/nl/policies/privacy-policy" class="text-gray-50 capitalize">
Privacybeleid
</a>
</li>
<li class="mb-3">
<a href="/nl/policies/refund-policy" class="text-gray-50 capitalize">
Geld-terug-garantie
</a>
</li>
<li class="mb-3">
<a href="https://calendly.com/flyrank/30min?utm_source=website&utm_medium=footer" class="text-gray-50 capitalize">
Vraag een demo aan
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="container">
<div class="text-gray w-full mt-24 text-sm">© 2025 FlyRank - All Rights Reserved</div>
</div>
</div>
</footer>
<div
class="minicart-wrapper"
x-data
x-show="$store.global.isMinicartVisible"
x-on:click.outside="$store.global.isMinicartVisible = false"
x-transition:enter="transition ease-out duration-300"
x-transition:enter-start="off-screen-right"
x-transition:enter-end="right-50"
x-transition:leave="transition ease-in duration-300"
x-transition:leave-start="right-50"
x-transition:leave-end="off-screen-right"
x-cloak
:aria-hidden="$store.global.isMinicartVisible ? 'false' : 'true'"
aria-modal="true"
role="dialog"
>
<div id="shopify-section-minicart" class="shopify-section"><div
class="minicart"
data-ajax-cart-section
x-cloak>
<div class="title-row">
<h2 id="minicart-label" class="text-cloud-burst-500">
Cart
</h2>
<button @click="$store.global.isMinicartVisible = false">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
<path d="M24 20.188l-8.315-8.209 8.2-8.282-3.697-3.697-8.212 8.318-8.31-8.203-3.666 3.666 8.321 8.24-8.206 8.313 3.666 3.666 8.237-8.318 8.285 8.203z"/>
</svg>
</button>
</div>
<div class="item-count-message">
You have
<span
class="count"
style="font-weight: 600"
x-data>0
</span>
<span x-data></span>
in your cart!
</div>
<hr/>
<ul class="items-list" data-ajax-cart-section-scroll>
</ul>
<hr/>
<div class="subtotal">
<p class="title">Subtotal
</p>
<p class="amount">$0.00
</p>
</div>
<a class="view-cart-details-link" href="/nl/cart">
View Cart Details
</a>
</div>
<style>
/* Animation classes */
.transition {
transition-property: all;
}
.duration-300 {
transition-duration: 300ms;
}
.ease-out {
transition-timing-function: ease-out;
}
.ease-in {
transition-timing-function: ease-in;
}
.off-screen-right {
right: -100px;
transform: translateX(120%);
}
.right-50 {
right: 50px;
transform: translateX(0%);
}
@media(max-width: 576px) {
.right-50 {
right: 20px;
transform: translateX(0%);
}
}
/* Main styles */
.minicart-wrapper {
position: fixed;
top: 50px;
right: 50px;
z-index: 100;
}
@media(max-width: 576px) {
.minicart-wrapper {
right: 20px;
}
}
.minicart {
width: 288px;
height: auto;
padding: 20px;
background: #fff;
border-radius: 6px;
box-shadow: 0 30px 130px -8px rgba(0, 0, 0, 0.25);
}
.minicart .view-cart-details-link {
display: flex;
justify-content: center;
align-items: center;
margin-top: 20px;
width: 100%;
height: 43px;
font-weight: 600;
background: white;
border: 2px solid black;
outline: none;
text-decoration: none;
}
.minicart .view-cart-details-link:hover {
cursor: pointer;
color: white;
background: black;
}
.minicart hr {
margin-bottom: 20px;
}
.minicart .title-row {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 10px;
}
.minicart .title-row h2 {
margin: 0;
}
.minicart .title-row button {
border: none;
background: transparent;
cursor: pointer;
}
.minicart .title-row button svg {
display: block;
height: 16px;
}
.minicart .items-list {
list-style: none;
padding-left: 0;
max-height: 300px;
overflow: auto;
}
.minicart .item-count-message {
margin-bottom: 10px;
font-size: 0.8em;
}
.minicart .item-count-message .minicart--item-count {
font-weight: 600;
}
.minicart .item {
display: flex;
margin-bottom: 10px;
width: 100%;
}
.minicart .item .product-thumb-wrapper {
width: 100px;
height: 120px;
position: relative;
flex: 0 0 100px;
}
.minicart .item .product-thumb-wrapper img {
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
height: 100%;
width: 100%;
object-fit: cover;
object-position: center;
}
.minicart .item .item-details {
margin-left: 10px;
display: flex;
flex-direction: column;
justify-content: flex-start;
}
.minicart .item .item-details p {
margin: 0;
}
.minicart .item .item-details .option-label {
font-weight: 600;
}
.minicart .item .item-details .title {
font-size: 0.9em;
font-weight: 600;
margin-top: 0;
margin-bottom: 6px;
}
.minicart .item .item-details .options {
margin-bottom: 2px 0;
}
.minicart .item .item-details .option {
margin: 0 0 2px;
font-size: 0.8rem;
}
.minicart .item .item-details .quantity-row {
margin: 2px 0;
}
.minicart .item .item-details .quantity-row span {
margin: 0 0 2px;
font-size: 0.8rem;
}
.minicart .item .item-details .option:last-of-type {
margin-bottom: 0;
}
.minicart .item .item-details .price {
margin-top: auto;
}
.minicart .item .item-details .remove {
font-size: 0.6em;
margin-top: auto;
}
.minicart .subtotal {
margin: 20px 0;
display: flex;
align-items: center;
justify-content: space-between;
}
.minicart .subtotal .title {
height: 16px;
margin: 0;
}
.minicart .subtotal .amount {
font-weight: 600;
font-size: 1.2em;
margin: 0;
}
.minicart a {
color: black;
text-decoration: none;
}
.minicart a:hover {
text-decoration: underline;
}
</style></div>
</div>
<div id="shopify-section-predictive-search-main" class="shopify-section site-header w-full shadow-md p-shell fixed top-0 z-30 bg-white">
<script src="//www.flyrank.com/cdn/shop/t/34/assets/predictive-search.js?v=82854867885586265471741865223" defer="defer"></script>
<predictive-search
x-data
x-cloak
id="predictive-search"
x-show="$store.global.isPredictiveSearchVisible"
x-trap.inert="$store.global.isPredictiveSearchVisible"
x-transition.opacity
aria-modal="true"
@keyup.escape="$store.global.isPredictiveSearchVisible = false"
>
<div
id="predictive-search-form-wrapper"
class="w-full bg-white fixed inset-x-0 top-0 z-40 pt-8 pb-14 shadow-md"
>
<h2 class="text-base !font-normal max-w-max mx-auto font-palatino mb-3">
Wat kunnen we u helpen vinden?
</h2>
<form
action="/nl/search"
method="get"
role="search"
class="w-full max-w-[422px] mx-auto"
@click.outside="$store.global.isPredictiveSearchVisible = false"
>
<div class="flex gap-x-3 w-full relative">
<input
id="predictive-search-input"
class="slayed-input w-full"
type="search"
name="q"
value=""
role="combobox"
aria-expanded="false"
aria-owns="predictive-search-results"
aria-controls="predictive-search-results"
aria-haspopup="listbox"
aria-autocomplete="list"
>
<label for="predictive-search-input" class="sr-only"> Search </label>
<button
for="predictive-search-input"
class="pill-button"
>
Search
</button>
<button
type="button"
class="absolute -right-[15px] top-1/2 -translate-y-1/2 translate-x-full"
@click="$store.global.isPredictiveSearchVisible = false"
>
<span class="sr-only">Close</span>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
<path d="M24 20.188l-8.315-8.209 8.2-8.282-3.697-3.697-8.212 8.318-8.31-8.203-3.666 3.666 8.321 8.24-8.206 8.313 3.666 3.666 8.237-8.318 8.285 8.203z"/>
</svg>
</button>
</div>
<input name="options[prefix]" type="hidden" value="last">
<div id="predictive-search-target" tabindex="-1"></div>
</form>
</div>
</predictive-search>
</div>
<div id="shopify-section-modal" class="shopify-section section-modal">
<dialog
id="dialog-modal-example"
x-data="modal"
x-init="init($el)"
class="max-w-md rounded-md"
@click="close($event)"
>
<form action="" class="p-12">
<div class="prose">
<h1>Modale titel</h1>
<p>Modal Beschrijving. Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque totam cum cupiditate officia et quaerat blanditiis culpa? Hic, nesciunt id.</p>
<button type="button" @click="open = false" class="btn rounded-none">
Close
</button>
</div>
</form>
</dialog>
<script>
document.addEventListener('alpine:init', () => {
Alpine.data('modal', () => ({
componentElement: document.querySelector('#dialog-modal-example'),
open: false,
init(dialog) {
if (!dialog) {
return
}
Alpine.effect(() => {
if (this.open) {
dialog.showModal()
document.querySelectorAll('body > *:not(#shopify-section-modal)').forEach((element) => {
element.setAttribute('aria-hidden', 'true')
element.setAttribute('inert', '')
})
document.querySelector('body').classList.add('overflow-hidden')
} else {
dialog.close()
document.querySelectorAll('body > *:not(#shopify-section-modal)').forEach((element) => {
element.removeAttribute('aria-hidden')
element.removeAttribute('inert')
})
document.querySelector('body').classList.remove('overflow-hidden')
}
})
document.addEventListener('show-modal', () => {
this.open = true
})
document.addEventListener('close-modal', () => {
this.open = false
})
},
toggle() {
this.open = !this.open
},
close(event) {
if (event.target === this.componentElement) {
if (this.open) {
this.open = false
}
}
}
}))
})
</script>
<style>
#dialog-modal-example::backdrop {
background-color: rgba(0, 0, 0, 0.5);
}
</style></div>
<script type="application/json" data-ajax-cart-initial-state>
{"note":null,"attributes":{},"original_total_price":0,"total_price":0,"total_discount":0,"total_weight":0.0,"item_count":0,"items":[],"requires_shipping":false,"currency":"USD","items_subtotal_price":0,"cart_level_discount_applications":[],"checkout_charge_amount":0}
</script>
<div id="shopify-block-AZFd6aGFnS21FS1hVa__13768625480086291342" class="shopify-block shopify-app-block"><script>
window['ShopifyForms'] = {
...window['ShopifyForms'],
currentPageType: "article"
};
</script>
</div><div id="shopify-block-Aajk0TllTV2lJZTdoT__15683396631634586217" class="shopify-block shopify-app-block"><script
id="chat-button-container"
data-horizontal-position=bottom_right
data-vertical-position=lowest
data-icon=chat_bubble
data-text=no_text
data-color=#89608e
data-secondary-color=#ffffff
data-ternary-color=#6a6a6a
data-domain=www.flyrank.com
data-shop-domain=www.flyrank.com
data-external-identifier=5QqDPyGbw2L4LPYPH2LFgD67SjacIZkJCvvcz866Sws
>
</script>
</div></body>
</html>
