JavaScript സന്ദേശമയയ്‌ക്കൽ ഉപയോഗിച്ച് Wix-ൽ ഡ്രോപ്പ്‌ഡൗൺ-ഡ്രിവൺ PDF URL സ്വിച്ചിംഗ് സമന്വയിപ്പിക്കുന്നു

ഒരു Wix ലൈബ്രറി സൈറ്റിൽ PDF വ്യൂവർ പ്രവർത്തനം മെച്ചപ്പെടുത്തുന്നു

ഒരു പൊതു ലൈബ്രറിയുടെ വെബ്‌സൈറ്റിലെ ഉപയോക്തൃ അനുഭവം മെച്ചപ്പെടുത്തുന്നതിന് സംഘടിതവും ഉപയോക്തൃ-സൗഹൃദവുമായ രീതിയിൽ PDF ഫയലുകളുടെ വിപുലമായ ആർക്കൈവ് പ്രദർശിപ്പിക്കുന്നത് നിർണായകമാണ്. PDF ആയി സൂക്ഷിച്ചിരിക്കുന്ന പഴയ പത്രങ്ങൾ പോലെയുള്ള ചരിത്ര രേഖകളിലേക്ക് സന്ദർശകർക്ക് തടസ്സങ്ങളില്ലാതെ പ്രവേശനം നൽകുക എന്നതാണ് ലക്ഷ്യം. ഈ പ്രോജക്റ്റിൽ, Wix, Velo, ഒരു HTML ഉൾച്ചേർത്ത ഘടകം എന്നിവയുടെ ഉപയോഗം ശക്തമായ ഒരു സിസ്റ്റത്തിൻ്റെ അടിത്തറ സൃഷ്ടിക്കുന്നു.

Wix-ൻ്റെ പ്ലാറ്റ്ഫോം iframes വഴി ഉൾച്ചേർത്ത ഘടകങ്ങളെ പിന്തുണയ്ക്കുന്നു, PDF വ്യൂവറുകൾ പോലെയുള്ള സംവേദനാത്മക ഘടകങ്ങൾ ചേർക്കാൻ ഉപയോക്താക്കളെ അനുവദിക്കുന്നു. ഈ PDF വ്യൂവർ ഒരു iframe ഉപയോഗിച്ചാണ് ഉൾച്ചേർത്തിരിക്കുന്നത്, നിലവിൽ, ഒരു സ്റ്റാറ്റിക് URL ഏത് പ്രമാണമാണ് പ്രദർശിപ്പിക്കേണ്ടതെന്ന് നിർവചിക്കുന്നു. എന്നിരുന്നാലും, ഉപയോക്തൃ ഇൻപുട്ടിനെ അടിസ്ഥാനമാക്കി PDF ഫയൽ ചലനാത്മകമായി മാറ്റേണ്ടതിൻ്റെ ആവശ്യകത സുഗമമായ അനുഭവത്തിന് അത്യന്താപേക്ഷിതമാണ്.

രണ്ട് ഡ്രോപ്പ്‌ഡൗണുകളിൽ നിന്ന് ഒരു വർഷവും ഒരു മാസവും തിരഞ്ഞെടുക്കാൻ ഉപയോക്താക്കളെ അനുവദിക്കുക എന്നതാണ് വെല്ലുവിളി, അത് പ്രദർശിപ്പിച്ചിരിക്കുന്ന PDF പ്രമാണത്തിൽ മാറ്റം വരുത്തും. iframe-മായി ആശയവിനിമയം നടത്തുന്നതിന് JavaScript സന്ദേശമയയ്‌ക്കൽ സംയോജിപ്പിക്കുന്നത് ഇതിൽ ഉൾപ്പെടുന്നു, ഡ്രോപ്പ്‌ഡൗൺ തിരഞ്ഞെടുക്കലുകൾക്കനുസരിച്ച് ഡോക്യുമെൻ്റിൻ്റെ URL മാറ്റാൻ ഇത് പ്രാപ്‌തമാക്കുന്നു.

ഈ സമീപനം നിരവധി സ്റ്റാറ്റിക് Wix പേജുകളുടെ ആവശ്യകത കുറയ്ക്കുക മാത്രമല്ല, ലൈബ്രറിയുടെ PDF ആർക്കൈവിലേക്കുള്ള പ്രവേശനം ലളിതമാക്കുകയും ചെയ്യുന്നു. താഴെ, Velo ചട്ടക്കൂടും JavaScript ഉം ഉപയോഗിച്ച് ഇത് നടപ്പിലാക്കാൻ ആവശ്യമായ ഘട്ടങ്ങളും പരിഹാരങ്ങളും ഞങ്ങൾ പര്യവേക്ഷണം ചെയ്യുന്നു.

