Anpassung an die Button-Lösung

plentymarkets » CMS » Webdesign » Bestellvorgang » Kaufabwicklung » Untermenü: Bestellübersicht

 

Button-Lösung

Bei der sogenannten Button-Lösung (engl. auch Shopping cart solution) handelt es sich um neue gesetzliche Anforderungen, mit denen Verbraucher vor dem Abschluss unübersichtlicher Verträge (Kosten- und Abofallen) geschützt werden sollen. Hieraus ergeben sich neue Anforderungen an die Gestaltung von Webshops. Insbesondere betrifft dies die Gestaltung der gesamten Bestellübersicht am Ende der Kaufabwicklung und nicht nur, wie der Name vermuten lässt, die eigentliche Schaltfläche (Button), mit der ein Kunde seinen Kauf bestätigt. Unternehmer müssen nun den Verbraucher unmittelbar vor der Bestellung übersichtlich und verständlich über die wesentlichen Elemente des Vertrages informieren. Solche wesentliche Elemente sind die Ware oder Dienstleistung selbst, der Gesamtpreis einschließlich Steuern und sonstiger Preisbestandteile, Liefer- und Versandkosten und gegebenenfalls die Vertragsdauer. Die gesetzliche Grundlage hierfür bilden § 312 g BGB und Artikel 246 EGBGB.

Welche Informationen müssen neu angegeben werden?

Sie müssen Ihren Kunden die folgenden Informationen zur Verfügung stellen:

  • Die wesentlichen Merkmale der Ware oder Dienstleistung.
  • Die Mindestlaufzeit des Vertrages, wenn dieser eine dauernde oder regelmäßig wiederkehrende Leistung zum Inhalt hat.
  • Den Gesamtpreis der Ware oder Dienstleistung einschließlich aller damit verbundenen Preisbestandteile, sowie alle über den Unternehmer abgeführten Steuern oder, wenn kein genauer Preis angegeben werden kann, seine Berechnungsgrundlage, die dem Verbraucher eine Überprüfung des Preises ermöglicht.
  • Gegebenenfalls zusätzlich anfallende Liefer- und Versandkosten sowie einen Hinweis auf mögliche weitere Steuern oder Kosten, die nicht über den Unternehmer abgeführt oder von ihm in Rechnung gestellt werden.

Wann und wie müssen die Informationen angegeben werden?

Sie müssen Ihren Kunden die oben aufgeführten Informationen unmittelbar bevor dieser seine Bestellung abgibt, zur Verfügung stellen. Unmittelbar ist in diesem Zusammenhang sowohl räumlich, als auch zeitlich zu verstehen. Hierbei müssen Sie die Informationen klar und verständlich in hervorgehobener Weise zur Verfügung stellen.

Die Informationen müssen sich somit vom übrigen Text und den Gestaltungselementen Ihres Webshops unterscheiden bzw. abheben.

Weitere Informationen finden Sie u.a. beim Händlerbund.

Anpassung bestehender Systeme

In diesem Abschnitt wird beschrieben, wie Sie das plentymarkets-Standard-Template an die neuen Gegebenheiten anpassen. Zunächst ein kurzer bildlicher Überblick über die alte und neue Bestellübersicht.

Bild 1: Gegenüberstellung alte (links) und neue (rechts) Bestellübersicht

Die Buchstaben zeigen die Anordnung der einzelnen Bestandteile der Bestellübersicht im Vorher-Nachher-Vergleich. Die zuvor vom Kunden gemachten Angaben befinden sich in der neuen Bestellübersicht nun oberhalb der Artikelübersicht. Die Artikelübersicht selbst ist farblich hervorgehoben. Außerdem steht Sie unmittelbar im Zusammenhang mit der Schaltfläche, durch die der Kunde den Kauf bestätigt (Kaufen-Button). Die Schaltfläche ist weiterhin gesondert farblich hervorgehoben.

Feld: Text nach Summen

Im Feld Text nach Summen können Sie für den Vertrag wichtige Informationen angeben (etwaige Zusatzkosten, die nicht Bestandteil der Rechnung sind). Der Text wird unterhalb der Gesamtsumme angezeigt. Bei Verwendung der Zahlungsart Nachnahme sollten Sie dort den nachfolgend gezeigten Hinweis hinterlegen. Da diese Zahlungsart mit Zusatzkosten verbunden ist, ist ein solcher Hinweis bindend. Hier die IF-/ELSE-Abfrage, die Sie ggf. noch anpassen müssen:

{% if $PaymentMethodID==1 %}
	<div><b>Zuzüglich 2,00 EUR Inkassogebühr, wird vom Versanddienstleister vor Ort erhoben.</b></div>
	{% endif %}
Weitere Felder

Die Felder Hinweis EU-Lieferungen und Hinweis Ausfuhrlieferungen ermöglichen Ihnen, auf Zusatzkosten hinzuweisen. Die dort hinterlegten Texte werden nur bei entsprechenden Aufträgen angezeigt. Positioniert sind sie ebenfalls unterhalb der Gesamtsumme.

