JavaScript Mesajlaşmasını Kullanarak Wix'te Açılır Menüye Dayalı PDF URL Değiştirmeyi Entegre Etme

Wix Kütüphane Sitesinde PDF Görüntüleyici İşlevselliğini Geliştirme

Geniş bir PDF dosyası arşivinin düzenli ve kullanıcı dostu bir şekilde görüntülenmesi, bir halk kütüphanesinin web sitesindeki kullanıcı deneyimini geliştirmek için çok önemlidir. Amaç, ziyaretçilere PDF olarak saklanan eski gazeteler gibi tarihi kayıtlara kesintisiz erişim sunmaktır. Bu projede Wix, Velo ve HTML yerleştirme öğesinin kullanımı sağlam bir sistemin temelini oluşturur.

Wix'in platformu, iframe'ler aracılığıyla gömülü öğeleri destekleyerek kullanıcıların PDF görüntüleyiciler gibi etkileşimli bileşenler eklemesine olanak tanır. Bu PDF görüntüleyici bir iframe kullanılarak gömülüdür ve şu anda hangi belgenin görüntüleneceğini statik bir URL tanımlar. Ancak sorunsuz bir deneyim için PDF dosyasını kullanıcı girişine göre dinamik olarak değiştirme ihtiyacı çok önemlidir.

Buradaki zorluk, kullanıcıların iki açılır menüden bir yıl ve bir ay seçmesine olanak tanımaktır; bu, daha sonra görüntülenen PDF belgesinde bir değişikliği tetikleyecektir. Bu, iframe ile iletişim kurmak için JavaScript mesajlaşmasının entegre edilmesini ve belgenin URL'sinin açılır seçimlere göre değişmesini sağlamayı içerir.

Bu yaklaşım yalnızca çok sayıda statik Wix sayfasına olan ihtiyacı azaltmakla kalmıyor, aynı zamanda kütüphanenin PDF arşivine erişimi de kolaylaştırıyor. Aşağıda Velo çerçevesini ve JavaScript'i kullanarak bunu uygulamak için gereken adımları ve çözümleri inceliyoruz.

Wix'te Açılır Seçimlerle Dinamik PDF Yükleme

Bu çözümde, gömülü bir iFrame içinde görüntülenen PDF dosyasının URL'sini dinamik olarak değiştirmek için Wix sayfasında bir çift açılır öğe kullanıyoruz. Bu sistem özellikle arşivlenmiş gazete PDF'lerine kolay erişim sağlamak isteyen halk kütüphaneleri için kullanışlıdır. Temel işlevsellik tarafından desteklenmektedir JavaScript mesajlaşma, açılır menülerdeki kullanıcı seçimlerini gömülü PDF görüntüleyiciye gönderir. PSPDFKit görüntüleyici, PDF'leri iFrame içinde oluşturmak için kullanılır ve kullanıcının yıl ve ay seçimine göre URL'yi değiştirerek görüntüleyiciyi değiştiririz. Bu, birden fazla statik Wix sayfası oluşturmadan büyük arşivleri ortaya çıkarmanın kolaylaştırılmış bir yolunu sağlar.

İlk açılır menü yılı seçer, ikinci açılır menü ise ayı seçer. Kullanıcı her ikisini de seçtiğinde sistem ilgili PDF dosyası için uygun URL'yi oluşturur. PSPDFKit.load() yöntemi, güncellenen URL'ye göre yeni PDF'yi iFrame'e yüklediği için bunun merkezinde yer alır. Bu yöntem, sayfaya harici bir komut dosyası aracılığıyla katıştırılan PSPDFKit kitaplığının bir parçasıdır. mesajMesaj() API, ana sayfa ile iframe arasında mesajlaşmaya izin veren alternatif çözümde de kritik öneme sahiptir. Yeni PDF URL'sini içeren bir mesajın iframe'e gönderilmesiyle PDF görüntüleyici dinamik olarak güncellenir.

Komut dosyasının yalnızca DOM tamamen yüklendiğinde çalışmasını sağlamak için DOMContentLoaded etkinlik. Bu, açılır öğelerin ve PSPDFKit kapsayıcısının komut dosyası tarafından erişilebilir olmasını sağlar. Ayrıca her açılır menüye olay dinleyicileri de ekliyoruz. Kullanıcı bir yıl veya ay seçtiğinde, ilgili olay dinleyicisi seçimi yakalar ve PDF görüntüleyiciyi doğru URL ile yeniden yüklemek için bir işlevi çağırır. Bu, URL'yi açılır menülerde seçilen değerlerden oluşturmak için şablon değişmezlerini kullanan basit bir işlev aracılığıyla gerçekleştirilir. Bu yöntemin uygulanması kolay olmasının yanı sıra son derece modülerdir ve yeni arşivler eklendikçe kolay güncellemelere olanak tanır.

İkinci yaklaşımda ise şunu kullanıyoruz: mesajMesaj() ana sayfa ile iFrame arasında iletişim kurmak için. Ana sayfa, açılır menü değişikliklerini dinler ve yeni PDF URL'sini içeren bir mesajı, bir olay dinleyicisi kullanarak mesajı alan iFrame'e gönderir. Bu yöntem, iframe'in ana sayfanın DOM'uyla doğrudan etkileşim kuramadığı daha yalıtılmış ortamlarla uğraşırken kullanışlıdır. Her iki yöntem de gömülü PDF görüntüleyicinin içeriğini dinamik olarak güncellemenin etkili yollarını sağlayarak birden fazla statik sayfa ihtiyacını azaltır ve kullanıcı dostu bir tarama deneyimi sunar.

