Bestellschritt 2 - Lieferadresse

Für den Kunden ist es verwirrend, wenn er im Bestellschritt 2 den Link “Hier klicken, um an eine andere Adresse zu liefern” betätigt. Es öffnet sich dann zwar unten das zusätzliche Eingabefeld, jedoch finde ich es ratsam, wenn der link gleich zur Eingabemaske “Lieferadresse” springen würde. Unsere Testuser jedenfalls haben das bereits ausgefüllte Feld “Rechnungsadresse” erneut editiert, weil Sie es für die Eingabemaske der Lieferadresse gehalten haben.

Hat jemand einen Tipp für mich, in welchem Template ich wo einen Anker platzieren kann?

Gruß
Stefan

Hallo Stefan,

schau Dir mal die register.tpl an.

Gruß

Erstmal danke für den Tipp der Tester. Das werde ich dann wohl auch umsetzen.

Ich hab da eine kleine Lösung parat, benötigt aber ein wenig JavaScript bzw. falls verwendet jQuery.

Zuerst solltest du in der tpl/user.tpl zu dem input Feld des Vornamens gehen und diesem eine eindeutige ID zuweisen (wenn nicht schon im Standardtemplate geschehen):


// z.B.[QUOTE][/QUOTE]
...
<tr>
	<td><label for="formRegisterDeliveryFirstname">[{ oxmultilang ident="USER_FIRSTNAME" }]</label> [{if isset($aMustFillFields.oxaddress__oxfname) }]<span class="req" title="[{ oxmultilang ident="FORM_SEND_TOOLTIP_REQUIRED" }]">*</span>[{/if}]</td>
	<td>
		<input id="formRegisterDeliveryFirstname" type="text" maxlength="255" name="deladr[oxaddress__oxfname]" value="[{ if $delivadr->oxaddress__oxfname->value }][{$delivadr->oxaddress__oxfname->value }][{else}][{$deladr.oxaddress__oxfname}][{/if}]" />
	</td>
</tr>
...

Danach muss das JavaScript angepasst werden. Falls jQuery:


$(document).ready(function() {
	/* FOCUS LIEFERADRESSE */
	if ( $("#formRegisterDeliveryFirstname").length > 0 ) {
		$('#formRegisterDeliveryFirstname').focus();
	}
});

Falls kein jQuery Framework, dann:


if (document.getElementById('formRegisterDeliveryFirstname') !== null ) {
	alert('BIN da');
	document.getElementById('formRegisterDeliveryFirstname').focus();
} else {
	alert('NIX da');
	return false;
}

Sobald nun die Schaltfläche für die Lieferadresse betätigt wird und die Seite sich neu lädt, landet man direkt im Eingabefeld für den Vornamen.

Natürlich später dann die alerts deaktivieren.

Bessere Lösungen? Immer her damit!

Gruß

Ich würde das auch geren wie beschrieben umsetzen, aber ich komm mit der Beschreibung noch nicht ganz zurecht.

Kann mir jemand auf die Sprünge helfen wo ich jetzt was einfüge?

Mfg

[QUOTE=Marco Steinhäuser;14119]Hallo Stefan,

schau Dir mal die register.tpl an.

Gruß[/QUOTE]
Nein, beim Checkout ist das die “user.tpl”…

Das habe ich ja unter http://www.oxid-esales.com/forum/showthread.php?t=3011#post17802 schon thematisiert: 3 Templates für sehr ähnliche Aufgaben…

Muss man alle separat anpassen.

[QUOTE=stefan-at-work;14074]Für den Kunden ist es verwirrend, wenn er im Bestellschritt 2 den Link “Hier klicken, um an eine andere Adresse zu liefern” betätigt. Es öffnet sich dann zwar unten das zusätzliche Eingabefeld, jedoch finde ich es ratsam, wenn der link gleich zur Eingabemaske “Lieferadresse” springen würde. Unsere Testuser jedenfalls haben das bereits ausgefüllte Feld “Rechnungsadresse” erneut editiert, weil Sie es für die Eingabemaske der Lieferadresse gehalten haben.

Hat jemand einen Tipp für mich, in welchem Template ich wo einen Anker platzieren kann?

Gruß
Stefan[/QUOTE]
Coole Idee, kann ich auch gerade gut gebrauchen…

In “user.tpl”

      &lt;b&gt;[{ oxmultilang ident="USER_SHIPPINGADDRESS" }]&lt;/b&gt;
      &lt;div class="dot_sep"&gt;&lt;/div&gt;
      [{if !$oView-&gt;showShipAddress()}]
        &lt;span class="btn"&gt;&lt;input type="submit" name="blshowshipaddress" value="[{ oxmultilang ident="USER_DIFFERENTSHIPPINGADDRESS" }]" class="btn"&gt;&lt;/span&gt;&lt;br /&gt;&lt;br /&gt;
      [{else}]

ersetzen mit

          <div id="user_shippingaddress"><b>[{ oxmultilang ident="USER_SHIPPINGADDRESS" }]</b></div>
          <div class="dot_sep"></div>
          <span class="btn">
          [{if $oView->showShipAddress()}]
            <input type="submit" id="hide_ship_address" name="blhideshipaddress" value="[{ oxmultilang ident="USER_DISABLESHIPPINGADDRESS" }]" title="[{ oxmultilang ident="USER_DISABLESHIPPINGADDRESS" }]" class="btn">
            <script type="text/javascript">
              function shippingaddress_show()
              {
                document.getElementById('user_shippingaddress').scrollIntoView();
              }
              //Attach additional "window.onload"-Event
              if (window.addEventListener)
              {
                window.addEventListener('load', shippingaddress_show, false);
              } 
              else if (window.attachEvent)
              {
                window.attachEvent("onload", shippingaddress_show);
              }
            </script>  
          [{else}]

Was geschieht hier?

Wir setzen eine HTML-ID (“user_shippingaddress”) auf die Überschrift, und definieren ein kleines Javascript…

shippingaddress_show” soll die Javascript-Funktion sein, die nach dem Laden der Seite aufgerufen wird, und die wird als zusätzliches Event an “window.onload” gehängt…

Und mit “document.getElementById(‘user_shippingaddress’).[B]scrollIntoView/B;” wird dann die Überschrift in das Fenster gescrolled, so dass das Formular sichtbar ist.

Ja, und das Ganze dann noch in “account_user.tpl” und “register.tpl” einbauen…

[QUOTE=avenger;18876]Ja, und das Ganze dann noch in “account_user.tpl” und “register.tpl” einbauen…[/QUOTE]

Kannst Du einem Newbie auch noch sagen, wo dort genau? Danke

Stefan

Ja ich bin scheinbar auch zu blöd, die entsprechenden Einträge in der account_user.tpl und der register.tpl zu finden.

[QUOTE=stefan-at-work;18879]Kannst Du einem Newbie auch noch sagen, wo dort genau? Danke

Stefan[/QUOTE]
Ist doch gar nicht so schwer…

In “[B]register.tpl[/B]”

            <tr class="th_sep">
                <th class="mid" colspan="2">[{ oxmultilang ident="REGISTER_SHIPPINGADDRESS" }]</th>
            </tr>
            <tr>
                <td colspan="2">
                    <div class="showHideShippAddr">
                        [{if !$oView->showShipAddress()}]
                        <span class="btn">
                          <input type="submit" id="show_ship_address" class="btn" name="blshowshipaddress" value="[{ oxmultilang ident="REGISTER_DIFFERENTSHIPPINGADDRESS" }]">
                        </span>
                        [{else}]
                        <span class="btn">
                          <input type="submit" id="hide_ship_address" class="btn" name="blhideshipaddress" value="[{ oxmultilang ident="REGISTER_DISABLESHIPPINGADDRESS" }]">
                        </span>
                        [{/if}]
                        <br><br>
                        <span class="note">[{ oxmultilang ident="REGISTER_NOTE" }]</span> [{ oxmultilang ident="REGISTER_DIFFERENTDELIVERYADDRESS" }]
                    </div>
                </td>
            </tr>

ersetzen mit

            <tr id="user_shippingaddress" class="th_sep">
              <th class="mid" colspan="2">[{ oxmultilang ident="REGISTER_SHIPPINGADDRESS" }]</th>
            </tr>
            <tr>
              <td colspan="2">
                <div class="showHideShippAddr">
                  [{if !$oView->showShipAddress()}]
                  <span class="btn">
                    <input type="submit" id="show_ship_address" class="btn" name="blshowshipaddress" value="[{ oxmultilang ident="REGISTER_DIFFERENTSHIPPINGADDRESS" }]">
                  </span>
                  [{else}]
                  <span class="btn">
                    <input type="submit" id="hide_ship_address" class="btn" name="blhideshipaddress" value="[{ oxmultilang ident="REGISTER_DISABLESHIPPINGADDRESS" }]">
                  </span>
                  [{/if}]
                  <br><br>
                  <span class="note">[{ oxmultilang ident="REGISTER_NOTE" }]</span> [{ oxmultilang ident="REGISTER_DIFFERENTDELIVERYADDRESS" }]
                  <script type="text/javascript">
                    function shippingaddress_show()
                    {
                      document.getElementById('user_shippingaddress').scrollIntoView();
                    }
                    //Attach additional "window.onload"-Event
                    if (window.addEventListener)
                    {
                      window.addEventListener('load', shippingaddress_show, false);
                    } 
                    else if (window.attachEvent)
                    {
                      window.attachEvent("onload", shippingaddress_show);
                    }
                  </script>  
                </div>
              </td>
            </tr>

Die “[B]account_user.tpl[/B]” braucht man doch nicht ändern, da ist der Lieferadressen-Bereich immer offen.

hmm vielen Dank erstmal für dein reges und produktives Auftreten hier im Forum. Eigentlich solltest du Problemlöser heißen. :slight_smile: Ich hab die Einträge [U]genau [/U]wie beschrieben geändert, danach hat der Button für die lieferadresse überhaupt nicht mehr funktioniert und alle Links die im Footer standen, sahen auf einmal genau so aus wie dieser Lieferadresse Button. Hab ich vielleicht noch irgendwas vergessen?

Mfg

Hi ich muss mal pushen, weil mich das Thema wirklich interessiert und ich einfach einen kleinen Fehler vermute. Außerdem solls ja auch bei allen anderen klappen die diesen Thread finden.

Mfg

[QUOTE=wohlima;19401]Hi ich muss mal pushen, weil mich das Thema wirklich interessiert und ich einfach einen kleinen Fehler vermute. Außerdem solls ja auch bei allen anderen klappen die diesen Thread finden.

Mfg[/QUOTE]
Poste doch mal den Template-Inhalt: 10 Zeilen vor, bis 10 Zeilen nach der Änderung

So sieht meine user.tpl nach der Änderung aus

</td>
</tr>
<tr class=“td_sep”>
<td valign=“top”><label>[{ oxmultilang ident=“USER_YOURMESSAGE” }]</label></td>
<td>
[{ if !$oView->getOrderRemark()}]
[{assign var=“order_remark” value=“USER_MESSAGEHERE”|oxmultilangassign}]
[{else}]
[{assign var=“order_remark” value=$oView->getOrderRemark()}]
[{/if}]
<textarea cols=“60” rows=“7” name=“order_remark”>[{$order_remark}]</textarea>
</td>
</tr>

      &lt;/table&gt;

      &lt;div class="dot_sep"&gt;&lt;/div&gt;

      &lt;br /&gt;
       &lt;div id="user_shippingaddress"&gt;&lt;b&gt;[{ oxmultilang ident="USER_SHIPPINGADDRESS" }]&lt;/b&gt;&lt;/div&gt;
      &lt;div class="dot_sep"&gt;&lt;/div&gt;
      &lt;span class="btn"&gt;
      [{if $oView-&gt;showShipAddress()}]
        &lt;input type="submit" id="hide_ship_address" name="blhideshipaddress" value="[{ oxmultilang ident="USER_DISABLESHIPPINGADDRESS" }]" title="[{ oxmultilang ident="USER_DISABLESHIPPINGADDRESS" }]" class="btn"&gt;
        &lt;script type="text/javascript"&gt;
          function shippingaddress_show()
          {
            document.getElementById('user_shippingaddress').scrollIntoView();
          }
          //Attach additional "window.onload"-Event
          if (window.addEventListener)
          {
            window.addEventListener('load', shippingaddress_show, false);
          } 
          else if (window.attachEvent)
          {
            window.attachEvent("onload", shippingaddress_show);
          }
        &lt;/script&gt;  
      [{else}]
      &lt;span class="btn"&gt;&lt;input type="submit" name="blhideshipaddress" value="[{ oxmultilang ident="USER_DISABLESHIPPINGADDRESS" }]" class="btn"&gt;&lt;/span&gt;&lt;br /&gt;&lt;br /&gt;
      [{/if}]

      &lt;div class="fs10 def_color_1"&gt;&lt;span class="req"&gt;[{ oxmultilang ident="USER_NOTE" }]&lt;/span&gt; [{ oxmultilang ident="USER_DIFFERENTDELIVERYADDRESS" }]&lt;/div&gt;
      [{if $oView-&gt;showShipAddress()}]
        [{assign var="delivadr" value=$oView-&gt;getDelAddress()}]
        &lt;table class="form" width="90%"&gt;
          &lt;colgroup&gt;
            &lt;col width="145"&gt;
          &lt;/colgroup&gt;

          &lt;tr&gt;

