Buttonlösung optimiert

Einrad-Shop · 13. Juli 2012

Habe die Bestellabschlußseite noch etwas mehr optimiert und an die Forderungen des Händlerbundes http://www.haendlerbund.de/hinweisblaetter/finish/1-hinweisblaetter/99-button-loesung Angepasst:

bestellvorgang_positionen_custom.tpl
- Button nach rechts gesetzt, direkt unter den Preis.
- Wichtiges Merkmal "Marke" hinzugefügt
- Bei jedem Produkt einen "Produkt ändern" linkt hinzugefügt

PHP:

{******************************************************************
* JTL-Shop 3
* Template: JTL-Shop3 Tiny
*
* Author: JTL-Software, andreas.juetten@jtl-software.de
* http://www.jtl-software.de
*
* Copyright (c) 2010 JTL-Software
*****************************************************************}

<table class="tiny positions box_plain">
   <thead>
      <tr>
            <th colspan="2">{lang key="product" section="checkout"} <a href="warenkorb.php" class="button_edit">{lang key="modifyBasket" section="checkout"}</a></th>
            <th class="tcenter">{lang key="quantity" section="checkout"}</th>
         {if $Einstellungen.kaufabwicklung.bestellvorgang_einzelpreise_anzeigen=="Y"}
            <th class="tright">{lang key="pricePerUnit" section="checkout"}</th>
         {/if}
            <th class="tright">{lang key="merchandiseValue" section="checkout"}</th>
      </tr>
   </thead>
   <tbody>
      {foreach name=positionen from=$smarty.session.Warenkorb->PositionenArr item=Position}
         {if !$Position->istKonfigKind()}
            <tr class="type_{$Position->nPosTyp}">
                <td class="img">
                   {if $Position->Artikel->cVorschaubild|@strlen > 0}
                      <a href="{$Position->Artikel->cURL}" title="{$Position->cName[$smarty.session.cISOSprache]}"{if $Einstellungen.template.articleoverview.article_image_preview == 'Y'} class="image_preview" ref="{$Position->Artikel->Bilder[0]->cPfadNormal}"{/if}>
                         <img src="{$Position->Artikel->cVorschaubild}" alt="{$Position->cName[$smarty.session.cISOSprache]}" width="60" class="image" />
                      </a>
                   {/if}
                </td>
               <td valign="top">
               {if $Position->nPosTyp == $C_WARENKORBPOS_TYP_ARTIKEL}
                  <a href="{$Position->Artikel->cURL}" title="{$Position->cName[$smarty.session.cISOSprache]}">{$Position->cName[$smarty.session.cISOSprache]}</a>
                  
                  {*<p><small>{lang key="productNo" section="global"}: {$Position->Artikel->cArtNr}</small></p>*}

                  {if $Position->Artikel->cLocalizedVPE}
                     <p><small><b>{lang key="basePrice" section="global"}:</b> {$Position->Artikel->cLocalizedVPE[$NettoPreise]}</small></p>
                  {/if}

                  {if $Position->Artikel->dErscheinungsdatum != "0000-00-00" && $Position->Artikel->nErscheinendesProdukt == 1}
                     <p><small>{lang key="dateOfIssue" section="global"} {if $smarty.session.cISOSprache == "ger"}{$Position->Artikel->Erscheinungsdatum_de}{else}{$Position->Artikel->dErscheinungsdatum}{/if}</small></p>
                  {/if}

                  {if $Position->cHinweis|strlen > 0}
                     <p><small>{$Position->cHinweis}</small></p>
                  {/if}

                  {if $Einstellungen.kaufabwicklung.bestellvorgang_lieferstatus_anzeigen=="Y" && $Position->cLieferstatus[$smarty.session.cISOSprache]}
                     <p><small><strong>{lang key="shippingTime" section="global"}:</strong> {$Position->cLieferstatus[$smarty.session.cISOSprache]}</small></p>
                  {/if}

                  {foreach name=variationen from=$Position->WarenkorbPosEigenschaftArr item=Variation}
                     <p><small><strong>{$Variation->cEigenschaftName[$smarty.session.cISOSprache]}:</strong> {$Variation->cEigenschaftWertName[$smarty.session.cISOSprache]}</small></p>
                  {/foreach}
                  
                  {if $Position->istKonfigVater()}
                     <ul class="children_ex">
                     {foreach from=$smarty.session.Warenkorb->PositionenArr item=KonfigPos}
                        {if $Position->cUnique == $KonfigPos->cUnique}
                           <li>{if !($KonfigPos->cUnique|strlen > 0 && $KonfigPos->kKonfigitem == 0)}{$KonfigPos->nAnzahlEinzel}x {/if}{$KonfigPos->cName[$smarty.session.cISOSprache]} <span class="price">{$KonfigPos->cEinzelpreisLocalized[$NettoPreise][$smarty.session.cWaehrungName]}</span></li>
                        {/if}
                     {/foreach}
                     </ul>
                  {/if}
                  
                  {if $Einstellungen.kaufabwicklung.bestellvorgang_artikelmerkmale == 'Y'}
                     {if $Position->Artikel->oMerkmale_arr}
                        <small>
                           <ul class="attributes">
                              {foreach from=$Position->Artikel->oMerkmale_arr item="oMerkmale_arr"}
                              <li>
                                 <strong class="label">{$oMerkmale_arr->cName}</strong>:
                                 <span class="values">
                                    {foreach name="merkmalwerte" from=$oMerkmale_arr->oMerkmalWert_arr item="oWert"}
                                       {if !$smarty.foreach.merkmalwerte.first}, {/if}
                                       {$oWert->cWert}
                                    {/foreach}
                                 </span>
                              </li>
                           {/foreach}
                           </ul>
                        </small>
                     {/if}
                  {/if}
                     
                  {if $Einstellungen.kaufabwicklung.bestellvorgang_artikelattribute == 'Y'}
                     {if $Position->Artikel->Attribute}
                        <small>
                           <ul class="attributes">
                              {foreach from=$Position->Artikel->Attribute item="oAttribute_arr"}
                                 <li>
                                    <strong class="label">{$oAttribute_arr->cName}</strong>:
                                    <span class="values">
                                       {$oAttribute_arr->cWert}
                                    </span>
                                 </li>
                              {/foreach}
                           </ul>
                        </small>
                     {/if}
                  {/if}
                     
                  {if $Einstellungen.kaufabwicklung.bestellvorgang_artikelkurzbeschreibung == 'Y'}
                     {if $Position->Artikel->cKurzBeschreibung}
                        <br /><p class="shortdescription"><small>{$Position->Artikel->cKurzBeschreibung}</small></p>
                     {/if}
                  {/if} 

                 {* --------------------- Buttonloesung eindeutige Hersteller/Marke--------------------- *}
               {if $Position->Artikel->cHersteller}
                <p class="shortdescription"><small><strong class="label">Marke:</strong> {$Position->Artikel->cHersteller}</small></p>
               {/if}    
               
               {* --------------------- Ändern Link --------------------- *}
               {if $Position->cName}
                <br /><p class="shortdescription"><small><a href="/warenkorb.php">Artikel ändern</a></small></p>
                {/if}

               {else}
                  <p>{$Position->cName[$smarty.session.cISOSprache]}</p>
                  {if $Position->cHinweis|strlen > 0}
                     <p><small>{$Position->cHinweis}</small></p>
                  {/if}
               {/if}
               </td>
               <td width="50" class="tcenter" valign="middle">
                  {$Position->nAnzahl|replace_delim} {$Position->Artikel->cEinheit}
               </td>
               {if $Einstellungen.kaufabwicklung.bestellvorgang_einzelpreise_anzeigen=="Y"}
                  <td width="120" class="tright" valign="middle">
                     {if $Position->istKonfigVater()}
                        <p>{$Position->cKonfigeinzelpreisLocalized[$NettoPreise][$smarty.session.cWaehrungName]}</p>
                     {else}
                        <p>{$Position->cEinzelpreisLocalized[$NettoPreise][$smarty.session.cWaehrungName]}</p>
                     {/if}
                  </td>
               {/if}
               <td width="120" class="tright" valign="middle">
                  {if $Position->istKonfigVater()}
                     <p>{$Position->cKonfigpreisLocalized[$NettoPreise][$smarty.session.cWaehrungName]}</p>
                  {else}
                     <p>{$Position->cGesamtpreisLocalized[$NettoPreise][$smarty.session.cWaehrungName]}</p>
                  {/if}
               </td>
            </tr>
         {/if}
        {/foreach}

        {if $NettoPreise}
            <tr class="sums">
                <td colspan="{if $Einstellungen.kaufabwicklung.bestellvorgang_einzelpreise_anzeigen!="Y"}3{else}4{/if}">{lang key="totalSum" section="global"}</td>
                <td>{$WarensummeLocalized[$NettoPreise]}</td>
            </tr>
        {/if}

        {if $Einstellungen.global.global_steuerpos_anzeigen!="N"}
            {foreach name=steuerpositionen from=$Steuerpositionen item=Steuerposition}
                <tr class="sums {if $smarty.foreach.steuerpositionen.first}xxx{/if}">
                    <td colspan="{if $Einstellungen.kaufabwicklung.bestellvorgang_einzelpreise_anzeigen!="Y"}3{else}4{/if}">{$Steuerposition->cName}</td>
                    <td>{$Steuerposition->cPreisLocalized}</td>
                </tr>
            {/foreach}
        {/if}

        {if $smarty.session.Bestellung->GuthabenNutzen==1}
            <tr class="sums">
                <td colspan="{if $Einstellungen.kaufabwicklung.bestellvorgang_einzelpreise_anzeigen!="Y"}3{else}4{/if}">{lang key="voucher" section="global"}</td>
                <td>{$smarty.session.Bestellung->GutscheinLocalized}</td>
            </tr>
        {/if}

        <tr class="sums final">
            <td colspan="{if $Einstellungen.kaufabwicklung.bestellvorgang_einzelpreise_anzeigen!="Y"}3{else}4{/if}">{lang key="totalSum" section="global"} {if $NettoPreise}{lang key="gross" section="global"}{/if}</td>
            <td>{$WarensummeLocalized[0]}</td>
        </tr>

    </tbody>
