Kako dodati Scheditov rezervacijski gradnik na spletno stran po meri
Spletna stran po meri lahko Schedito neposredno uporablja prek treh frontend elementov: skupne CSS povezave, skupne JavaScript skripte in HTML DIV-a posameznega koledarja.
CSS in JavaScript naložite samo enkrat na ustreznem nivoju, nato pa Scheditov DIV postavite povsod, kjer želite prikaz rezervacijskega koledarja.
Preden spremenite spletno mesto
Nastavljen Scheditov koledar
Nastavite storitve, vire in razpoložljivost, ki jih želite ponuditi strankam.
Dostop do frontend kode
Na spletno mesto ali aplikacijo morate imeti možnost dodati CSS, JavaScript in HTML.
Trije Scheditovi izseki kode
V Scheditu odprite integracijo in pripravite aktualno CSS povezavo, JavaScript skripto in DIV posameznega koledarja.
1. Razumite tridelno integracijo
Scheditova nadzorna plošča ponuja tri samostojne elemente:
CSS povezava — zagotavlja slog gradnika.
JavaScript skripta — inicializira in upravlja gradnike.
DIV gradnika — določa organizacijo, javni koledar in mesto prikaza.
CSS in JavaScript sta skupni datoteki. DIV je specifičen za posamezni koledar.
Scheditov CSS — enkrat
DIV posameznega koledarja
Scheditov JavaScript — enkrat
2. Scheditov CSS naložite samo enkrat
Kopirajte CSS <link> iz Schedita in ga dodajte v <head> dokumenta oziroma v običajen sistem za nalaganje slogov aplikacije.
Če je Schedito lahko prisoten na celotnem spletnem mestu, ga naložite globalno. Če je potreben samo na določeni poti ali bundle-u, ga lahko omejite na ta del.
Iste slogovne datoteke ne dodajajte pri vsakem DIV-u.
3. Postavite DIV posameznega koledarja
Kopirajte HTML DIV koledarja, ki ga želite objaviti, in ga vstavite v predlogo, komponento ali stran na mestu prikaza rezervacij.
Koda vsebuje vrednosti, kot sta data-organization-id in data-calendar-public-id. Uporabite točne vrednosti iz Schedita.
Po potrebi lahko uporabite tudi podprte dodatne atribute, na primer jezik gradnika.
Mesto koledarja
<div class="schedito-widget"
data-organization-id="..."
data-calendar-public-id="...">
</div>Uporabite točne vrednosti iz Scheditove nadzorne plošče.
4. Scheditov JavaScript naložite samo enkrat
Kopirajte aktualni <script> iz Schedita in ga dodajte med običajne frontend skripte, praviloma proti koncu dokumenta pred </body>.
Več koledarjev lahko uporablja isto vključitev JavaScripta.
Ne podvajajte enake skripte ob vsakem gradniku.
Uporaba več Scheditovih koledarjev
Skupni CSS in JavaScript naložite enkrat, nato pa za vsak koledar oziroma mesto rezervacije uporabite drug DIV.
Koledarji so lahko na isti strani ali na ločenih straneh.
Identifikatorja organizacije in javnega koledarja naj ostaneta specifična za vsak DIV.
Skupno
Scheditov JavaScript
Za vsak koledar
Koledar B → DIV B
Koledar C → DIV C
Schedito v dinamičnih ali single-page frontendih
Če je Scheditov DIV del začetnega HTML dokumenta, je standardna integracija praviloma dovolj.
Če aplikacija DIV doda pozneje prek client-side routinga, hydrationa ali dinamičnega renderiranja, preverite, da Scheditova inicializacija teče po tem, ko je vsebnik že v DOM-u.
Ne nalagajte skripte ponovno ob vsaki navigaciji. Skupni script naj ostane naložen enkrat, inicializacijo pa prilagodite življenjskemu ciklu aplikacije.
5. Preizkusite celoten rezervacijski postopek
Preverite prikaz, razpoložljivost, ustvarjanje rezervacije in odzivnost.
Odprite javno stran
Preverite, da se slog in skripta naložita ter da koledar pravilno nadomesti DIV na javnem spletnem mestu.
Opravite testno rezervacijo
Izberite storitev, datum in termin ter dokončajte pravo testno rezervacijo. Rezultat preverite v Scheditu.
Preverite odzivne vsebnike
Preizkusite desktop, tablico in telefon ter preverite, da vaš CSS gradnika ne omejuje po nepotrebnem.
Odpravljanje težav z gradnikom na spletni strani po meri
Ločeno preverite Scheditov CSS, JavaScript in DIV posameznega koledarja.
V razvijalskih orodjih preverite neuspele datoteke, JavaScript napake in neuspešne API zahteve.
Preverite data-organization-id in data-calendar-public-id ter ju primerjajte z aktualnim izsekom kode v Scheditu.
Preverite skupne predloge, bundle in posamezne komponente. Skupne datoteke ohranite samo na enem ustreznem nivoju.
Frontend integracija verjetno deluje. V Scheditu preverite storitev, potrebne vire, razpoložljivost, izjeme, rezervacije, kapaciteto in povezane zunanje koledarje.
Preverite nadrejene vsebnike, grid ali flex pravila, max-width, padding in overflow. Postavitev aplikacije lahko omejuje gradnik.
Aplikacija morda doda DIV šele po Scheditovi inicializaciji. Preverite, kdaj vsebnik vstopi v DOM, in inicializacijo povežite z življenjskim ciklom frontenda.
Nadaljujte razvoj aplikacije. Rezervacije prepustite Scheditu.
Ko gradnik deluje, storitve, vire, razpoložljivost, kapaciteto, sinhronizacijo koledarjev in videz še naprej upravljajte v Scheditu.
Začnite brezplačnoPregled spletnih strani po meri
Vsi Scheditovi vodniki · Prilagajanje gradnika · Sinhronizacija z Google Koledarjem