Lyhytkoodit ja widgetit

Miten JetBookIn lisätään verkkosivustollesi: jokainen lyhytkoodi ja Elementor-widget kaikkine asetuksineen, mille sivulle kukin kuuluu, miten värit sovitetaan brändiisi, miten monikieliset sivustot toimivat ja – kehittäjille – REST-rajapinta, koukut ja WP-CLI-komennot.

Tarvittavat sivut

Tyypillisellä JetBookIn-sivustolla on nämä sivut. Jokaisen lohkon voi lisätä lyhytkoodilla (mikä tahansa teema tai editori) tai vastaavalla Elementor-widgetillä.

Pienen kolmen huoneiston huvilan sivusto voi olla näin yksinkertainen: etusivu, jolla on hakubanneri ja huoneruudukko, yksi sivu kutakin huoneistoa kohden (rakennetaan automaattisesti) ja vahvistussivu. 20 huoneen hotelli lisää yleensä Varaa-sivun tuloksineen, jotta jokaisen sivun haku vie sinne.

Varauksen vahvistussivu ja kassasivu

Kaksi asetusta kohdassa JetBookIn → Asetukset → Yleiset kertoo JetBookInille, minne vieraat ohjataan:

Vahvistussivu näyttää sen mukaan, miten se avataan: kassan varauslaatikossa valitulle majoitukselle, vieraan varauksen (linkistä, jossa on varausviite ja avain) tai Etsi varauksesi -lomakkeen. Tällaisia sivuja ei koskaan tarvita enempää kuin yksi kieltä kohden. Mitä vieraat voivat siellä tehdä, kerrotaan kohdassa Vieraan varaussivu.

Löydät sivun ID:n avaamalla sen kohdassa Sivut; osoiterivillä merkinnän post= jälkeinen numero on ID.

Teemat voivat mukauttaa varauksen ympärillä olevaa sivua kahdella body-luokalla: jbi-is-checkout, kun vieras on vielä varaamassa, ja jbi-is-booking, kun näytettävä varaus on olemassa – esimerkiksi piilottaakseen ”Kiitos”-otsikon kassan aikana.

Varauslyhytkoodit

Nämä lohkot ovat vuorovaikutteisia: ne lataavat saatavuuden ja hinnat reaaliajassa ja tarvitsevat JavaScriptiä (kävijät, joilla sitä ei ole, näkevät ilmoituksen Ota JavaScript käyttöön varataksesi verkossa.). yes/no-määritteissä kaikki muu kuin no tulkitaan kyllä-arvoksi.

[jetbookin_search] – hakulomake

Päivät ja vieraat sekä hakupainike. Ilman tulossivua tulokset avautuvat lomakkeen alle.

[jetbookin_search results_url="/book/" button="Check availability"]

[jetbookin_results] – hakutulokset ja kassa

Luettelee valituille päiville vapaat huonetyypit hinnastoineen, antaa vieraan valita yhden tai useamman huoneen ja hoitaa kassan. Jos mitään ei ole vapaana, se ehdottaa muita päiviä.

[jetbookin_booking] – huoneen varauslaatikko

Kalenteri, vieraat, hinnastot ja hinta yhdelle huonetyypille. Varaa jatkaa kassasivulle majoituksen tiedot valmiiksi täytettyinä.

[jetbookin_booking room="42" months="2"]

[jetbookin_calendar] – saatavuuskalenteri

[jetbookin_confirmation] – varausvahvistus / varauksen hallinta

Ei määritteitä. [jetbookin_manage] tekee täsmälleen saman. Lisää se vain yhdelle sivulle (kieltä kohden) ja aseta tämä sivu kohtaan Varauksen vahvistussivun ID.

[jetbookin_search_hero] – koko leveyden banneri hakuineen

[jetbookin_search_hero image="https://example.com/wp-content/uploads/pool.jpg" heading="Three stone houses above Elounda" subheading="Book direct for the best price" results_url="/book/"]

Huoneiden ja kohteiden lyhytkoodit

Nämä muodostetaan palvelimella (hyvä nopeudelle ja hakukoneille). Kun määrite ottaa huonetyypin, sen pois jättäminen käyttää sitä huonetyyppiä, jonka sivua näytetään; kohdemääritteet käyttävät oletuksena nykyistä kohdetta, nykyisen huoneen kohdetta tai ensimmäistä kohdettasi.