</table>

{if $Einstellungen.kaufabwicklung.weitere_kosten_anzeigen == 'Y'}
   <p class="box_info">
      {lang key="additionalCharges" section="checkout"}
   </p>
{/if}

Einrad-Shop · 13. Juli 2012

AW: Buttonlösung optimiert

In der bestellvorgang_bestaetigung_custom.tpl
habe ich folgendes geändert:

-Position der WRB und AGB, damit diese näher an den Produkten ist.
(Vorsicht bei der WBR habe ich Textvariablen hin zu gefügt!)

PHP:

{**
 * @copyright (c) 2006-2010 JTL-Software-GmbH, all rights reserved
 * @author JTL-Software-GmbH (www.jtl-software.de)
 *
 * use is subject to license terms
 * http://jtl-software.de/jtlshop3license.html
 *}

{if $hinweis}
<p class="box_error">{$hinweis}</p>
{/if}

{if $smarty.get.fillOut > 0}
<p class="box_error">{lang key="fillOutQuestion" section="messages"}</p>
{/if}

{if $smarty.session.Zahlungsart->cModulId != 'za_billpay_jtl'}
   {include file='tpl_inc/inc_kupon_guthaben.tpl'}
{/if}

<form method="post" name="agbform" id="complete_order" action="bestellabschluss.php">

   

	<div class="container form">
	   <ul class="hlist">
	      <li class="p50">
	         <fieldset style="margin: 0 5px 0 0">
	            <legend>{lang key="billingAdress" section="account data" alt_section="checkout,"}</legend>
	            <p class="box_plain">{include file='tpl_inc/inc_rechnungsadresse.tpl'}</p>
	            <p><a href="bestellvorgang.php?editRechnungsadresse=1" class="button_edit">{lang key="modifyBillingAdress" section="global"}</a></p>
	         </fieldset>
	      </li>
	
	      <li class="p50">
	         <fieldset style="margin: 0 0 0 5px">
	            <legend>{lang key="shippingAdress" section="account data" alt_section="checkout,"}</legend>
	            <p class="box_plain">{include file='tpl_inc/inc_lieferadresse.tpl'}</p>
	            <p><a href="bestellvorgang.php?editLieferadresse=1" class="button_edit">{lang key="modifyShippingAdress" section="checkout"}</a></p>
	         </fieldset>
	      </li>
	   </ul>
	</div>
	
	<div class="container form">
	   <ul class="hlist">
	      <li class="p50">
			   <fieldset style="margin: 0 5px 0 0">
			      <legend>{lang key="shippingOptions" section="global"}</legend>
			      <p class="box_plain">{$smarty.session.Versandart->angezeigterName[$smarty.session.cISOSprache]}</p>
			      <p><a href="bestellvorgang.php?editVersandart=1" class="button_edit">{lang key="modifyShippingOption" section="checkout"}</a></p>
			   </fieldset>
			</li>
			<li class="p50">
			   <fieldset>
			      <legend>{lang key="paymentOptions" section="global"}</legend>
			      <p class="box_plain">{$smarty.session.Zahlungsart->angezeigterName[$smarty.session.cISOSprache]}</p>
			      <p><a href="bestellvorgang.php?editZahlungsart=1" class="button_edit">{lang key="modifyPaymentOption" section="checkout"}</a></p>
			   </fieldset>
			</li>
	</div>
	
	<div class="container form">
      <fieldset>
		   <ul class="input_block">
	            <li class="p100">{*<label for="comment">{lang key="comment" section="product rating" alt_section="shipping payment,productDetails,"}</label>*}
	               {lang assign="orderCommentsTitle" key="orderComments" section="shipping payment"}
	               <textarea class="expander placeholder p98" title="{$orderCommentsTitle|escape:"html"}" name="kommentar" cols="50" rows="3" id="comment">{$smarty.session.kommentar}</textarea>
	            </li>
	      </ul>
	   </fieldset>
   </div>
   
	<div class="container form">
      <fieldset>

         {if isset($safetypay_form)}
            <p class="box_plain">{$safetypay_form}</p>
         {/if}

         <input type="hidden" name="{$session_name}" value="{$session_id}" />
         <input type="hidden" name="abschluss" value="1" />
		 
            <li class="p100 clear">
               {*<p class="box_info">{lang key="confirmDataDesc" section="shipping payment"}</p>*}
               {getCheckBoxForLocation nAnzeigeOrt=$nAnzeigeOrt cPlausi_arr=$smarty.session.cPlausi_arr cPost_arr=$cPost_arr}
            </li>
			
            {if $Einstellungen.kaufabwicklung.bestellvorgang_wrb_anzeigen==1}
               <li class="p100 clear">
                  {if isset($AGB->kLinkWRB) && $AGB->kLinkWRB > 0}
                    {lang key="wrb-txt" section="custom"} <a href="navi.php?s={$AGB->kLinkWRB}" target="_blank">{lang key="wrb" section="checkout"}</a> {lang key="wrb-txt2" section="custom"}
                  {else}
                     {if $AGB->cWRBContentHtml}
                        <div id="popupwrb" class="hidden tleft"><h1>{lang key="wrb" section="checkout"}</h1>{$AGB->cWRBContentHtml}</div>
                        <p><a href="#" class="popup" id="wrb">{lang key="wrb" section="checkout"}</a></p>
                     {elseif $AGB->cWRBContentText}
                        <div id="popupwrb" class="hidden tleft"><h1>{lang key="wrb" section="checkout"}</h1>{$AGB->cWRBContentText|nl2br}</div>
                        <p><a href="#" class="popup" id="wrb">{lang key="wrb" section="checkout"}</a></p>
                     {/if}
                  {/if}
               </li>
            {/if}
            
         </ul>
      </fieldset>
   </div>
	
	<div class="container form">
	   
      
      {include file="tpl_inc/bestellvorgang_positionen.tpl"}
      
	  <div align="right">
      <input type="submit" value="{lang key="orderLiableToPay" section="checkout"}" class="submit" onclick="$(this).addClass('disabled');" />
	  </div>
	</div>
