WP e-commerce : how to prepare for iTouchShop module – step #1

prerequisites

WordPress 2.8.2

with plugin xilitheme-select and two themes (one for current browser, one for iPhone / iPod Touch safari)

WPEC 3.7
Gold Cart shop (latest release downloaded recently)

How to test the shop :

iPhone / iPod Touch
or a simulator on your Mac
or Safari 4.0.2 with developer option checked inside « Advanced » tab in preferences

Inside the theme(s) :

As you know WPEC is inserted inside the body of a page. So it is better to prepare a special page template for the shop (see codex). And if a template is named pageshop.php inside the theme for current browser, inside the theme for iPhone/iTouch, a file with the same name must here. Inside Page Edit, don’t forget to select the shop template. The look of this shop for iPhone is very specific including navigation features.

Inside the Gold Cart shop
(folder gold_cart_files in folder wp-content/uploads/wpsc/upgrades) put the touchShop folder (available soon). The theme of the shop must in the themes folder. The root file touchShopCore.php contains all the mecanisms to detect and to display when a mobile is running. This part works only if xilitheme-select plugin is active and if your licence Gold Cart is registered.

Next step : first install of the demo theme shipped with touchShop module

Whoooh : Tests with WPEC 3.7 rc and WP 2.8.1 begin…

After a long trip under stress inside the source of WP E-commerce plugin, this day, this demo website for iPhone / iPod touch is updated with the latest release of WordPress (2.8.1) and the lastest version of WPEC (3.7 rc1) of instinct.nz.
Now, we are ready to finalyze the kit to transform the plugin for delivering nice UI when your customers will visit you shop with touch mobile like iPhone or iPod touch.

It was long to arrive at this step because a big strom occurs inside the source of WP e-Commerce (previous WP Shopping Cart). A lot of new features, better code architecture but remaining annoying old lines of code… Instinct works hard…

Soon more info and don’t hesitate to contact us.

July 14th
M

Shopping ready for iPhone 3.0

Snapshot of TouchShop on OS 3.0
Snapshot of TouchShop on OS 3.0

The lastest Safari of iPhone OS 3.0 is more rigorous for CSS decoding. Here, css file is adapted and the touchShop is now again iPhone 3.0 compatible.

Due to delay of instinct.nz to deliver a compatible wp-e-commerce, the adaptation for WordPress 2.8 is on the roadmap in the next weeks.

Don’t hesitate to contact us to prepare your migration.

CAUTION : If you use WP-E-Commerce, don’t upgrade your site to WordPress 2.8 !

L’e-commerce dans la main : c’est possible !

[overflow]

La boutique en main
La boutique en main
Est-il possible avec le moteur WordPress et quelques plugins de réaliser une boutique qui sera dans la main de vos acheteurs ? Oui, voici quelques informations sur le kit (licence et service) proposé par xiliphone.mobi :
– L’interface optimisée pour l’iPhone et l’iPod Touch qui tire le maximum des potentialités du « webkit ».
– Des écrans clairs pour présenter les produits.
– Un panier lisible.
– Des additifs pour attirer l’attention pour des promotions ou prix spéciaux.
– …(same post in english here)[/overflow]

[overflow]

La liste
La liste
Un interface totalement adapté à l’iPhone
– pour une lisibilité optimum et une navigation très facile.
– Le maximum d’information (texte, illustration, prix,…).
– Et la possibilité de commander sans regarder la fiche détaillée de l’article par la présence du bouton « Ajouter au panier » inséré dans la liste.
– Un click sur la photo ou le titre permet un accès à la fiche du produit.
– Une mise en page des images optimisées pour un maximum d’informations.
– …[/overflow]

[overflow]

La fiche article
La fiche article
Un écran par produit pour des informations claires.
Une fiche article détaillée et claire :
Sont affichées les informations suivantes :
– Le nom de la boutique et son logo.
– Le produit et son prix.
– Une photo.
– Une mention spéciale optionnelle en surimpression translucide.
– Le descriptif.
– Le rayon (la catégorie) où est rangé le produit (on peut ainsi revenir aisément à la liste.)
– Un ajout facile au panier
– Un retour aisé à l’entrée de la boutique.
– Un accès direct au panier.
– …
[/overflow]

[overflow]

