Innehållsförteckning
- Googlebots tre-fas resa
- Server-sidig rendering (SSR) eller för-rendering
- Implementering av dynamisk rendering
- Optimera renderingsvägen
- Användning av polyfills och differential serving
- Meningsfulla HTTP-statuskoder
- Undvika mjuka 404-fel
- Korrekt användning av kanoniska taggar
- Effektiv användning av robot-meta-taggar
- Förbättra titlar och meta-beskrivningar
Introduktion
Tänk dig att investera otaliga timmar i att utveckla en fantastisk och interaktiv webbplats med JavaScript-teknologier, bara för att upptäcka att sökmotorer har svårt att indexera ditt innehåll effektivt. Så dynamisk som JavaScript gör webben, introducerar det utmaningar för sökmotoroptimering (SEO), vilket kan hindra upptäckten och rankningen av ditt innehåll. Att förstå hur du säkerställer att ditt JavaScript-innehåll är indexerbart är avgörande om du vill att din webbplats ska nå sin fulla potential.
JavaScript har förändrat hur webbplatser byggs, med kraftfulla möjligheter som gör webben mer interaktiv och engagerande. Men denna flexibilitet har sitt pris. Sökmotorer behöver bearbeta JavaScript för att förstå innehållet, vilket kan vara resurskrävande och ibland problematiskt. Därför är det avgörande att säkerställa att JavaScript-innehåll är indexerbart, en viktig åtgärd för att upprätthålla din webbplats synlighet och se till att en bredare publik kan få tillgång till dina erbjudanden.
Denna blogg kommer att vägleda dig genom labyrinten av hur du kan säkerställa att ditt JavaScript-innehåll förblir tillgängligt för sökmotorer. Vi kommer att avslöja de involverade processerna, utforska genomförbara strategier och lyfta fram bästa metoder för att optimera din applikation för sökmotorernas synlighet. I slutet av detta inlägg kommer du att vara utrustad med praktisk insikt och åtgärdssteg för att förbättra SEO för din JavaScript-drivna webbplats. Låt oss dyka in!
Förstå grundläggande JavaScript-SEO
JavaScript erbjuder oändliga möjligheter för att skapa dynamiska, engagerande webbutupplevelser. Men det medför unika utmaningar när det gäller SEO. Att göra dina webbapplikationer som är beroende av JavaScript upptäckbara är avgörande för att locka och behålla användare via sökmotorer som Google. Att förstå Googlebots interaktion med JavaScript är det första steget mot att göra JavaScript-innehåll indexerbart.
Googlebots tre-fas resa
-
Genomsökning: Googlebot hämtar sidan. Den läser först robots.txt-filen för att bekräfta om den kan genomsöka sidorna. Om det är tillåtet går den vidare. Att blockera kritiska JavaScript-filer via robots.txt kan förhindra Google från att rendera och indexera ditt innehåll.
-
Köande för rendering: Efter den initiala genomsökningen placeras sidan i en kö för rendering. Denna fas kan ta från några sekunder till längre, beroende på Googles resurser.
-
Rendering och indexering: När den har renderats av en evig version av Chromium, kör Googlebot JavaScript, analyserar HTML och sätter slutligen URLs från det renderade innehållet i kö för ytterligare genomsökning, vilket säkerställer att allt dynamiskt innehåll är synligt och indexerat på rätt sätt.
Denna förståelse formar grunden för att optimera JavaScript för söksynlighet.
Tips och bästa metoder för att säkerställa indexerbarhet
Server-sidiga rendering (SSR) eller för-rendering
Dessa alternativ gör det möjligt för sökmotorer att genomsöka ditt innehåll mer effektivt eftersom innehållet renderas på servern innan det når klienten. Server-sidig rendering säkerställer att sökmotorer får en fullt renderad HTML-fil, vilket gör det enklare att genomsöka och indexera. Populära ramverk som Next.js använder server-sidig rendering för att förbättra SEO.
Implementering av dynamisk rendering
För webbplatser som måste förbli klient-sidiga är dynamisk rendering ett alternativ. Detta innebär att statiska HTML-versioner serveras till sökmotorer while dynamic experience is provided to users. Även om Google stöder klient-sidig rendering kan ett kraftigt beroende av JavaScript fördröja rendering, vilket påverkar indexerbarheten. FlyRanks AI-drivna innehållsmotor kan hjälpa till att generera optimerat innehåll som effektivt kompletterar din renderingsstrategi. Lär dig mer om våra innehållsmöjligheter här.
Optimera renderingsvägen
Säkerställ att din webbplats initiala HTML möjliggör snabb igenkänning av synligt och tillgängligt innehåll. Detta uppnås genom att använda en strömlinjeförd renderingsstrategi och hålla kritiska resurser lätt tillgängliga för sökmotorer. Uppgifter som att minimera klient-sidigt JavaScript för kritiska komponenter kan snabba upp renderingstider, vilket gör innehållet mer tillgängligt för bots.
Användning av polyfills och differential serving
JS-ramverk utvecklas snabbt, men alla funktioner renderas inte omfattande av Google. Integrera polyfills för att säkerställa att funktioner fungerar över olika webbläsarmiljöer. Differential serving erbjuder funktioner till specifika webbläsare, vilket säkerställer optimal presentation och funktionalitet utan att påverka indexerbarheten.
Meningsfulla HTTP-statuskoder
Ge tydliga HTTP-statuskoder för att vägleda Googlebots indexeringsåtgärder, som att använda 404-fel för icke-existerande sidor eller 301-omdirigeringar för flyttat innehåll, vilket säkerställer smidig navigation och indexering över din webbplats.
Undvik mjuka 404-fel
I Single Page Applications (SPAs), använd History API istället för fragment för att navigera mellan vyer för att undvika fallgropar som mjuka 404-fel, vilket säkerställer att URLs förblir tillgängliga och tydliga för sökmotorer att indexera.
Korrekt användning av kanoniska taggar
Säkerställ att kanoniska taggar är korrekt konfigurerade så att sökmotorer kan identifiera den korrekta URL:en för indexering. Även om JavaScript kan injicera dessa taggar, är det idealiskt att använda server-sidiga metoder där det är möjligt för att undvika konfigurationsproblem på klientsidan.
Effektiv användning av robot-meta-taggar
Använd robot-meta-taggar klokt för att kontrollera indexeringsbeteenden utan att oavsiktligt blockera viktiga sidor. Korrekt injektionsteknik för JavaScript säkerställer att dynamiskt innehåll förblir tillgängligt men ändå hanterbart i termer av synlighet för sökmotorer.
Förbättra titlar och meta-beskrivningar
JavaScript kan dynamiskt generera meta-beskrivningar och titlar som är meningsfulla för sidans kontext. Unika, beskrivande
och meta-beskrivningar hjälper både användare och sökmotorer att bättre tolka ditt innehåll.</p>
<h2>Verkliga exempel och fallstudier</h2>
<p>Illustrerade framgångsrik tillämpning av dessa principer, FlyRanks samarbete med olika företag har gett märkbart förbättrade SEO-resultat.</p>
<ul>
<li><p>I <a href="https://flyrank.com/blogs/case-studies/hulkapps">HulkApps fallstudie</a>, hjälpte FlyRank till att uppnå en 10x ökning i organisk trafik genom strategier som innefattar renderingsoptimeringar och strukturerad innehållsimplementering.</p>
</li>
<li><p>På liknande sätt, för <a href="https://flyrank.com/blogs/case-studies/releasit">Releasit</a>, förfinade FlyRank deras webb-närvaro och ökade betydligt engagemang och synlighet.</p>
</li>
</ul>
<p>Dessa exempel understryker effektiviteten av att använda banbrytande taktik för att hantera synlighet av JavaScript-innehåll, vilket i sin tur förbättrar indexering och prestanda.</p>
<h2>Tillgänglighetens roll</h2>
<p>En webbplats bör vara navigerbar och användbar för alla användare, även för dem som använder webbläsare som inte kör JavaScript. Se till att det viktiga innehållet blir tillgängligt utan tunga beroenden av JavaScript. Testning med hjälp av verktyg eller vy-rendering i textläge är praktiska strategier för att säkerställa att innehållet visas som förväntat.</p>
<h2>Slutsats</h2>
<p>Indexerbarheten av JavaScript-innehåll är en avgörande faktor i hur framgångsrik en webbplats är i sökresultaten. Även om renderingsmetoder och strategisk användning av SEO-principer spelar viktiga roller, är det precis lika viktigt att kontinuerligt anpassa sig till den utvecklande naturen av SEO.</p>
<p>Genom att förstå kärninteraktioner av JavaScript med sökmotorer och använda beprövade SEO-metoder som server-sidig rendering eller meningsfulla meta-implementeringar kan din webbplats förbli synlig, relevant och konkurrenskraftig. Att utnyttja FlyRanks datadrivna strategier <a href="https://flyrank.com/pages/our-approach">Vår metod</a> kan effektivt förbättra din webbplats digitala fotavtryck, vilket säkerställer att ditt dynamiska innehåll når en bredare, engagerad publik. </p>
<p>För att ytterligare förfina din webbapplikationers SEO, utnyttja FlyRanks lokala innehållserbjudanden <a href="https://flyrank.com/pages/localization">Översättningstjänster</a> för att naturligt skala och upprätthålla inträde på internationella marknader.</p>
<h2>Vanliga frågor</h2>
<p><strong>Fråga 1: Kan jag använda JavaScript för att ställa in meta-taggar som beskrivningar eller kanoniska URL:er?</strong><br>Ja, JavaScript kan dynamiskt ställa in meta-taggar inklusive kanoniska URL:er och beskrivningar. För robust SEO är det dock bättre att placera dessa på serversidan där det är möjligt, eftersom vissa sökmotorer kanske inte kör JavaScript helt och hållet.</p>
<p><strong>Fråga 2: Hur förbättrar server-sidig rendering SEO för JavaScript-tunga webbplatser?</strong><br>Server-sidig rendering (SSR) levererar för-renderade HTML-sidor till sökmotorbots, vilket förenklar deras genomsökning och indexeringsprocess genom att ge dem direkt tillgång till innehållet utan att behöva köra ytterligare JavaScript.</p>
<p><strong>Fråga 3: Är det nödvändigt att testa JavaScript-funktioner för kompatibilitet med äldre webbläsare?</strong><br>Ja, använd polyfills för att säkerställa att JavaScript-funktioner fungerar korrekt över äldre webbläsare som saknar inbyggt stöd, vilket förbättrar både användarupplevelsen och SEO-indexerbarheten.</p>
<p><strong>Fråga 4: Hur kan FlyRank förbättra den globala innehållsräckvidden?</strong><br>FlyRanks <a href="https://flyrank.com/pages/localization">Översättningstjänster</a> anpassar din webbplats för olika språk och kulturer, vilket säkerställer optimerad leverans och kontextuellt relevans för internationella publik, vilket därmed breddar din räckvidd och engagemang.</p>
<p>Att kontinuerligt utvecklas i takt med ledande SEO-strategier som de som erbjuds av FlyRank garanterar både aktuell efterlevnad och beredskap för framtida framsteg inom sökmotorteknologi.</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]=%2Fsv%2Fblogs%2Fseo-hub%2Fhur-man-skerstller-att-javascript-innehll-ar-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">LÅT OSS DRIVA DITT VARUMÄRKE TILL NYA HÖJDER</h2>
<div class="mb-5"><p>Om du är redo att bryta igenom bruset och göra ett bestående intryck online, är det dags att gå samman med FlyRank. Kontakta oss idag, så sätter vi ditt varumärke på en väg mot digital dominans.</p></div>
<div class="flex flex-col">
<div>
<a class="btn btn-dark text-gray mt-8" href="/sv/pages/kontakt-4">
Begär en demo
</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>Om du är redo att bryta igenom bruset och göra ett varaktigt intryck online, är det dags att slå sig samman med 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">Företag</div>
<ul>
<li class="mb-3">
<a href="/sv/pages/om-2" class="text-gray-50 capitalize">
Om Oss
</a>
</li>
<li class="mb-3">
<a href="/sv/pages/var-ansats" class="text-gray-50 capitalize">
Vår metod
</a>
</li>
<li class="mb-3">
<a href="/sv/pages/remisser" class="text-gray-50 capitalize">
Remisser
</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">
Kontakta Oss
</a>
</li>
</ul>
</div>
<div class="">
<div class="text-dark-100 mb-5 sm:mb-12 uppercase font-medium">Utforska</div>
<ul>
<li class="mb-3">
<a href="/sv/pages/innehall" class="text-gray-50 capitalize">
Artiklar
</a>
</li>
<li class="mb-3">
<a href="/sv/blogs/fallstudier" class="text-gray-50 capitalize">
Fallstudier
</a>
</li>
<li class="mb-3">
<a href="/sv/pages/prissattning" class="text-gray-50 capitalize">
Prissättning
</a>
</li>
<li class="mb-3">
<a href="/sv/pages/vanliga-fragor" class="text-gray-50 capitalize">
Vanliga frågor
</a>
</li>
</ul>
</div>
<div class="mt-5 sm:mt-0">
<div class="text-dark-100 mb-5 sm:mb-12 uppercase font-medium">Juridiskt</div>
<ul>
<li class="mb-3">
<a href="/sv/policies/terms-of-service" class="text-gray-50 capitalize">
Villkor för tjänster
</a>
</li>
<li class="mb-3">
<a href="/sv/policies/privacy-policy" class="text-gray-50 capitalize">
Integritetspolicy
</a>
</li>
<li class="mb-3">
<a href="/sv/policies/refund-policy" class="text-gray-50 capitalize">
Pengar-tillbaka-garanti
</a>
</li>
<li class="mb-3">
<a href="https://calendly.com/flyrank/30min?utm_source=website&utm_medium=footer" class="text-gray-50 capitalize">
Begär en demo
</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="/sv/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">
Vad kan vi hjälpa dig att hitta?
</h2>
<form
action="/sv/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>Modal Titel</h1>
<p><p>Modalbeskrivning. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque totam cum cupiditate officia et quaerat blanditiis culpa? Hic, nesciunt id.</p></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-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><div id="shopify-block-AZFd6aGFnS21FS1hVa__13768625480086291342" class="shopify-block shopify-app-block"><script>
window['ShopifyForms'] = {
...window['ShopifyForms'],
currentPageType: "article"
};
</script>
</div></body>
</html>
