જાવાસ્ક્રિપ્ટ મેસેજિંગનો ઉપયોગ કરીને Wix માં સ્વિચિંગ ડ્રોપડાઉન-ડ્રાઇવ પીડીએફ URL ને એકીકૃત કરવું

Wix લાઇબ્રેરી સાઇટ પર પીડીએફ વ્યૂઅરની કાર્યક્ષમતા વધારવી

પીડીએફ ફાઇલોના વિશાળ આર્કાઇવને વ્યવસ્થિત અને વપરાશકર્તા-મૈત્રીપૂર્ણ રીતે પ્રદર્શિત કરવું એ સાર્વજનિક પુસ્તકાલયની વેબસાઇટ પર વપરાશકર્તા અનુભવને સુધારવા માટે મહત્વપૂર્ણ છે. ધ્યેય મુલાકાતીઓને પીડીએફ તરીકે સંગ્રહિત જૂના અખબારો જેવા ઐતિહાસિક રેકોર્ડની સીમલેસ ઍક્સેસ પ્રદાન કરવાનો છે. આ પ્રોજેક્ટમાં, Wix, Velo અને HTML એમ્બેડ તત્વનો ઉપયોગ મજબૂત સિસ્ટમ માટે પાયો બનાવે છે.

Wixનું પ્લેટફોર્મ iframes દ્વારા એમ્બેડેડ તત્વોને સપોર્ટ કરે છે, જે વપરાશકર્તાઓને PDF દર્શકો જેવા ઇન્ટરેક્ટિવ ઘટકો ઉમેરવાની મંજૂરી આપે છે. આ પીડીએફ વ્યૂઅર iframe નો ઉપયોગ કરીને એમ્બેડેડ છે, અને હાલમાં, એક સ્ટેટિક URL વ્યાખ્યાયિત કરે છે કે કયો દસ્તાવેજ પ્રદર્શિત થાય છે. જો કે, વપરાશકર્તાના ઇનપુટના આધારે પીડીએફ ફાઇલને ગતિશીલ રીતે બદલવાની જરૂરિયાત સરળ અનુભવ માટે જરૂરી છે.

પડકાર એ છે કે વપરાશકર્તાઓને બે ડ્રોપડાઉનમાંથી એક વર્ષ અને એક મહિનો પસંદ કરવાની મંજૂરી આપવી, જે પછી પ્રદર્શિત પીડીએફ દસ્તાવેજમાં ફેરફારને ટ્રિગર કરશે. આમાં iframe સાથે વાતચીત કરવા માટે JavaScript મેસેજિંગને એકીકૃત કરવાનો સમાવેશ થાય છે, દસ્તાવેજના URL ને ડ્રોપડાઉન પસંદગીઓ અનુસાર બદલવા માટે સક્ષમ કરવું.

આ અભિગમ માત્ર અસંખ્ય સ્થિર Wix પૃષ્ઠોની જરૂરિયાતને ઘટાડે છે પરંતુ લાઇબ્રેરીના PDF આર્કાઇવની ઍક્સેસને પણ સરળ બનાવે છે. નીચે, અમે Velo ફ્રેમવર્ક અને JavaScript નો ઉપયોગ કરીને આને અમલમાં મૂકવા માટે જરૂરી પગલાં અને ઉકેલોનું અન્વેષણ કરીએ છીએ.

Wix માં ડ્રોપડાઉન પસંદગીઓ સાથે ડાયનેમિક પીડીએફ લોડિંગ

આ ઉકેલમાં, અમે એમ્બેડેડ iFrame માં પ્રદર્શિત PDF ફાઇલના URL ને ગતિશીલ રીતે સંશોધિત કરવા માટે Wix પૃષ્ઠ પર ડ્રોપડાઉન ઘટકોની જોડીનો ઉપયોગ કરીએ છીએ. આ સિસ્ટમ ખાસ કરીને સાર્વજનિક પુસ્તકાલયો માટે ઉપયોગી છે જે આર્કાઇવ કરેલા અખબાર પીડીએફની સરળ ઍક્સેસ પ્રદાન કરવા માંગે છે. મુખ્ય કાર્યક્ષમતા દ્વારા સંચાલિત થાય છે જાવાસ્ક્રિપ્ટ મેસેજિંગ, જે ડ્રોપડાઉનમાંથી વપરાશકર્તાની પસંદગીઓને એમ્બેડેડ PDF વ્યૂઅરને મોકલે છે. PSPDFKit વ્યૂઅરનો ઉપયોગ iFrame ની અંદર પીડીએફ રેન્ડર કરવા માટે થાય છે, અને અમે વપરાશકર્તાની વર્ષ અને મહિનાની પસંદગીના આધારે URL ને બદલીને દર્શકને હેરફેર કરીએ છીએ. આ બહુવિધ સ્થિર Wix પૃષ્ઠો બનાવ્યા વિના મોટા આર્કાઇવ્સને સપાટી પર લાવવાની એક સુવ્યવસ્થિત રીત પ્રદાન કરે છે.