Le panier
Le panier
Un récapitulatif du contenu du panier lisible :

– Les produits sont listés avec les quantités.
– Les totaux contiennent la TVA si nécessaire.
– Les mentions pour la commande sont affichées sous le contenu du panier.
– La possibilité de changer les quantités avant de commander.
– En option, il sera possible d’avoir une synthèse « visuelle » du contenu du panier.[/overflow]

[overflow]

Mention prix spécial
Mention prix spécial
La transformation graphique des mentions « prix spécial » que fournit le module WPSC.
– L’ancien prix est barré !
– Le nouveau prix est indiqué en clair.
– La mention prix spécial est ajouté en biais.
– Les informations complémentaires sont sous l’image du produit
– …[/overflow]

[overflow]

Liste enrichie
Liste enrichie
Les mentions spéciales apparaissent dès l’affiche de la liste :
– La mention prix spécial en sur-impression sur fond translucide.
– L’ancien prix reste visible à côté du nouveau prix écrit lisiblement.
– L’information quant à l’existance de variantes de commande.
– L’étoile que l’on peut cliquer pour voir d’autres informations.

[/overflow]

Toutes ces spécifications sont consultables sur la boutique DemoShop F2V ici.

Le look de la boutique est bien évidemment différent si elle est visitée avec un navigateur courant (comme Firefox) ou avec l’iPhone. Certaines caractéristiques n’apparaitront que sur les iPhones (iPod Touch) avec l’OS 2.x.

[overflow]

xiliphone.mobi
xiliphone.mobi
A gauche, voici le look de cet article tel qu’un utilisateur d’iPhone peut le consulter.
[/overflow]
 

L’équipe xiligroup est à votre disposition pour mettre le look de la boutique en harmonie avec la charte d’identité de votre commerce.

MS 081119

e-shopping with iPhone in your hand !

[overflow]

La boutique en main
A shop in hand
Is it possible with CMS WordPress to build a e-shop that is in the hand of the clients ? Yes ! Below here some infos about offer xiliphone.mobi :
– Optimum User Interface for iPhone or l’iPod Touch with the « webkit » features.
– Large screen to present products.
– A readable Cart.
– Addons to promotion or special price campaigns.
– …[/overflow]

[overflow]

La liste
La liste
UI tailored to the iPhone
– For optimum readability, usability and very easy browsing.
– The maximum information (text, illustration, price ,…).
– And one click ordering without looking at the details of the article by the presence of the button « Add to Cart » inserted in the list.
– A click on the photo or the title allows access to the product file.
– A layout images optimized for maximum information.
– …[/overflow]

[overflow]

La fiche article
La fiche article
A screen product for clearer information.
A sheet article detailed and clear:
The following informations are displayed :
– The name of the shop and its logo.
– The product and its price.
– A photo.
– A special optional translucent overlay.
– The description.
– The group (category) where the product is stored (and you can easily return the list.)
– An addition to the easy cart
– A return to the home of the shop.
– Direct access to the cart.
– …
[/overflow]

[overflow]

Le panier
Le panier
A readable summary of the contents of the cart:

– Products are listed with quantities.
– The totals include VAT if necessary.
– The entries for the command are displayed in your cart.
– The ability to change quantities before ordering.
– As an option, it will be possible to have a synthesis « visual content »of the cart.[/overflow]

[overflow]

Mention prix spécial
Mention prix spécial
The graphic transformation of « special » module price that provides WPSC.
– The old price strikethrough!
– The new price is stated in clear.
– The mention special prize is added bias.
– The information is under the product image
– …[/overflow]

[overflow]

Liste enrichie
Liste enrichie
The markers appear at display of the list :
– The reference price on special printing on a translucent.
– The old price remains visible next to the new price written widely.
– Information about the existence of alternatives order.
– The star that you can click to see more information.

[/overflow]

All these specifications about the shop are available: DemoShop F2V here .

The look of the shop is obviously different if it is visited with a current browser (like Firefox) or with the iPhone. Some features appear on iPhones (iPod Touch) with the OS 2.x.

[overflow]

xiliphone.mobi
xiliphone.mobi
On the left, this is the look of this article as an iPhone user can view it.
[/overflow]

The team xiligroup is available to design the look of your shop in harmony with the design of your business identity. Please use contact form.

MS 081119