hallo liebe Communtity,
dadurch das ich mich die letzten Tage mit diesem “schönen” Shop rumgeschlagen habe und nix dazu im Forum gefunden hatte. Ich biete euch wenn auch vielleicht nicht perfekt ! aber es funktioniert diesen Anleitung.
Varianten bzw. Multiple Varianten per Dropdown with Azure Template
selectbox.tpl
[{oxscript include="js/widgets/oxdropdown.js" priority=10 }]
[{oxscript add="$('div.outer-select').oxDropDown();" }]
[{assign var="oSelections" value=$oSelectionList->getSelections()}]
[{if $oSelections}]
<p>
<strong>[{$oSelectionList->getLabel()}]</strong>
</p>
<div class="outer-select [{$sJsAction}]" style="width: 300px;">
[{assign var="oActiveSelection" value=$oSelectionList->getActiveSelection()}]
<div class="inner-select">
<span class="select-text
[{if $oActiveSelection}]">
[{$oActiveSelection->getName()}]</span>
[{elseif !$blHideDefault}]
[{if $blInDetails}] selectMessage"[{/if}]>
[{if $sFieldName == "sel" }]
[{ oxmultilang ident="WIDGET_PRODUCT_ATTRIBUTES_PLEASECHOOSE" }]
[{else}]
[{ oxmultilang ident="CHOOSE_VARIANT" }]
[{/if}]
[{/if}]
</span>
</div>
[{if $editable !== false}]
<input type="hidden" id="[{$sFieldName|default:"varselid"}][[{$iKey}]]" name="[{$sFieldName|default:"varselid"}][[{$iKey}]]" value="[{if $oActiveSelection }][{$oActiveSelection->getValue()}][{/if}]">
<select id="[{$sFieldName|default:"selectid"}][[{$iKey}]]" name="[{$sFieldName|default:"selectid"}][[{$iKey}]]" class="[{$sSelType|default:"vardrop"}]" style="width: 300px;">
<option value="">
[{if $oActiveSelection}]Auswahl zurücksetzen
[{elseif !$blHideDefault}]
[{if $sFieldName == "sel" }]
[{ oxmultilang ident="WIDGET_PRODUCT_ATTRIBUTES_PLEASECHOOSE" }]
[{else}]
[{$oSelectionList->getLabel()}] wählen
[{/if}]
[{/if}]
</option>
[{foreach from=$oSelections item=oSelection}]
<option [{if $oSelection->isActive()}]selected="selected"[{/if}] value="[{$oSelection->getValue()}]">[{$oSelection->getName()}]</option>
[{/foreach}]
</select>
[{/if}]
</div>
[{/if}]
oxarticlevariant.js
/**
* This file is part of OXID eShop Community Edition.
*
* OXID eShop Community Edition is free software: you can redistribute it and/or modify
* it under the terms of the GNU General Public License as published by
* the Free Software Foundation, either version 3 of the License, or
* (at your option) any later version.
*
* OXID eShop Community Edition is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU General Public License for more details.
*
* You should have received a copy of the GNU General Public License
* along with OXID eShop Community Edition. If not, see <http://www.gnu.org/licenses/>.
*
* @link http://www.oxid-esales.com
* @package out
* @copyright (C) OXID eSales AG 2003-2013
* @version OXID eShop CE
* @version SVN: $Id: oxarticlevariant.js 35529 2011-05-23 07:31:20Z vilma $
*/
( function ( $ ) {
oxArticleVariant = {
_create: function() {
var self = this;
//var options = self.options;
$( "div.outer-select" ).hover(function() {
$( this ).addClass('hovered');
}, function() {
$( this ).removeClass('hovered');
}
);
/**
* Variant selection dropdown
*/
$("select.vardrop").change(function() {
var obj = $( this );
// resetting
if (obj.parents().hasClass("js-disabled") ) {
self.resetVariantSelections();
} else {
$( "form.js-oxProductForm input[name=anid]" ).attr( "value", $( "form.js-oxProductForm input[name=parentid]" ).attr( "value" ) );
}
// setting new selection
if ( obj.parents().hasClass("js-fnSubmit") ){
obj.siblings('input:hidden').val(obj.val());
var form = obj.closest("form");
$('input[name=fnc]', form).val("");
form.submit();
}
return false;
});
/**
* variant reset link
*/
/*$('div.variantReset a').click( function () {
self.resetVariantSelections();
var obj = $( this );
var form = obj.closest("form");
$('input[name=fnc]', form).val("");
form.submit();
return false;
});*/
$("form.js-oxProductForm").submit(function () {
if (!$("input[name='fnc']", this).val()) {
if (($( "input[name=aid]", this ).val() == $( "input[name=parentid]", this ).val() )) {
var aSelectionInputs = $("input[name^=varselid]", this);
if (aSelectionInputs.length) {
var hash = '';
aSelectionInputs.not("*[value='']").each(function(i){
hash = hash+i+':'+$(this).val()+"|";
});
if ( jQuery.inArray( hash, oxVariantSelections ) === -1 ) {
return self.reloadProductPartially( $("form.js-oxProductForm"), 'detailsMain', $("#detailsMain"), $("#detailsMain")[0]);
}
}
}
return self.reloadProductPartially($("form.js-oxProductForm"),'productInfo',$("#productinfo"),$("#productinfo")[0]);
}
});
},
/**
* Runs defined scripts inside the method, before ajax is called
*/
_preAjaxCaller : function()
{
$('#zoomModal').remove();
},
reloadProductPartially : function(activator, renderPart, highlightTargets, contentTarget) {
// calls some scripts before the ajax starts
this._preAjaxCaller();
oxAjax.ajax(
activator,
{//targetEl, onSuccess, onError, additionalData
'targetEl' : highlightTargets,
'iconPosEl' : $("#variants"),
'additionalData' : {'renderPartial' : renderPart},
'onSuccess' : function(r) {
contentTarget.innerHTML = r['content'];
oxAjax.evalScripts(contentTarget);
}
}
);
return false;
},
resetVariantSelections : function()
{
var aVarSelections = $( "form.js-oxProductForm input[name^=varselid]" );
for (var i = 0; i < aVarSelections.length; i++) {
$( aVarSelections[i] ).attr( "value", "" );
}
$( "form.js-oxProductForm input[name=anid]" ).attr( "value", $( "form.js-oxProductForm input[name=parentid]" ).attr( "value" ) );
}
}
$.widget("ui.oxArticleVariant", oxArticleVariant );
})( jQuery );