Hi zusammen,
ich habe einen JimdoShop mit dem ich ein paar Produkte verkaufe jordan-brennholz.de/produkte.
Bei manchen Produkten gibts Varianten, die bei Jimdo über DropDown-Menüs wählbar sind. Und genau da fängt das "Problem" an. Mir gefällt an der Stelle einfach kein Select-Menü, da ich pro Produkt maximal 2 Varianten habe.
Im Internet bin ich dann über das hier gestolpert:
https://stackoverflow.com/questions/18931628/is-it-possible-to-convert-a-select-menu-to-buttons
Leider hab ichs damit nicht hinbekommen.
Also habe ich selber ein bisschen was versucht.
Ich dachte mir, ich erstelle 2 Buttons, für jede Variante einen. Das eigentliche Select-Menü setz ich auf
.
Um zu schauen obs klappt, habe ich diese Zeile aber wieder rausgenommen.
Damit hab ichs geschafft, dass ich über einen Klick auf den Button die entsprechende Variante im Select-Menu anwählen kann:
Die ganzen Attribute habe ich dem Button angehängt:
die Option, die der Button auswählen soll, sieht übrigens so aus:
Allerdings ist das wohl erst die halbe Miete.
Er ändert zwar den Eintrag im select-Menü, aktualisiert aber nicht den Preis, die Lieferzeit....
Das funktioniert, glaube ich, über
innerhalb der Class
Ich finde aber einfach nicht raus, wie ich die Daten weitergebe, damit das aktualisiert wird. Über den Debugger von Firefox habe die Function gefunden, die das wohl aktualisieren sollte. Die Funktion findet sich in
Für mich sieht das so aus, als ob der das Attribut 'data-params' von der ausgewählten Viante übergibt. Darum habe ich bei meinem Code, auch dieses Attribut an
übergeben. Nachdem das aber nichts gebracht habe, habe ich einfach alle Attribute übergeben - half aber auch nicht.
Hat jemand eine Idee was ich machen könnte?
Den ganzen Versuchsaufbau könnt ihr auf jordan-brennholz.de/button sehen.
ich habe einen JimdoShop mit dem ich ein paar Produkte verkaufe jordan-brennholz.de/produkte.
Bei manchen Produkten gibts Varianten, die bei Jimdo über DropDown-Menüs wählbar sind. Und genau da fängt das "Problem" an. Mir gefällt an der Stelle einfach kein Select-Menü, da ich pro Produkt maximal 2 Varianten habe.
Im Internet bin ich dann über das hier gestolpert:
https://stackoverflow.com/questions/18931628/is-it-possible-to-convert-a-select-menu-to-buttons
Leider hab ichs damit nicht hinbekommen.
Also habe ich selber ein bisschen was versucht.
Ich dachte mir, ich erstelle 2 Buttons, für jede Variante einen. Das eigentliche Select-Menü setz ich auf
CSS:
display: none
Um zu schauen obs klappt, habe ich diese Zeile aber wieder rausgenommen.
Damit hab ichs geschafft, dass ich über einen Klick auf den Button die entsprechende Variante im Select-Menu anwählen kann:
Code:
script type="text/javascript">
//<![CDATA[
var dataparams;
var title;
var content;
var text;
function press() {
alert("now");
document.getElementById("12").selectedIndex = 1;
document.getElementById("12").setAttribute("data-params", dataparams);
document.getElementById("12").setAttribute("title", dataparams);
document.getElementById("12").setAttribute("content", dataparams);
document.getElementById("12").setAttribute("text", text);
alert(dataparams)
}
window.onload = function()
{
var id="12";
$("#cc-m-product-9986378471").find( "select" ).eq( 0 ).attr("id", id);
dataparams = $("#button").attr('data-params');
title = $("#button").attr('title');
content = $("#button").attr('content');
text = $("#button").attr('text');
}
/* var selectName = $('
Die ganzen Attribute habe ich dem Button angehängt:
HTML:
<button class="j-product__variants__item" onclick="press()" id="button" value="0" data-action="changeVariant" data-params="{"price":1,"priceFormatted":"1,00 \u20ac","oldPriceFormatted":"0,00 \u20ac","basicPrice":0,"basicPriceFormatted":"0,00 \u20ac","basicPriceUnit":"&nbsp;","oldPrice":0,"availability":1,"availabilityText":"verf\u00fcgbar","delivery":1,"pool":"Infinity","weightFormatted":" kg","weight":null}" title="Vari1 1,00 €" content="Vari1">Neuer Button</button>
die Option, die der Button auswählen soll, sieht übrigens so aus:
HTML:
<option class="j-product__variants__item" value="1" data-params="{"price":1,"priceFormatted":"1,00 \u20ac","oldPriceFormatted":"0,00 \u20ac","basicPrice":0,"basicPriceFormatted":"0,00 \u20ac","basicPriceUnit":"&nbsp;","oldPrice":0,"availability":1,"availabilityText":"verf\u00fcgbar","delivery":1,"pool":"Infinity","weightFormatted":" kg","weight":null}" title="Vari1 1,00 €" content="Vari1">
Vari1 1,00 € </option>
Allerdings ist das wohl erst die halbe Miete.
Er ändert zwar den Eintrag im select-Menü, aktualisiert aber nicht den Preis, die Lieferzeit....
Das funktioniert, glaube ich, über
HTML:
data-action="changeVariant"
HTML:
<select class="cc-product-variant-selectbox j-product__variants" data-action="changeVariant" id="12">
ab Zeile 101:productController.js
Code:
this._changeVariantChange = function () {
var product = $.parseJSON($(':selected', this).attr('data-params')),
$deliveryContainer = $detailContainer.find('.j-product-delivery-time'),
$productPool = $detailContainer.find('.j-product-pool'),
$productWeight = $detailContainer.find('.j-product-weight'),
$poolScope = $('[itemprop=inventoryLevel] [itemprop=value]', $module);
Für mich sieht das so aus, als ob der das Attribut 'data-params' von der ausgewählten Viante übergibt. Darum habe ich bei meinem Code, auch dieses Attribut an
HTML:
<select...>
Hat jemand eine Idee was ich machen könnte?
Den ganzen Versuchsaufbau könnt ihr auf jordan-brennholz.de/button sehen.