Im Live-Chat Fragen an den Support richten

Kontakt aufnehmen

Warenkorb ist leer | Shop aufrufen

44 Nutzer online

Neueste Meldungen, Hintergrundinfos, HOW-TOs

...und vieles mehr nur hier im Blog

Aktuelles / Blog

Produktinfos & Updates (112)
Neue Versionen/Updates der Produkte, Pressemeldungen
Allgemeine Tipps (39)
Tipps & Tricks zur Bedienung / Anpassung der Produkte
CMS Contentpapst (10)
Tipps speziell für das Produkt Contentpapst
Shop-Software CP::Shop (35)
Tipps speziell für das Produkt CP::Shop
Sonstige Informationen (50)
Weitere Meldungen aus dem eBusiness- / eCommerce
Newsletter
Jetzt abonnieren und auf dem neuesten Stand bleiben!

Neueste Beiträge

@sandoba bei Twitter

Webschau 08/05/2012: Aktuelle Beiträge für Webseiten- und Shop-Betreiber: http://t.co/I8CZvjk4 (Original, 08.05.2012)
Update auf die Version 2012.1.04.30: Online-Bildbearbeitung, Erstellung eigener Module vereinfacht uvm: http://t.co/D5eUfTnb #cms #ecommerce (Original, 02.05.2012)
Update auf die Version 2012.1.03.22: Teillieferungen im Online-Shop, neue {cp:tags}, div. Optimierungen: http://t.co/Svro24oG #ecommerce (Original, 22.03.2012)
Webschau 06/03/2012: Aktuelle Beiträge für Webseiten- und Shop-Betreiber: http://t.co/6DFGyJIO #ecommerce #ebusiness (Original, 06.03.2012)
Update auf die Version 2012.1.02.16: Erleichterungen für Entwickler bei Anpassungen, Ex-/Import uvm.: http://t.co/tytZSicz #ecommerce #shop (Original, 16.02.2012)

Folge @sandoba

RSS-Feeds für den Blog

Alle Beiträge
Produktinfos & Updates
Allgemeine Tipps & Tricks
CMS Contentpapst
Shop-Software CP::Shop
Sonstige Informationen

Empfehlenswerte Seiten

SELFHTML (HTML-Guide)
CSS4YOU (Layouts)
MySQL Dokumentation
Web Developer's Handbook
dafont.com (Schriftarten)
Quellcode-Optimierung
Web Page Test

Home > Aktuelles / Blog > Shop-Software CP::Shop > Live-Suche für Artikel im Online-Shop bereitstellen

Entwickler-Blog: Shop-Software CP::Shop (weitere Informationen)

<< zum vorherigen Eintrag

zum nächsten Eintrag >>

Live-Suche für Artikel im Online-Shop bereitstellen (Fr, 12.09.2008)

Wenn Sie die Shopsoftware CP::Shop in einer aktuellen Version einsetzen, dann sind Sie sicherlich gut mit der Funktionsweise der "Live-Suche" im Administrationsbereich vertraut. U.a. bei der Suche nach Kunden, Herstellern und Partnern genügt bereits die Eingabe der ersten Zeichen, um die Suche automatisch zu starten. Ohne Neuladen der Seite werden die jeweils passenden Suchergebnisse angezeigt. Dies beschleunigt die Arbeit ungemein, kann doch schon durch die Eingabe weniger Zeichen der gewünschte Eintrag ermittelt werden.

Wichtiger Hinweis: Die hier vorgestellte Lösung bezieht sich auf die CP::Shop-Versionen 2008.3 und 2009.1. Ab Version 2009.2 nutzt die Shop-Software CP::Shop eine alternative Lösung, die standardmäßig enthalten ist.

Bislang war diese Suche nur in verschiedenen Bereichen des Administrationsbereiches verfügbar. In diesem Eintrag des Entwickler-Blogs zeigen wir Ihnen nun, wie Sie in der Version 2008.3 mit wenigen Änderungen auch für Ihre Besucher eine derartige Live-Suche bereitstellen können. Hier sehen Sie die Live-Suche im fertigen Zustand:

Gesucht wird im Titel der Artikel. Es kann dabei festgelegt werden, wie viele Artikel maximal angezeigt werden sollen und ob der eingegebene Suchbegriff an beliebiger Stelle bzw. nur am Anfang oder am Ende des Titels gesucht werden soll. Letzteres kann je nach Anzahl der Artikel die Geschwindigkeit der Suche beeinflussen.

In diesem Beispiel wurde nach Büchern von Balzac gesucht. Per Klick auf eines der Suchergebnisse wird dieses in das Suchfeld übernommen und die Suche kann gestartet werden. Falls nur ein Artikel mit diesem Titel existiert, springt die Shopsoftware automatisch auf die Detailansicht des Artikels weiter.

Um die Live-Suche in Ihrem mit CP::Shop ab Version 2008.3 betriebenen Online-Shop einzubauen, müssen die folgenden Änderungen nacheinander vorgenommen werden:

Logik für die Live-Suche

Um im Online-Shop in den Titel der Artikel suchen zu können, legen Sie unter "/modules/shop/public/" eine neue Datei "live_search.php" mit folgendem Inhalt an:

<?php
/*
	function shop_live_search()
	Sucht passende Artikel noch während der Eingabe eines Suchbegriffes heraus.
*/