// HTML structure for the dropdowns and embed element
<div>
  <label for="yearSelect">Select Year:</label>
  <select id="yearSelect">
    <option value="">--Year--</option>
    <option value="1962">1962</option>
    <option value="1963">1963</option>
    <!-- Add other years dynamically or manually -->
  </select>
  <label for="monthSelect">Select Month:</label>
  <select id="monthSelect">
    <option value="">--Month--</option>
    <option value="January">January</option>
    <option value="February">February</option>
    <!-- Add other months dynamically or manually -->
  </select>
</div>
// Embedded PDF viewer in iframe
<div id="pspdfkit" style="width: 100%; height: 100%; max-width: 1920px;"></div>
<script src="https://cdn.cloud.pspdfkit.com/pspdfkit-web@2024.5.2/pspdfkit.js"></script>
// JavaScript to update URL based on dropdown selection
<script>
document.addEventListener("DOMContentLoaded", () => {
  const yearSelect = document.getElementById("yearSelect");
  const monthSelect = document.getElementById("monthSelect");
  function loadPDF(year, month) {
    if (year && month) {
      const url = `https://domain.tld/${year}_${month}_etc.pdf`;
      PSPDFKit.load({
        container: "#pspdfkit",
        document: url,
      }).catch((error) => {
        console.error("Failed to load PDF:", error);
      });
    }
  }
  yearSelect.addEventListener("change", () => {
    loadPDF(yearSelect.value, monthSelect.value);
  });
  monthSelect.addEventListener("change", () => {
    loadPDF(yearSelect.value, monthSelect.value);
  });
});
</script>

// HTML structure remains the same for dropdowns
// Here, we use iframe with a postMessage-based communication system
<iframe id="pdfViewer" src="about:blank" style="width: 100%; height: 100%;"></iframe>
// JavaScript for sending messages to iframe
<script>
document.addEventListener("DOMContentLoaded", () => {
  const yearSelect = document.getElementById("yearSelect");
  const monthSelect = document.getElementById("monthSelect");
  const iframe = document.getElementById("pdfViewer");
  function updatePDFViewer(year, month) {
    if (year && month) {
      const url = `https://domain.tld/${year}_${month}_etc.pdf`;
      iframe.contentWindow.postMessage({
        type: "updatePDF",
        url: url
      }, "*");
    }
  }
  yearSelect.addEventListener("change", () => {
    updatePDFViewer(yearSelect.value, monthSelect.value);
  });
  monthSelect.addEventListener("change", () => {
    updatePDFViewer(yearSelect.value, monthSelect.value);
  });
});
</script>
// Inside iframe, use this script to receive the message
<script>
window.addEventListener("message", (event) => {
  if (event.data.type === "updatePDF" && event.data.url) {
    PSPDFKit.load({
      container: "#pspdfkit",
      document: event.data.url,
    });
  }
});
</script>

Wix ve JavaScript Mesajlaşma ile PDF Arşivi Erişilebilirliğini Geliştirme

Wix'te gömülü bir PDF URL'sini dinamik olarak değiştirmek için açılır öğeleri kullanırken göz önünde bulundurulması gereken bir diğer önemli husus, iFrame ve ana sayfa verimlidir. JavaScript mesajlaşma, bu iki bileşen arasında veri göndermemize olanak sağlarken, seçimin güncellemeleri nasıl tetiklediğini optimize ederek performans ve kullanıcı deneyimi iyileştirilebilir. Bu, girişin geri çevrilmesiyle yapılabilir; bu, sistemin PDF görüntüleyiciyi her değişiklik yerine yalnızca kullanıcı seçimini tamamladıktan sonra güncelleyeceği anlamına gelir.

Henüz ele alınmayan bir diğer husus ise kökenler arası kaynak paylaşımı (CORS). PDF'ler harici bir sunucuda (Digital Ocean gibi) barındırıldığından, sunucunun Wix etki alanından erişime izin verecek şekilde yapılandırıldığından emin olmak çok önemlidir. Sunucunun CORS ayarları doğru yapılandırılmamışsa PDF görüntüleyici belgeyi yükleyemeyebilir ve bu da hatalara neden olabilir. PDF dosyalarını barındıran sunucudaki uygun CORS başlıkları, iki platform arasında kusursuz entegrasyon için gereklidir.

Ayrıca yükleme sürelerini azaltmak için sık erişilen PDF dosyalarını önceden yükleyerek sistemi geliştirebilirsiniz. Ön yükleme stratejileri, kullanıcının birden fazla ay veya yıl arasında geçiş yapma olasılığı yüksek olduğunda kullanışlıdır. Bu dosyaların tarayıcının önbelleğinde saklanması, sonraki belge yüklemelerini hızlandıracak ve daha sorunsuz bir kullanıcı deneyimi sağlayacaktır. Bu, kullanıcı mevcut seçenekler arasında gezinirken PDF'leri önceden yüklemek üzere ayarlanabilen hizmet çalışanları veya diğer önbelleğe alma mekanizmaları kullanılarak yapılabilir.