પ્રથમ ડ્રોપડાઉન વર્ષ પસંદ કરે છે, અને બીજું ડ્રોપડાઉન મહિનો પસંદ કરે છે. જ્યારે વપરાશકર્તા બંનેને પસંદ કરે છે, ત્યારે સિસ્ટમ અનુરૂપ પીડીએફ ફાઇલ માટે યોગ્ય URL બનાવે છે. આ PSPDFKit.load() પદ્ધતિ આના માટે કેન્દ્રિય છે, કારણ કે તે અપડેટ કરેલ URL ના આધારે iFrame માં નવી PDF લોડ કરે છે. આ પદ્ધતિ PSPDFKit લાઇબ્રેરીનો ભાગ છે, જે બાહ્ય સ્ક્રિપ્ટ દ્વારા પૃષ્ઠ પર એમ્બેડ કરેલી છે. આ પોસ્ટમેસેજ() વૈકલ્પિક ઉકેલમાં API પણ મહત્વપૂર્ણ છે, જે પેરેન્ટ પેજ અને iframe વચ્ચે મેસેજિંગ માટે પરવાનગી આપે છે. આઈફ્રેમ પર નવા પીડીએફ યુઆરએલ ધરાવતો સંદેશ મોકલીને, પીડીએફ વ્યૂઅર ગતિશીલ રીતે અપડેટ થાય છે.

DOM સંપૂર્ણ લોડ થાય ત્યારે જ સ્ક્રિપ્ટ ચાલે છે તેની ખાતરી કરવા માટે, અમે ઉપયોગ કરીએ છીએ DOMContentLoaded ઘટના આ ખાતરી કરે છે કે ડ્રોપડાઉન તત્વો અને PSPDFKit કન્ટેનર સ્ક્રિપ્ટ માટે સુલભ છે. અમે દરેક ડ્રોપડાઉનમાં ઇવેન્ટ શ્રોતાઓને પણ ઉમેરીએ છીએ. જ્યારે વપરાશકર્તા એક વર્ષ અથવા મહિનો પસંદ કરે છે, ત્યારે સંબંધિત ઇવેન્ટ સાંભળનાર પસંદગીને કૅપ્ચર કરે છે અને યોગ્ય URL સાથે પીડીએફ વ્યૂઅરને ફરીથી લોડ કરવા માટે ફંક્શનને કૉલ કરે છે. આ એક સરળ કાર્ય દ્વારા નિયંત્રિત થાય છે જે ડ્રોપડાઉનમાં પસંદ કરેલ મૂલ્યોમાંથી URL બનાવવા માટે ટેમ્પલેટ લિટરલ્સનો ઉપયોગ કરે છે. આ પદ્ધતિ માત્ર અમલમાં સરળ નથી પણ અત્યંત મોડ્યુલર પણ છે, જે નવા આર્કાઇવ્સ ઉમેરવામાં આવતાં સરળ અપડેટ્સ માટે પરવાનગી આપે છે.

