Für mobile Endgeräte stellt Magento ein iPhone  Optimized Theme zur Verfügung. Installiert man sich das Theme kann man über Regeln eine automatische Erkennung von mobilen Endgeräten erreichen. Nur ist es in den meisten Fällen so, dass man für das iPhone eine optimierte Artikelgruppen-Struktur benötigt. Wenn man die gleichen Artikelgrupen verwendet, kann es bei langen und verschachtelten Artikelgruppenstrukturen sehr schnell unübersichtlich werden. Zudem sollte man die Produktauswahl für Mobilgeräte optimieren.

Wir können das erreichen, indem wir für Mobilgeräte einen eigenen Store einrichten. Nun haben wir die  Problematik, dass über eine Regeldefinition der Store und das iPhone Theme  nicht automatisch gewechselt werden können.

Meine Idee – in der index.php ein Script zur Erkennung der mobilen Endgeräte über den User-Agent integrieren. Je nach User-Agent wird dann der entsprechende Store aufgerufen.

Umsetzung

Schritt 1:  iPhone Theme installieren. (http://www.magentocommerce.com/extension/303/iphone-theme)

iphone_theme_thumb

Schritt 2:  Anlegen einer zusätzlichen Root-Kategorie.

iphone_store_01

Schritt 3:  Anlegen einer zusätzlichen Mobile-Website. (System->Store verwalten)
iphone_store_02

Schritt 4:  Anlegen eines zusätzlichen Mobile-Stores. (System->Store verwalten)
iphone_store_02

Schritt 5:  Anlegen einer zusätzlichen Mobile-View. (System->Store verwalten)
iphone_store_03

Schritt 6:  Store-View konfigurieren
Gehen Sie im Backend zu System->Konfiguration->Gestaltung->Themes und wählen Sie als Aktueller Konfig.-Bereich Mobile Store->mobile aus.
Tragen Sie in Vorlagen, Skin (Bilder/CSS), Layout und Standard iphone wie im nächsten Screenshot ein.
iphone_store_05

Nun müssen Sie unter CMS->Seiten verwalten noch eine Home-Site definieren. Verknüpfen Sie über Katalog->Produkte verwalten einige Produkte mit den Mobile-Kategorien und dem Mobile-Store.

Schritt 7: Script zur Erkennung mobiler Endgeräte erstellen.

function check_mobile() { // ©2009 by TMEDIA cross communications, <a href="http://www.tmedia.de">www.tmedia.de</a> 
 $agents = array(  // hier alle gewünschten Mobilgeräte eintragen 
 'Windows CE', 'Pocket', '<SPAN class=hilite>Mobile</SPAN>',    
 'Portable', 'Smartphone', 'SDA', 'PDA', 'Handheld', 'Symbian',    
 'WAP', 'Palm', 'Avantgo', 'cHTML', 'BlackBerry', 'Opera Mini',    
 'Nokia', 'PSP', 'iPhone'   
 );

 // Browserkennung 
 for ($i=0; $i<count($agents); $i++) {    
 if ( isset($_SERVER["HTTP_USER_AGENT"]) && strpos($_SERVER["HTTP_USER_AGENT"], $agents[$i]) !== false )      
 return true;  
 } 
 return false;
}

Schritt 8: check_mobile und Abfrage zur Erkennung mobiler Geräte in die index.php integrieren.

<?php
/**
 * Magento
 *
 * NOTICE OF LICENSE
 *
 * This source file is subject to the Open Software License (OSL 3.0)
 * that is bundled with this package in the file LICENSE.txt.
 * It is also available through the world-wide-web at this URL:
 * <a href="http://opensource.org/licenses/osl-3.0.php">http://opensource.org/licenses/osl-3.0.php</a>
 * If you did not receive a copy of the license and are unable to
 * obtain it through the world-wide-web, please send an email
 * to <a href="mailto:license@magentocommerce.com">license@magentocommerce.com</a> so we can send you a copy immediately.
 *
 * DISCLAIMER
 *
 * Do not edit or add to this file if you wish to upgrade Magento to newer
 * versions in the future. If you wish to customize Magento for your
 * needs please refer to <a href="http://www.magentocommerce.com">http://www.magentocommerce.com</a> for more information.
 *
 * @category   Mage
 * @package    Mage
 * @copyright  Copyright (c) 2008 Irubin Consulting Inc. DBA Varien (<a href="http://www.varien.com">http://www.varien.com</a>)
 * @license    <a href="http://opensource.org/licenses/osl-3.0.php">http://opensource.org/licenses/osl-3.0.php</a>  Open Software License (OSL 3.0)
 */ /******** check_mobile BEGIN ***********************************************************/
function check_mobile() { // ©2009 by TMEDIA cross communications, <a href="http://www.tmedia.de">www.tmedia.de</a> 
 $agents = array(  // hier alle gewünschten Mobilgeräte eintragen 
 'Windows CE', 'Pocket', '<SPAN class=hilite>Mobile</SPAN>',    
 'Portable', 'Smartphone', 'SDA',    
 'PDA', 'Handheld', 'Symbian',    
 'WAP', 'Palm', 'Avantgo',    
 'cHTML', 'BlackBerry', 'Opera Mini',    
 'Nokia', 'PSP', 
 'iPhone'   
 );

 // Browserkennung 
 for ($i=0; $i<count($agents); $i++) {    
 if ( isset($_SERVER["HTTP_USER_AGENT"]) && strpos($_SERVER["HTTP_USER_AGENT"], $agents[$i]) !== false )      
 return true;  
 } 
 return false;
}
/******** check_mobile END ***********************************************************/  if (version_compare(phpversion(), '5.2.0', '<')===true) {
 echo  '
<div style="font:12px/1.35em arial, helvetica, sans-serif;">
<div style="margin:0 0 25px 0; border-bottom:1px solid #ccc;">
<h3 style="margin:0; font-size:1.7em; font-weight:normal; text-transform:none; text-align:left; color:#2f2f2f;">Whoops, it looks like you have an invalid PHP version.</h3>
</div>
Magento supports PHP 5.2.0 or newer. <a href="<a href="http://www.magentocommerce.com/install">http://www.magentocommerce.com/install</a>" target="">Find out</a> how to install</a> Magento using PHP-CGI as a work-around.</div>
';
 exit;
} $mageFilename = 'app/Mage.php'; if (!file_exists($mageFilename)) {
 if (is_dir('downloader')) {
 header("Location: downloader");
 } else {
 echo $mageFilename." was not found";
 }
 exit;
} require_once $mageFilename; #Varien_Profiler::enable(); #Mage::setIsDeveloperMode(true); #ini_set('display_errors', 1); umask(0);  
if (check_mobile()) {
//  echo 'mobile';
 Mage::run('mobile','website');
} else {
 Mage::run();
}

Wenn Sie nun Ihren Shop auf einem mobilen Endgerät aufrufen wird Ihre Mobile-Website angezeigt. Zum Testen können Sie im Firefox das Add-On User Agent Switcher verwenden. Tragen Sie nach der Installation einen User-Agent für das iPhone ein.

iphone_store_06

Ich wünsche viel Spaß mit Ihrem Magento auf dem iPhone.