Anpassung der Bestellübersicht:
  1. Öffnen Sie das Menü CMS » Webdesign » Webdesign bearbeiten » Bestellvorgang » Kaufabwicklung » Untermenü: Bestellübersicht.
  2. Bringen Sie mit der Auswahl Position die Bestandteile der Bestellübersicht (AGBs, Rechnungsanschrift, Artikel, etc.) in die gewünschte Reihenfolge. Wichtig ist dabei, dass der Bereich Artikel an letzter Position (9) steht. Sie können also die Nummerierung einfach von oben nach unten von 1 bis 9 vornehmen. (Diese Reihenfolge wurde sowohl in der oben gezeigten Abbildung als auch für das unten dargestellte CSS verwendet.)
  3. Klicken Sie anschließend in das CSS-Feld der Bestellübersicht und fügen Sie folgenden CSS-Code am Ende des bereits bestehenden CSS-Codes hinzu.
  4. Klicken Sie auf Speichern, um die Einstellungen zu sichern.
CSS-Anpassungen nötig?

Abhängig von Ihren individuellen Einstellungen sowie Ihrem Webshop-Design können individuelle Anpassungen des hier dargestellten CSS erforderlich sein.

/* FIX SUM BOX */

#PlentyWebOrderOverviewOrderSumBox {
display: table;
}
#PlentyWebOrderOverviewOrderSumBox > div {
display: table-row;
}
#PlentyWebOrderOverviewOrderSumBox > div > span {
display: table-cell;
vertical-align: top;
padding: 5px 0;
border-bottom: 1px solid #CCCCCC;
}
#PlentyWebOrderOverviewOrderSumBox > div > span.PlentyCurrencyContainer {
padding-left: 30px;
}




/* SHOPPING CART SOLUTION */

/* general */
.PlentyWebClear {
clear: both;
}

/* therms/conditions & privacy */
#PlentyWebOrderOverviewAGBPrivacyContainer {
margin-bottom: 0;
}

/* SHIPPING DETAILS */

/* containers */
#PlentyWebOrderOverviewInvoiceContainer,
#PlentyWebOrderOverviewShippingContainer,
#PlentyWebOrderOverviewShippingMethodContainer,
#PlentyWebOrderOverviewPaymentMethodContainer,
#PlentyWebOrderOverviewSchedulerContainer,
#PlentyWebOrderOverviewAGBPrivacyContainer,
#PlentyWebOrderOverviewReferenceContainer,
#PlentyWebOrderOverviewNotesContainer {
border: 1px solid;
border-color: #EEEEEE !important;
margin: 16px 0 0;
min-height: 140px;
}
#PlentyWebOrderOverviewReferenceContainer,
#PlentyWebOrderOverviewNotesContainer {
min-height: 1px;
height: auto;
}
#PlentyWebOrderOverviewAGBPrivacyContainer {
height: auto;
min-height: 0;
}
/* containers half width */
#PlentyWebOrderOverviewInvoiceContainer,
#PlentyWebOrderOverviewShippingContainer,
#PlentyWebOrderOverviewShippingMethodContainer,
#PlentyWebOrderOverviewPaymentMethodContainer,
#PlentyWebOrderOverviewSchedulerContainer {
width: 46%;
}
/* containers right */
#PlentyWebOrderOverviewShippingContainer,
#PlentyWebOrderOverviewShippingMethodContainer {
float: right;
clear: right;
}
/* individual style */
#PlentyWebOrderOverviewPaymentMethodContainer {
margin-bottom: 16px;
}
#PlentyWebOrderOverviewAGBPrivacyContainer > span > h3 {
font-size: 14px;
font-weight: bold;
}
/* header */
#PlentyWebOrderOverviewInvoiceContainer > span,
#PlentyWebOrderOverviewShippingContainer > span,
#PlentyWebOrderOverviewShippingMethodContainer > span,
#PlentyWebOrderOverviewPaymentMethodContainer > span,
#PlentyWebOrderOverviewSchedulerContainer > span,
#PlentyWebOrderOverviewAGBPrivacyContainer > span,
.PlentyWebItemContainerHeader {
display: block;
background: #F3F3F3;
border-bottom: 1px solid #888888;
color: #444444;
font-size: 14px;
line-height: 17px;
padding: 0;
}
/* header label */
.PlentyWebItemContainerHeaderTitle,
#PlentyWebOrderOverviewAGBandWithdrawal > h3 {
display: inline-block;
padding: 10px 10px 7px;
font-size: 16px;
font-weight: 400;
line-height: 18px;
}
/* button */
.PlentyWebButtonsRightContainer {
display: block !important; /*to overwrite element style*/
float: right;
margin-right: 5px;
padding-bottom: 5px;
position: relative;
top: 1px;
}
/* hide old button */
.PlentyWebOrderOverviewChangeContainerBottom {
display: none;
}
/* content container */
#PlentyWebOrderOverviewInvoiceDataContainer,
#PlentyWebOrderOverviewShippingDataContainer,
#PlentyWebOrderOverviewShippingMethodDataContainer,
#PlentyWebOrderOverviewPaymentMethodDataContainer,
#PlentyWebOrderOverviewSchedulerDataContainer {
margin-top: 20px;
}
/* textarea / input */
#PlentyWebOrderOverviewNotesTextareaBox,
#PlentyWebOrderOverviewReferenceInputBox {
padding: 5px 10px;
}
#PlentyWebOrderOverviewNotesTextareaContainer,
#PlentyWebOrderOverviewReferenceInputContainer {
display: block;
margin: 3px 4px;
}
#PlentyWebOrderOverviewNotesTextareaContainer > textarea,
#PlentyWebOrderOverviewReferenceInputContainer > input {
height: 100px;
width: 100%;
margin-left: -4px;
padding: 2px 3px;
font-family: inherit;
font-size: inherit;
line-height: 16px;
}
#PlentyWebOrderOverviewNotesTextareaContainer > textarea {
height: 100px;
resize: vertical !important;
}


