V rámci tvorby jednej webovej stránky som narazil na relatívne častú požiadavku. Tou bola e-mailová rezervácia služieb. Klient poskytuje celkovo 19 služieb a predošlý tvorca stránky tento problém „vyriešil“ tak, že vytvoril 19 rovnakých kontaktných formulárov, ktoré sa líšili len nadpisom. Tie následne nalinkoval na príslušné detaily služieb.
Ide o veľmi zlé a neefektívne riešenie, nakoľko v prípade potreby bolo treba vykonať 19 rovnakých úprav. Poďme sa pozrieť na oveľa lepšie riešenie.
Koncept
To spočíva v tom, že použijeme, pochopiteľne, len jeden jediný kontaktný formulár. Pre potreby daného webu som teda vytvoril samostatnú podstránku „Rezervácia“.
Rezervačný formulár bude pre každú službu navlas rovnaký, líšiť sa bude len informáciou o tom, ktorú službu si návštevník stránky vybral. Potrebujeme teda vyriešiť dva problémy:
- Povedať formuláru, ktorú službu má zobraziť v notifikačnom e-maile. Na tento účel použijeme hidden field (skryté pole), do ktorého prepašujeme názov služby.
- Nejakým spôsobom dostať názov služby z detailu služby do podstránky Rezervácia. Na to použijeme tzv. query string.
Takže ako asi už tušíte, pri každej službe bude rezervačné tlačidlo, ktoré bude linkovať na podstránku Rezervácia aj s parametrom, v ktorom sa bude nachádzať názov aktuálne prezeranej služby.
Čo to je query string
Zjednodušene povedané, query string je tá časť URL adresy, ktorá sa začína otáznikom a pokračuje až do jej konca, alebo po znak &, ktorým sa oddeľuje viac query stringov. Napr. v URL adrese https://www.wpblog.sk/?s=tema je query string „s=tema“, vďaka čomu WordPress vie, že má vyhľadať slovo „tema“.
Pomocou query stringu vieme v jazyku PHP zapisovať jednu z tzv. globálnych premenných, konkrétne premennú $_GET (hovorovo „get“). S touto premennou potom vieme pracovať v rámci celého programu (v našom prípade webovej stránky). Query string a premenné $_GET teda slúžia na predávanie informácií, premenných a hodnôt medzi jednotlivými podstránkami.
V základe to vyzerá asi takto:
www.adresastranky.sk/rezervacia?sluzba=instruktor
Vidíme, že za otáznikom nasleduje „sluzba=instruktor“. „Sluzba“ je teda v našom prípade názov položky poľa premennej $_GET a „instruktor“ je jeho hodnota. My teda budeme skúmať, čo obsahuje premenná $_GET[sluzba], zistíme, že obsahuje hodnotu „instruktor“ a túto hodnotu vložíme do Elementor formulára.
Pre úplnosť len zopakujem, že v query stringu vieme zadávať ľubovoľný počet týchto premenných a oddeľujeme ich znakom &, napr. www.adresastranky.sk/rezervacia?sluzba=instruktor&miesto=kubin
Taktiež táto adresa nesmie obsahovať žiadne dĺžne, mäkčene, medzery a iné naše obľúbené znaky. Keď však zadáme do query stringu „naostro“ mäkčeň, či medzeru, prehliadač query string „prerobí“ a namiesto toho použije zástupné znaky (napr. namiesto medzery použije znak %20 a podobne).
Poďme na to
Začneme tým, že si vytvoríme tlačidlo. Klasický Elementor button, ktorému vložíme Odkaz na podstránku Rezervácia. Za URL adresu dopíšeme ?sluzba=instruktor. Takto to spravíme na tlačidlách všetkých služieb, akurát miesto „intruktor“ tam dáme konkrétne názvy služieb.
No a to je v podstate aj všetko. Ideme na podstránku Rezervácia, klikneme na formulár.
Pridáme si nové pole – skryté, zadáme mu štítok, aby sme aj v e-maile pochopili, že o čo ide. Prejdeme do karty Pokročilé a nastavíme Default value (základnú hodnotu).
Klikneme na ikonu dynamickej značky a v sekcií Stránka vyberieme Request Parameters. Teraz ešte pole potrebujeme došpecifikovať. Vyššie sme sa bavili, že query string zapisuje hodnoty do premennej $_GET. Kliknutím na ikonu kľúča vyberieme typ Get a do Parameter Name zadáme sluzba.
To je vlastne všetko. Dosiahli sme to, že návštevník stránky si prezerá konkrétnu službu, pri nej klikne na tlačidlo, ktorá ho presmeruje na formulár, ten vyplní a odošle. Nič iné nerieši. Žiaden selectbox s 19 službami, lebo návštevník si určite nevšimne, že je tam predvolená iná služba ako tá, z ktorej klikol na rezervačné tlačidlo.
Majiteľ stránky dostane okrem všetkých vyplnených informácií aj informáciu, ktorú službu si návštevník chce zarezervovať.