Wix-ലെ ഡ്രോപ്പ്ഡൗൺ സെലക്ഷനുകൾക്കൊപ്പം ഡൈനാമിക് PDF ലോഡിംഗ്

ഈ പരിഹാരത്തിൽ, ഉൾച്ചേർത്ത iFrame-ൽ പ്രദർശിപ്പിച്ചിരിക്കുന്ന ഒരു PDF ഫയലിൻ്റെ URL ചലനാത്മകമായി പരിഷ്കരിക്കുന്നതിന് ഞങ്ങൾ ഒരു Wix പേജിൽ ഒരു ജോടി ഡ്രോപ്പ്ഡൗൺ ഘടകങ്ങൾ ഉപയോഗിക്കുന്നു. ആർക്കൈവ് ചെയ്‌ത ന്യൂസ്‌പേപ്പർ PDF-കളിലേക്ക് എളുപ്പത്തിൽ ആക്‌സസ് നൽകാൻ ആഗ്രഹിക്കുന്ന പൊതു ലൈബ്രറികൾക്ക് ഈ സംവിധാനം പ്രത്യേകിച്ചും ഉപയോഗപ്രദമാണ്. കോർ ഫങ്ഷണാലിറ്റി പവർ ചെയ്യുന്നു JavaScript സന്ദേശമയയ്‌ക്കൽ, ഉൾച്ചേർത്ത PDF വ്യൂവറിലേക്ക് ഡ്രോപ്പ്ഡൗണുകളിൽ നിന്ന് ഉപയോക്തൃ തിരഞ്ഞെടുപ്പുകൾ അയയ്ക്കുന്നു. iFrame-നുള്ളിൽ PDF-കൾ റെൻഡർ ചെയ്യാൻ PSPDFKit വ്യൂവർ ഉപയോഗിക്കുന്നു, കൂടാതെ ഉപയോക്താവിൻ്റെ വർഷവും മാസവും തിരഞ്ഞെടുക്കുന്നതിനെ അടിസ്ഥാനമാക്കി URL മാറ്റി ഞങ്ങൾ കാഴ്ചക്കാരനെ കൈകാര്യം ചെയ്യുന്നു. ഒന്നിലധികം സ്റ്റാറ്റിക് Wix പേജുകൾ സൃഷ്‌ടിക്കാതെ തന്നെ വലിയ ആർക്കൈവുകൾ ഉപരിതലത്തിലേക്ക് കൊണ്ടുവരാൻ ഇത് ഒരു സ്ട്രീംലൈൻഡ് മാർഗം നൽകുന്നു.

ആദ്യത്തെ ഡ്രോപ്പ്ഡൗൺ വർഷം തിരഞ്ഞെടുക്കുന്നു, രണ്ടാമത്തെ ഡ്രോപ്പ്ഡൗൺ മാസം തിരഞ്ഞെടുക്കുന്നു. ഉപയോക്താവ് രണ്ടും തിരഞ്ഞെടുക്കുമ്പോൾ, അനുബന്ധ PDF ഫയലിനായി സിസ്റ്റം ഉചിതമായ URL നിർമ്മിക്കുന്നു. ദി PSPDFKit.load() അപ്‌ഡേറ്റ് ചെയ്‌ത URL അടിസ്ഥാനമാക്കി iFrame-ലേക്ക് പുതിയ PDF ലോഡ് ചെയ്യുന്നതിനാൽ, രീതി ഇതിൽ കേന്ദ്രമാണ്. ഈ രീതി PSPDFKit ലൈബ്രറിയുടെ ഭാഗമാണ്, അത് ഒരു ബാഹ്യ സ്ക്രിപ്റ്റ് വഴി പേജിൽ ഉൾച്ചേർത്തിരിക്കുന്നു. ദി പോസ്റ്റ് മെസേജ്() ഇതര പരിഹാരത്തിലും API നിർണായകമാണ്, ഇത് പാരൻ്റ് പേജിനും iframe-നും ഇടയിൽ സന്ദേശമയയ്‌ക്കാൻ അനുവദിക്കുന്നു. iframe-ലേക്ക് പുതിയ PDF URL അടങ്ങിയ ഒരു സന്ദേശം അയയ്‌ക്കുന്നതിലൂടെ, PDF വ്യൂവർ ചലനാത്മകമായി അപ്‌ഡേറ്റ് ചെയ്യപ്പെടുന്നു.