Kun lohkolla ei ole mitään näytettävää (ei kuvia, ei varusteita…), vieraat eivät näe mitään; kirjautunut henkilökunta ja Elementor-editori näkevät vihjeen siitä, mitä pitää täyttää.

[jetbookin_rooms] – huoneruudukko tai -karuselli

[jetbookin_rooms layout="carousel" columns="3" orderby="price" amenities="0"]

[jetbookin_room_gallery]

[jetbookin_room_amenities]

[jetbookin_room_specs]

[jetbookin_room_price]

Hinnastojesi edullisin yöhinta, esim. alkaen 95 € / yö.

[jetbookin_room_policies]

[jetbookin_property_info]

Arvioiden lyhytkoodit Pro

Molemmat tarvitsevat Vieraiden arviot -moduulin; kun se on pois käytöstä, ne eivät näytä mitään.

[jetbookin_reviews] – julkaistut arviot

Keskiarvo sanallisine arvioineen (esim. Erinomainen), arviokortit vastauksinesi, Näytä lisää arvioita -painike ja schema.org-arviotiedot hakukoneille.

[jetbookin_reviews limit="3" bars="yes" empty="Be the first to review your stay."]

[jetbookin_review] – arviolomake

Ei määritteitä. Tarvitaan vain, jos haluat vieraiden arvioivan omalla sivullaan: lisää se sinne ja syötä sivun ID kohtaan Arviosivun ID näkymässä Varaukset → Arviot. Muuten vieraat arvioivat varauksen vahvistussivulla. Lomake avautuu arviosähköpostin allekirjoitetusta linkistä.

Siivous- ja omistajasivut Pro

• [jetbookin_housekeeping] (Siivous-moduuli): päivittäinen siivouslista puhelimella kirjautuneille käyttäjille, joilla on Siivooja-rooli, sekä varausten hoitajille. Muita pyydetään kirjautumaan sisään tai heille kerrotaan, ettei heillä ole pääsyä. Siivoojat ohjataan tälle sivulle kirjautumisen jälkeen.
• [jetbookin_owner] (Omistajat ja tiliotteet -moduuli): omistajan kuukausittaiset tiliotteet ja käyttöastekalenteri kirjautuneille käyttäjille, joilla on Kohteen omistaja -rooli ja jotka on liitetty kohteeseen. Omistajat ohjataan tänne kirjautumisen jälkeen wp-adminin sijaan.

Kummallakaan ei ole määritteitä. Molemmat sivut jätetään automaattisesti sivuvälimuistin ulkopuolelle. Luo kumpikin tavallisena, julkaistuna WordPress-sivuna.

Huonesivut ilman sivunrakentajaa

Jokaisella huonetyypillä on oma sivunsa sivustollasi. Jos sitä ei ole tehty Elementorilla, JetBookIn tekee siitä itse täydellisen huonesivun: kuvagalleria (mosaiikki viidestä kuvasta alkaen), vieraat / vuoteet / koko, ”alkaen”-hinta, kuvauksesi, varustelu, ehdot ja varauslaatikko – leveillä näytöillä tietojen vieressä, puhelimilla niiden alla.

Jos huoneen sisällössä on jo [jetbookin_room_…]-lyhytkoodi, loppuun lisätään vain varauslaatikko; jos siinä on [jetbookin_booking], mitään ei lisätä. Elementorilla suunnittele huonetyypeille yksi pohja Theme Builderissa ja käytä huonewidgetejä valinnalla — Nykyinen huonetyyppi —.

Elementor-widgetit

Hae Elementor-editorissa sanalla JetBookIn tai avaa widgetpaneelista kategoria JetBookIn. Jokainen widget tuottaa täsmälleen saman lohkon kuin sen lyhytkoodi.

Sisältöasetukset

Sarakkeet ovat responsiivisia: oletuksena 3 tietokoneella, 2 tabletilla ja 1 puhelimella, ja voit asettaa jokaisen laitteen erikseen.

Tyyliasetukset

Jokaisen JetBookIn-widgetin Tyyli-välilehdellä on osio Värit ja muoto:

• Pääväri (painikkeet, valinta), Painikkeen teksti, Tausta, Teksti, Reunat – värit;
• Kulmien pyöristys – 0–24 px;
• Typografia – fonttiperhe, koko, paksuus ja niin edelleen koko widgetille.