</form>

david · 13. Juli 2012

AW: Buttonlösung optimiert

Zitat von Einrad-Shop:
...und an die Forderungen des Händlerbundes http://www.haendlerbund.de/hinweisbl...button-loesung Angepasst:
- Button nach rechts gesetzt, direkt unter den Preis.
- Wichtiges Merkmal "Marke" hinzugefügt
- Bei jedem Produkt einen "Produkt ändern" linkt hinzugefügt

Das sind schöne Verbesserungsvorschläge von dir, aber ich habe diese 3 Punkte so nicht in dem von dir verlinkten Whitepaper gefunden.
Die Buttonlösung macht weder eine Aussage zur horizontalen Ausrichtung (links/rechts) des Buttons noch schreibt sie vor, dass bei jeder Bestellposition ein Link "Produkt ändern" stehen muss.
"Marke" kann man sicher als wesentliches Merkmal vieler Produkte interpretieren (bereits aufgenommen für 3.16), aber auch dazu gibt es keine konkreten Aussagen in dem Whitepaper.

Zitat von Einrad-Shop:
-Position der WRB und AGB, damit diese näher an den Produkten ist.

Trusted Shops empfiehlt in ihrem Whitepaper, AGB und WRB nach oben auf die Seite zu setzen (über Anschrift etc), damit es ohne Scrollen direkt im sichtbaren Bereich liegt. So ist es im Template für 3.15 auch umgesetzt. Hier besteht kein Änderungsbedarf, es sei denn man findet den Lösungsansatz vom Händlerbund optisch schöner.