DOM പൂർണ്ണമായി ലോഡുചെയ്യുമ്പോൾ മാത്രമേ സ്ക്രിപ്റ്റ് പ്രവർത്തിക്കൂ എന്ന് ഉറപ്പാക്കാൻ, ഞങ്ങൾ ഇത് ഉപയോഗിക്കുന്നു DOMContentLoaded സംഭവം. ഡ്രോപ്പ്ഡൗൺ ഘടകങ്ങളും PSPDFKit കണ്ടെയ്‌നറും സ്‌ക്രിപ്‌റ്റിലേക്ക് ആക്‌സസ് ചെയ്യാനാകുമെന്ന് ഇത് ഉറപ്പാക്കുന്നു. ഓരോ ഡ്രോപ്പ്‌ഡൗണിലേക്കും ഞങ്ങൾ ഇവൻ്റ് ശ്രോതാക്കളെ ചേർക്കുന്നു. ഉപയോക്താവ് ഒരു വർഷമോ മാസമോ തിരഞ്ഞെടുക്കുമ്പോൾ, അനുബന്ധ ഇവൻ്റ് ലിസണർ തിരഞ്ഞെടുത്തത് ക്യാപ്‌ചർ ചെയ്യുകയും ശരിയായ URL ഉപയോഗിച്ച് PDF വ്യൂവർ റീലോഡ് ചെയ്യുന്നതിനുള്ള ഒരു ഫംഗ്‌ഷൻ വിളിക്കുകയും ചെയ്യുന്നു. ഡ്രോപ്പ്ഡൗണുകളിൽ തിരഞ്ഞെടുത്ത മൂല്യങ്ങളിൽ നിന്ന് URL നിർമ്മിക്കുന്നതിന് ടെംപ്ലേറ്റ് അക്ഷരങ്ങൾ ഉപയോഗിക്കുന്ന ഒരു ലളിതമായ ഫംഗ്ഷനിലൂടെയാണ് ഇത് കൈകാര്യം ചെയ്യുന്നത്. ഈ രീതി നടപ്പിലാക്കാൻ എളുപ്പം മാത്രമല്ല, ഉയർന്ന മോഡുലാർ കൂടിയാണ്, പുതിയ ആർക്കൈവുകൾ ചേർക്കുന്നതിനനുസരിച്ച് എളുപ്പത്തിൽ അപ്‌ഡേറ്റുകൾ അനുവദിക്കുന്നു.

രണ്ടാമത്തെ സമീപനത്തിൽ, ഞങ്ങൾ ഉപയോഗിക്കുന്നു പോസ്റ്റ് മെസേജ്() പാരൻ്റ് പേജിനും iFrame-നും ഇടയിൽ ആശയവിനിമയം നടത്തുന്നതിന്. പാരൻ്റ് പേജ് ഡ്രോപ്പ്ഡൗൺ മാറ്റങ്ങൾക്കായി ശ്രദ്ധിക്കുകയും ഒരു ഇവൻ്റ് ലിസണർ ഉപയോഗിച്ച് സന്ദേശം സ്വീകരിക്കുന്ന iFrame-ലേക്ക് പുതിയ PDF URL അടങ്ങിയ ഒരു സന്ദേശം അയയ്ക്കുകയും ചെയ്യുന്നു. രക്ഷാകർതൃ പേജിൻ്റെ DOM-മായി iframe-ന് നേരിട്ട് സംവദിക്കാൻ കഴിയാത്ത കൂടുതൽ ഒറ്റപ്പെട്ട പരിതസ്ഥിതികൾ കൈകാര്യം ചെയ്യുമ്പോൾ ഈ രീതി ഉപയോഗപ്രദമാണ്. ഉൾച്ചേർത്ത PDF വ്യൂവറിൻ്റെ ഉള്ളടക്കം ചലനാത്മകമായി അപ്‌ഡേറ്റ് ചെയ്യുന്നതിനും ഒന്നിലധികം സ്റ്റാറ്റിക് പേജുകളുടെ ആവശ്യകത കുറയ്ക്കുന്നതിനും ഉപയോക്തൃ-സൗഹൃദ ബ്രൗസിംഗ് അനുഭവം നൽകുന്നതിനും രണ്ട് രീതികളും കാര്യക്ഷമമായ വഴികൾ നൽകുന്നു.

// 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, JavaScript സന്ദേശമയയ്‌ക്കൽ എന്നിവ ഉപയോഗിച്ച് PDF ആർക്കൈവ് പ്രവേശനക്ഷമത മെച്ചപ്പെടുത്തുന്നു

