WordPress for iPhone : ne pas confondre l’admin et l’internaute !

WP vient juste d’annoncer la sortie de WordPress for iPhone 2 qui est dispo sur l’App Store.
Comme son nom ne l’indique pas « WordPress for iPhone », cette application sortie en version 2 permet seulement d’éditer élégamment et agréablement son blog de son iPhone.
Ne pas confondre le versant de l’admin (éditeur et auteurs) et le côté l’internaute qui visite le site ou le blog.
Que faire donc pour la présentation (le thème) du site ?
Il existe plusieurs choix :

  1. – laisser son thème tel qu’il est. S’il est bien fait, le safari d’iphone va bien se comporter mais la navigation pas toujours aisée si les liens sont visiblement petits.
  2. – utiliser des thèmes et outils qui font faire des traductions automatiques de look – pas très personnalisé !
  3. – utiliser un sélecteur automatique de thème qui détecte automatiquement le navigateur classique ou d’un mobile comme l’iPhone.

C’est cette troisième solution que xiligroup a choisi. On peut ainsi personnaliser de façon très pointue la navigation sur iPhone et tirer partie des qualités css et javascript de Safari. Avec l’extension xilitheme-select, il est ainsi possible d’ajouter au thème courant un thème spécifique iPhone.
Avec votre iPhone (iPod Touch) vous pouvez le voir (et naviguer) sur ce site ou sur le site dev.xiligroup.com.
Cette approche est très pratique pour tout webmestre.
Si vous le souhaitez, contactez-nous pour des solutions et services personnalisés.
Pour les questions concernant le support, utilisez le forum.
M.

WordPress for iphone: putting into practice…

We’are just informed by WP that WordPress for iPhone 2 is now available on the App Store.
Caution: Admin’s side is not visitor’s side of a website… This application embedded in your iPhone (or iPod Touch) provides a cool way to admin (for editor and authors) your blog or your CMS. (Posts, comments, photos,…). A right name could be « Admin WordPress with iPhone » !
On the visitor’s side, you can leave the current theme as is (iphone-safari browser is efficient). But, far better, you can also use some plugins providing automatic theme transform (look and feel) or automatic selection between a current theme and a specific theme created by you. This selection is the purpose of xilitheme-select plugin. For support questions, use the forum.
Here, on xiliphone.mobi, we test some new features and we present case studies.

M.

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

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

How to prepare a WPSC shop to be iPhone (iPod Touch) compatible ? [updated]

1) Verify that your WP site has a current theme (for all browsers) and a theme for iPhone and if the xilitheme-select plugin is installed and activated.

2) To introduce (for webmaster) :

WPSC is a plugin that install the « shop » in a page (not a post) and subpage. iPhone module will use this feature to include a special template for these ‘shop’ pages. In the iTouch demo, the Template Name : mobile-shoppage is inserted in the top of the file page-shop.php in the theme. (see WP Page codex about template)

3) To preparing

If your current theme (for default browsers), create a template page by duplication the page.php or create a new one with a Template Name

After go in the admin UI and select this Template for all the pages of the shop.

– it is very important that the Template Name must be the same in the template file in the current theme and in the « itouch » theme folder.
So when WP detect the iPhone AND the shop pages, it will deliver an optimized UI.

4) Themes in WPSC :

WPSC plugin has his own themes folder – It is the look of the shop include in the pages of the shop in current folders.
iPhone Module (in Gold Cart) has also his themes folder containing « look » sent especially to iPhone / IPod browser.

Next post will present how to personalize a shop by modifying the default delivered template

FAQ

Why the iPhone kit for Gold-Cart of WPSC is not plug and play ?

Each shop must have its own personality. You have to adapt the style (.css) and the logo and the way how the shop in implemented in your site.

In this period, the software of WPSC plugin is constantly changing. (From RC1 to a stable release- RC3 Dec 8th).

We offer support for the first subscriber.

What to do in pages created by WPSC plugin in the site ?

These pages contain shortcodes ‘productspage’ .

To add the dynamic menu at the end of the pages as presented in iPhone / iPod touch screen add just after it the shortcode ‘xili_wpsc4touchnav’.

The result in content is ‘productspage’ ‘xili_wpsc4touchnav’ (replace ‘ by [ or ])

Please note that WPSC shortcode is not a real shortcode as documented in WP codex because it must be always the first of the page content.

Don’t forget also to verify that the choice of template page is adequate.

Le plugin xilitheme-select est dispo

eshop admin
Le plugin
xilitheme-select permet de détecter quel navigateur est utilisé par l’internaute. Si c’est un iPhone ou un iPod Touch, il délivre un ensemble d’informations afin que le look et l’interface soit totalement adapté.
Le thème
A titre d’exemple, le plug-in est livré avec un thème spécifique pour l’iPhone.
Les spécificités pour l’iphone :
Le thème est compatible (et aussi la boutique) pour les utilisateurs d’iPhone ou d’iPod Touch. Il est compatible avec le plug-in e-Commerce (WPSC) de instinct.nz.
The demo shop F2&V (Fruits Flowers and Vegetables) is here.

La compatibilité
A ce jour, le plugin et le thème sont compatibles WordPress 2.6.x.

Le futur
Le plugin détectera non seulement les mobiles type iPhone mais les autres leaders du marché.