Einrad-Shop · 13. Juli 2012

AW: Buttonlösung optimiert

Zitat von david:
Das sind schöne Verbesserungsvorschläge von dir, aber ich habe diese 3 Punkte so nicht in dem von dir verlinkten Whitepaper gefunden.
Die Buttonlösung macht weder eine Aussage zur horizontalen Ausrichtung (links/rechts) des Buttons noch schreibt sie vor, dass bei jeder Bestellposition ein Link "Produkt ändern" stehen muss.
"Marke" kann man sicher als wesentliches Merkmal vieler Produkte interpretieren (bereits aufgenommen für 3.16), aber auch dazu gibt es keine konkreten Aussagen in dem Whitepaper.

Im Gesetz steht, das der Butten unmittelbar beim Gesamtpreis stehen muß. Das ist rechts halt eher gegeben.

Zitat von david:

Trusted Shops empfiehlt in ihrem Whitepaper, AGB und WRB nach oben auf die Seite zu setzen (über Anschrift etc), damit es ohne Scrollen direkt im sichtbaren Bereich liegt. So ist es im Template für 3.15 auch umgesetzt. Hier besteht kein Änderungsbedarf, es sei denn man findet den Lösungsansatz vom Händlerbund optisch schöner.

Klicke in dieses Feld, um es in vollständiger Größe anzuzeigen.

