Gerne - hier die Anleitung (bis zum aktuellen Stand) nochmal ausführlich am Stück:
Das Modul gibt bei:
http://www.shopgestalter.com/2009/03/xtcommerce-preisaktualisierung-bei-optionswechsel.htmlNach Anleitung einbauen, besteht aus Code-Änderungen und einem Javascript.
Ich habe das Javascript jedoch nicht wie angegeben in die general.js kopiert, sondern als eigenständiges Script unter dem Namen updateprodprice.js in den Ordner templates/meintemplate/javascript/ gespeichert und in der general.js unter dem Aufruf für die thickbox eingebunden mit:
<script src="<?php echo 'templates/'.CURRENT_TEMPLATE; ?>/javascript/updateprodprice.js" type="text/javascript"></script>
-> folgende Änderungen sind erforderlich, damit das Teil mit der modified läuft und korrekt rechnet:
1. Damit es überhaupt was tut, muss das Script aufgerufen werden mit einem event in den Dateien im template im Ordner module/product_options/:
für
Radiobuttons in - product_options_selection.html folgenden Code
<td class="main">
{foreach key=key_data item=item_data from=$options_data.DATA}
<input type="radio" alt="{$item_data.PREFIX}|{$item_data.PRICE}" name="id[{$options_data.ID}]" value="{$item_data.ID}" onclick="update_products_price()" />
{$item_data.TEXT} {if $item_data.PRICE!=''}( {$item_data.PREFIX}{$item_data.PRICE} ){/if}<br />
ändern in: (hier sind die Änderungen aus der Modul-Anleitung oben schon drin, ausserdem ne Anpassung dass der Text hinter dem Radio-Button nicht mehr umgebrochen wird, sowie die Ergänzung, dass nur noch der erste Radio-Button vorausgewählt wird)
<td class="main" style="white-space:nowrap">
{foreach key=key_data name=key_data item=item_data from=$options_data.DATA}
<input type="radio" alt="{$item_data.PREFIX}|{$item_data.PRICE}" name="id[{$options_data.ID}]" value="{$item_data.ID}" onclick="update_products_price()" {if $smarty.foreach.key_data.first}checked="checked" {/if} />
{$item_data.TEXT} {if $item_data.PRICE!=''}( {$item_data.PREFIX}{$item_data.PRICE} ){/if}<br />
Für die Mehrfachauswahl (select-Felder) funktioniert das Ganze ähnlich mit der Datei:
product_options_dropdown.html - Hier muss der Code so geändert werden:
Original:
<select name="id[{$options_data.ID}]">
{foreach key=key_data item=item_data from=$options_data.DATA}
<option value="{$item_data.ID}">{$item_data.TEXT} {if $item_data.PRICE !='' }{$item_data.PREFIX} {$item_data.PRICE}{/if} </option>
Ändern in: (Auch hier sind die Änderungen der Modul-Anweisung oben schon drin)
<select name="id[{$options_data.ID}]" onchange="update_products_price();">
{foreach key=key_data item=item_data from=$options_data.DATA}
<option value="{$item_data.ID}" title="{$item_data.PREFIX}|{$item_data.PRICE}">{$item_data.TEXT} {if $item_data.PRICE !='' }{$item_data.PREFIX} {$item_data.PRICE}{/if} </option>
2. Da in der Modified-Version der Preis mit einem Ab versehen wird, sobald der Artikel Optionen hat beginnt der Preis nicht mehr mit einer Zahl. Mit diesem String kann das Java-Script nicht rechnen. Diese Anpassung ist aber eigentlich sinnvoll, da der Preis ja in den Angeboten mit Optionen die Ab-Kennzeichnung haben sollte
(Abmahngefahr). Erst auf der Detailseite kann man darauf verzichten, da das Script dort ja korrekt rechnet.
Die saubere Lösung wäre:
- entweder ein neues Smarty anlegen was statt dem Preis mit der Ab-Kennzeichnung einen formatierten Preis ohne Ab ausgibt und dieses statt {$PRODUCTS_PRICE} als Referenz für den Preis in der Detailseite product_info_v1.html verwenden.
- oder das Java-Script so ergänzen, dass vor der Preisberechnung das Ab vor der Zahl entfernt wird.
Für die erste Lösung hab ich zu wenig Ahnung davon, wo und wie das Smartie $products_price['formated'] erzeugt wird. (einfach $products_price['plain'] zu nehmen bringts auch nicht, da der Preis dann so ausgegeben würde: 9999.95 dazu noch ohne Währung)
- Zur zweiten Lösung bin ich noch nicht gekommen, da ist noch etwas Bastelarbeit notwendig.
Quick and really dirty workaround
nur um zu beweisen dass das Script auch funktioniert:
In der lang/german.php das Ab, (ca. Zeile 442 - define('FROM','Ab'); ) entfernen, dann funtioniert die Berechnung korrekt, aber damit entfernt man natürlich überall im Shop die Ab-Kennzeichnung...
3. Nun stolpert man darüber, dass Opera nicht korrekt rechnet, weil er diese Art der Ersetzung in Tabellen nicht mag und die Berechnung erst anzeigt, wenn das Fenster z.B. ein klein wenig vergrößert oder verkleinert wird. (rendering Bug)
Daher die product_info_v1.html für den Bereich der Optionen auf Tabellenfreies Layout umbauen:
Original:
<div id="productinfowrap">
<table><tr><td style="padding-right:20px;">
{if $PRODUCTS_IMAGE!=''}
<a title="{$PRODUCTS_NAME}" href="{$PRODUCTS_IMAGE|replace:"info_images":"popup_images"}" class="thickbox" rel="{$PRODUCTS_ID}"><img align="left" src="{$PRODUCTS_IMAGE}" alt="{$PRODUCTS_NAME}" class="productimage" /></a>
{if $PRODUCTS_POPUP_LINK!=''}<div class="hrlightgrey"></div><a href="{$PRODUCTS_POPUP_LINK}" onclick="window.open(this.href); return false;">{#text_zoom#}</a>{/if}
{/if}</td><td>
<div id="productinfopricewithimages">
<p class="productprice"><strong>{$PRODUCTS_PRICE}</strong></p>
<p class="taxandshippinginfo" style="white-space:nowrap">{$PRODUCTS_TAX_INFO}{if $PRODUCTS_SHIPPING_LINK}{$PRODUCTS_SHIPPING_LINK}{/if}</p>
{if $SHIPPING_NAME}<p class="shippingtime"><strong>{#text_shippingtime#}</strong>{if $SHIPPING_IMAGE}<img src="{$SHIPPING_IMAGE}" alt="{$SHIPPING_NAME}" />{/if} {$SHIPPING_NAME}</p>
{/if}
{if $PRODUCTS_VPE}
<div class="hrlightgrey"></div>{$PRODUCTS_VPE}{/if}
{if $MODULE_graduated_price !=''}<div class="hrlightgrey"></div>{$MODULE_graduated_price}{/if}
{if $PRODUCTS_DISCOUNT!=''}<div class="hrlightgrey"></div>{$PRODUCTS_DISCOUNT}{/if}
{if $PRODUCTS_FSK18=='true'}<div class="hrlightgrey"></div><img src="{$tpl_path}img/fsk18.gif" alt="" style="cursor:default" />{/if}
{if $PRODUCTS_MODEL!=''}<div class="hrlightgrey"></div>
<strong>{#model#}</strong> {$PRODUCTS_MODEL}{/if}
{if $PRODUCTS_URL != ''}
<div class="hrlightgrey"></div><div style="padding-top:5px;">{$PRODUCTS_URL}</div>
{/if} <br />
<div style="margin-top:10px"></div>
{$PRODUCTS_PRINT}
{if $PRODUCTS_DATE_AVIABLE != ''}<p>{$PRODUCTS_DATE_AVIABLE}</p>{/if}
</div>
<div style="clear:both;"></div>
</td></tr></table>
{if $MODULE_product_options !=''}
<div class="productoptions">{$MODULE_product_options}</div>{/if}
<div class="addtobasket">
<table border="0" cellspacing="0" cellpadding="2">
<tr>
<td style="width:100%; padding-right:5px;">{$ADD_QTY}</td>
<td>{$ADD_CART_BUTTON}</td>
</tr>
</table>
</div>
Ändern in: (Auch hier sind die Änderungen der Modul-Anleitung bereits drin):
<div id="productinfowrap">
<div style="padding-right:10px; float:left;">
{if $PRODUCTS_IMAGE!=''}
<a title="{$PRODUCTS_NAME}" href="{$PRODUCTS_IMAGE|replace:"info_images":"popup_images"}" class="thickbox" rel="{$PRODUCTS_ID}"><img align="left" src="{$PRODUCTS_IMAGE}" alt="{$PRODUCTS_NAME}" class="productimage" /></a>
{if $PRODUCTS_POPUP_LINK!=''}<div class="hrlightgrey"></div><a href="{$PRODUCTS_POPUP_LINK}" onclick="window.open(this.href); return false;">{#text_zoom#}</a>{/if}
{/if}</div>
<div id="productinfopricewithimages" style="padding-right:20px; float:left;">
<!-- start änderung für Preisanpassung-->
<p class="productprice"><strong><span id="price">{$PRODUCTS_PRICE}</span>
<input type="hidden" id="base_price" value="{$PRODUCTS_BASE_PRICE}" /></strong></p>
<!-- ende änderung für Preisanpassung-->
<p class="taxandshippinginfo" style="white-space:nowrap">{$PRODUCTS_TAX_INFO}<br />{if $PRODUCTS_SHIPPING_LINK}{$PRODUCTS_SHIPPING_LINK}{/if}</p>
{if $SHIPPING_NAME}<p class="shippingtime"><strong>{#text_shippingtime#}</strong>{if $SHIPPING_IMAGE}<img src="{$SHIPPING_IMAGE}" alt="{$SHIPPING_NAME}" />{/if} {$SHIPPING_NAME}</p>
{/if}
{if $PRODUCTS_VPE}
<div class="hrlightgrey"></div>{$PRODUCTS_VPE}{/if}
{if $MODULE_graduated_price !=''}<div class="hrlightgrey"></div>{$MODULE_graduated_price}{/if}
{if $PRODUCTS_DISCOUNT!=''}<div class="hrlightgrey"></div>{$PRODUCTS_DISCOUNT}{/if}
{if $PRODUCTS_FSK18=='true'}<div class="hrlightgrey"></div><img src="{$tpl_path}img/fsk18.gif" alt="" style="cursor:default" />{/if}
{if $PRODUCTS_MODEL!=''}<div class="hrlightgrey"></div>
<strong>{#model#}</strong> {$PRODUCTS_MODEL}{/if}
{if $PRODUCTS_URL != ''}
<div class="hrlightgrey"></div><div style="padding-top:5px;">{$PRODUCTS_URL}</div>
{/if} <br />
<div style="margin-top:10px"></div>
{$PRODUCTS_PRINT}
{if $PRODUCTS_DATE_AVIABLE != ''}<p>{$PRODUCTS_DATE_AVIABLE}</p>{/if}
</div>
<div style=" float:right;">
{if $MODULE_product_options !=''}
<div class="productoptions">{$MODULE_product_options}</div>{/if}
</div>
<div style="clear:both;"></div>
</div>
<div class="addtobasket" style="width:100%; float:right;">
<table border="0" cellspacing="0" cellpadding="2">
<tr>
<td style="width:100%; padding-right:5px;">{$ADD_QTY}</td>
<td>{$ADD_CART_BUTTON}</td>
</tr>
</table>
</div>
Nun rechnet auch der Opera sofort. Dieses Layout setzt auch gleich die Optionen rechts neben das Artikelbild und die Preisauflistung.
Achtung: Dies funktioniert in meinem Template, weil meine Boxen schmäler und der Content dafür breiter ist. In einen Standard-Template wird dies dazu führen, dass die Optionen rechtsbündig unterhalb von Bild und Preis stehen werden. Das kann ja jeder an sein Template anpassen. Wer will, kann den neuen Divs auch eine ID oder besser eine class geben und diese im Stylesheet formatieren. Dann können die hier angegebenen Styles für diese Divs entfernt werden.
So, das ist aktueller Stand.
To Do Liste:- Lösung des Ab-Problems
- Einbau einer Javascript Warnung bei ausgeschaltetem Javascript, wie in der Lösung von Christian richtigerweise eingebaut.
- Das Sperrgut Modul von Christian benötige ich nicht, aber für die dies brauchen empfiehlt sich der Einbau (s. den Download Seite 3)
Warum ich diese Lösung bevorzuge? Der Kunde erhält sofort den korrekt berechneten Preis. Ich finde es einfach eleganter, wenn der Kunde beim Klick auf den 'in den Warenkorb' Button den korrekten Preis oben sieht. Zudem funktioniert das auch mit mehreren Gruppen mit jeweils mehreren Optionen korrekt. Das Javascript rechnet auch mit Zuschlägen ab 1000 Euro korrekt, da das Problem mit der Preisformatierung durch zweifache Umformatierung des Preises (der tausender punkt ist die Fehlerquelle) gelöst wurde.
Im anhängenden Zip findet Ihr folgende Dateien -
Verwendung auf eigene Gefahr - Backup nicht vergessen:
- product_info_v1.html
- product_options_dropdown.html
- product_options_selection.html
Ach ja wer vorher sehen will wie's aussieht - hier der Link zu meinem Testshop:
http://www.guenstigerhandys.eu/xtcommerce/Handys/T-Mobile-G1-mit-Google-%238482%3B::2.htmlViel Spass beim Basteln, ach ja und ich könnte ne Rückmeldung brauchen wie es unter verschiedenen Versionen des IE funktioniert.
