Im Live-Chat Fragen an den Support richten

Kontakt aufnehmen

Warenkorb ist leer | Shop aufrufen

37 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 > Countdown: Verbleibende Zeit bis zum Ablauf eines Angebots/Deals anzeigen

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

<< zum vorherigen Eintrag

zum nächsten Eintrag >>

Countdown: Verbleibende Zeit bis zum Ablauf eines Angebots/Deals anzeigen (Sa, 05.03.2011)

Deal-Webseiten mit täglich neuen Sonderangeboten haben sich im letzten Jahr auch im deutschsprachigen Teil des Internets durchgesetzt und ziehen viele Besucher an. Die Besonderheit gegenüber einem gewöhnlichen Online-Shop: Das Sortiment ist auf wenige, teils auch nur ein einziges Angebot pro Tag beschränkt, welche dafür zu einem umso attraktiveren Preis verfügbar sind. Mit dem Ablauf des Tages gehen die Angebote offline und neue Angebote erscheinen. Damit die bestellten Angebote in gültige Bestellungen umgewandelt werden, muss schließlich eine, je nach Angebot unterschiedlich hohe, Mindestanzahl an Kunden zugeschlagen haben. In diesem Beitrag zeigen wir Ihnen, wie Sie mit der Shop-Software CP::Shop in wenigen Schritten Ihren eigenen Online-Shop um eine zeitliche Begrenzung der Angebote erweitern und somit für erhöhte Aufmerksamkeit bei Ihren Kunden durch wiederholte Besuche und letztlich mehr Umsatz sorgen können.

Zunächst achten Sie darauf, dass Ihre Installation des CP::Shop oder Contentpapst-Bundle auf dem neuesten Stand ist, indem Sie gegebenenfalls verfügbare Updates über das standardmäßig integrierte Updatetool aufspielen. Die in diesem Beitrag genutzte Möglichkeit, die Verfügbarkeit der Artikel ab/bis nicht nur tagesweise, sondern minutengenau festzulegen, ist erst ab der aktuellen Version 2011.1.03.05 gegeben. Ist die Installation auf dem neuesten Stand, dann können Sie unter "Module > CP::Shop > Artikel hinzufügen" einen neuen Artikel anlegen, bei welchem Sie in den Feldern "Verfügbar ab" und "Verfügbar bis" z.B. Werte wie im Bild unten sichtbar eingeben:

Shop-Software CP::Shop 2011.1: Countdown-Funktionen für tägliche Angebote/Deals

Nun geht es an die Anpassung der Vorlagen und weiterer erforderlicher Dateien im Online-Shop. Ziel ist es, diesen Countdown in der Detailansicht eines Artikels zu integrieren und zwar immer dann, wenn für einen Artikel ein Wert für "Verfügbarkeit bis" hinterlegt wurde. Somit können Sie normale und zeitlich begrenzte Artikel frei kombinieren. Für die Detailansicht eines Artikels kommt standardmäßig die Vorlage "/modules/shop/templates/details.html" zum Einsatz (bzw. im eigenen Vorlagenset zu finden). Öffnen Sie diese Vorlage über die Dateiverwaltung im Administrationsbereich bzw. einen Editor eigener Wahl und fügen Sie dort an der gewünschten Stelle folgenden Code ein:

Dieser Code enthält den erforderlichen HTML-Code und den Aufruf der neuen Javascript-Funktion für den Countdown. Das Ende des Countdowns wird dabei über den {cp:tag} "{cp:shop:item:date_available_till}" übermittelt. Den dafür zuständigen Code fügen Sie am Ende der in Ihrem Vorlagenset genutzten Javascript-Datei ein (im Ordner "/themes/[IHR VORLAGENSET]/" zu finden, z.B. "scripts.js"):

jQuery.fn.countdown = function(options) {

if (!options) { options = '()'; }
	if (jQuery(this).length == 0) { return false; }
	var countdown = this;

if (options.time) {
    var current = Math.floor(new Date().getTime()/1000);
    options.seconds = options.time-current;
	}
	
	if (options.seconds < 0 || typeof options.seconds == 'undefined') {
		if (options.expired != '' && typeof options.expired != 'undefined') {
      jQuery(countdown.selector + ' .counter').html('<div class="expired">' + options.expired + '</div>');
      jQuery(countdown.selector + ' .info').hide();
      jQuery(countdown.selector + ' .labels').hide();
    }
		return null;
	}
  
	window.setTimeout(
		function() {
      var show_hours = Math.floor(options.seconds/60/60);
			var show_minutes = Math.floor(options.seconds/60)-(show_hours*60);
      var show_seconds = options.seconds-(show_hours*60*60)-(show_minutes*60);
      if (show_hours < 10) { show_hours = '0' + show_hours; }
      if (show_minutes < 10) { show_minutes = '0' + show_minutes; }
      if (show_seconds < 10) { show_seconds = '0' + show_seconds; }
      jQuery(countdown.selector + ' .counter').html('<div class="hours">' + show_hours + '</div><div class="minutes">' + show_minutes + '</div><div class="seconds">' + show_seconds + '</div>');
      --options.seconds;
			jQuery(countdown).countdown(options);
		}, 1000
	);

return this;

}

