Kako dodati Scheditov rezervacijski gradnik v Webflow
Webflow se zelo dobro ujema s Scheditovo tridelno integracijo. Slogovno datoteko naložite enkrat, JavaScript enkrat, DIV posameznega koledarja pa postavite točno na mesto, kjer želite prikaz rezervacij.
Ta vodnik uporablja Webflow Custom Code za skupne datoteke in Code Embed element za sam rezervacijski koledar.
Preden odprete Webflow
Nastavljen Scheditov koledar
Nastavite storitve, vire in razpoložljivost, ki jih želite ponuditi strankam.
Dostop do projekta Webflow
Potrebujete možnost urejanja projekta in dostop do Custom Code funkcionalnosti spletnega mesta ali strani.
Trije Scheditovi elementi
V Scheditu odprite kodo gradnika in pripravite CSS povezavo, JavaScript skripto in HTML DIV posameznega koledarja.
1. Ločite tri elemente integracije
Scheditova nadzorna plošča ponuja tri frontend elemente:
CSS povezava — zagotavlja slog gradnika.
JavaScript skripta — inicializira in upravlja Scheditove gradnike.
DIV gradnika — določa organizacijo in javni koledar ter mesto prikaza.
Webflow omogoča, da vsak element postavimo na naravno mesto. Skupni CSS in JavaScript se naložita samo enkrat, vsaka rezervacijska lokacija pa ima svoj DIV koledarja.
Scheditova CSS povezava
Scheditov JavaScript
DIV posameznega koledarja
2. Dodajte Scheditovo CSS povezavo v Head
Iz Scheditove nadzorne plošče kopirajte CSS <link>.
Če boste Schedito uporabljali na več straneh, ga dodajte v Head custom code celotnega spletnega mesta.
Če bo Schedito samo na eni strani, ga lahko dodate v Head custom code te strani.
Slogovne datoteke ne podvajajte v posameznih Code Embed elementih.
3. Dodajte Scheditov JavaScript v Footer
Iz Schedita kopirajte JavaScript <script>.
Pri običajni Schedito integraciji ga dodajte v Webflow Footer code, kjer se vstavi pred zaključni </body> po vsebini strani.
Tudi tukaj izberite ustrezen obseg: celotno spletno mesto ali samo posamezno stran.
Skripto praviloma naložite samo enkrat.
4. DIV koledarja postavite v Code Embed
Odprite stran, kjer želite prikazati rezervacije, in na ustrezno mesto dodajte Code Embed element.
Iz Schedita kopirajte samo HTML DIV posameznega koledarja in ga prilepite v Code Embed.
DIV vsebuje vrednosti, kot sta data-organization-id in data-calendar-public-id. Uporabite vrednosti koledarja, ki ga želite dejansko objaviti.
Ker sta skupni CSS in JavaScript že naložena ločeno, ostane Code Embed majhen in specifičen za koledar.
Scheditove datoteke: globalno ali samo na strani?
Globalni custom code uporabite, če se Schedito pojavlja na več straneh, straneh storitev ali ponovno uporabljivih layoutih.
Custom code posamezne strani uporabite, če je Schedito prisoten samo na eni ali nekaj straneh in datotek ne želite nalagati drugje.
V obeh primerih iste CSS ali JavaScript datoteke ne ponavljajte za posamezne koledarje.
Schedito z Webflow CMS-om ali komponentami
Webflow Code Embed lahko uporablja dinamične vrednosti iz CMS elementov, lastnosti komponent, nastavitev lokalizacije in strani.
To omogoča napredne vzorce, kadar podobni rezervacijski layouti potrebujejo različne vrednosti koledarja. Na primer ponovno uporabljiva stran storitve bi lahko nekoč prejela identifikator koledarja iz strukturiranega Webflow podatka.
Za prvo integracijo ostanite pri preprosti rešitvi: uporabite točen DIV iz Schedita. Dinamične povezave dodajte šele, ko imate jasno potrebo po ponovno uporabljivi konfiguraciji.
Začnite preprosto
Standardna nastavitev
Kopirajte točen DIV iz Schedita.
Napredna ponovno uporabljiva nastavitev
Izbrane vrednosti posredujte prek Webflow CMS-a ali lastnosti komponent.
5. Objavite in preizkusite celoten rezervacijski postopek
Preverite nalaganje datotek, prikaz koledarja, razpoložljivost in dejansko oddajo rezervacije.
Objavite in odprite stran
Preizkusite dejansko objavljeno spletno mesto. Nekatere lastnosti custom code je najbolje preveriti po objavi.
Opravite rezervacijo
Izberite storitev, datum in termin ter dokončajte testno rezervacijo. Rezultat nato preverite v Scheditu.
Preverite odzivni prikaz
Code Embed in okoliške Webflow vsebnike preverite na namizju, tablici in telefonu.
Odpravljanje težav z Webflow rezervacijskim gradnikom
Ločeno preverite vse tri dele: Scheditovo CSS povezavo v Headu, JavaScript v Footerju in pravilen DIV v Code Embedu.
V razvijalskih orodjih preverite neuspele zahteve, JavaScript napake ali neuspešne API klice.
Webflow v Designerju ne izvaja vedno vdelane kode tako kot na objavljenem spletnem mestu. Projekt objavite in preverite dejansko javno stran.
Webflow integracija verjetno deluje. V Scheditu preverite storitev, potrebne vire, ponavljajočo se razpoložljivost, izjeme, rezervacije, kapaciteto in povezane zunanje koledarje.
Preverite globalni in page-level custom code. Če je ista datoteka prisotna v obeh, odstranite nepotrebni dvojnik in jo ohranite samo na ustreznem nivoju.
Preverite Code Embed in nadrejene Webflow vsebnike. Omejitve širine, grid, flex, padding in overflow lahko omejijo gradnik tudi, če Schedito pravilno uporablja razpoložljivo širino.
V Scheditu nastavite svetli ali temni način in podprte barve. Preverite tudi, ali preširoka Webflow CSS pravila nehote vplivajo na gumbe, obrazce ali druge elemente gradnika.
Webflow naj skrbi za dizajn, Schedito pa za rezervacije
Ko integracija deluje, storitve, vire, razpoložljivost, kapaciteto, sinhronizacijo koledarjev in videz še naprej upravljajte v Scheditu.
Začnite brezplačnoWebflow pregled
Vsi Scheditovi vodniki · Prilagajanje gradnika · Sinhronizacija z Google Koledarjem