Daftar Isi
- Perjalanan Tiga Tahap Googlebot
- Rendering Sisi Server (SSR) atau Pra-Rendering
- Mengimplementasikan Rendering Dinamis
- Mengoptimalkan Jalur Rendering
- Penggunaan Polyfills dan Pelayanan Diferensial
- Kode Status HTTP yang Bermakna
- Menghindari Kesalahan Soft 404
- Penggunaan Tag Kanonik yang Tepat
- Penggunaan Tag Meta Robots yang Efektif
- Meningkatkan Judul dan Deskripsi Meta
Pengantar
Bayangkan menginvestasikan banyak jam untuk mengembangkan situs web yang menakjubkan dan interaktif menggunakan teknologi JavaScript, hanya untuk menemukan bahwa mesin pencari tidak dapat mengindeks konten Anda secara efektif. Sebagai sesuatu yang dinamis, JavaScript membuat pengalaman web menarik, tetapi juga memperkenalkan tantangan untuk optimisasi mesin pencari (SEO), yang dapat menghambat penemuan dan peringkat konten Anda. Memahami cara memastikan konten JavaScript Anda dapat diindeks sangat penting jika Anda ingin situs web Anda mencapai potensi penuhnya.
JavaScript telah mengubah cara situs web dibangun, menawarkan kemampuan hebat yang membuat web lebih interaktif dan menarik. Namun, fleksibilitas ini datang dengan biaya. Mesin pencari perlu memproses JavaScript untuk memahami konten, yang dapat memperberat sumber daya dan kadang-kadang menjadi masalah. Oleh karena itu, memastikan bahwa konten JavaScript dapat diindeks adalah langkah penting untuk mempertahankan visibilitas situs Anda dan memastikan bahwa audiens yang lebih luas dapat mengakses tawaran Anda.
Blog ini akan memandu Anda melalui labirin memastikan bahwa konten JavaScript Anda tetap dapat diakses oleh mesin pencari. Kami akan menjelaskan proses yang terlibat, mengeksplorasi strategi yang layak, dan menyoroti praktik terbaik untuk mengoptimalkan aplikasi Anda untuk visibilitas mesin pencari. Di akhir pos ini, Anda akan dilengkapi dengan wawasan praktis dan langkah-langkah yang dapat diambil untuk meningkatkan SEO situs web berbasis JavaScript Anda. Mari kita mulai!
Memahami Dasar-Dasar SEO JavaScript
JavaScript menawarkan kemungkinan tak terbatas untuk menciptakan pengalaman web yang dinamis dan menarik. Namun, ini menghadirkan tantangan unik dalam hal SEO. Membuat aplikasi web yang bergantung pada JavaScript dapat ditemukan sangat penting untuk menarik dan mempertahankan pengguna melalui mesin pencari seperti Google. Memahami interaksi Googlebot dengan JavaScript adalah langkah pertama untuk membuat konten JavaScript dapat diindeks.
Perjalanan Tiga Tahap Googlebot
-
Pemanasan: Googlebot mengambil halaman. Pada awalnya, ia membaca file robots.txt untuk memastikan apakah ia dapat meng-crawl halaman. Jika diizinkan, ia melanjutkan. Memblokir file JavaScript yang penting melalui robots.txt dapat mencegah Google dari merender dan mengindeks konten Anda.
-
Antrian untuk Rendering: Setelah pemanasan awal, halaman ditempatkan dalam antrian untuk rendering. Fase ini mungkin memakan waktu dari beberapa detik hingga lebih lama, tergantung pada sumber daya Google.
-
Rendering dan Pengindeksan: Setelah dirender oleh versi Chromium yang up-to-date, Googlebot menjalankan JavaScript, mem-parsing HTML, dan akhirnya mengantre URL dari konten yang dirender untuk pemanasan lebih lanjut, memastikan bahwa semua konten dinamis terlihat dan diindeks dengan benar.
Pemahaman ini membentuk dasar untuk mengoptimalkan JavaScript untuk visibilitas di mesin pencari.
Tips dan Praktik Terbaik untuk Memastikan Dapat Diindeks
Rendering Sisi Server (SSR) atau Pra-Rendering
Opsi-opsi ini memungkinkan mesin pencari untuk meng-crawl konten Anda secara lebih efisien karena konten dirender di sisi server sebelum mencapai klien. Rendering sisi server memastikan bahwa mesin pencari menerima file HTML yang sepenuhnya dirender, sehingga memudahkan untuk meng-crawl dan mengindeks. Kerangka kerja populer seperti Next.js memanfaatkan rendering sisi server untuk meningkatkan SEO.
Mengimplementasikan Rendering Dinamis
Untuk situs yang harus tetap di sisi klien, rendering dinamis adalah alternatif. Ini melibatkan penyajian versi HTML statis kepada crawler sambil memberikan pengalaman dinamis kepada pengguna. Meskipun Google mendukung rendering sisi klien, terlalu bergantung pada JavaScript dapat memperlambat rendering, yang mempengaruhi kemampuan untuk diindeks. Mesin Konten Berbasis AI dari FlyRank dapat membantu menghasilkan konten yang dioptimalkan yang dapat melengkapi strategi rendering Anda secara efisien. Pelajari lebih lanjut tentang kemampuan konten kami di sini.
Mengoptimalkan Jalur Rendering
Pastikan bahwa HTML awal situs Anda memungkinkan pengenalan cepat konten yang terlihat dan dapat diakses. Ini dicapai dengan menerapkan strategi rendering yang efisien dan menjaga sumber daya penting tetap dapat diakses oleh mesin pencari. Tugas seperti meminimalkan JavaScript sisi klien untuk komponen kritis dapat mempercepat waktu rendering, sehingga membuat konten lebih mudah diakses oleh bot.
Penggunaan Polyfills dan Pelayanan Diferensial
Kerangka kerja JS terus berkembang dengan cepat, tetapi tidak semua fungsi dirender secara komprehensif oleh Google. Mengintegrasikan polyfills memastikan fitur berfungsi di berbagai lingkungan browser. Pelayanan diferensial menyediakan fungsi untuk browser tertentu, memastikan presentasi dan fungsi optimal tanpa mengganggu kemampuan untuk dapat diindeks.
Kode Status HTTP yang Bermakna
Berikan kode status HTTP yang jelas untuk membimbing tindakan pengindeksan Googlebot, seperti menggunakan kesalahan 404 untuk halaman yang tidak ada atau pengalihan 301 untuk konten yang dipindahkan, memastikan navigasi dan pengindeksan yang lancar di seluruh situs Anda.
Menghindari Kesalahan Soft 404
Dalam Aplikasi Halaman Tunggal (SPA), gunakan API Sejarah sebagai ganti fragmen untuk bernavigasi antara tampilan guna menghindari masalah seperti soft 404, memastikan URL tetap dapat diakses dan jelas untuk mesin pencari untuk diindeks.
Penggunaan Tag Kanonik yang Tepat
Pastikan tag kanonik dikonfigurasi dengan benar sehingga mesin pencari dapat mengidentifikasi URL yang tepat untuk pengindeksan. Meskipun JavaScript dapat menyuntikkan tag ini, menggunakan metodologi sisi server di mana mungkin adalah ideal untuk menghindari masalah konfigurasi di tingkat klien.
Penggunaan Tag Meta Robots yang Efektif
Pergunakan tag meta robots secara bijaksana untuk mengontrol perilaku pengindeksan tanpa secara tidak sengaja memblokir halaman penting. Teknik suntikan JavaScript yang tepat memastikan konten dinamis tetap dapat diakses namun manageable dalam hal visibilitas kepada mesin pencari.
Meningkatkan Judul dan Deskripsi Meta
JavaScript dapat secara dinamis menghasilkan deskripsi meta dan judul yang berarti bagi konteks halaman Anda. Deskripsi meta yang unik dan deskriptif
dan deskripsi meta membantu pengguna dan mesin pencari memahami konten Anda dengan lebih baik.</p>
<h2>Contoh Dunia Nyata dan Studi Kasus</h2>
<p>Mengilustrasikan penerapan prinsip-prinsip ini dengan sukses, kolaborasi FlyRank dengan berbagai bisnis telah menghasilkan peningkatan luar biasa dalam hasil SEO.</p>
<ul>
<li><p>Dalam <a href="https://flyrank.com/blogs/case-studies/hulkapps">Studi Kasus HulkApps</a>, FlyRank membantu mencapai peningkatan 10x dalam lalu lintas organik melalui strategi termasuk optimasi rendering dan implementasi konten terstruktur.</p>
</li>
<li><p>Begitu pula, untuk <a href="https://flyrank.com/blogs/case-studies/releasit">Releasit</a>, FlyRank menyempurnakan keberadaan web mereka, secara signifikan meningkatkan keterlibatan dan visibilitas.</p>
</li>
</ul>
<p>Contoh-contoh ini menyoroti efektivitas penerapan taktik mutakhir untuk mengelola visibilitas konten JavaScript, yang kemudian memperbaiki pengindeksan dan kinerja.</p>
<h2>Peran Aksesibilitas</h2>
<p>Situs web harus dapat dinavigasi dan digunakan oleh semua pengguna, bahkan mereka yang menggunakan browser yang tidak menjalankan JavaScript. Pastikan konten penting tersedia tanpa bergantung berat pada JavaScript. Menguji menggunakan alat atau pemuatan tampilan dalam mode teks adalah strategi praktis untuk memastikan konten muncul sesuai harapan.</p>
<h2>Kesimpulan</h2>
<p>Dapat diindeksnya konten JavaScript adalah faktor kunci yang menentukan kesuksesan situs web dalam peringkat pencarian. Sementara teknik rendering dan penggunaan strategis prinsip SEO memainkan peran yang kuat, terus beradaptasi dengan sifat SEO yang berkembang juga sangat penting.</p>
<p>Dengan memahami interaksi inti JavaScript dengan mesin pencari dan menerapkan praktik SEO yang terbukti seperti rendering sisi server atau implementasi meta yang berarti, situs Anda dapat tetap terlihat, relevan, dan kompetitif. Memanfaatkan strategi berbasis data dari FlyRank <a href="https://flyrank.com/pages/our-approach">Pendekatan Kami</a> dapat secara efektif meningkatkan jejak digital situs Anda, memastikan konten dinamis Anda menjangkau audiens yang lebih luas dan terlibat. </p>
<p>Untuk lebih memperhalus SEO aplikasi web Anda, manfaatkan tawaran konten lokal FlyRank <a href="https://flyrank.com/pages/localization">Layanan Lokalisasi</a> untuk secara alami skala dan mempertahankan masuk pasar internasional.</p>
<h2>Pertanyaan yang Sering Diajukan</h2>
<p><strong>Q1: Bisakah saya menggunakan JavaScript untuk menetapkan tag meta seperti deskripsi atau URL kanonik?</strong><br>Ya, JavaScript dapat secara dinamis menetapkan tag meta termasuk URL kanonik dan deskripsi. Namun, untuk SEO yang robust, pertimbangkan menempatkannya di sisi server di mana mungkin, karena beberapa mesin pencari mungkin tidak menjalankan JavaScript secara komprehensif.</p>
<p><strong>Q2: Bagaimana rendering sisi server meningkatkan SEO untuk situs web yang berat JavaScript?</strong><br>Rendering sisi server (SSR) memberikan halaman HTML yang telah dirender sebelumnya kepada bot mesin pencari, menyederhanakan proses peng-crawling dan pengindeksan mereka dengan memungkinkan akses langsung ke konten tanpa mengeksekusi JavaScript tambahan.</p>
<p><strong>Q3: Apakah perlu menguji fitur JavaScript untuk kompatibilitas dengan browser yang lebih tua?</strong><br>Ya, gunakan polyfills untuk memastikan fitur JavaScript berfungsi dengan benar di browser yang lebih tua yang tidak memiliki dukungan bawaan, sehingga meningkatkan pengalaman pengguna dan kemampuan untuk diindeks oleh SEO.</p>
<p><strong>Q4: Bagaimana FlyRank dapat meningkatkan jangkauan konten global?</strong><br>Layanan <a href="https://flyrank.com/pages/localization">Lokalisasi</a> FlyRank menyesuaikan situs Anda untuk berbagai bahasa dan budaya, memastikan pengiriman yang dioptimalkan dan relevansi konteks untuk audiens internasional, sehingga memperluas jangkauan dan keterlibatan Anda.</p>
<p>Terus berkembang seiring dengan strategi SEO terdepan seperti yang disediakan oleh FlyRank menjamin kepatuhan saat ini dan kesiapan untuk kemajuan masa depan dalam teknologi mesin pencari.</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]=%2Fid%2Fblogs%2Fseo-hub%2Fbagaimana-cara-menekankan-konten-javascript-dapat-dicrawl"
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">AYO BAWA MEREK ANDA KE TINGKAT BARU</h2>
<div class="mb-5"><p>Jika Anda siap untuk menembus kebisingan dan membuat dampak yang langgeng di dunia maya, saatnya untuk bergabung dengan FlyRank. Hubungi kami hari ini, dan mari kita atur merek Anda menuju dominasi digital.</p></div>
<div class="flex flex-col">
<div>
<a class="btn btn-dark text-gray mt-8" href="/id/pages/kontak">
Minta 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>Jika Anda siap untuk menerobos kebisingan dan membuat dampak yang langgeng secara online, saatnya bergabung dengan 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">Perusahaan</div>
<ul>
<li class="mb-3">
<a href="/id/pages/tentang" class="text-gray-50 capitalize">
Tentang Kami
</a>
</li>
<li class="mb-3">
<a href="/id/pages/pendekatan-kami" class="text-gray-50 capitalize">
Pendekatan kami
</a>
</li>
<li class="mb-3">
<a href="/id/pages/rujukan" class="text-gray-50 capitalize">
Rujukan
</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">
Hubungi Kami
</a>
</li>
</ul>
</div>
<div class="">
<div class="text-dark-100 mb-5 sm:mb-12 uppercase font-medium">Eksplorasi</div>
<ul>
<li class="mb-3">
<a href="/id/pages/konten" class="text-gray-50 capitalize">
Artikel
</a>
</li>
<li class="mb-3">
<a href="/id/blogs/studi-kasus" class="text-gray-50 capitalize">
Studi Kasus
</a>
</li>
<li class="mb-3">
<a href="/id/pages/penetapan-harga" class="text-gray-50 capitalize">
Penetapan Harga
</a>
</li>
<li class="mb-3">
<a href="/id/pages/pertanyaan-yang-sering-diajukan" 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">Hukum</div>
<ul>
<li class="mb-3">
<a href="/id/policies/terms-of-service" class="text-gray-50 capitalize">
Syarat Layanan
</a>
</li>
<li class="mb-3">
<a href="/id/policies/privacy-policy" class="text-gray-50 capitalize">
Kebijakan Privasi
</a>
</li>
<li class="mb-3">
<a href="/id/policies/refund-policy" class="text-gray-50 capitalize">
Jaminan Uang Kembali
</a>
</li>
<li class="mb-3">
<a href="https://calendly.com/flyrank/30min?utm_source=website&utm_medium=footer" class="text-gray-50 capitalize">
Minta 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="/id/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">
Apa yang bisa kami bantu Anda temukan?
</h2>
<form
action="/id/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>Judul Modal</h1>
<p>Modal Deskripsi. 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>
