Eine mobile Shop-Version mit ShopPilot erstellen

Begonnen von dobra, August 09, 2011, 21:11:04

« vorheriges - nächstes »

0 Mitglieder und 1 Gast betrachten dieses Thema.

Drucken
Nach unten Seiten1
User actions

dobra

August 09, 2011, 21:11:04 Last Edit: August 10, 2011, 09:56:07 by dobra


Das Einkaufen am Handy wird immer aktueller.

Auch wenn die Zugriffe von Mobilgeräten derzeit noch bei ca 1% liegen, wird hier in den nächsten Jahren ein rasantes Wachstum - und damit Kundenpotential - vorausgesagt.
Die Zahl der Mobiltelefon die Internetseiten anzeigen können steigt täglich.
Für Handys und Smartphones gelten allerdings ein wenig andere Regeln, als für Desktop-Rechner.
Schon allein wegen der viel kleineren Auflösung und der geringere Downloadgeschwindigkeit von Handys funktioniert der "normale" Shop meist nicht optimal auf Mobiltelefonen.

Wer also der Konkurrenz einen Schritt voraus sein will
(oder einfach nur "aus Prestigegründen" ;) )
kann mit ShopPilot relativ einfach eine mobile Version seines Shops erstellen.
Hier gibt's ein kleines Video
knapp 3 Minuten (mit Simulator am PC aufgenommen da ich kein Web-Handy besitze)

Oder wer ein Web-Handy besitzt kann es auch life anschauen
http://www.woll-insel.at/cgi-bin/demoshops/shop2_0/iboshop.cgi?logoffshow0,ID1000001



Voraussetzung:
eine aktuelle SP-Version (ab 3.0) die das Anlegen von Händlern erlaubt.

1) Um eine mobile Shopversion zu erstellen, muss ein neuer Subcatalog (z.B. "Mobile") angelegt werden.
2) einen Händler anlegen und diesem den Mobile-Subcat zuordnen.
3) Für alle im Mobile-Subcat sichtbaren Seiten muss einmalig eine eigene Mobile-Vorlage erstellt und diese eingetragen werden.

Wie wir das ja von ShopPilot gewohnt sind, können die Mobile-Templates vollkommen frei gestaltet werden.
Es sind jedoch ein paar Besonderheiten zu beachten:

Die mobile-Templates werden mit  jQuery Mobile  erstellt
Dazu müssen diese Dateien im head-Bereich eingebunden werden

Code [Auswählen]
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.css" />
<script src="http://code.jquery.com/jquery-1.6.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.js"></script>

Die erste Zeile macht das Stylesheet von jQuery Mobile verfügbar, die beiden anderen liefern die Javascripts.

Um die vorgefertigten Stylesheet bei Bedarf überschreiben zu können, braucht man noch eine eigene mobile.css

<link rel="stylesheet"  href="ihrpfad/mobile.css" />

Hier gleich eine der Besonderheiten die beachten werden muss:
Pfade dürfen nicht mit "../" (wie es sonst üblich ist) angegeben werden sondern es wird immer der absolute Pfad erwartet.

Dafür gibt es einen kleinen ssp-Code
<!--spmacro:module(lib)
sub base {
   my $base = $ssp::catalog_abs;
   main::mprint ($base);
}
-->

und so können alle Links dann statt mit
../irgendwas
mit
__lib::base__/irgendwas
ausgegeben werden

(funktioniert online und auch lokal beim testen)

im Beispiel also
<link rel="stylesheet"  href="__lib::base__/css/mobile.css" />

Der Aufbau einer Mobile-Seite schaut so aus:

Code [Auswählen]
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>MOBILE Testshop</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.css" />
<script src="http://code.jquery.com/jquery-1.6.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.js"></script>

<link rel="stylesheet"  href="__lib::base__/css/mobile.css" />

<div data-role="page" id="page">

    <div data-role="header" id="header">
    </div>
    <div data-role="navbar" id="navbar">
    </div>

    <div data-role="content" id="content">
    </div>

    <div data-role="footer" id="footer">
    </div>          

</div>
</body>
</html>

Im Beispiel Demoshop shop2_mobile werden für den Header und Footer ebenfalls globale Dateien verwendet die per

<!--spmacro:include(html_mobile/mobile_header.html)-->
## hier nur der individuelle Seiteninhalt
<!--spmacro:include(html_mobile/mobile_footer.html)-->   

eingebunden wird.

Der Seiteninhalt kann beliebig gestaltet werden.
Es kann HTML5 oder aber auch HTML4 sogar mit "altertümlichen" Tabellen verwendet werden.

Im Demoshop finden Sie Beispielseiten im html_mobile Ordner
mobile.css (kann natürlich beliebig angepasst werden) im css-Ordner
und ein paar spezielle ssp-Scripte die hier verwendet werden im Ordner "scripts" mobile.ipl die global für alle Seiten in mobile_header.html eingebunden wird.

Die Mobile-Seiten sind auch für Mehrsprachigkeit vorbereitet
Die zusätzlichen - *nur* im Mobile-Subcat verwendeten - Identifer habe ich in language.ipl unter

#######################################################################################################################
### nur für Mobile-Templates
#######################################################################################################################

eingetragen.

Weiters zu beachten:
in deutsch.isl bitte darauf achten, dass alle Umlaute codiert sind
ä - &auml;
ö - &ouml;
usw. damit diese korrekt ausgegeben werden

