Mengintegrasikan Peralihan URL PDF Berbasis Dropdown di Wix Menggunakan Pesan JavaScript

Meningkatkan Fungsi Penampil PDF di Situs Perpustakaan Wix

Menampilkan arsip file PDF yang luas dengan cara yang terorganisir dan ramah pengguna sangat penting untuk meningkatkan pengalaman pengguna di situs web perpustakaan umum. Tujuannya adalah untuk menawarkan pengunjung akses tanpa batas ke catatan sejarah seperti surat kabar bekas, yang disimpan sebagai PDF. Dalam proyek ini, penggunaan Wix, Velo, dan elemen penyematan HTML menciptakan fondasi untuk sistem yang tangguh.

Platform Wix mendukung elemen yang disematkan melalui iframe, memungkinkan pengguna menambahkan komponen interaktif seperti penampil PDF. Penampil PDF ini disematkan menggunakan iframe, dan saat ini, URL statis menentukan dokumen mana yang ditampilkan. Namun, kebutuhan untuk mengubah file PDF secara dinamis berdasarkan masukan pengguna sangat penting untuk kelancaran pengalaman.

Tantangannya adalah memungkinkan pengguna memilih tahun dan bulan dari dua dropdown, yang kemudian akan memicu perubahan pada dokumen PDF yang ditampilkan. Hal ini melibatkan pengintegrasian pesan JavaScript untuk berkomunikasi dengan iframe, memungkinkan URL dokumen berubah sesuai dengan pilihan dropdown.

Pendekatan ini tidak hanya mengurangi kebutuhan akan banyak halaman statis Wix tetapi juga menyederhanakan akses ke arsip PDF perpustakaan. Di bawah ini, kami mengeksplorasi langkah-langkah dan solusi yang diperlukan untuk mengimplementasikan hal ini menggunakan kerangka kerja Velo dan JavaScript.

Pemuatan PDF Dinamis dengan Pilihan Dropdown di Wix

Dalam solusi ini, kami menggunakan sepasang elemen tarik-turun pada halaman Wix untuk secara dinamis mengubah URL file PDF yang ditampilkan dalam iFrame yang disematkan. Sistem ini sangat berguna bagi perpustakaan umum yang ingin menyediakan akses mudah ke arsip PDF surat kabar. Fungsionalitas inti didukung oleh Pesan JavaScript, yang mengirimkan pilihan pengguna dari dropdown ke penampil PDF yang tertanam. Penampil PSPDFKit digunakan untuk merender PDF di dalam iFrame, dan kami memanipulasi penampil dengan mengubah URL berdasarkan pilihan tahun dan bulan pilihan pengguna. Ini memberikan cara yang efisien untuk menampilkan arsip besar tanpa membuat beberapa halaman Wix statis.

Dropdown pertama memilih tahun, dan dropdown kedua memilih bulan. Ketika pengguna memilih keduanya, sistem akan membuat URL yang sesuai untuk file PDF yang sesuai. Itu PSPDFKit.beban() Metode ini penting karena memuat PDF baru ke iFrame berdasarkan URL yang diperbarui. Metode ini adalah bagian dari perpustakaan PSPDFKit, yang tertanam pada halaman melalui skrip eksternal. Itu pascaPesan() API juga penting dalam solusi alternatif, yang memungkinkan pengiriman pesan antara halaman induk dan iframe. Dengan mengirimkan pesan berisi URL PDF baru ke iframe, penampil PDF diperbarui secara dinamis.

Untuk memastikan bahwa skrip hanya berjalan ketika DOM dimuat penuh, kami menggunakan Konten DOM Dimuat peristiwa. Hal ini memastikan bahwa elemen dropdown dan container PSPDFKit dapat diakses oleh skrip. Kami juga menambahkan pendengar acara ke setiap dropdown. Saat pengguna memilih tahun atau bulan, pendengar peristiwa terkait menangkap pilihan tersebut dan memanggil fungsi untuk memuat ulang penampil PDF dengan URL yang benar. Hal ini ditangani melalui fungsi sederhana yang menggunakan literal templat untuk membuat URL dari nilai yang dipilih di dropdown. Metode ini tidak hanya mudah diterapkan tetapi juga sangat modular, sehingga memudahkan pembaruan saat arsip baru ditambahkan.

Dalam pendekatan kedua, kami menggunakan pascaPesan() untuk berkomunikasi antara halaman induk dan iFrame. Halaman induk mendengarkan perubahan dropdown dan mengirimkan pesan yang berisi URL PDF baru ke iFrame, yang menerima pesan menggunakan pendengar acara. Metode ini berguna ketika berhadapan dengan lingkungan yang lebih terisolasi dimana iframe tidak dapat berinteraksi langsung dengan DOM halaman induk. Kedua metode ini memberikan cara yang efisien untuk memperbarui konten penampil PDF yang tertanam secara dinamis, mengurangi kebutuhan akan beberapa halaman statis dan menawarkan pengalaman penelusuran yang ramah pengguna.

// 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>

Meningkatkan Aksesibilitas Arsip PDF dengan Wix dan Pesan JavaScript

Pertimbangan penting lainnya saat menggunakan elemen tarik-turun untuk memodifikasi URL PDF yang disematkan di Wix secara dinamis adalah memastikan bahwa interaksi antar iFrame dan halaman utama efisien. Meskipun perpesanan JavaScript memungkinkan kami mengirim data antara dua komponen ini, kinerja dan pengalaman pengguna dapat ditingkatkan dengan mengoptimalkan cara pemilihan memicu pembaruan. Hal ini dapat dilakukan dengan membatalkan input, artinya sistem hanya memperbarui penampil PDF setelah pengguna menyelesaikan pilihannya, bukan pada setiap perubahan.

Aspek lain yang belum tercakup adalah berbagi sumber daya lintas asal (CORS). Karena PDF dihosting di server eksternal (seperti Digital Ocean), penting untuk memastikan bahwa server dikonfigurasi untuk mengizinkan akses dari domain Wix. Jika pengaturan CORS server tidak dikonfigurasi dengan benar, penampil PDF mungkin tidak dapat memuat dokumen, sehingga terjadi kesalahan. Header CORS yang tepat di server yang menghosting file PDF sangat penting untuk integrasi yang lancar antara kedua platform.

Selain itu, Anda dapat menyempurnakan sistem dengan memuat terlebih dahulu file PDF yang sering diakses untuk mengurangi waktu pemuatan. Strategi pramuat berguna ketika pengguna cenderung beralih antara beberapa bulan atau tahun. Dengan menyimpan file-file ini di cache browser, pemuatan dokumen selanjutnya akan lebih cepat, sehingga memberikan pengalaman pengguna yang lebih lancar. Hal ini dapat dilakukan dengan menggunakan pekerja layanan atau mekanisme caching lainnya, yang dapat diatur untuk memuat PDF terlebih dahulu saat pengguna menavigasi opsi yang tersedia.