Wenn man beim Bestellbutton, dem Gesamtpreis ist, sind AGB evtl. nicht mehr im sichtbaren Bereich. Das ist aus Usability und evtl. aus Buttongesetzt sicht nicht so gut.

Ganz genau kann es ja niemand sagen wie es aussehen soll, weder Trustedshops, noch Händlerbund.
Man kann es nur so machen wie man es für richtig hält..... blödes Gestzt.
Änderungsbedarf besteht natürlich nicht, da hast du recht , das kann/muß jeder für sich selbst entscheiden

Klicke in dieses Feld, um es in vollständiger Größe anzuzeigen.

david · 13. Juli 2012

AW: Buttonlösung optimiert

Zitat von Einrad-Shop:
Im Gesetz steht, das der Butten unmittelbar beim Gesamtpreis stehen muß. Das ist rechts halt eher gegeben.

Ich stimme dir zu, dass es optisch vielleicht schöner ist, aber wo genau hast du das mit dem "unmittelbar bei dem Gesamtpreis" denn im Gesetzestext gelesen?
Im HB-Whitepaper (--> Interpretation vom Gesetzesentwurf!) steht nur

Der Button muss sich daher unterhalb der unter Punkt 2 a) genannten Pflichtinformationen befinden. Zwischen den Pflichtinformationen und dem Bestellbutton dürfen sich keine trennenden Gestaltungselemente in Textform oder Grafik,wie zum Beispiel Kommentarfelder, Abhakboxen für Newsletter, AGB oder Widerrufsbelehrung befinden.