Joissakin widgeteissä on enemmän:

• Huoneet: ruudukko / karuselli: Kortti (Tausta, Varjo, Sisennys), Huoneen nimi ja Hinta (typografia ja väri).
• Huoneen varustelu: Kuvakkeet (Väri, Koko).
• Huoneen alkaen-hinta: Hinta (typografia ja väri).
• Hakubanneri: Otsikko ja Alaotsikko (typografia ja väri).
• Arviot: Arvion otsikko ja Arvion teksti (typografia ja väri).

Vinkki: aseta sivun varauswidgeteille sama pääväri. Maksamattomille varauksille näkyviin tuleva Viimeistele varaus -painike ottaa värinsä, kulmansa ja fonttinsa sivun varauswidgetistä.

Värit ja tyylit

Kaikki JetBookIn-lohkot lukevat värinsä ja muotonsa CSS-muuttujista, jotka on asetettu .jbi-widget-kääreeseen. Elementorin tyyliasetukset asettavat juuri nämä muuttujat. Ilman Elementoria aseta ne kohdassa Ulkoasu → Mukauta → Lisä-CSS tai teemasi tyylitiedostossa.

Muuttujat määritellään itse .jbi-widget-elementissä, joten aseta ne vähintään yhtä vahvalla valitsimella, esimerkiksi:

/* Merensiniset painikkeet, suorat kulmat, kaikkialla */
body .jbi-widget {
	--jbi-primary: #0e5e6f;
	--jbi-on-primary: #ffffff;
	--jbi-radius: 4px;
}

/* Tumma varauslaatikko vain yhdessä osiossa */
.booking-dark .jbi-widget {
	--jbi-surface: #1f1d1a;
	--jbi-surface-2: #2a2723;
	--jbi-text: #f4f1ea;
	--jbi-muted: #b9b4aa;
	--jbi-border: #3a3631;
}

Muuttujien asettaminen pelkästään elementtiin body tai :root ei vaikuta mitään, koska .jbi-widget asettaa omat oletuksensa.

Monikieliset sivustot (Polylang, WPML)

JetBookIn toimii Polylangin ja WPML:n kanssa. Huonetyypin tai kohteen käännökset ovat sama huone: niillä on yhteinen saatavuus, hinnat, varaukset, galleria ja pääkuva. Vieraat näkevät kaiken sen sivun kielellä, jolla he varaavat, ja saavat sähköpostinsa ja varaussivunsa samalla kielellä.

Mitä käännetään

• Huonetyypit ja kohteet: käännä ne monikielisyyslisäosallasi (otsikko, kuvaus, ote). Kohteen käännökseen kirjoitat myös sen saapumisohjeet kyseisellä kielellä.
• Varauksen vahvistussivu ja, jos käytät sellaista, Varaus- / kassasivu: luo kummastakin käännös, jossa on sama lyhytkoodi tai widget. Asetuksiin syötetään vain alkuperäisen ID; JetBookIn ohjaa vieraat heidän kielensä käännökseen.
• Ehto- ja tietosuojasivut sekä arviosivu: käännä ne samalla tavalla. Kassa avaa version vieraan kielellä.
• Sivut, joilla on haku, huoneet ja arviot: käännä ne tavallisina sivuina; lyhytkoodit ja widgetit pysyvät samoina.

Jos sivulla ei ole käännöstä, käytetään alkuperäistä.

Ohjauspaneeliin kirjoittamasi nimet

Hinnastojen nimet, lisäpalvelut (nimi ja kuvaus), kampanjat, mukautetut maksut ja pankkisiirron tiedot rekisteröidään merkkijonoina: Polylangissa kohdassa Languages → Translations (ryhmä JetBookIn), WPML:ssä kohdassa String Translation (domain JetBookIn). Hinnastoilla, lisäpalveluilla ja kampanjoilla on myös ohjauspaneelissa heti nimen alla Muilla kielillä -kentät; molemmat paikat pysyvät ajan tasalla keskenään. Tyhjä käännös näyttää alkuperäisen.

Sähköpostit

Sähköpostien tekstejä muokataan kielittäin kohdassa Asetukset → Sähköpostit, ei monikielisyyslisäosalla. Katso Sähköpostit → Oma teksti kullekin kielelle.