/* ITEMS CONTAINER */

/* background color all container */
#PlentyWebOrderOverviewItemsContainer {
background: #F4F4F4;
}

/* items container */
#PlentyWebOrderOverviewItemsContainer {
min-height: 0;
width: auto;
float: none;
clear: both;
border: 1px solid #CCCCCC;
margin-top: 16px;
padding: 0 10px 10px;
}
/* header */
#PlentyWebOrderOverviewItemsTop {
border: none;
border-bottom: 1px solid #444444;
background: #CCCCCC;
margin: 0 -10px 10px;
padding: 0;
}
/* header label */
#PlentyWebOrderOverviewItems {
display: inline-block;
padding: 10px 10px 7px;
margin-top: 0;
font-size: 16px;
font-weight: bold;
line-height: 18px;
}
/* header button */
#PlentyWebOrderOverviewItemsTop > #PlentyWebOrderOverviewItemsChangeContainer {
display: block;
float: right;
margin-right: 5px;
padding-bottom: 5px;
position: relative;
top: 1px;
}
/* items container */
#PlentyWebOrderOverviewItemsBox {
margin-bottom: 0;
}
/* sum box */
#PlentyWebOrderOverviewOrderSumBox {
margin: 0 0 0 50%;
width: 50%;
padding-bottom: 1px;
text-align: left;
}
/* text after sum */
#PlentyWebOrderOverviewNoticeTotals,
#PlentyWebOrderOverviewNoticeNonEUDelivery,
#PlentyWebOrderOverviewNoticeEUDelivery {
margin: 0 0 0 50%;
}
/* button container */
#PlentyWebOrderOverviewSubmitContainer {
border: none;
background: none;
margin-top: 0;
padding: 8px 0 0;
}


/* ITEMS LIST */

/* main */
#PlentyWebOrderOverviewItemsBox {
border: none;
border-bottom: 1px solid #cccccc;
}
/* header */
#PlentyWebOrderOverviewItemsHeader {
background-color: transparent;
}
/* header cells */
.ItemsHeadline {
border-bottom-color: #888888;
}
/* list container */
#PlentyWebOrderOverviewItemsMain .ItemsRow > div {
border-bottom-color: #cccccc;
}

/* SUM BOX */

/* container */
#PlentyWebOrderOverviewOrderSumBox {
}
/* column width */
#PlentyWebOrderOverviewOrderSumBox > div > span:first-child {
width: 70%;
}
/* price sum */
#PlentyWebOrderTotalAmount {
font-size: 19px;
}
/* note vat */
#PlentyWebOrderOverviewOrderSumBox .PlentyDataAdditional {
font-size: 0.48em; /*.7*/
font-weight: normal;
}
/* note vat scheduler */
#PlentyTotalAmountSubscriptionTitle .PlentyDataAdditional {
font-size: 0.7em;
}
/* line */
#PlentyWebOrderOverviewOrderSumBox > div > span {
border-bottom-color: #E4E4E4;
}
/* no line */
#PlentyWebOrderOverviewOrderSumBox > div#PlentyWebOrderOverviewGoodsValueGross > span,
#PlentyWebOrderOverviewOrderSumBox > div#PlentyWebOrderOverviewShippingCostsGross > span {
border-bottom: none;
}
/* main line */
#PlentyWebOrderOverviewOrderSumBox > div#PlentyWebOrderTotalAmount > span {
border-color: #000000;
}

/* TEXT AFTER SUM BOX */

#PlentyWebOrderOverviewNoticeTotals > div,
#PlentyWebOrderOverviewNoticeNonEUDelivery > div,
#PlentyWebOrderOverviewNoticeEUDelivery > div {
font-size: 0.7em;
line-height: 1.6em;
}
#PlentyWebOrderOverviewNoticeTotals > div:first-child,
#PlentyWebOrderOverviewNoticeNonEUDelivery > div:first-child,
#PlentyWebOrderOverviewNoticeEUDelivery > div:first-child {
margin-top: 8px;
} 
Nach oben