Wix-ൽ ഉൾച്ചേർത്ത PDF URL ചലനാത്മകമായി പരിഷ്‌ക്കരിക്കുന്നതിന് ഡ്രോപ്പ്ഡൗൺ ഘടകങ്ങൾ ഉപയോഗിക്കുമ്പോൾ മറ്റൊരു പ്രധാന പരിഗണന, ഇവ തമ്മിലുള്ള ഇടപെടൽ ഉറപ്പാക്കുകയാണ്. iFrame പ്രധാന പേജ് കാര്യക്ഷമവുമാണ്. ഈ രണ്ട് ഘടകങ്ങൾക്കിടയിൽ ഡാറ്റ അയയ്‌ക്കാൻ JavaScript സന്ദേശമയയ്‌ക്കൽ ഞങ്ങളെ അനുവദിക്കുമ്പോൾ, തിരഞ്ഞെടുപ്പ് എങ്ങനെ അപ്‌ഡേറ്റുകൾ ട്രിഗർ ചെയ്യുന്നുവെന്നത് ഒപ്‌റ്റിമൈസ് ചെയ്‌ത് പ്രകടനവും ഉപയോക്തൃ അനുഭവവും മെച്ചപ്പെടുത്താനാകും. ഇൻപുട്ട് ഡീബൗൺസ് ചെയ്യുന്നതിലൂടെ ഇത് ചെയ്യാൻ കഴിയും, അതായത് ഓരോ മാറ്റത്തിനും പകരം, ഉപയോക്താവ് അവരുടെ തിരഞ്ഞെടുപ്പ് പൂർത്തിയാക്കിയതിന് ശേഷം മാത്രമേ സിസ്റ്റം PDF വ്യൂവറിനെ അപ്‌ഡേറ്റ് ചെയ്യുന്നുള്ളൂ.

ഇതുവരെ ചർച്ച ചെയ്യപ്പെടാത്ത മറ്റൊരു വശം ക്രോസ്-ഒറിജിൻ റിസോഴ്സ് ഷെയറിംഗ് (CORS). PDF-കൾ ഒരു ബാഹ്യ സെർവറിൽ (ഡിജിറ്റൽ ഓഷ്യൻ പോലുള്ളവ) ഹോസ്റ്റ് ചെയ്‌തിരിക്കുന്നതിനാൽ, Wix ഡൊമെയ്‌നിൽ നിന്ന് ആക്‌സസ് അനുവദിക്കുന്നതിന് സെർവർ കോൺഫിഗർ ചെയ്‌തിട്ടുണ്ടെന്ന് ഉറപ്പാക്കേണ്ടത് നിർണായകമാണ്. സെർവറിൻ്റെ CORS ക്രമീകരണങ്ങൾ ശരിയായി കോൺഫിഗർ ചെയ്‌തിട്ടില്ലെങ്കിൽ, PDF വ്യൂവറിന് ഡോക്യുമെൻ്റ് ലോഡ് ചെയ്യാൻ കഴിഞ്ഞേക്കില്ല, ഇത് പിശകുകൾക്ക് കാരണമാകും. PDF ഫയലുകൾ ഹോസ്റ്റുചെയ്യുന്ന സെർവറിലെ ശരിയായ CORS ഹെഡറുകൾ രണ്ട് പ്ലാറ്റ്‌ഫോമുകൾ തമ്മിലുള്ള തടസ്സമില്ലാത്ത സംയോജനത്തിന് അത്യന്താപേക്ഷിതമാണ്.

കൂടാതെ, ലോഡിംഗ് സമയം കുറയ്ക്കുന്നതിന് പതിവായി ആക്‌സസ് ചെയ്യുന്ന PDF ഫയലുകൾ പ്രീലോഡ് ചെയ്യുന്നതിലൂടെ നിങ്ങൾക്ക് സിസ്റ്റം മെച്ചപ്പെടുത്താനാകും. ഒന്നിലധികം മാസങ്ങൾക്കോ ​​വർഷങ്ങൾക്കോ ​​ഇടയിൽ ഉപയോക്താവ് മാറാൻ സാധ്യതയുള്ളപ്പോൾ പ്രീലോഡിംഗ് തന്ത്രങ്ങൾ ഉപയോഗപ്രദമാണ്. ഈ ഫയലുകൾ ബ്രൗസറിൻ്റെ കാഷെയിൽ സംഭരിക്കുന്നതിലൂടെ, തുടർന്നുള്ള ഡോക്യുമെൻ്റ് ലോഡുകൾ വേഗത്തിലാകും, ഇത് സുഗമമായ ഉപയോക്തൃ അനുഭവം നൽകും. സേവന തൊഴിലാളികൾ അല്ലെങ്കിൽ മറ്റ് കാഷിംഗ് മെക്കാനിസങ്ങൾ ഉപയോഗിച്ച് ഇത് ചെയ്യാൻ കഴിയും, ലഭ്യമായ ഓപ്ഷനുകളിലൂടെ ഉപയോക്താവ് നാവിഗേറ്റ് ചെയ്യുമ്പോൾ PDF-കൾ പ്രീലോഡ് ചെയ്യാൻ സജ്ജീകരിക്കാനാകും.