Sisällysluettelo
- Googlebotin kolmiportainen matka
- Palvelinpuolen renderointi (SSR) tai esirenderointi
- Dynaamisen renderoinnin toteuttaminen
- Renderointipolun optimointi
- Polyfillien ja erilaisten palvelujen käyttö
- Merkitykselliset HTTP-statuskoodit
- Pehmeiden 404-virheiden välttäminen
- Oikea kanonisten tunnisteiden käyttö
- Tehokas robottimetatunnisteiden käyttö
- Otsikoiden ja metakuvausten parantaminen
Johdanto
Kuvittele, että investoit lukemattomia tunteja upean ja vuorovaikutteisen verkkosivuston kehittämiseen JavaScript-teknologioita käyttäen, vain huomataksesi, että hakukoneet eivät pysty indeksoimaan sisältöäsi tehokkaasti. Vaikka JavaScript tekee verkkokokemuksesta dynaamisen, se tuo mukanaan haasteita hakukoneoptimoinnille (SEO), mikä voi estää sisältösi löytämisen ja sijoittamisen. Ymmärtäminen siitä, kuinka varmistaa, että JavaScript-sisältösi on indeksoitavissa, on ratkaisevaa, jos haluat verkkosivustosi saavuttavan täyden potentiaalinsa.
JavaScript on muuttanut tapaa, jolla verkkosivustoja rakennetaan, tarjoten voimakkaita mahdollisuuksia, jotka tekevät webistä vuorovaikutteisempaa ja mukaansatempaavampaa. Tämä joustavuus tulee kuitenkin hintalapulla. Hakukoneet tarvitsevat JavaScriptin käsittelyä ymmärtääkseen sisällön, mikä voi olla resurssi-intensiivistä ja joskus ongelmallista. Siksi JavaScript-sisällön varmistaminen, että se on indeksoitavissa, on keskeinen askel sivustosi näkyvyyden ylläpitämisessä ja sen varmistamisessa, että laajempi yleisö pääsee käyttämään tarjontojasi.
Tämä blogi opastaa sinua labyrintissä varmistaaksesi, että JavaScript-sisältösi pysyy hakukoneiden saavutettavissa. Puretaan mukana olevat prosessit, tutkitaan toteuttamiskelpoisia strategioita ja korostetaan parhaita käytäntöjä, joilla optimoida sovelluksesi hakukoneiden näkyvyyttä varten. Postauksen lopussa sinulla on käytännön oivalluksia ja käytännön vaiheita JavaScript-pohjaisen verkkosivustosi SEO:n parantamiseksi. Sukelletaanpa!
JavaScript SEO:n perusteiden ymmärtäminen
JavaScript tarjoaa loputtomat mahdollisuudet luoda dynaamisia, mukaansatempaavia verkkokokemuksia. Siitä huolimatta se esittää ainutlaatuisia haasteita SEO:ssa. Verkkosovellusten tekeminen, jotka perustuvat JavaScriptiin, löydettävissä on keskeistä käyttäjien houkuttelemiseksi ja pitäminen hakukoneiden, kuten Googlen, avulla. Googlebotin vuorovaikutuksen ymmärtäminen JavaScriptin kanssa on ensimmäinen askel tekemään JavaScript-sisällöstä indeksoitavaa.
Googlebotin kolmiportainen matka
-
Indeksointi: Googlebot hakee sivun. Se lukee aluksi robots.txt-tiedoston varmistaakseen, voiko se indeksoida sivuja. Jos se on sallittua, se jatkaa. Tärkeiden JavaScript-tiedostojen estäminen robots.txt:llä voi estää Googlea renderöimästä ja indeksoimasta sisältöäsi.
-
Renderointijonoon asettaminen: Ensimmäisen indeksoinnin jälkeen sivu asetetaan jonoon renderointia varten. Tämä vaihe voi kestää muutamasta sekunnista pidempäänkin, riippuen Googlen resursseista.
-
Renderointi ja indeksointi: Kun se on renderoitu Chromen ikuisessa versiossa, Googlebot suorittaa JavaScriptin, jäsentää HTML:n, ja lopuksi asettaa renderoiduista sisällöistä URL-osoitteet lisäindeksointia varten, varmistaen, että kaikki dynaaminen sisältö on näkyvissä ja indeksoitu oikein.
Tämä ymmärrys muokkaa perustan JavaScriptin optimoinnille hakunäkyvyyttä varten.
Vinkkejä ja parhaita käytäntöjä varmistaaksesi indeksoinnin
Palvelinpuolen renderointi (SSR) tai esirenderointi
Nämä vaihtoehdot mahdollistavat hakukoneiden indeksoivan sisältösi tehokkaammin, koska sisältö renderoidaan palvelinpuolella ennen kuin se saavuttaa asiakkaan. Palvelinpuolen renderointi varmistaa, että hakukoneet saavat täysin renderoidun HTML-tiedoston, mikä helpottaa indeksointia. Suositut kehykset, kuten Next.js, hyödyntävät palvelinpuolen renderointia SEO:n parantamiseksi.
Dynaamisen renderoinnin toteuttaminen
Sivustoille, jotka on pakko pitää asiakkaan puolella, dynaaminen renderointi on vaihtoehto. Tämä tarkoittaa staattisten HTML-versioiden tarjoamista indeksoijille samalla, kun käyttäjille tarjotaan dynaaminen kokemus. Vaikka Google tukee asiakaspuolen renderointia, liiallinen riippuvuus JavaScriptistä voi viivästyttää renderointia, mikä vaikuttaa indeksoitavuuteen. FlyRankin AI-Powered Content Engine voi auttaa tuottamaan optimoitua sisältöä, joka voi tehokkaasti täydentää renderointistrategiaasi. Lue lisää sisällön kykymme tästä.
Renderointipolun optimointi
Varmista, että verkkosivustosi alkuperäinen HTML mahdollistaa näkyvään ja saavutettavissa olevaan sisältöön nopean tunnistamisen. Tämä saavutetaan yksinkertaistamalla renderointistrategiaa ja pitämällä tärkeät resurssit helposti saatavilla hakukoneille. Tehtävät, kuten asiakaspuolen JavaScriptin vähentäminen kriittisille komponenteille, voivat nopeuttaa renderointiaikoja, mikä tekee sisällöstä helpommin saavutettavaa roboteille.
Polyfillien ja erilaisten palvelujen käyttö
JS-kehykset kehittyvät nopeasti, mutta kaikkia toimintoja ei renderöidä kattavasti Googlen toimesta. Polyfillien integroiminen varmistaa, että ominaisuudet toimivat eri selainympäristöissä. Erilainen palvelu tarjoaa toimintoja tietyille selaimille, varmistaen optimaalisen esityksen ja toiminnallisuuden ilman, että indeksoitavuus kärsii.
Merkitykselliset HTTP-statuskoodit
Tarjoa selkeät HTTP-statuskoodit ohjataksesi Googlebotin indeksointitoimia, kuten käyttämällä 404-virheitä ei-olemassa oleville sivuille tai 301-uudelleenohjauksia siirretylle sisällölle, varmistaen sujuvan navigoinnin ja indeksoinnin koko sivustollasi.
Pehmeiden 404-virheiden välttäminen
Yksisivuisissa sovelluksissa (SPAs) käytä History API:a fragmenttien sijaan näkymien välillä navigoimiseen, jotta vältyt pehmeiltä 404:iltä, varmistaen, että URL-osoitteet pysyvät saavutettavissa ja selkeinä hakukoneita varten.
Oikea kanonisten tunnisteiden käyttö
Varmista, että kanoniset tunnisteet on määritelty oikein, jotta hakukoneet voivat tunnistaa oikean URL-osoitteen indeksointia varten. Vaikka JavaScript voi lisätä näitä tunnisteita, palvelinpuolen menetelmien käyttäminen, kun se on mahdollista, on ihanteellista, jotta vältetään konfigurointiongelmat asiakaspuolella.
Tehokas robottimetatunnisteiden käyttö
Käytä robottimetatunnisteita harkiten hallitaksesi indeksointikäyttäytymistä estämättä tärkeitä sivuja. Oikeat JavaScript-injektio-tekniikat varmistavat, että dynaaminen sisältö pysyy saavutettavissa, mutta hallittavissa hakukoneiden näkyvyyden kannalta.
Otsikoiden ja metakuvausten parantaminen
JavaScript voi dynaamisesti luoda metakuvaustuksia ja otsikoita, jotka ovat merkityksellisiä sivusi kontekstin kannalta. Ainulaatuiset, kuvailevat
ja metakuvaus auttavat sekä käyttäjiä että hakukoneita tulkitsemaan sisältöäsi paremmin.</p>
<h2>Reaaliaikaiset esimerkit ja tapaustutkimukset</h2>
<p>Demonstratiivisesti esitellen näiden periaatteiden onnistunutta soveltamista, FlyRankin yhteistyö eri yritysten kanssa on tuottanut erinomaisia parannuksia SEO-tuloksissa.</p>
<ul>
<li><p>HulkAppsin tapaustutkimuksessa <a href="https://flyrank.com/blogs/case-studies/hulkapps">FlyRank</a> auttoi saavuttamaan kymmenkertaistumisen orgaanisessa liikenteessä strategioilla, jotka sisältävät renderoinnin optimointia ja jäsenneltyjen sisältöjen toteuttamista.</p>
</li>
<li><p>Samoin <a href="https://flyrank.com/blogs/case-studies/releasit">Releasit</a>:lle FlyRank hienosääteli heidän verkkoläsnäoloaan, mikä merkittävästi paransi sitoutumista ja näkyvyyttä.</p>
</li>
</ul>
<p> Nämä esimerkit korostavat edistyksellisten taktiikoiden tehokkuutta JavaScript-sisällön näkyvyyden hallinnassa, mikä parantaa indeksointia ja suorituskykyä.</p>
<h2>Saavutettavuuden rooli</h2>
<p>Verkkosivuston tulisi olla navigoitavissa ja käytettävissä kaikille käyttäjille, myös niille, jotka käyttävät selaimia, jotka eivät suorita JavaScriptiä. Varmista, että tärkeä sisältö tulee saataville ilman voimakasta riippuvuutta JavaScriptistä. Testaus työkaluilla tai tekstimuodossa tapahtuvan renderoinnin käyttö ovat käytännöllisiä strategioita, joilla voidaan varmistaa, että sisältö näkyy odotetusti.</p>
<h2>Yhteenveto</h2>
<p>JavaScript-sisältöjen indeksoitavuus on keskeinen tekijä verkkosivuston menestyksen määrittämisessä hakutuloksissa. Vaikka renderointitekniikoilla ja SEO-periaatteiden strategisella käytöllä on voimakkaat roolit, jatkuva sopeutuminen SEO:n kehittyvään luonteeseen on yhtä tärkeää.</p>
<p>Ymmärtämällä ydinsuhteet JavaScriptin ja hakukoneiden välillä ja soveltamalla todistettuja SEO-käytäntöjä kuten palvelinpuolen renderointi tai merkitykselliset metatoteutukset, sivustosi voi pysyä näkyvänä, merkityksellisenä ja kilpailukykyisenä. Hyödyntämällä FlyRankin tietoon perustuvia strategioita <a href="https://flyrank.com/pages/our-approach">Meidän lähestymistapamme</a> voi tehokkaasti parantaa sivustosi digitaalista jalanjälkeä, varmistaen, että dynaaminen sisältösi saavuttaa laajemman, sitoutuneen yleisön.</p>
<p> Hienosäätääksesi verkkosovellustesi SEO:ta, hyödynnä FlyRankin lokalisoituja sisältötarjoamia <a href="https://flyrank.com/pages/localization">Lokalisaatiopalveluja</a> kansainvälisiin markkinoille luonnollisella tavalla.</p>
<h2>Usein kysytyt kysymykset</h2>
<p><strong>K1: Voinko käyttää JavaScriptiä metatunnisteiden, kuten kuvausten tai kanonisten URL-osoitteiden, asettamiseen?</strong><br>Kyllä, JavaScript voi dynaamisesti asettaa metatunnisteita, mukaan lukien kanonisia URL-osoitteita ja kuvauksia. Kuitenkin tehokkaamman SEO:n saavuttamiseksi kannattaa sijoittaa nämä palvelinpuolelle, kun mahdollista, koska jotkut hakukoneet eivät välttämättä suorita JavaScriptiä kattavasti.</p>
<p><strong>K2: Miten palvelinpuolen renderointi parantaa SEO:ta JavaScript-painotteisilla verkkosivustoilla?</strong><br>Palvelinpuolen renderointi (SSR) toimittaa esirenderoituja HTML-sivustoja hakukonebotille, yksinkertaistaen niiden indeksointiprosessia antamalla niille suoran pääsyn sisältöön ilman ylimääräisen JavaScriptin suorittamista.</p>
<p><strong>K3: Onko tarpeen testata JavaScript-ominaisuuksia vanhempien selainten yhteensopivuuden varmistamiseksi?</strong><br>Kyllä, käytä polyfilliä varmistaaksesi, että JavaScript-ominaisuudet toimivat oikein vanhemmissa selaimissa, joilla ei ole natiivituen mahdollisuutta, parantaen sekä käyttäjäkokemusta että SEO:n indeksoitavuutta.</p>
<p><strong>K4: Kuinka FlyRank voi parantaa globaalin sisällön saavuttavuutta?</strong><br>FlyRankin <a href="https://flyrank.com/pages/localization">Lokalisaatiopalvelut</a> mukauttavat sivustosi erilaisiin kieliin ja kulttuureihin, varmistaen optimoidun toimituksen ja kontekstin merkityksellisyyden kansainvälisille yleisöille, mikä laajentaa ulottuvuuttasi ja sitoutumista.</p>
<p> Jatkuva kehittyminen yhdessä FlyRankin tarjoamien johtavien SEO-strategioiden kanssa takaa sekä nykyiset vaatimustenmukaisuus että valmius tuleviin edistysaskeliin hakukoneteknologiassa.</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]=%2Ffi%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">KÄRKESTÄ KESKUSRANGAISTUSTEN KANSSA UUSILLE KORKEUDEILLE</h2>
<div class="mb-5"><p>Jos olet valmis pääsemään läpi melusta ja tekemään pysyvän vaikutuksen verkossa, on aika liittoutua FlyRankin kanssa. Ota meihin yhteyttä tänään, ja asetetaan brändisi digitaalisen hallinnan polulle.</p></div>
<div class="flex flex-col">
<div>
<a class="btn btn-dark text-gray mt-8" href="/fi/pages/yhteys">
Pyydä demoa
</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>Jos olet valmis rikkomaan melun ja tekemään pysyvän vaikutuksen verkossa, on aika liittoutua FlyRankin kanssa.</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">Yritys</div>
<ul>
<li class="mb-3">
<a href="/fi/pages/tietoa" class="text-gray-50 capitalize">
Meistä
</a>
</li>
<li class="mb-3">
<a href="/fi/pages/meidan-lahestymistapamme" class="text-gray-50 capitalize">
Meidän lähestymistapamme
</a>
</li>
<li class="mb-3">
<a href="/fi/pages/suositukset" class="text-gray-50 capitalize">
Suositukset
</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">
Ota meihin yhteyttä
</a>
</li>
</ul>
</div>
<div class="">
<div class="text-dark-100 mb-5 sm:mb-12 uppercase font-medium">Tutustu</div>
<ul>
<li class="mb-3">
<a href="/fi/pages/sisalto" class="text-gray-50 capitalize">
Artikkelit
</a>
</li>
<li class="mb-3">
<a href="/fi/blogs/tapaustutkimukset" class="text-gray-50 capitalize">
Case Studies
</a>
</li>
<li class="mb-3">
<a href="/fi/pages/hinnoittelu" class="text-gray-50 capitalize">
Hinnoittelu
</a>
</li>
<li class="mb-3">
<a href="/fi/pages/usein-kysytyt-kysymykset" class="text-gray-50 capitalize">
Usein kysytyt kysymykset
</a>
</li>
</ul>
</div>
<div class="mt-5 sm:mt-0">
<div class="text-dark-100 mb-5 sm:mb-12 uppercase font-medium">Oikeudellinen</div>
<ul>
<li class="mb-3">
<a href="/fi/policies/terms-of-service" class="text-gray-50 capitalize">
Palveluehdot
</a>
</li>
<li class="mb-3">
<a href="/fi/policies/privacy-policy" class="text-gray-50 capitalize">
Tietosuojakäytäntö
</a>
</li>
<li class="mb-3">
<a href="/fi/policies/refund-policy" class="text-gray-50 capitalize">
Rahanpalautustakuu
</a>
</li>
<li class="mb-3">
<a href="https://calendly.com/flyrank/30min?utm_source=website&utm_medium=footer" class="text-gray-50 capitalize">
Pyydä esittely
</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="/fi/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">
Mitä voimme auttaa sinua löytämään?
</h2>
<form
action="/fi/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 Title</h1>
<p><p>Modalikuvaus. 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>