બીજા અભિગમમાં, અમે ઉપયોગ કરીએ છીએ પોસ્ટમેસેજ() પિતૃ પૃષ્ઠ અને iFrame વચ્ચે વાતચીત કરવા માટે. પેરેન્ટ પેજ ડ્રોપડાઉન ફેરફારો માટે સાંભળે છે અને iFrame પર નવા PDF URL ધરાવતો સંદેશ મોકલે છે, જે ઇવેન્ટ લિસનરનો ઉપયોગ કરીને સંદેશ પ્રાપ્ત કરે છે. આ પદ્ધતિ વધુ અલગ વાતાવરણ સાથે કામ કરતી વખતે ઉપયોગી છે જ્યાં iframe પિતૃ પૃષ્ઠના DOM સાથે સીધો સંપર્ક કરી શકતું નથી. બંને પદ્ધતિઓ એમ્બેડેડ પીડીએફ વ્યૂઅરની સામગ્રીને ગતિશીલ રીતે અપડેટ કરવાની કાર્યક્ષમ રીતો પ્રદાન કરે છે, બહુવિધ સ્થિર પૃષ્ઠોની જરૂરિયાત ઘટાડે છે અને વપરાશકર્તા-મૈત્રીપૂર્ણ બ્રાઉઝિંગ અનુભવ પ્રદાન કરે છે.

// 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 માં એમ્બેડેડ પીડીએફ URL ને ગતિશીલ રીતે સંશોધિત કરવા માટે ડ્રોપડાઉન તત્વોનો ઉપયોગ કરતી વખતે અન્ય મહત્વપૂર્ણ વિચારણા એ સુનિશ્ચિત કરે છે કે વચ્ચેની ક્રિયાપ્રતિક્રિયા iFrame અને મુખ્ય પૃષ્ઠ કાર્યક્ષમ છે. જ્યારે JavaScript મેસેજિંગ અમને આ બે ઘટકો વચ્ચે ડેટા મોકલવાની મંજૂરી આપે છે, ત્યારે પસંદગી કેવી રીતે અપડેટ્સને ટ્રિગર કરે છે તે ઑપ્ટિમાઇઝ કરીને પ્રદર્શન અને વપરાશકર્તા અનુભવને સુધારી શકાય છે. આ ઇનપુટને ડિબાઉન્સ કરીને કરી શકાય છે, એટલે કે સિસ્ટમ દરેક ફેરફારને બદલે વપરાશકર્તાએ તેમની પસંદગી પૂર્ણ કરી લીધા પછી જ PDF વ્યૂઅરને અપડેટ કરે છે.

અન્ય પાસું જે હજુ સુધી આવરી લેવામાં આવ્યું નથી તે છે ક્રોસ-ઓરિજિન રિસોર્સ શેરિંગ (CORS). PDF ને બાહ્ય સર્વર (જેમ કે ડિજિટલ ઓશન) પર હોસ્ટ કરવામાં આવતું હોવાથી, Wix ડોમેનમાંથી ઍક્સેસની મંજૂરી આપવા માટે સર્વર ગોઠવેલું છે તેની ખાતરી કરવી મહત્વપૂર્ણ છે. જો સર્વરની CORS સેટિંગ્સ યોગ્ય રીતે રૂપરેખાંકિત ન હોય, તો પીડીએફ વ્યૂઅર દસ્તાવેજને લોડ કરી શકશે નહીં, પરિણામે ભૂલો થશે. પીડીએફ ફાઇલોને હોસ્ટ કરતા સર્વર પર યોગ્ય CORS હેડરો બે પ્લેટફોર્મ વચ્ચે સીમલેસ એકીકરણ માટે જરૂરી છે.

વધુમાં, તમે લોડ થવાનો સમય ઘટાડવા માટે વારંવાર એક્સેસ કરેલી PDF ફાઇલોને પ્રીલોડ કરીને સિસ્ટમને વધારી શકો છો. જ્યારે વપરાશકર્તા બહુવિધ મહિનાઓ અથવા વર્ષો વચ્ચે સ્વિચ કરે તેવી શક્યતા હોય ત્યારે પ્રીલોડિંગ વ્યૂહરચના ઉપયોગી છે. આ ફાઈલોને બ્રાઉઝરની કેશમાં સંગ્રહિત કરવાથી, અનુગામી દસ્તાવેજ લોડ વધુ ઝડપી થશે, એક સરળ વપરાશકર્તા અનુભવ પ્રદાન કરશે. આ સેવા કાર્યકરો અથવા અન્ય કેશીંગ મિકેનિઝમ્સનો ઉપયોગ કરીને કરી શકાય છે, જે પીડીએફને પ્રીલોડ કરવા માટે સેટ કરી શકાય છે કારણ કે વપરાશકર્તા ઉપલબ્ધ વિકલ્પો દ્વારા નેવિગેટ કરે છે.