Pomocník systému OBERON
Hotelová recepcia - on-line rezervačný formulár

Základné informácie

Obrázok č. 1: Formulár on-line rezervačného formulára ubytovania 

Implementácia rezervačného formulára do webovej stránky   

Implementáca rezervačného formulára do internetovej stránky pomocou IFrame
Kopírovať kód
// Funkcia na zmenu veľkosti stránky podľa rezervačného formulára
<script>
function resizeParentIframe() {
    var par = window.parent;
    if (!par || !_self.defaults.parentIframeID) return;
    setTimeout(function () {
        var target = par.postMessage ? par : (par.document.postMessage ? par.document : undefined);
        if (typeof target != "undefined" && document.body.scrollHeight) {
            var container = $(".main");
            var data = { event: "resizeIframe", height: container.height() };
            target.postMessage(data, "*");
        }
    }, 500); //čas vyvolania udalosti musí byť dosť dlhý aby sa vykonala po plnom vyrolovaní zoznamu izieb rezervácie
}
</script>

// Rezervačný formulár volaný pomocou IFrame
<p>
<iframe align="middle" frameborder="0" height="700" id="ID_IFrame" scrolling="no" src="http://192.168.16.101:25561/html?c=hotel_BaseForm_ReservationAccommodation" width="700"></iframe>
</p>

Responzívny dizajn

Responzívny dizajn - úprava CSS webovej stránky
Kopírovať kód
// Nastavenie šírky IFrame v závislosti na maximálnej šírke stránky. Je ho potrebné vložiť do základného CSS danej webovej stránky
#ID_IFrame {
  width: 700px;   
}
@media only screen and (max-width: 640px) {
    #ID_IFrame {
        width: 570px;
    }
}
@media only screen and (max-width: 520px) {
    #ID_IFrame {
        width: 450px;
    }
}
@media only screen and (max-width: 420px) {
    #ID_IFrame {
        width: 360px;
    }
}
@media only screen and (max-width: 360px) {
    #ID_IFrame {
        width: 310px;
   }
}
@media only screen and (max-width: 320px) {
    #ID_IFrame {
        width: 270px;
   }
}

Jazykové mutácie    

Obrázok č. 2: Formulár on-line rezervačného formulára ubytovania s upravenou grafickou témou

 

Implementáca rezervačného formulára do internetovej stránky pomocou IFrame (anglický jazyk)
Kopírovať kód
// Funkcia na zmenu veľkosti stránky podľa rezervačného formulára
<script>
function resizeParentIframe() {
    var par = window.parent;
    if (!par || !_self.defaults.parentIframeID) return;
    setTimeout(function () {
        var target = par.postMessage ? par : (par.document.postMessage ? par.document : undefined);
        if (typeof target != "undefined" && document.body.scrollHeight) {
            var container = $(".main");
            var data = { event: "resizeIframe", height: container.height() };
            target.postMessage(data, "*");
        }
    }, 500); //čas vyvolania udalosti musí byť dosť dlhý aby sa vykonala po plnom vyrolovaní zoznamu izieb rezervácie
}
</script>

// Rezervačný formulár volaný pomocou IFrame (Anglicky)
<p>
<iframe align="middle" frameborder="0" height="700" id="ID_IFrame" scrolling="no" src="http://192.168.16.101:25561/html?c=hotel_BaseForm_ReservationAccommodation&lang=en" width="700"></iframe>
</p>

Ďalšie informácie

Príbuzné témy

EXALOGIC, s. r. o., www.exalogic.sk

21.6.2018