Ich kann hier nichts von "unmittelbar bei" oder "unmittelbar darunter" erkennen.

Bitte nicht falsch verstehen - es ist schon in Ordnung, wenn du deine Template-Optimierungen hier mit anderen teilst.
Die von dir im ersten Post unter dem Link vom Händlerbund genannten Punkte sind jedoch deine eigenen Interpretationen der Buttonlösung, die in dieser Formulierung weder im Gesetzesentwurf noch im Whitepaper des Händlerbundes zu finden sind.

MichaelH · 13. Juli 2012

AW: Buttonlösung optimiert

Trusted Shops empfiehlt in ihrem Whitepaper, AGB und WRB nach oben auf die Seite zu setzen (über Anschrift etc), damit es ohne Scrollen direkt im sichtbaren Bereich liegt. So ist es im Template für 3.15 auch umgesetzt. Hier besteht kein Änderungsbedarf, es sei denn man findet den Lösungsansatz vom Händlerbund optisch schöner.

Dieser Punkt stört mich etwas, denn der Kunde muss runter scrollen um zu "bestellen", wenn er vergißt die Haken zu machen, landet er wieder oben und wundert sich - oder auch nicht und denkt alles ist in Ordnung. Ich habe nun den Hinweis mit "Fehler" groß und fett gemacht (über HTML im Text), denn ich hatte 2 volle Warenkörbe die abgebrochen bzw. nicht abgeschlossen wurden in den letzten 3 Tagen und das ist unüblich (ohne Kundenkonto).
Früher hat der Kunde den Button "bestellen" gesucht, runter gescrollt, dabei die AGB gesehen, Haken rein und "bestellt".
Ist mein Eindruck ...

-> Ich denke die neue Sicherheit war gedacht (nicht für JTL) für Shops die den Haken automatisch drin hatten, den unten positioniert und "bestellen" oben, so hat der Kunde zugestimmt ohne etwas getan zu haben (ohne Haken, ohne scrollen). Dieses Problem haben wir nicht.

-> Die Fehlerausgabe finde ich nach wie zu wenig "prominent" und kann all zu leicht übersehen werden. Bei kleinen Feldern (z.B. Checkbox) ist die Farbmarkierung recht klein. Bei der Adresse ist der Rahmen zusätzlich rot, bei der Checkbox nicht. Das sind Stolpersteine für einen Kunden.
Anm.: Manche/Meine Kunden sind keine Kiddies oder Gurus, ich verkaufe keine Spiele oder Sportswear für junge Menschen. Ich habe Kunden die z.B. keine Ahnung haben was eine IBAN/BIC ist und auch eine Kundin die von DE nach AT in USD überwiesen hat statt in EUR.

Bitte auch an solche Menschen denken ...

Günther · 27. August 2012

AW: Buttonlösung optimiert

Hallo Michael,
ich stimme Dir zu dass die Fehlermeldung nicht present genug ist.
Ich finde die Idee von Gerhard super die AGB Box doppelt anzubringen.
Ferner denke ich auch dass der Button unter den Preis gehört.
Müssen wir jetzt alle im Template div. Änderungen nachziehen oder denkt Du JTL wird hier noch nachbessern?
Günther

Suche

Suche

Buttonlösung optimiert

Einrad-Shop

Gut bekanntes Mitglied

Einrad-Shop

Gut bekanntes Mitglied

david

Administrator

Einrad-Shop

Gut bekanntes Mitglied

david

Administrator

MichaelH

Sehr aktives Mitglied

Günther

Sehr aktives Mitglied