function shop_live_search($form) {

include_once("functions/cp.string.php");
	include_once("modules/shop/misc.php");

GLOBAL $lang, $sql, $site_configuration;

if (trim($_REQUEST["query"])) {

$lang = module_language("shop") + $lang;

if (!trim($form["limit"]) OR !is_numeric($form["limit"])) {
	    $form["limit"] = "20";
		}

if ($form["search"] == "left") {
		  $sql_query = "'%".db_escape_string($_REQUEST["query"])."'";
		} elseif ($form["search"] == "right") {
		  $sql_query = "'".db_escape_string($_REQUEST["query"])."%'";
		} else {
		  $sql_query = "'%".db_escape_string($_REQUEST["query"])."%'";
		}

$_REQUEST["query"] = db_escape_string($_REQUEST["query"]);
	  $count = 0;

echo "<ul>\n";

$result = db_select("SELECT number, base, title FROM ".$sql."_shop_items WHERE sitenumber = '".$site_configuration["sitenumber"]."' AND title LIKE ".$sql_query." AND status = '2' AND available != '0' GROUP by title ORDER by title ASC");
		$num_total = db_num_rows($result);

while ($row = db_fetch_array($result, "assoc")) {

$count++;

if (trim($row["base"])) {
		  	$row["title"] = shop_get_basetitle($row["base"], $row["title"]);
			}

echo "\t<li title=\"".htmlspecialchars($row["title"])."\">".str_replace("...", "<span class=\"informal\">...</span>", str_ireplace($_REQUEST["query"], "<span class=\"live_search_matching\">".$_REQUEST["query"]."</span>", cp_string_shorten($row["title"], 45)))."</li>\n";

if ($count >= $form["limit"]) {
		    break;
			}

}

if ($num_total > $form["limit"]) {
		  echo "\t<li><span class=\"informal\"><u>".cp_template_replace("weitere {cp:helper:number} Artikel vorhanden... (Suche verfeinern)", "cp:helper:number", ($num_total-$form["limit"]))."</u></span></li>\n";
		}

echo "</ul>";

}

}
?>

Darstellung der Suchergebnisse per CSS

Die Suchergebnisse werden als einfache HTML-Liste ausgegeben, die Darstellung erfolgt über "Cascading Style Sheets" (CSS). Diese CSS-Regel müssen am Ende der bereits standardmäßig vorhandenen Datei "/themes/cpshop/style.css" eingefügt werden. Sie legen die Darstellung der gesamten Liste und der einzelnen Listen-Elemente fest:

Live-Suche im oberen Suchfeld aktivieren

Damit die Live-Suche nun auch im Shop aktiv genutzt werden kann, sind zuletzt Änderungen an der zentralen Vorlage "/themes/cpshop/main.htm" erforderlich. Ersetzen Sie dort die Zeile

durch folgendes, um alle für die Live-Suche erforderlichen Ressourcen zu laden:

Weiterhin muss das bisher genutzte Suchformular:

durch folgenden HTML-Code ersetzt werden:

<form name="searchform" action="/{cp:configuration:main:directory}index.php?file=shop&mode=search" method="post">
	<div id="layout_header_search">{cpl:0374}:</div>
	<input type="text" id="live_search_input" name="q" class="inputmini" maxlength="60" value="<?php echo htmlspecialchars(stripslashes(stripslashes($_REQUEST["q"]))); ?>" style="width: 180px" />
	<div class="layout_header_misc"><a href="javascript:void(0);" onclick="$('searchform').submit();">{cpl:shop:1458}</a></div>
	<a id="layout_header_searchlink" href="/{cp:configuration:main:directory}{cp:if:mod_rewrite}shop-search.html{/cp:if:mod_rewrite}{cp:ifnot:mod_rewrite}index.php?file=shop&mode=search{/cp:ifnot:mod_rewrite}">{cpl:0144}</a>
	<input type="hidden" name="form[section]" value="all" />
	<input type="hidden" name="form[search]" value="1" />
</form>

<div id="live_search_list" class="live_search_list"></div>
<script type="text/javascript">
new Ajax.Autocompleter('live_search_input', 'live_search_list', '/{cp:configuration:main:directory}index.php?file=shop&mode=live_search&form[limit]=20&form[search]=full&clean=yes', {
	paramName: 'query',
	minChars: 2
});
</script>

Mit diesen kleinen Änderungen an Ihrem Shop bieten Sie Ihren Besuchern und Kunden eine starke Erleichterung bei der Suche nach bestimmten Artikeln. Damit können Sie gegenüber Ihren Mitbewerbern punkten, gerade bei Besuchern, die bereits beim Aufruf Ihres Online-Shops genau wissen, für welchen Artikel sie sich interessieren.

Shop-Software CP::Shop | Permalink | Trackback |

Druckversion

RSS-Feed abonnieren

| Weitere...

Blog-Eintrag kommentieren

Um einen Kommentar zu diesem Beitrag zu verfassen, können Sie sich im folgenden Formular entweder manuell mit Benutzername und Email-Adresse identifizieren oder aber Sie loggen sich über ein vorhandenes Profil bei Facebook, Twitter, OpenID etc. ein. Auf Wunsch haben Sie die Möglichkeit, sich automatisch über weitere Kommentare informieren zu lassen.