Skip to main content

Html integration

In diesem HowTo wird anhand der Quasiris Demo Suche beschrieben, wie eine QSC Suche in ein bestehendes Shop System angebunden werden kann.

  • Mandant: demo
  • Code: suche

Die Variablen Mandant und Code müssen in den Urls durch die jeweiligen Werte ersetzt werden.

https://qsc.quasiris.de/qsc-ui/v1/ui/search/demo/suche?q=leder

Suchergebnisseite​

Die Suchergebnisseite wird als HTML in der QSC gehostet und ist über folgende URL erreichbar.

https://qsc.quasiris.de/qsc-ui/v1/ui/search/demo/suche?q=leder

Im Parameter q wird der vom Nutzer eingegebe Wert vom Suchschlitz übergeben.

Parameter:

  • q - Sucheingabe (UTF-8 URL-encoded)

Nach dem Abschicken einer Suchanfrage wird der Nutzer per HTTP GET Aufruf auf die Suchergebnisseite geleitet.

Im Folgenden Beispiel ist eine Möglichzeit zur Realisierung mit HTML aufgezeigt.

https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_form_method

<!DOCTYPE html>
<html>
<body>

<h1>Beispiel Suche</h1>

<form action="https://demo.quasiris.de/qsc-ui/v1/ui/search/demo/suche" method="get" target="_blank" accept-charset="utf-8">
  <input type="text" id="q" name="q"><br><br>
  <input type="submit" value="Suche">
</form>

<p>Geben sie einen Suchbegriff in das Eingabefeld ein</p>

</body>
</html>

Suggest​

Für die Anbindung der Suggest wird in der QSC eine REST API bereit gestellt.

Im Parameter q wird der vom Nutzer eingegebe Wert vom Suchschlitz übergeben. Bei jedem Tastanschlag erfolgt ein Aufruf der API und es werden bei der Sucheingabe die Vorschläge aktualisiert.

Parameter:

  • q - Sucheingabe (UTF-8 URL-encoded)

Beispiel:

curl https://qsc.quasiris.de/api/v1/search/suggest/demo/suche?q=sc

[
    {"suggest": "schwarz"},
    {"suggest": "schnürschuh"},
    {"suggest": "schwarzem"},
    {"suggest": "schlangenprint"}
]

Bibliotheken​

Im Folgenden gibt es eine Auswahl an JavaScript Bibliotheken zur Einbindung der API.

Wie kann ich die QSC unter meiner eigenen Domain betreiben?​

Um die QSC unter einer eigenen Domain zu betreiben gibt es grundsätzlich 2 Möglichkeiten:

  • 1.) Proxy
  • 2.) CNAME

Proxy​

Bei der Einbindung über einen Proxy wird auf dem eigenen Webserver die QSC Suche als transparenter Proxy konfiguriert. Somit ist es beispielsweise möglich alle Suchanfragen mit dem Pfad Prefix /suche/ an die QSC weiter zu leiten.

Nginx Beispiel​

Die folgende Nginx Beispiel Konfiguration leitet alle Anfragen von der Adresse https://www.meine-webseite.de/suche/ auf die QSC https://qsc.quasiris.de/qsc-ui/v1/ui/search/demo/suche weiter.

upstream qsc.quasiris.de {
    server qsc.quasiris.de;
}

server {

    server_name www.meine-webseite.de;

    location /suche {
        proxy_pass https://qsc.quasiris.de/qsc-ui/v1/ui/search/demo/suche;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto "https";
        proxy_set_header X-QSC-URI $uri;
    }

    listen 443 ssl http2;

}

Detaillierte Dokumentation zur Einrichtung des Nginx als transparent proxy:

Apache httpd​

Die Konfiguration für den Apache http server

CNAME​

Bei der Einbindung über einen CNAME wird eine Subdomain für die Suche angelegt. Z.B. https://suche.meine-webseite.de/ Der DNS Eintrag für die Subdomain wird mit einem CNAME auf die IP-Adresse des QSC Webserver's konfiguriert. Damit werden dann alle Anfragen der Subdomain an den QSC Webserver gesendet.

Die Einrichtung der Subdomain auf den QSC Webservern erfolgt durch unser Support Team. Bitte kontaktieren sie uns.

Links: