Forum
Joshua Hahn

30 Beiträge
06.01.2017, 12:43

Schneller Direktkauf für das mobile Frontend

Sehr geeherte POWERGAP-Shopbetreiber,

heute möchten wir ihnen ein Update vorstellen das den bisher nur aus der Desktop und Responsive Version bekannten schnellen Direktkauf nun auch in einem mobilen Frontend möglich macht.

Um diese Funktion zu aktivieren sind ein paar Anpassungen im Login-Template nötig. Wie üblich können Sie diese Aufgaben auch als kostenpflichtigen Auftrag an unser Support-Team stellen. Dauer liegt schätzungsweise bei 15-30 Minuten mit allen Tests.

Der Einbau

Unter Layout > Mobil" > Login muss folgender Code am Ende eingefügt werden:

<div class='log_area'><a #schnelleinkaufbutton class='button2'>Einkaufen ohne Registrierung</a>#sofortkauf</div>

Damit ist der Grundstein bereist gesetzt. Nun fehlt natürlich eine angepasste Version des CSS.
Dazu stellen Sie unter Layout > CSS > Mobile folgenden Code am Ende ein:

.aktive_felder>li>input {border: 1px solid #c9c9c9; border-radius: 3px; margin: 4px; padding: 4px 2px; width: 64% !important;;}
.aktive_felder>li>label { text-align: right; display: inline-block; width: 30%; white-space: pre-wrap;
vertical-align: middle;}
.aktive_felder>li>select, #schnellog_za_table>tbody>tr>td>select { margin: 4px; padding: 4px 2px; width: 65%; border: 1px solid #c9c9c9; border-radius: 3px; }
#schnellLog_feld12>select { width: 19.5%; }
#schnellog_za_table>tbody>tr>td>select { width: 93%; margin-left: 9px; }
#schnellog_za_table>tbody>tr:nth-child(2)>td:nth-child(2) { padding: 0px 9px 0px 8px; margin-left: -7px; }
#packst_grafik { margin-left: 20px; }
label[for=schnellog_inpu5_2]{border: none !important; }
label[for=schnellog_inpu5_2]:before {display: none !important; }
.login_c input + label {background-color: #FFFFFF;transition: background .5s;border: 1px solid #CCCCCC;border-radius:5px;}
.login_c input:checked + label {background-color: #FBFBFB;transition: background .5s;border: 1px solid #CCCCCC;border-radius:5px;}
.za_dk_opt {height: auto;position:relative;}
.za_dk-div{position:relative;overflow:hidden;float: left;width:100%;margin-top: 6px;cursor:pointer;}
.za_dk-div label{display:block;cursor:pointer;}
.login_c input + label:before{transition: background .5s;position:absolute;transform:translate(0%,-50%);top:50%;left:10px;margin-right:10px;content:' ';display:block;box-shadow: 0 0 0 1px #666666;;border-radius:10px;box-sizing:border-box;border:2px solid white;background:white;width:12px;height:12px;}
.login_c input:checked + label:before{background:#666666;}
.za_dk-div input{position:absolute;left:-30px}
{width:100px;height:100%;background: no-repeat 50% 50%;background-size:contain;float: left;margin-left: 33px;}
.button_za_dk1{background-image:url(https://cdn.powergap.de/pg_zahlart1.png);}
.button_za_dk2{background-image:url(https://cdn.powergap.de/pg_zahlart2.png);}
.button_za_dk3{background-image:url(https://cdn.powergap.de/pg_zahlart3.png);}
.button_za_dk4{background-image:url(https://cdn.powergap.de/pg_zahlart4.png);}
.button_za_dk5{background-image:url(https://cdn.powergap.de/pg_zahlart5.png);}
.button_za_dk6{background-image:url(https://cdn.powergap.de/pg_zahlart6.png);}
.button_za_dk7{background-image:url(https://cdn.powergap.de/pg_zahlart7.png);}
.button_za_dk8{background-image:url(https://cdn.powergap.de/pg_zahlart8.png);}
.button_za_dk9{background-image:url(https://cdn.powergap.de/pg_zahlart9.png);}
.button_za_dk10{background-image:url(https://cdn.powergap.de/pg_zahlart10.png);}
{vertical-align: middle;height:36px;width:150px;display:table-cell;padding-left: 5px;}
#schnellog_za_table>tbody>tr>td>.za_dk-div>.za_dk_opt>div[class^="text_"] { width: auto; padding: 16px 30px;}

Dieses CSS ist natürlich nur ein Standard für die Loginfelder. Es sollte nun an Ihr Shopdesign (CI) angepasst werden.

Nun sollte noch folgende Zeile abgeändert werden:

.log_area input, .log_area input{ ...CSS-Code... }

in

.log_area input:not(#schnellog_inpu0), .log_area input{ ...CSS-Code... }


um das E-Mail Feld im Schnelleinkauf auf die richtige Breite anzupassen.

Jetzt sollte in der mobilen Loginmaske ein neuer Button für den Schnelleinfakauf erscheinen (heißt in unserem Beispiel "Einkaufen ohne Registrierung"). Wird dieser geklickt erscheinen die Eingabefelder. Zuvor sind diese also ausgeblendet um die Login-Maske einfacher zu verstehen für den Besucher.



WICHTIG:

Es kann passieren das bei einem Klick auf abweichende Lieferadressen die Eingabefelder nicht erscheinen. Um das zu beheben muss das ALA_Schneller_Direktkauf_Template unter Warenkorb-Icon > SSL-Bereich bearbeitet werden.

Ersetzt wird der Code:

$('#ala_ja').click(function(e){
document.getElementById('packstation').value=1;
$('.ala_tr').show();PackStat();
$('#packstation').removeAttr('checked');
})
$('#ala_nein').click(function(e){
$('.ala_tr').hide();
})
$('#ala_ps').click(function(e){
document.getElementById('packstation').value=0;
$('.ala_tr').show();PackStat();
$('#packstation').attr('checked',true);
})

Durch:

var jq13test = window.setInterval(
function(){
if(typeof $ != 'undefined'){
window.clearInterval(jq13test);
$('#ala_ja').click(function(e){
document.getElementById('packstation').value=1;
$('.ala_tr').show();PackStat();
$('#packstation').removeAttr('checked');
})
$('#ala_nein').click(function(e){
$('.ala_tr').hide();
})
$('#ala_ps').click(function(e){
document.getElementById('packstation').value=0;
$('.ala_tr').show();PackStat();
$('#packstation').attr('checked',true);
})
} }
,10);


Forum-Archiv

Alle Beiträge aus:

2026, 2025, 2024, 2023, 2022, 2021, 2020, 2019, 2018, 2017, 2016, 2015, 2014, 2013, 2012, 2011, 2010, 2009, 2008, 2007, 2006, 2005, 2004, 2003, 2002,