İçindekiler
- Googlebot'un Üç Aşamalı Yolculuğu
- Sunucu Tarafı Oluşturma (SSR) veya Önceden Oluşturma
- Dinamik Oluşturmayı Uygulama
- Oluşturma Yolunu Optimize Etme
- Polyfill Kullanımı ve Diferansiyel Sunum
- Anlamlı HTTP Durum Kodları
- Yumuşak 404 Hatalarından Kaçınma
- Kanonik Etiketlerin Doğru Kullanımı
- Robots Meta Etiketlerinin Etkili Kullanımı
- Başlıklar ve Meta Açıklamalarını Geliştirme
Giriş
Harika ve etkileşimli bir web sitesi geliştirmek için sayısız saat yatırım yaptığınızı hayal edin. Ancak arama motorlarının içeriklerinizi etkili bir şekilde dizine ekleyemediğini keşfettiniz. JavaScript web deneyimini ne kadar dinamik hale getirirse, arama motoru optimizasyonu (SEO) açısından da zorluklar getiriyor, bu da içeriğinizin keşfedilmesini ve sıralanmasını engelleyebilir. JavaScript içeriğinizin erişilebilir olmasını sağlamak, web sitenizin tam potansiyeline ulaşması adına hayati önem taşıyor.
JavaScript, web sitelerinin inşasını dönüştürdü ve webi daha etkileşimli ve ilgi çekici hale getiren güçlü yetenekler sunuyor. Ancak bu esneklik bir bedel ödetiyor. Arama motorlarının içeriği anlamak için JavaScript'i işlemesi gerekiyor, bu da kaynak yoğun ve bazen sorunlu olabilir. Bu nedenle, JavaScript içeriğinizin erişilebilir olduğunu sağlamak, sitenizin görünürlüğünü korumanın ve daha geniş bir kitleye ulaşmanın önemli bir adımıdır.
Bu blog, JavaScript içeriğinizin arama motorları tarafından erişilebilir kalmasını sağlamanın karmaşasını keşfetmenize yardımcı olacaktır. Süreçleri açıklayacak, uygulanabilir stratejileri keşfedecek ve arama motoru görünürlüğünü optimize etmek için en iyi uygulamaları vurgulayacağız. Bu yazının sonunda, JavaScript destekli web sitenizin SEO'sunu artırmak için pratik içgörüler ve uygulanabilir adımlar ile donatılmış olacaksınız. Hadi başlayalım!
JavaScript SEO Temellerini Anlamak
JavaScript, dinamik, ilgi çekici web deneyimleri yaratmak için sonsuz olanaklar sunar. Ancak SEO konusunda benzersiz zorluklar çıkarır. JavaScript'e dayanan web uygulamalarınızın keşfedilebilir olması, Google gibi arama motorları aracılığıyla kullanıcıları çekmek ve elde tutmak için esastır. Googlebot’un JavaScript ile etkileşimini anlamak, JavaScript içeriğini erişilebilir hale getirmenin ilk adımıdır.
Googlebot'un Üç Aşamalı Yolculuğu
-
Taramak: Googlebot sayfayı alır. Öncelikle robots.txt dosyasını okuyarak sayfaları tarayıp tarayamayacağını onaylar. Eğer izin veriliyorsa, taramaya devam eder. Robots.txt dosyası aracılığıyla kritik JavaScript dosyalarının engellenmesi, Google’ın içeriğinizi oluşturmasını ve dizine eklemesini engelleyebilir.
-
Oluşturma İçin Bekleme: İlk tarama sonrasında, sayfa oluşturma için bir kuyruğa yerleştirilir. Bu aşama, Google’ın kaynaklarına bağlı olarak birkaç saniyeden daha uzun sürebilir.
-
Oluşturma ve Dizine Ekleme: Ömür boyu taze bir Chromium sürümü tarafından oluşturulduktan sonra, Googlebot JavaScript'i çalıştırır, HTML'i ayrıştırır ve nihayetinde dizine ekleme için oluşturulan içerikten URL'leri kuyruğa alır; böylece tüm dinamik içerik görünür ve uygun şekilde dizine eklenir.
Bu anlayış, JavaScript'in arama görünürlüğü için optimizasyon temellerini şekillendirir.
Erişilebilirliği Sağlamak İçin İpuçları ve En İyi Uygulamalar
Sunucu Tarafı Oluşturma (SSR) veya Önceden Oluşturma
Bu seçenekler, arama motorlarının içeriğinizi daha verimli bir şekilde taramasını sağlar çünkü içerik, istemciye ulaşmadan önce sunucu tarafında oluşturulur. Sunucu tarafı oluşturma, arama motorlarının tamamen oluşturulmuş bir HTML dosyası almasını sağlayarak taramayı ve dizine eklemeyi kolaylaştırır. Next.js gibi popüler çerçeveler, SEO'yu artırmak için sunucu tarafı oluşturmayı kullanır.
Dinamik Oluşturmayı Uygulama
İstemci tarafında kalması gereken siteler için dinamik oluşturma bir alternatiftir. Bu, tarayıcılara statik HTML sürümlerini sunmayı, kullanıcılara ise dinamik deneyimi sağlamayı içerir. Google, istemci tarafı oluşturmayı desteklese de, JavaScript'e ağır şekilde bağımlı olmak oluşturmayı geciktirebilir, bu da erişilebilirliği etkiler. FlyRank’in AI Destekli İçerik Motoru, oluşturma stratejinizi verimli bir şekilde destekleyebilecek optimize edilmiş içerik oluşturmanıza yardımcı olabilir. İçerik yeteneklerimiz hakkında daha fazla bilgi almak için buradan öğrenebilirsiniz.
Oluşturma Yolunu Optimize Etme
Web sitenizin başlangıç HTML'inin görünür ve erişilebilir içeriğin hızlı bir şekilde tanınmasını sağladığından emin olun. Bu, sade bir oluşturma stratejisi uygulayarak ve kritik kaynakların arama motorlarına erişilebilir olmasını sağlayarak elde edilir. Kritik bileşenler için istemci tarafı JavaScript'ini minimize etmek, oluşturma sürelerini hızlandırabilir, böylece içerik botlara daha erişilebilir hale gelir.
Polyfill Kullanımı ve Diferansiyel Sunum
JS çerçeveleri hızla gelişiyor, ancak tüm işlevlerin Google tarafından kapsamlı bir şekilde oluşturulmadığı durumlar var. Polyfill'lerin entegrasyonu, özelliklerin farklı tarayıcı ortamlarında çalışmasını garanti eder. Diferansiyel sunum, belirli tarayıcılar için işlevsellik sunar, böylece en iyi sunum ve işlevselliği sağlar ve erişilebilirliği etkilemez.
Anlamlı HTTP Durum Kodları
Googlebot'un dizine ekleme eylemlerini yönlendirmek için açık HTTP durum kodları sağlayın; var olmayan sayfalar için 404 hatalarını veya taşınan içerikler için 301 yönlendirmelerini kullanarak sitenizde sorunsuz bir dolaşım ve dizine ekleme sağlayın.
Yumuşak 404 Hatalarından Kaçınma
Tek Sayfa Uygulamaları (SPA'lar) içinde, görünüm arasında gezinme için parçalar yerine History API'sini kullanarak yumuşak 404 gibi sorunlardan kaçının, böylece URL'lerin arama motorlarının dizine eklemesi için erişilebilir ve net kalmasını sağlayın.
Kanonik Etiketlerin Doğru Kullanımı
Kanonik etiketlerin doğru yapılandırıldığından emin olun, böylece arama motorları dizine ekleme için doğru URL'yi tanıyabilir. JavaScript bu etiketleri enjekte edebilse de, mümkünse sunucu tarafı yöntemlerini kullanmak, istemci tarafında yapılandırma sorunlarını önlemek için idealdir.
Robots Meta Etiketlerinin Etkili Kullanımı
Robots meta etiketlerini dikkatli bir şekilde kullanarak dizine ekleme davranışlarını kontrol edin, önemli sayfaları yanlışlıkla engellemeyin. Doğru JavaScript enjekte teknikleri, dinamik içeriğin erişilebilir ancak arama motorları için görünürlük yönetimini sağlamasına yardımcı olur.
Başlıklar ve Meta Açıklamalarını Geliştirme
JavaScript, sayfanızın bağlamına anlamlı meta açıklamalar ve başlıklar dinamik olarak oluşturabilir. Benzersiz, betimleyici
ve meta açıklamalar, hem kullanıcıların hem de arama motorlarının içeriğinizi daha iyi yorumlamasına yardımcı olur.</p>
<h2>Gerçek Dünya Örnekleri ve Vaka Çalışmaları</h2>
<p>Bu ilkelerin başarılı bir şekilde uygulanmasını göstermektedir, FlyRank'in farklı işletmelerle işbirliği, SEO sonuçlarında dikkate değer iyileşmeler sağlamıştır.</p>
<ul>
<li><p><a href="https://flyrank.com/blogs/case-studies/hulkapps">HulkApps Vaka Çalışması</a>'nda, FlyRank, oluşturma optimizasyonları ve yapılandırılmış içerik uygulamaları içeren stratejilerle organik trafiği 10 kat artırmayı başardı.</p></li>
<li><p>Aynı şekilde, <a href="https://flyrank.com/blogs/case-studies/releasit">Releasit</a> için FlyRank, web varlıklarını geliştirerek etkileşimi ve görünürlüğü önemli ölçüde artırdı.</p></li>
</ul>
<p>Bu örnekler, JavaScript içerik görünürlüğünü yönetmek için en son taktiklerin etkili olduğunu, sonrasında dizine eklemeyi ve performansı artırdığını vurgulamaktadır.</p>
<h2>Erişilebilirliğin Rolü</h2>
<p>Bir web sitesi, JavaScript'i çalıştırmayan tarayıcıları kullananlar dahil tüm kullanıcılar için gezilebilir ve kullanılabilir olmalıdır. Temel içeriğin ağır bir şekilde JavaScript'e bağımlı olmadan erişilebilir hale geldiğinden emin olun. İçeriğin beklendiği gibi göründüğünden emin olmak için test araçları kullanmak veya metin modunda görüntüleme yapmak pratik stratejilerdir.</p>
<h2>Sonuç</h2>
<p>JavaScript içeriğinin erişilebilirliği, bir web sitesinin arama sıralamalarındaki başarısında kritik bir faktördür. Oluşturma teknikleri ve SEO ilkelerinin stratejik kullanımı önemli roller oynarken, SEO'nun evrilen doğasına sürekli olarak uyum sağlamak da aynı derecede önemlidir.</p>
<p>JavaScript'in arama motorlarıyla temel etkileşimlerini anlamak ve sunucu tarafı oluşturma veya anlamlı meta uygulamaları gibi kanıtlanmış SEO uygulamalarını benimseyerek, siteniz görünür, alakalı ve rekabetçi kalabilir. FlyRank’in veri odaklı stratejilerinden yararlanmak, <a href="https://flyrank.com/pages/our-approach">Yöntemimiz</a>, sitenizin dijital ayak izini etkili bir şekilde artırabilir, dinamik içeriğinizin daha geniş bir, etkileşimde olan kitleye ulaşmasını sağlayabilir.</p>
<p>Web uygulamalarınızın SEO'sunu daha da iyileştirmek için FlyRank'ın yerelleştirilmiş içerik tekliflerini <a href="https://flyrank.com/pages/localization">Yerelleştirme Hizmetleri</a> ile kullanarak uluslararası pazara girişinizi doğal bir şekilde ölçekleyebilir ve sürdürebilirsiniz.</p>
<h2>SSS</h2>
<p><strong>S1: Meta etiketlerini tanımlamak için JavaScript kullanabilir miyim, örneğin açıklamalar veya kanonik URL'ler?</strong><br>Evet, JavaScript dinamik olarak kanonik URL'ler ve açıklamalar dahil meta etiketlerini ayarlayabilir. Ancak, sağlam SEO için bunları mümkünse sunucu tarafında yerleştirmeyi düşünün, çünkü bazı arama motorları JavaScript'i kapsamlı bir şekilde çalıştırmayabilir.</p>
<p><strong>S2: Sunucu tarafı oluşturma, JavaScript yoğun web siteleri için SEO'yu nasıl geliştirir?</strong><br>Sunucu tarafı oluşturma (SSR), arama motoru botlarına önceden oluşturulmuş HTML sayfaları sunarak, ek JavaScript çalıştırmadan içeriğe doğrudan erişim sağlayarak tarama ve dizine ekleme süreçlerini basitleştirir.</p>
<p><strong>S3: Eski tarayıcı uyumluluğu için JavaScript özelliklerini test etmek gerekli mi?</strong><br>Evet, JavaScript özelliklerinin yerel desteklemeyen eski tarayıcılarda doğru çalışmasını sağlamak için polyfill'leri kullanın, bu da hem kullanıcı deneyimini hem de SEO'nun erişilebilirliğini artırır.</p>
<p><strong>S4: FlyRank, küresel içerik ulaşımını nasıl artırabilir?</strong><br>FlyRank’ın <a href="https://flyrank.com/pages/localization">Yerelleştirme Hizmetleri</a>, sitenizi çeşitli diller ve kültürler için uyarlayarak, uluslararası kitleler için optimize edilmiş teslimat ve bağlam relevanı sağlayarak erişiminizi ve etkileşiminizi genişletir.</p>
<p>FlyRank'ın sağladığı önde gelen SEO stratejileriyle sürekli olarak evrim geçirerek, hem mevcut uyumluluğu hem de arama motoru teknolojisindeki gelecekteki gelişmelere hazırlıklı olmayı garanti edersiniz.</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]=%2Ftr%2Fblogs%2Fseo-hub%2Fnasl-javascript-ieriinin-taramaya-uygun-olduunu-garanti-edilir"
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">MARKANIZI YENİ ZIRVELERE TAŞIYALIM</h2>
<div class="mb-5"><p>Eğer gürültüyü aşmaya ve çevrimiçi kalıcı bir etki yaratmaya hazırsanız, FlyRank ile güçlerinizi birleştirmenin tam zamanı. Bugün bizimle iletişime geçin ve markanızı dijital hâkimiyet yoluna çıkaralım.</p></div>
<div class="flex flex-col">
<div>
<a class="btn btn-dark text-gray mt-8" href="/tr/pages/iletisim">
Demoyu Talep Et
</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>Gürültüyü aşmak ve çevrimiçi kalıcı bir etki yaratmak için hazır iseniz, FlyRank ile güçlerinizi birleştirmenin zamanı geldi.</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">Şirket</div>
<ul>
<li class="mb-3">
<a href="/tr/pages/hakkinda" class="text-gray-50 capitalize">
Hakkımızda
</a>
</li>
<li class="mb-3">
<a href="/tr/pages/bizim-yaklasim" class="text-gray-50 capitalize">
Yaklaşımımız
</a>
</li>
<li class="mb-3">
<a href="/tr/pages/tavsiyeler" class="text-gray-50 capitalize">
Tavsiyeler
</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">
Bize Ulaşın
</a>
</li>
</ul>
</div>
<div class="">
<div class="text-dark-100 mb-5 sm:mb-12 uppercase font-medium">Keşfet</div>
<ul>
<li class="mb-3">
<a href="/tr/pages/i%CC%87cerik" class="text-gray-50 capitalize">
Makaleler
</a>
</li>
<li class="mb-3">
<a href="/tr/blogs/vaka-calismalari" class="text-gray-50 capitalize">
Vaka Çalışmaları
</a>
</li>
<li class="mb-3">
<a href="/tr/pages/fiyatlandirma" class="text-gray-50 capitalize">
Fiyatlandırma
</a>
</li>
<li class="mb-3">
<a href="/tr/pages/sikca-sorulan-sorular" class="text-gray-50 capitalize">
SSS
</a>
</li>
</ul>
</div>
<div class="mt-5 sm:mt-0">
<div class="text-dark-100 mb-5 sm:mb-12 uppercase font-medium">Hukuk</div>
<ul>
<li class="mb-3">
<a href="/tr/policies/terms-of-service" class="text-gray-50 capitalize">
Hizmet Şartları
</a>
</li>
<li class="mb-3">
<a href="/tr/policies/privacy-policy" class="text-gray-50 capitalize">
Gizlilik Politikası
</a>
</li>
<li class="mb-3">
<a href="/tr/policies/refund-policy" class="text-gray-50 capitalize">
Para İade Garantisi
</a>
</li>
<li class="mb-3">
<a href="https://calendly.com/flyrank/30min?utm_source=website&utm_medium=footer" class="text-gray-50 capitalize">
Demo Talep Et
</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="/tr/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">
'Bize ne bulmamızda yardımcı olabileceğimizi söyler misiniz?'
</h2>
<form
action="/tr/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>Modül Başlığı</h1>
<p>Modal Açıklaması. 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-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>