Kehittäjille: REST-rajapinta

Kaikki, mitä ohjauspaneeli tekee, kulkee REST-rajapinnan kautta nimiavaruudessa jetbookin/v1, esim. https://example.com/wp-json/jetbookin/v1/availability/search. Henkilökunnan päätepisteet vaativat kirjautuneen käyttäjän, jolla on manage_jetbookin-oikeus (ylläpitäjät ja Varausten hoitaja -rooli) – evästeen ja REST-noncen tai sovelluksia ja muita palvelimia varten sovellussalasanan. Kuormitetuimmat julkiset päätepisteet (kassa, hintatarjoukset, vieraiden toiminnot, arviot) on rajoitettu asiakaskohtaisesti.

Tärkeimmät julkiset päätepisteet

Henkilökunnan päätepisteitä ovat muun muassa /bookings (luettelo, luonti, PUT /bookings/{id}, peruminen, maksut, maksupyynnöt, viestit), /calendar, /quote, /settings, /emails, /reviews ja /ical/connections. Maksupalvelut kutsuvat omia webhook-reittejään samassa nimiavaruudessa.

Kehittäjille: koukut

Kaikki JetBookInin koukut alkavat jbi/. Käytä niitä pienestä lisäosasta tai lapsiteemasi functions.php-tiedostosta.

Toiminnot (actions)

Suodattimet (filters)

// Salli kaksi maksamatonta varausta sähköpostiosoitetta kohden.
add_filter( 'jbi/max_open_holds', fn() => 2 );

// Lähetä jokainen vahvistettu varaus toiseen järjestelmään.
add_action( 'jbi/booking_confirmed', function ( array $booking ) {
	wp_remote_post( 'https://example.com/hook', [ 'body' => [ 'ref' => $booking['ref'] ] ] );
} );

// Huoneet ovat hakukoneille hotellihuoneita.
add_filter( 'jbi/structured_data_room_type', fn() => 'HotelRoom' );

Kiinteät hälytyssähköpostit voi ohittaa kopioimalla tiedoston admin-conflict.php, admin-sync-failing.php tai admin-late-payment.php kansioon yourtheme/jetbookin/emails/.

Kehittäjille: WP-CLI

Tuotantosivustoilla suositellaan oikeaa palvelimen cronia WordPressin kävijöiden käynnistämän cronin sijaan, esimerkiksi 5 minuutin välein:

*/5 * * * * cd /path/to/wordpress && wp jetbookin run-jobs --quiet

Taustatehtävistä kerrotaan sivulla Lisäasetukset.

Kysymyksiä

Varauslaatikko ei näytä mitään.

Huonetyypin oman sivun ulkopuolella se tarvitsee määritteen room="ID" (Elementorissa: valitse Huonetyyppi). Tarkista myös, että huonetyyppi on julkaistu ja että sillä on hinnat.

Haku ohjaa vieraat väärälle sivulle.

Aseta haun results_url (tai widgetin Tulossivu) sivulle, jolla on [jetbookin_results]. Ilman sitä tulokset avautuvat lomakkeen alle.

Värini eivät muutu.

Aseta muuttujat elementtiin .jbi-widget (esimerkiksi body .jbi-widget { … }), ei pelkästään elementtiin body tai :root. Tyhjennä sen jälkeen mahdollisen CSS-välimuisti- tai optimointilisäosan välimuisti.

Voinko käyttää lyhytkoodeja Gutenbergissä, Divissä tai Bricksissä?

Voit. Lisää Lyhytkoodi-lohko (tai sivunrakentajasi lyhytkoodielementti) ja liitä lyhytkoodi.

Tarvitsenko erillisen kassasivun?

Et. Jos Kassasivun ID on tyhjä, varauslaatikko jatkaa varauksen vahvistussivulle. Erillinen Varaa-sivu tuloksineen on hyödyllinen, kun haluat myös hakusivun.

Poistin Varausvahvistus-sivun vahingossa.

Luo sivu, jolla on [jetbookin_confirmation], julkaise se ja syötä sen ID kohtaan Varauksen vahvistussivun ID näkymässä Asetukset → Yleiset. Aiemmin lähetettyjen sähköpostien linkit osoittavat yhä vanhaan osoitteeseen, joten lähetä tarvittaessa asianomaisille vieraille heidän varauslinkkinsä uudelleen.