und so sieht meine register.tpl nach der Änderung aus

<td valign=“top”>
<input type=“text” size=“3” maxlength=“2” name=“invadr[oxuser__oxbirthdate][day]” value=“[{if $oxcmp_user->oxuser__oxbirthdate->value && $oxcmp_user->oxuser__oxbirthdate->value != “0000-00-00”}][{$oxcmp_user->oxuser__oxbirthdate->value|date_format:”%d" }][{else}][{$invadr.oxuser__oxbirthdate.day }][{/if}]“>
<input type=“text” size=“3” maxlength=“2” name=“invadr[oxuser__oxbirthdate][month]” value=”[{if $oxcmp_user->oxuser__oxbirthdate->value && $oxcmp_user->oxuser__oxbirthdate->value != “0000-00-00” }][{$oxcmp_user->oxuser__oxbirthdate->value|date_format:“%m” }][{else}][{$invadr.oxuser__oxbirthdate.month }][{/if}]“>
<input type=“text” size=“8” maxlength=“4” name=“invadr[oxuser__oxbirthdate][year]” value=”[{if $oxcmp_user->oxuser__oxbirthdate->value && $oxcmp_user->oxuser__oxbirthdate->value != “0000-00-00” }][{$oxcmp_user->oxuser__oxbirthdate->value|date_format:“%Y” }][{else}][{$invadr.oxuser__oxbirthdate.year }][{/if}]">
[{if isset($aMustFillFields.oxuser__oxbirthdate) }]<span class=“req”>*</span>[{/if}]
(Bsp.: 01.09.1956)
</td>
</tr>

        &lt;tr&gt;&lt;th colspan="2"&gt;&lt;small&gt;[{ oxmultilang ident="USER_BIRTHDAYMESSAGE" }]&lt;/small&gt;&lt;/th&gt;&lt;/tr&gt;

        [{/if}]
        &lt;tr class="th_sep"&gt;
            &lt;th class="mid" colspan="2"&gt;[{ oxmultilang ident="REGISTER_SHIPPINGADDRESS" }]&lt;/th&gt;
        &lt;/tr&gt;
        &lt;tr id="user_shippingaddress" class="th_sep"&gt;
          &lt;th class="mid" colspan="2"&gt;[{ oxmultilang ident="REGISTER_SHIPPINGADDRESS" }]&lt;/th&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td colspan="2"&gt;
            &lt;div class="showHideShippAddr"&gt;
              [{if !$oView-&gt;showShipAddress()}]
              &lt;span class="btn"&gt;
                &lt;input type="submit" id="show_ship_address" class="btn" name="blshowshipaddress" value="[{ oxmultilang ident="REGISTER_DIFFERENTSHIPPINGADDRESS" }]"&gt;
              &lt;/span&gt;
              [{else}]
              &lt;span class="btn"&gt;
                &lt;input type="submit" id="hide_ship_address" class="btn" name="blhideshipaddress" value="[{ oxmultilang ident="REGISTER_DISABLESHIPPINGADDRESS" }]"&gt;
              &lt;/span&gt;
              [{/if}]
              &lt;br&gt;&lt;br&gt;
              &lt;span class="note"&gt;[{ oxmultilang ident="REGISTER_NOTE" }]&lt;/span&gt; [{ oxmultilang ident="REGISTER_DIFFERENTDELIVERYADDRESS" }]
              &lt;script type="text/javascript"&gt;
                function shippingaddress_show()
                {
                  document.getElementById('user_shippingaddress').scrollIntoView();
                }
                //Attach additional "window.onload"-Event
                if (window.addEventListener)
                {
                  window.addEventListener('load', shippingaddress_show, false);
                } 
                else if (window.attachEvent)
                {
                  window.attachEvent("onload", shippingaddress_show);
                }
              &lt;/script&gt;  
            &lt;/div&gt;
          &lt;/td&gt;
        &lt;/tr&gt;
        [{if $oView-&gt;showShipAddress()}]
        [{assign var="delivadr" value=$oView-&gt;getDelAddress()}]
        &lt;tr&gt;
            &lt;td&gt;&lt;label&gt;[{ oxmultilang ident="REGISTER_ADDRESSES" }]&lt;/label&gt;&lt;/td&gt;
            &lt;td&gt;
                &lt;select name="oxaddressid" onchange="oxid.form.reload(this.value === '-1','order','user','');oxid.form.clear(this.value !== '-1','order',/oxaddress__/);"&gt;
                    &lt;option value="-1" SELECTED&gt;[{ oxmultilang ident="REGISTER_NEWADDRESSES" }]&lt;/option&gt;
                    [{if $oxcmp_user }]
                        [{foreach from=$oxcmp_user-&gt;getUserAddresses() item=address}]
                        &lt;option value="[{ $address-&gt;oxaddress__oxid-&gt;value }]" [{ if $address-&gt;selected}]SELECTED[{/if}]&gt;[{ $address-&gt;oxaddress__oxfname-&gt;value }] [{ $address-&gt;oxaddress__oxlname-&gt;value }], [{ $address-&gt;oxaddress__oxcity-&gt;value }]&lt;/option&gt;
                        [{/foreach}]
                    [{/if}]

jeweils 10 Zeilen davor und dahinter.

mfg

Ich kann da jetzt nichts falsches entdecken…

Schick mir die Templates mal 'rüber, dann teste ich die mal bei mir…

[QUOTE=avenger;19456]Ich kann da jetzt nichts falsches entdecken…

Schick mir die Templates mal 'rüber, dann teste ich die mal bei mir…[/QUOTE]
Habe mir das hier mal in einem Projekt mit Deinen Templates angesehen…

[B]register.tpl:[/B]

Abgesehen davon, dass dieses Feld

            <tr class="th_sep">
                <th class="mid" colspan="2">[{ oxmultilang ident="REGISTER_SHIPPINGADDRESS" }]</th>
            </tr>

überflüssig ist, passiert das, was gewünscht ist…

[B] user.tpl:[/B]

Da fehlt ein “[B][/B]”…

Ändere den Code

           <div id="user_shippingaddress"><b>[{ oxmultilang ident="USER_SHIPPINGADDRESS" }]</b></div>
          <div class="dot_sep"></div>
          <span class="btn">
          [{if $oView->showShipAddress()}]
            <input type="submit" id="hide_ship_address" name="blhideshipaddress" value="[{ oxmultilang ident="USER_DISABLESHIPPINGADDRESS" }]" title="[{ oxmultilang ident="USER_DISABLESHIPPINGADDRESS" }]" class="btn">
            <script type="text/javascript">
              function shippingaddress_show()
              {
                document.getElementById('user_shippingaddress').scrollIntoView();
              }
              //Attach additional "window.onload"-Event
              if (window.addEventListener)
              {
                window.addEventListener('load', shippingaddress_show, false);
              } 
              else if (window.attachEvent)
              {
                window.attachEvent("onload", shippingaddress_show);
              }
            </script>  
          [{else}]
          <span class="btn"><input type="submit" name="blhideshipaddress" value="[{ oxmultilang ident="USER_DISABLESHIPPINGADDRESS" }]" class="btn"></span><br /><br />
          [{/if}]

zu

          <div id="user_shippingaddress"><b>[{ oxmultilang ident="USER_SHIPPINGADDRESS" }]</b></div>
          <div class="dot_sep"></div>
          [{if $oView->showShipAddress()}]
          <span class="btn">
            <input type="submit" id="hide_ship_address" name="blhideshipaddress" value="[{ oxmultilang ident="USER_DISABLESHIPPINGADDRESS" }]" title="[{ oxmultilang ident="USER_DISABLESHIPPINGADDRESS" }]" class="btn">
            <script type="text/javascript">
              function shippingaddress_show()
              {
                document.getElementById('user_shippingaddress').scrollIntoView();
              }
              //Attach additional "window.onload"-Event
              if (window.addEventListener)
              {
                window.addEventListener('load', shippingaddress_show, false);
              } 
              else if (window.attachEvent)
              {
                window.attachEvent("onload", shippingaddress_show);
              }
            </script>  
          </span>  
          [{else}]
          <span class="btn"><input type="submit" name="blhideshipaddress" value="[{ oxmultilang ident="USER_DISABLESHIPPINGADDRESS" }]" class="btn"></span><br /><br />
          [{/if}]

Hi avenger,

bin krankheits- und urlaubsbedingt erst jetzt dazu gekommen Deine Lösung umsusetzen. Leider muss ich meinem Vorredner recht geben: Es funzt so leider nicht.

Bei Klick auf Lieferadresse ändern springt er wieder zur Maske Rechnungsadresse und die Felder Lieferadresse (die man sonst ja per scollen nach unten erreicht) sind nicht mehr existent.

Eingesetzte Version: CE 4.2.0