werden auch Varianten angeboten, MUSS "pagetyp 1" verwendet werden!
= Artikel dürfen nicht mit JS in den WK gelegt werden!
(__listvar__  funktioniert z.B. auf den mobile-Seiten nicht)

Wer sich näher mit jQuery-Mobile beschäftigen möchte, findet hier eine ausführliche Dokumentation
http://jquerymobile.com/demos/1.0b2/
bzw. einfach mal nach "jQuery Mobile" googeln - gibt dazu schon jede Menge Info


Der Demoshop Shop2_mobile kann von allen SP-usern mit gültigem Servicevertrag kostenlos angefordert werden.
mfG
dobra

dobra

#1
September 03, 2011, 08:46:18
Hallo,

hier mal zwei produktive Mobile-Shopversionen mit ShopPilot erstellt:





www.woll-insel.mobi

         


www.wolle-online.mobi		         

Tests und Kommentare sehr willkommen ;)
mfG
dobra

jg

#2
September 12, 2011, 14:59:19 Last Edit: September 12, 2011, 15:09:31 by jg
Hallo Dobra,

ich hab mal auf www.woll-insel.mobi getestet... was mir so auf die Schnelle auffällt:
- Menü unten im iPhone halte ich für etwas zu schmal (Home, suchen, WK, Kontakt, Shopinfo),
da tippt man schnell mal auf das darunter liegende iPhone-Menü. Da es eh scrollt,
könnte es ruhig bissel mehr height bekommen. ;)
- Suchergebnis: die 'weiteren Seiten(quadrate)' unten wären größer angenehmer zum Tippen
- wenn ich im WK als Lieferzone DE auswähle gehts leider nicht mehr weiter,
mehrmals versucht oder ich hab was übersehen... :/

Ansonsten finde ich deinen Beitrag wie immer Spitze und natürlich auch die Umsetzung.
Ich halte Mobile-Designs ebenfalls für seeehr wichtig (übrigens ggf. auch eigene Apps).
Wer einmal mit nem Smartphone gearbeitet hat, will glaube nicht mehr zurück...
Aber wer weiß, ob die Rohstoffe überhaupt für alle reichen...  ;D
Danke für die Mühe die du dir gemacht hast! Will auch haben! ;)

Grüße, jg
--
www.schmuckzone.de

dobra

#3
September 12, 2011, 15:23:44
Hallo jg

wenn Du willst, schicke ich Dir den Demoshop mit mobile-Version per mail.
Da hast Du mal ein paar Beispiel-Vorlagen und für Deinen Programmierer ist es bestimmt kein Problem da was zu bauen  ;)

Zitat- wenn ich im WK als Lieferzone DE auswähle gehts leider nicht mehr weiter,
mehrmals versucht oder ich hab was übersehen... :/

hmmm....  habe es gerade nochmal mit meinem Galaxy S2 (Android) getestet - funktioniert wie es soll
und bei hop hat's am iPhone auch funktioniert...

Der Bestellablauf ist aber nur in meinem Shop problematisch da ich Session-Cookies verwende - mit Session-IDs gibt's da keinerlei Konflikte!

Die Navileiste und die "weiteren Seiten" Buttons schau ich mir nochmal an - habe da eigentlich keine Probleme aber mit iPhone konnte ich das auch leider noch nicht selber testen.
Aber Danke für den Hinweis.
mfG
dobra

jg

#4
September 12, 2011, 15:35:55
Vllt liegst mit dem WK daran, dass kein Reload nach der Lieferzone kommt?
Hier kannst testen -> http://www.testiphone.com/
Dann weiß ich auch nicht, wie ich mich als 'Kunde' in deinem MobiShop anmelde...  ???
Demo-Shop nehme ich gern und ich kriegs mit etwas mehr Zeit sicher auch noch hin... ^^
jg
--
www.schmuckzone.de

dobra

#5
September 12, 2011, 15:46:08
Danke für den Link zum Simulator
Habe den gleich getestet und auch da konnte ich Lieferzone und Zahlart korrekt wählen ....
nur mal ne dumme Frage: hast Du Cokkies aktiviert?
ohne Cookies funktionieren alle meine Shopprojekte nicht.

Demoshop kommt Abend - habe hier im Geschäft nur "meine" Testversion ;)

Anmeldung (= Kundenbereich) habe ich in der mobile-Version (noch) nicht eingebaut.
mfG
dobra

jg

#6
September 12, 2011, 16:04:38
Cookies im Safari-Browser aufm iPhone sind aktiviert, auch JS.
Die Lieferzone kann ich noch auswählen, dann kommt kein Reload
und somit kein Dropdown für die Zahlart.

Mit Opera-Mini gehts übrigens. Nachtrag: Allerdings sehe ich dort
über dem Menü unten eine volle Display-Höhe nen weißen Bereich.
jg
--
www.schmuckzone.de

admin

#7
September 12, 2011, 17:00:26
Hallo,

der Iphone  Emulator scheint nicht richtig zu funktionieren  - jedenfalls habe ich gerade noch mal "wolle-online" mit dem iphone 3Gs getestet,
anders als beim Emulator behalte ich  die Einstellungen für Lieferzone und Zahlungsart.

Gruss hop
Drucken
Nach oben Seiten1
User actions