jQuery.fn.countdown.stop = function() {
	window.clearTimeout(setTimeout('0')-1);
}

Beim Aufruf der Detailansicht des neu angelegten Artikels läuft der Countdown nun bereits (gegebenenfalls müssen Sie noch die Seite im Browser aktualisieren, um die geänderten Dateien einzulesen). Doch damit dieser ein ordentliches Look&Feel erhält, benötigen wir noch entsprechenden CSS-Code. Diesen fügen Sie am Ende der in Ihrem Vorlagenset genutzten CSS-Datei ein (ebenfalls im Ordner "/themes/[IHR VORLAGENSET]/" zu finden, z.B. "style.css"):

/* Rahmen rund um den Countdown */

.layout_countdown {
  background: #8DB609;
  background: -moz-linear-gradient(top, #8DB609 0%, #C1EF07 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#8DB609), color-stop(100%,#C1EF07));
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8DB609', endColorstr='#C1EF07',GradientType=0 );
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
  border: 1px solid #B9B9B8;
  border-radius: 6px;
  padding: 4px;
  width: 212px;
}

/* Anzeige des Textes oberhalb der verbleibenden Zeit */

.layout_countdown .info {
  color: #FFFFFF;
  font-size: 15px;
  font-weight: bold;
  margin-bottom: 5px;
  margin-top: 5px;
  text-align: center;
}

/* Anzeige der Beschriftung unterhalb der verbleibenden Zeit */

.layout_countdown .labels div {
  float: left;
  font-size: 11px;
  padding-top: 5px;
  text-align: center;
  width: 70px;
}

/* Anzeige der Stunden, Minuten, Sekunden und abgelaufener Zeit */

.layout_countdown .hours, .layout_countdown .minutes, .layout_countdown .seconds, .layout_countdown .expired {
  background: #2A2A2A;
  background: -moz-linear-gradient(top, #2A2A2A 0%, #575757 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#2A2A2A), color-stop(100%,#575757));
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2A2A2A', endColorstr='#575757',GradientType=0 );
  border-color: #323131;
  border-style: solid;
  color: #FFFFFF;
  font-weight: bold;
  padding: 4px;
  text-align: center;
}

/* Anzeige der Stunden, Minuten und Sekunden */

.layout_countdown .hours, .layout_countdown .minutes, .layout_countdown .seconds {
  float: left;
  width: 60px;
}

/* Anzeige der Stunden */

.layout_countdown .hours {
  -moz-border-top-left-radius: 6px;
  -moz-border-bottom-left-radius: 6px;
  -webkit-border-top-left-radius: 6px;
  -webkit-border-bottom-left-radius: 6px;
  border: 1px;
  border-top-left-radius: 6px;
  border-bottom-left-radius: 6px;
}

/* Anzeige der Minuten */

.layout_countdown .minutes {
  border-bottom: 1px;
  border-top: 1px;
}

/* Anzeige der Sekunden */

.layout_countdown .seconds {
  -moz-border-top-right-radius: 6px;
  -moz-border-bottom-right-radius: 6px;
  -webkit-border-top-right-radius: 6px;
  -webkit-border-bottom-right-radius: 6px;
  border: 1px;
  border-top-right-radius: 6px;
  border-bottom-right-radius: 6px;
}

Ist auch dieser Code vorhanden, dann verfügen Sie nun über einen Countdown mit einem vergleichbaren Look&Feel wie oben sichtbar. Dieser zählt einen beliebigen Zeitraum herunter bis auf "00:00:00". Anschließend wird der beim Aufruf der Javascript-Funktion übermittelte Text (hier "Artikel ist jetzt ausverkauft") angezeigt und die Beschriftungen ober- und unterhalb des Countdowns werden ausgeblendet. Bei einem Aufruf der Seite nach dem Ablauf des Countdowns ist direkt dieser Text sichtbar.

Ein derartiger Countdown für den zeitlich limitierten Abverkauf der Artikel wird auch Bestandteil des neuen Vorlagensets für die Shop-Software CP::Shop sein, welches wir in Kürze ausliefern und hier im Blog noch genauer vorstellen werden.

Shop-Software CP::Shop | Permalink

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.

<< zurück

Weitere Einträge in der Kategorie "Shop-Software CP::Shop"

Hier finden Sie die eBusiness-/eCommerce-Spezialisten von sandoba.de:
http://www.sandoba.de/blog/shop-software-cpshop/countdown-verbleibende-zeit-bis-zum-ablauf-eines-angebots-deals-anzeigen/