Na gut, dann wollen wir mal.
Was jetzt kommt, ist aus verschiedenen Modulteilen zusammengetragen und vielleicht nicht unbedingt die schönste oder eleganteste art etwas zu Programmieren oder zu verbauen, aber es funktioniert einwandfrei und erfüllt deine Forderungen und Wünsche.
Es ist allerdings einiges zu tun und ich empfehle dir DRINGEND ein BackUp deines Systems zu erstellen, bevor du anfängst.
Was tun wir?
Wir verwenden die zusammengetragenen Module Attribut Price Updater von web28 und h h h.
Anschliessend modifizieren wir die Produkt- Seite, den Warenkorb und die Checkout confirmation.
Das ganze setzt voraus, dass wie du bereits erwähnt hast, die Attribute nach dem Schema "100 Stück" oder " 15 kilo" angelegt sind. Also Anzahl und Einheit. Es wird danach nicht mehr die Attribut-Kategorie Dargestellt werden.
Das Ergebniss soll dann so aussehen:
[ Für Gäste sind keine Dateianhänge sichtbar ]
Der Warenkorb sieht dann so aus:
[ Für Gäste sind keine Dateianhänge sichtbar ]
Checkout-Confirmation ähnlich.
Fangen wir an:
Zuerst BACKUP!
öffne die shop/includes/header.php
Suche
</head>
und füge VORHER ein:
<!--BOF ATTRIBUTE PRICE UPDATER-->
<?php if (strstr($PHP_SELF, FILENAME_PRODUCT_INFO
)) { echo ('<link rel="stylesheet" type="text/css" href="' . 'templates/'.CURRENT_TEMPLATE
.'/apu.css' . '" />'); require('includes/attribute_price_updater.js.php');}?><!--EOF ATTRIBUTE PRICE UPDATER-->
dann öffne shop/includes/modules/product_attributes.php
Suche:
while ($products_options_name = xtc_db_fetch_array($products_options_name_query,true)) {
und füge VORHER ein:
//BOF ATTRIBUTE PRICE UPDATER
$apu_js_var ='';
$apu_js_prices= '';
$curr = $xtPrice->currencies[$xtPrice->actualCurr];
$decimal_places = $curr['decimal_places']; //needed for round
$apu_js_curr = "var decimalPlaces=" . $decimal_places . "; \n";
$apu_js_curr.= "var decimalPoint ='" . $curr['decimal_point'] ."'; \n";
$apu_js_curr.= "var thousandPoint ='" . $curr['thousands_point'] ."'; \n";
$apu_js_curr.= "var currLeft ='" . $curr['symbol_left'] . "'; \n";
$apu_js_curr.= "var currRight ='" . $curr['symbol_right'] . "'; \n";
$apu_js_init = "var isPriceUpdater= 0; \n";
//EOF ATTRIBUTE PRICE UPDATER
öffne shop/templates/(dein template)/product_info_tabs_v1.html
suche:
{$PRODUCTS_PRICE}
und ersetze es gegen:
<div id="apuProductPrice">
</div>
suche:
{$ADD_QTY}
und ersetze es gegen:
{$ADD_QTY|replace
:'value':'style="display:none;" value'}<div id
="productAttributes">{foreach name
=outer item
=options_data from
=$options} <select name
="id[{$options_data.ID}]" id
="{$options_data.ID}"> {foreach key=key_data item
=item_data from
=$options_data.DATA
} <option value
="{$item_data.ID}"> 
;{$item_data.TEXT
} 
; </option
> {/foreach}</select
> {/foreach}</div
> öffne shop/templates/(dein Template)/module/order_details.html
suche:
<tr class="headerrow">
<td class="left">{#text_qty#}</td>
<td class="left">{#text_article#}</td>
<td class="right">{#text_single#}</td>
<td class="right">{#text_total#}</td>
<td class="center">{#text_remove#}</td>
</tr>
und ersetzte es mit:
<tr class="headerrow">
<td class="left">{#text_auswahl_neu#}</td>
<td class="left">{#text_article#}</td>
<td class="left"></td>
<td class="right">{#text_total#}</td>
<td class="center">{#text_remove#}</td>
</tr>
suche:
<tr
class="{cycle values="contentrow1
,contentrow2
"}"> <td
class="quantity">{$module_data.PRODUCTS_QTY
}</td
> <td
class="productname"> <strong
><a href
="{$module_data.PRODUCTS_LINK}">{$module_data.PRODUCTS_NAME
}</a
></strong
> {if $module_data.ATTRIBUTES
!=''} <table
class="productattributes" width
="100%" border
="0" cellspacing
="0" cellpadding
="0"> {foreach key=key_data item
=item_data from
=$module_data.ATTRIBUTES
} <tr
> <td
class="attribute"><strong
>{$item_data.NAME
}:</strong
></td
> <td
class="value">{$item_data.VALUE_NAME
}</td
> </tr
> {/foreach} </table
> {/if}</td
> <td
class="singleprice">{$module_data.PRODUCTS_SINGLE_PRICE
}</td
> und ersetze es mit:
<tr
class="{cycle values="contentrow1
,contentrow2
"}"> <td
class="quantity">{foreach key=key_data item
=item_data from
=$module_data.ATTRIBUTES
} {$item_data.VALUE_NAME
} {/foreach}</td
> <td
class="productname"> <strong
><a href
="{$module_data.PRODUCTS_LINK}">{$module_data.PRODUCTS_NAME
}</a
></strong
> </td
> <td
class="singleprice"></td
> öffne shop/templates/(dein Template)/module/checkout_confirmation.html
suche:
<table width
="100%" border
="0" cellspacing
="0" cellpadding
="0"> <tr
class="headerrow"> <td
class="main_header" style
="width:50px" align
="left" valign
="top"><b
>{$smarty.const.HEADER_QTY
}</b
></td
> <td
class="main_header" style
="padding-left:90px;" align
="left" valign
="top"><b
>{$smarty.const.HEADER_ARTICLE
}</b
></td
> <td
class="main_header" style
="width:100px;" align
="right" valign
="top"><b
>{$smarty.const.HEADER_SINGLE
}</b
></td
> <td
class="main_header" style
="width:100px;" align
="right" valign
="top"><b
>{$smarty.const.HEADER_TOTAL
}</b
></td
> </tr
> {foreach name
=aussen item
=data from
=$PRODUCTS_ARRAY} <tr
> <td
class="main_row" align
="left" valign
="top">{$data.qty
}</td
> <td
class="main_row" align
="left" valign
="top"> {if $smarty.const.CHECKOUT_SHOW_PRODUCTS_IMAGES
== 'true'} <div style
="width:90px; float:left;">{$data.image
}</div
> {/if} {$data.link} {if $data.order_description
}<div
class="small">{$data.order_description
}</div
>{/if} {if $data.shipping_time
}<br
/><span
class="nobr small">{$smarty.const.SHIPPING_TIME
}{$data.shipping_time
}</span
>{/if} {foreach key=a_data item
=attrib_data from
=$data.attributes
} {if $attrib_data.value
!= ''}<br
/><span
class="nobr small"> 
;<i
> - {$attrib_data.option
} : {$attrib_data.value
}</i
></span
>{/if} {/foreach} </td
> und ersetze es mit:
<table width
="100%" border
="0" cellspacing
="0" cellpadding
="0"> <tr
class="headerrow"> <td
class="main_header" style
="width:50px" align
="left" valign
="top"><b
>{#text_auswahl_neu#}</b></td>
<td
class="main_header" style
="padding-left:90px;" align
="left" valign
="top"><b
>{$smarty.const.HEADER_ARTICLE
}</b
></td
> <td
class="main_header" style
="width:100px;" align
="right" valign
="top"><b
>{$smarty.const.HEADER_SINGLE
}</b
></td
> <td
class="main_header" style
="width:100px;" align
="right" valign
="top"><b
>{$smarty.const.HEADER_TOTAL
}</b
></td
> </tr
> {foreach name
=aussen item
=data from
=$PRODUCTS_ARRAY} <tr
> <td
class="main_row" align
="left" valign
="top">{foreach key=a_data item
=attrib_data from
=$data.attributes
} {if $attrib_data.value
!= ''}{$attrib_data.value
}{/if} {/foreach} </td
> <td
class="main_row" align
="left" valign
="top"> {if $smarty.const.CHECKOUT_SHOW_PRODUCTS_IMAGES
== 'true'} <div style
="width:90px; float:left;">{$data.image
}</div
> {/if} {$data.link} {if $data.order_description
}<div
class="small">{$data.order_description
}</div
>{/if} {if $data.shipping_time
}<br
/><span
class="nobr small">{$smarty.const.SHIPPING_TIME
}{$data.shipping_time
}</span
>{/if} </td
> öffne shop/lang/german/lang_german.conf (in den anderen Sprachen analog verfahren)
Füge jeweils in den Abschnitten
[shopping_cart]
und
[checkout_confirmation]
folgendes mit ein
text_auswahl_neu = 'Auswahl'
öffne shop/lang/german/german.php
suche:
?>
und füge vorher ein
define('UPDATER_PREFIX_TEXT', '');define('UPDATER_AFTER_TEXT', 'gesamt'); Was du in PREFIX_TEXT einträgst, erscheint VOR dem Preis, AFTER_TEXT NACH dem Preis.
öffne shop/templates/(dein Template)/javascript/jquery-ui.js
füge am ende folgendes ein:
/*
* jQuery UI Tabs 1.8.2
*
* Copyright (c) 2010 AUTHORS.txt (http://jqueryui.com/about)
* Dual licensed under the MIT (MIT-LICENSE.txt)
* and GPL (GPL-LICENSE.txt) licenses.
*
* http://docs.jquery.com/UI/Tabs
*
* Depends:
* jquery.ui.core.js
* jquery.ui.widget.js
*/
(function(d){function s(){return++u}function v(){return++w}var u=0,w=0;d.widget("ui.tabs",{options:{add:null,ajaxOptions:null,cache:false,cookie:null,collapsible:false,disable:null,disabled:[],enable:null,event:"click",fx:null,idPrefix:"ui-tabs-",load:null,panelTemplate:"<div></div>",remove:null,select:null,show:null,spinner:"<em>Loading…</em>",tabTemplate:'<li><a href="#{href}"><span>#{label}</span></a></li>'},_create:function(){this._tabify(true)},_setOption:function(c,e){if(c=="selected")this.options.collapsible&&
e==this.options.selected||this.select(e);else{this.options[c]=e;this._tabify()}},_tabId:function(c){return c.title&&c.title.replace(/\s/g,"_").replace(/[^A-Za-z0-9\-_:\.]/g,"")||this.options.idPrefix+s()},_sanitizeSelector:function(c){return c.replace(/:/g,"\\:")},_cookie:function(){var c=this.cookie||(this.cookie=this.options.cookie.name||"ui-tabs-"+v());return d.cookie.apply(null,[c].concat(d.makeArray(arguments)))},_ui:function(c,e){return{tab:c,panel:e,index:this.anchors.index(c)}},_cleanup:function(){this.lis.filter(".ui-state-processing").removeClass("ui-state-processing").find("span:data(label.tabs)").each(function(){var c=
d(this);c.html(c.data("label.tabs")).removeData("label.tabs")})},_tabify:function(c){function e(g,f){g.css({display:""});!d.support.opacity&&f.opacity&&g[0].style.removeAttribute("filter")}this.list=this.element.find("ol,ul").eq(0);this.lis=d("li:has(a[href])",this.list);this.anchors=this.lis.map(function(){return d("a",this)[0]});this.panels=d([]);var a=this,b=this.options,h=/^#.+/;this.anchors.each(function(g,f){var j=d(f).attr("href"),l=j.split("#")[0],p;if(l&&(l===location.toString().split("#")[0]||
(p=d("base")[0])&&l===p.href)){j=f.hash;f.href=j}if(h.test(j))a.panels=a.panels.add(a._sanitizeSelector(j));else if(j!="#"){d.data(f,"href.tabs",j);d.data(f,"load.tabs",j.replace(/#.*$/,""));j=a._tabId(f);f.href="#"+j;f=d("#"+j);if(!f.length){f=d(b.panelTemplate).attr("id",j).addClass("ui-tabs-panel ui-widget-content ui-corner-bottom").insertAfter(a.panels[g-1]||a.list);f.data("destroy.tabs",true)}a.panels=a.panels.add(f)}else b.disabled.push(g)});if(c){this.element.addClass("ui-tabs ui-widget ui-widget-content ui-corner-all");
this.list.addClass("ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all");this.lis.addClass("ui-state-default ui-corner-top");this.panels.addClass("ui-tabs-panel ui-widget-content ui-corner-bottom");if(b.selected===undefined){location.hash&&this.anchors.each(function(g,f){if(f.hash==location.hash){b.selected=g;return false}});if(typeof b.selected!="number"&&b.cookie)b.selected=parseInt(a._cookie(),10);if(typeof b.selected!="number"&&this.lis.filter(".ui-tabs-selected").length)b.selected=
this.lis.index(this.lis.filter(".ui-tabs-selected"));b.selected=b.selected||(this.lis.length?0:-1)}else if(b.selected===null)b.selected=-1;b.selected=b.selected>=0&&this.anchors[b.selected]||b.selected<0?b.selected:0;b.disabled=d.unique(b.disabled.concat(d.map(this.lis.filter(".ui-state-disabled"),function(g){return a.lis.index(g)}))).sort();d.inArray(b.selected,b.disabled)!=-1&&b.disabled.splice(d.inArray(b.selected,b.disabled),1);this.panels.addClass("ui-tabs-hide");this.lis.removeClass("ui-tabs-selected ui-state-active");
if(b.selected>=0&&this.anchors.length){this.panels.eq(b.selected).removeClass("ui-tabs-hide");this.lis.eq(b.selected).addClass("ui-tabs-selected ui-state-active");a.element.queue("tabs",function(){a._trigger("show",null,a._ui(a.anchors[b.selected],a.panels[b.selected]))});this.load(b.selected)}d(window).bind("unload",function(){a.lis.add(a.anchors).unbind(".tabs");a.lis=a.anchors=a.panels=null})}else b.selected=this.lis.index(this.lis.filter(".ui-tabs-selected"));this.element[b.collapsible?"addClass":
"removeClass"]("ui-tabs-collapsible");b.cookie&&this._cookie(b.selected,b.cookie);c=0;for(var i;i=this.lis[c];c++)d(i)[d.inArray(c,b.disabled)!=-1&&!d(i).hasClass("ui-tabs-selected")?"addClass":"removeClass"]("ui-state-disabled");b.cache===false&&this.anchors.removeData("cache.tabs");this.lis.add(this.anchors).unbind(".tabs");if(b.event!="mouseover"){var k=function(g,f){f.is(":not(.ui-state-disabled)")&&f.addClass("ui-state-"+g)},n=function(g,f){f.removeClass("ui-state-"+g)};this.lis.bind("mouseover.tabs",
function(){k("hover",d(this))});this.lis.bind("mouseout.tabs",function(){n("hover",d(this))});this.anchors.bind("focus.tabs",function(){k("focus",d(this).closest("li"))});this.anchors.bind("blur.tabs",function(){n("focus",d(this).closest("li"))})}var m,o;if(b.fx)if(d.isArray(b.fx)){m=b.fx[0];o=b.fx[1]}else m=o=b.fx;var q=o?function(g,f){d(g).closest("li").addClass("ui-tabs-selected ui-state-active");f.hide().removeClass("ui-tabs-hide").animate(o,o.duration||"normal",function(){e(f,o);a._trigger("show",
null,a._ui(g,f[0]))})}:function(g,f){d(g).closest("li").addClass("ui-tabs-selected ui-state-active");f.removeClass("ui-tabs-hide");a._trigger("show",null,a._ui(g,f[0]))},r=m?function(g,f){f.animate(m,m.duration||"normal",function(){a.lis.removeClass("ui-tabs-selected ui-state-active");f.addClass("ui-tabs-hide");e(f,m);a.element.dequeue("tabs")})}:function(g,f){a.lis.removeClass("ui-tabs-selected ui-state-active");f.addClass("ui-tabs-hide");a.element.dequeue("tabs")};this.anchors.bind(b.event+".tabs",
function(){var g=this,f=d(this).closest("li"),j=a.panels.filter(":not(.ui-tabs-hide)"),l=d(a._sanitizeSelector(this.hash));if(f.hasClass("ui-tabs-selected")&&!b.collapsible||f.hasClass("ui-state-disabled")||f.hasClass("ui-state-processing")||a._trigger("select",null,a._ui(this,l[0]))===false){this.blur();return false}b.selected=a.anchors.index(this);a.abort();if(b.collapsible)if(f.hasClass("ui-tabs-selected")){b.selected=-1;b.cookie&&a._cookie(b.selected,b.cookie);a.element.queue("tabs",function(){r(g,
j)}).dequeue("tabs");this.blur();return false}else if(!j.length){b.cookie&&a._cookie(b.selected,b.cookie);a.element.queue("tabs",function(){q(g,l)});a.load(a.anchors.index(this));this.blur();return false}b.cookie&&a._cookie(b.selected,b.cookie);if(l.length){j.length&&a.element.queue("tabs",function(){r(g,j)});a.element.queue("tabs",function(){q(g,l)});a.load(a.anchors.index(this))}else throw"jQuery UI Tabs: Mismatching fragment identifier.";d.browser.msie&&this.blur()});this.anchors.bind("click.tabs",
function(){return false})},destroy:function(){var c=this.options;this.abort();this.element.unbind(".tabs").removeClass("ui-tabs ui-widget ui-widget-content ui-corner-all ui-tabs-collapsible").removeData("tabs");this.list.removeClass("ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all");this.anchors.each(function(){var e=d.data(this,"href.tabs");if(e)this.href=e;var a=d(this).unbind(".tabs");d.each(["href","load","cache"],function(b,h){a.removeData(h+".tabs")})});this.lis.unbind(".tabs").add(this.panels).each(function(){d.data(this,
"destroy.tabs")?d(this).remove():d(this).removeClass("ui-state-default ui-corner-top ui-tabs-selected ui-state-active ui-state-hover ui-state-focus ui-state-disabled ui-tabs-panel ui-widget-content ui-corner-bottom ui-tabs-hide")});c.cookie&&this._cookie(null,c.cookie);return this},add:function(c,e,a){if(a===undefined)a=this.anchors.length;var b=this,h=this.options;e=d(h.tabTemplate.replace(/#\{href\}/g,c).replace(/#\{label\}/g,e));c=!c.indexOf("#")?c.replace("#",""):this._tabId(d("a",e)[0]);e.addClass("ui-state-default ui-corner-top").data("destroy.tabs",
true);var i=d("#"+c);i.length||(i=d(h.panelTemplate).attr("id",c).data("destroy.tabs",true));i.addClass("ui-tabs-panel ui-widget-content ui-corner-bottom ui-tabs-hide");if(a>=this.lis.length){e.appendTo(this.list);i.appendTo(this.list[0].parentNode)}else{e.insertBefore(this.lis[a]);i.insertBefore(this.panels[a])}h.disabled=d.map(h.disabled,function(k){return k>=a?++k:k});this._tabify();if(this.anchors.length==1){h.selected=0;e.addClass("ui-tabs-selected ui-state-active");i.removeClass("ui-tabs-hide");
this.element.queue("tabs",function(){b._trigger("show",null,b._ui(b.anchors[0],b.panels[0]))});this.load(0)}this._trigger("add",null,this._ui(this.anchors[a],this.panels[a]));return this},remove:function(c){var e=this.options,a=this.lis.eq(c).remove(),b=this.panels.eq(c).remove();if(a.hasClass("ui-tabs-selected")&&this.anchors.length>1)this.select(c+(c+1<this.anchors.length?1:-1));e.disabled=d.map(d.grep(e.disabled,function(h){return h!=c}),function(h){return h>=c?--h:h});this._tabify();this._trigger("remove",
null,this._ui(a.find("a")[0],b[0]));return this},enable:function(c){var e=this.options;if(d.inArray(c,e.disabled)!=-1){this.lis.eq(c).removeClass("ui-state-disabled");e.disabled=d.grep(e.disabled,function(a){return a!=c});this._trigger("enable",null,this._ui(this.anchors[c],this.panels[c]));return this}},disable:function(c){var e=this.options;if(c!=e.selected){this.lis.eq(c).addClass("ui-state-disabled");e.disabled.push(c);e.disabled.sort();this._trigger("disable",null,this._ui(this.anchors[c],this.panels[c]))}return this},
select:function(c){if(typeof c=="string")c=this.anchors.index(this.anchors.filter("[href$="+c+"]"));else if(c===null)c=-1;if(c==-1&&this.options.collapsible)c=this.options.selected;this.anchors.eq(c).trigger(this.options.event+".tabs");return this},load:function(c){var e=this,a=this.options,b=this.anchors.eq(c)[0],h=d.data(b,"load.tabs");this.abort();if(!h||this.element.queue("tabs").length!==0&&d.data(b,"cache.tabs"))this.element.dequeue("tabs");else{this.lis.eq(c).addClass("ui-state-processing");
if(a.spinner){var i=d("span",b);i.data("label.tabs",i.html()).html(a.spinner)}this.xhr=d.ajax(d.extend({},a.ajaxOptions,{url:h,success:function(k,n){d(e._sanitizeSelector(b.hash)).html(k);e._cleanup();a.cache&&d.data(b,"cache.tabs",true);e._trigger("load",null,e._ui(e.anchors[c],e.panels[c]));try{a.ajaxOptions.success(k,n)}catch(m){}},error:function(k,n){e._cleanup();e._trigger("load",null,e._ui(e.anchors[c],e.panels[c]));try{a.ajaxOptions.error(k,n,c,b)}catch(m){}}}));e.element.dequeue("tabs");return this}},
abort:function(){this.element.queue([]);this.panels.stop(false,true);this.element.queue("tabs",this.element.queue("tabs").splice(-2,2));if(this.xhr){this.xhr.abort();delete this.xhr}this._cleanup();return this},url:function(c,e){this.anchors.eq(c).removeData("cache.tabs").data("load.tabs",e);return this},length:function(){return this.anchors.length}});d.extend(d.ui.tabs,{version:"1.8.2"});d.extend(d.ui.tabs.prototype,{rotation:null,rotate:function(c,e){var a=this,b=this.options,h=a._rotate||(a._rotate=
function(i){clearTimeout(a.rotation);a.rotation=setTimeout(function(){var k=b.selected;a.select(++k<a.anchors.length?k:0)},c);i&&i.stopPropagation()});e=a._unrotate||(a._unrotate=!e?function(i){i.clientX&&a.rotate(null)}:function(){t=b.selected;h()});if(c){this.element.bind("tabsshow",h);this.anchors.bind(b.event+".tabs",e);h()}else{clearTimeout(a.rotation);this.element.unbind("tabsshow",h);this.anchors.unbind(b.event+".tabs",e);delete this._rotate;delete this._unrotate}return this}})})(jQuery);
;
/*
* jQuery UI Button 1.8.5
*
* Copyright 2010, AUTHORS.txt (http://jqueryui.com/about)
* Dual licensed under the MIT or GPL Version 2 licenses.
* http://jquery.org/license
*
* http://docs.jquery.com/UI/Button
*
* Depends:
* jquery.ui.core.js
* jquery.ui.widget.js
*/
(function($,undefined){var lastActive,baseClasses="ui-button ui-widget ui-state-default ui-corner-all",stateClasses="ui-state-hover ui-state-active ",typeClasses="ui-button-icons-only ui-button-icon-only ui-button-text-icons ui-button-text-icon-primary ui-button-text-icon-secondary ui-button-text-only",formResetHandler=function(event){$(":ui-button",event.target.form).each(function(){var inst=$(this).data("button");setTimeout(function(){inst.refresh();},1);});},radioGroup=function(radio){var name=radio.name,form=radio.form,radios=$([]);if(name){if(form){radios=$(form).find("[name='"+name+"']");}else{radios=$("[name='"+name+"']",radio.ownerDocument).filter(function(){return!this.form;});}}return radios;};$.widget("ui.button",{options:{disabled:null,text:true,label:null,icons:{primary:null,secondary:null}},_create:function(){this.element.closest("form").unbind("reset.button").bind("reset.button",formResetHandler);if(typeof this.options.disabled!=="boolean"){this.options.disabled=this.element.attr("disabled");}this._determineButtonType();this.hasTitle=!!this.buttonElement.attr("title");var self=this,options=this.options,toggleButton=this.type==="checkbox"||this.type==="radio",hoverClass="ui-state-hover"+(!toggleButton?" ui-state-active":""),focusClass="ui-state-focus";if(options.label===null){options.label=this.buttonElement.html();}if(this.element.is(":disabled")){options.disabled=true;}this.buttonElement.addClass(baseClasses).attr("role","button").bind("mouseenter.button",function(){if(options.disabled){return;}$(this).addClass("ui-state-hover");if(this===lastActive){$(this).addClass("ui-state-active");}}).bind("mouseleave.button",function(){if(options.disabled){return;}$(this).removeClass(hoverClass);}).bind("focus.button",function(){$(this).addClass(focusClass);}).bind("blur.button",function(){$(this).removeClass(focusClass);});if(toggleButton){this.element.bind("change.button",function(){self.refresh();});}if(this.type==="checkbox"){this.buttonElement.bind("click.button",function(){if(options.disabled){return false;}$(this).toggleClass("ui-state-active");self.buttonElement.attr("aria-pressed",self.element[0].checked);});}else if(this.type==="radio"){this.buttonElement.bind("click.button",function(){if(options.disabled){return false;}$(this).addClass("ui-state-active");self.buttonElement.attr("aria-pressed",true);var radio=self.element[0];radioGroup(radio).not(radio).map(function(){return $(this).button("widget")[0];}).removeClass("ui-state-active").attr("aria-pressed",false);});}else{this.buttonElement.bind("mousedown.button",function(){if(options.disabled){return false;}$(this).addClass("ui-state-active");lastActive=this;$(document).one("mouseup",function(){lastActive=null;});}).bind("mouseup.button",function(){if(options.disabled){return false;}$(this).removeClass("ui-state-active");}).bind("keydown.button",function(event){if(options.disabled){return false;}if(event.keyCode==$.ui.keyCode.SPACE||event.keyCode==$.ui.keyCode.ENTER){$(this).addClass("ui-state-active");}}).bind("keyup.button",function(){$(this).removeClass("ui-state-active");});if(this.buttonElement.is("a")){this.buttonElement.keyup(function(event){if(event.keyCode===$.ui.keyCode.SPACE){$(this).click();}});}}this._setOption("disabled",options.disabled);},_determineButtonType:function(){if(this.element.is(":checkbox")){this.type="checkbox";}else{if(this.element.is(":radio")){this.type="radio";}else{if(this.element.is("input")){this.type="input";}else{this.type="button";}}}if(this.type==="checkbox"||this.type==="radio"){this.buttonElement=this.element.parents().last().find("label[for="+this.element.attr("id")+"]");this.element.addClass("ui-helper-hidden-accessible");var checked=this.element.is(":checked");if(checked){this.buttonElement.addClass("ui-state-active");}this.buttonElement.attr("aria-pressed",checked);}else{this.buttonElement=this.element;}},widget:function(){return this.buttonElement;},destroy:function(){this.element.removeClass("ui-helper-hidden-accessible");this.buttonElement.removeClass(baseClasses+" "+stateClasses+" "+typeClasses).removeAttr("role").removeAttr("aria-pressed").html(this.buttonElement.find(".ui-button-text").html());if(!this.hasTitle){this.buttonElement.removeAttr("title");}$.Widget.prototype.destroy.call(this);},_setOption:function(key,value){$.Widget.prototype._setOption.apply(this,arguments);if(key==="disabled"){if(value){this.element.attr("disabled",true);}else{this.element.removeAttr("disabled");}}this._resetButton();},refresh:function(){var isDisabled=this.element.is(":disabled");if(isDisabled!==this.options.disabled){this._setOption("disabled",isDisabled);}if(this.type==="radio"){radioGroup(this.element[0]).each(function(){if($(this).is(":checked")){$(this).button("widget").addClass("ui-state-active").attr("aria-pressed",true);}else{$(this).button("widget").removeClass("ui-state-active").attr("aria-pressed",false);}});}else if(this.type==="checkbox"){if(this.element.is(":checked")){this.buttonElement.addClass("ui-state-active").attr("aria-pressed",true);}else{this.buttonElement.removeClass("ui-state-active").attr("aria-pressed",false);}}},_resetButton:function(){if(this.type==="input"){if(this.options.label){this.element.val(this.options.label);}return;}var buttonElement=this.buttonElement.removeClass(typeClasses),buttonText=$("<span></span>").addClass("ui-button-text").html(this.options.label).appendTo(buttonElement.empty()).text(),icons=this.options.icons,multipleIcons=icons.primary&&icons.secondary;if(icons.primary||icons.secondary){buttonElement.addClass("ui-button-text-icon"+(multipleIcons?"s":(icons.primary?"-primary":"-secondary")));if(icons.primary){buttonElement.prepend("<span class='ui-button-icon-primary ui-icon "+icons.primary+"'></span>");}if(icons.secondary){buttonElement.append("<span class='ui-button-icon-secondary ui-icon "+icons.secondary+"'></span>");}if(!this.options.text){buttonElement.addClass(multipleIcons?"ui-button-icons-only":"ui-button-icon-only").removeClass("ui-button-text-icons ui-button-text-icon-primary ui-button-text-icon-secondary");if(!this.hasTitle){buttonElement.attr("title",buttonText);}}}else{buttonElement.addClass("ui-button-text-only");}}});$.widget("ui.buttonset",{_create:function(){this.element.addClass("ui-buttonset");this._init();},_init:function(){this.refresh();},_setOption:function(key,value){if(key==="disabled"){this.buttons.button("option",key,value);}$.Widget.prototype._setOption.apply(this,arguments);},refresh:function(){this.buttons=this.element.find(":button, :submit, :reset, :checkbox, :radio, a, :data(button)").filter(":ui-button").button("refresh").end().not(":ui-button").button().end().map(function(){return $(this).button("widget")[0];}).removeClass("ui-corner-all ui-corner-left ui-corner-right").filter(":visible").filter(":first").addClass("ui-corner-left").end().filter(":last").addClass("ui-corner-right").end().end().end();},destroy:function(){this.element.removeClass("ui-buttonset");this.buttons.map(function(){return $(this).button("widget")[0];}).removeClass("ui-corner-left ui-corner-right").end().button("destroy");$.Widget.prototype.destroy.call(this);}});}(jQuery));
/* jQuery RadioButton */
$(function() {
$( ".radio" ).buttonset();
});
öffne shop/templates/(dein Template)/css/jquery-ui.css
füge am ende folgendes ein:
/* jQuery UI Button
----------------------------------*/
.ui-button { display: inline-block; position: relative; padding: 0; margin-right: .1em; text-decoration: none !important; cursor: pointer; text-align: center; zoom: 1; overflow: visible; } /* the overflow property removes extra width in IE */
.ui-button-icon-only { width: 2.2em; } /* to make room for the icon, a width needs to be set here */
button.ui-button-icon-only { width: 2.4em; } /* button elements seem to need a little more width */
.ui-button-icons-only { width: 3.4em; }
button.ui-button-icons-only { width: 3.7em; }
/*button text element */
.ui-button .ui-button-text { display: block; line-height: 1.4; }
.ui-button-text-only .ui-button-text { padding: .4em 1em; }
.ui-button-icon-only .ui-button-text, .ui-button-icons-only .ui-button-text { padding: .4em; text-indent: -9999999px; }
.ui-button-text-icon-primary .ui-button-text, .ui-button-text-icons .ui-button-text { padding: .4em 1em .4em 2.1em; }
.ui-button-text-icon-secondary .ui-button-text, .ui-button-text-icons .ui-button-text { padding: .4em 2.1em .4em 1em; }
.ui-button-text-icons .ui-button-text { padding-left: 2.1em; padding-right: 2.1em; }
/* no icon support for input elements, provide padding by default */
input.ui-button { padding: .4em 1em; }
/*button icon element(s) */
.ui-button-icon-only .ui-icon, .ui-button-text-icon-primary .ui-icon, .ui-button-text-icon-secondary .ui-icon, .ui-button-text-icons .ui-icon, .ui-button-icons-only .ui-icon { position: absolute; top: 50%; margin-top: -8px; }
.ui-button-icon-only .ui-icon { left: 50%; margin-left: -8px; }
.ui-button-text-icon-primary .ui-button-icon-primary, .ui-button-text-icons .ui-button-icon-primary, .ui-button-icons-only .ui-button-icon-primary { left: .5em; }
.ui-button-text-icon-secondary .ui-button-icon-secondary, .ui-button-text-icons .ui-button-icon-secondary, .ui-button-icons-only .ui-button-icon-secondary { right: .5em; }
.ui-button-text-icons .ui-button-icon-secondary, .ui-button-icons-only .ui-button-icon-secondary { right: .5em; }
/*button sets*/
.ui-buttonset { margin-right: 7px; }
.ui-buttonset .ui-button { margin-left: 0; margin-right: -.3em; }
/* workarounds */
button.ui-button::-moz-focus-inner { border: 0; padding: 0; } /* reset extra padding in Firefox */
Lade die beigefügte ZIP- Datei runter und speichere den Inhalt wie vorgegeben auf dem Server.
Das wars erst mal für diesen Teil.
Später werde ich noch einen Teil schreiben, in dem die Bestell- Mails angepasst werden und die Preisdarstellung in den Produkt- Listen.
Ich hoffe, ich konnte helfen.
Saludos
Dani
