Dropdown in Buttons umwandeln

TiJo

Grünschnabel
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
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="{&quot;price&quot;:1,&quot;priceFormatted&quot;:&quot;1,00 \u20ac&quot;,&quot;oldPriceFormatted&quot;:&quot;0,00 \u20ac&quot;,&quot;basicPrice&quot;:0,&quot;basicPriceFormatted&quot;:&quot;0,00 \u20ac&quot;,&quot;basicPriceUnit&quot;:&quot;&amp;nbsp;&quot;,&quot;oldPrice&quot;:0,&quot;availability&quot;:1,&quot;availabilityText&quot;:&quot;verf\u00fcgbar&quot;,&quot;delivery&quot;:1,&quot;pool&quot;:&quot;Infinity&quot;,&quot;weightFormatted&quot;:&quot; kg&quot;,&quot;weight&quot;: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="{&quot;price&quot;:1,&quot;priceFormatted&quot;:&quot;1,00 \u20ac&quot;,&quot;oldPriceFormatted&quot;:&quot;0,00 \u20ac&quot;,&quot;basicPrice&quot;:0,&quot;basicPriceFormatted&quot;:&quot;0,00 \u20ac&quot;,&quot;basicPriceUnit&quot;:&quot;&amp;nbsp;&quot;,&quot;oldPrice&quot;:0,&quot;availability&quot;:1,&quot;availabilityText&quot;:&quot;verf\u00fcgbar&quot;,&quot;delivery&quot;:1,&quot;pool&quot;:&quot;Infinity&quot;,&quot;weightFormatted&quot;:&quot; kg&quot;,&quot;weight&quot;: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"
innerhalb der Class
HTML:
<select class="cc-product-variant-selectbox j-product__variants" data-action="changeVariant" id="12">
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
productController.js
ab Zeile 101:

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...>
ü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.
 
Hallo,

Jimdo erstellt leider immer ein Select-Menu, wenn man Varianten anlegt. Ich hab drauf keinen Einfluss.
Um deine Frage klar zu beantworten: Es geht nur Select.
 
Hi,

ich weiss nicht, wieviel Möglichkeiten dir Jimdo bietet. Aber du kannst zwei Buttons erstellen. Diese erhalten ein data-params Attribut mit den notwendigen Informationen (siehe Kommentar im Beispiel-Code).

Im ready-Event des Dokuments werden die Buttons mit click-Events versehen. Wird ein Button geklickt, wird die zugehörige Option des Select-Feldes ausgewählt.

Beispiel:
HTML:
<div id="cc-m-10000608971" class="j-module n j-htmlCode ">
    <button data-params="{&quot;option&quot;: 0, &quot;selector&quot;: &quot;#12&quot;}" class="btn-select">btn1</button>
    <button data-params="{&quot;option&quot;: 1, &quot;selector&quot;: &quot;#12&quot;}" class="btn-select">btn2</button>
   
    <script>
    $(function() {
        var buttons = $('.btn-select');
         
        buttons.each(function(index, elem) {
            $(elem).on('click', function() {
                // data-params-Attribut enthält die notwendigen Informationen für den Button
                //
                // option - enthält den Index der Option im Select-Feld, die ausgewält werden soll
                // selector - enthält den Selektor des Select-Feldes
                var data = $(this).data('params');

                // setzt die gewünschte Option im zugehörigen Select-Feld
                $(data.selector)[0].selectedIndex = data.option;
            });
        });
    });
    </script>
</div>
Ich hoffe, das hilft dir weiter.

Ciao
Quaese
 
Hi @Quaese

so wie ich das sehe, unterscheidet sich das nicht sonderlich von der Variante die ich jetzt habe?
Das Problem ist glaube ich, dass
HTML:
data-action="changeVariant"
nicht ausgeführt wird. Oder bin ich da verkehrt?
 
Die Frage ist eher, ob du ein Page reload erzwingen muss. Ändert sich bei der normalen Select-Auswahl die URL?
 
Hi,

wie gesagt, ich weiss nicht, wie Jimdo mit dem Attribut data-action intern arbeitet. Offensichtlich hast du this._changeVariantChange = function () ... aus einem Modul herauskopiert. Was das noch alles macht, kann hier nicht nachvollzogen werden (will wahrscheinlich auch nicht nachvollzogen werden).

Meine Variante wählt auf Knopfdruck die gewünschte Option im Selekt-Feld. Alternativ wäre es auch möglich, aus den Optionen des Selekt-Feldes dynamisch Buttons zu erstellen. Allerdings habe ich keine Ahnung, was mit den Button passieren soll bzw. welche Funktion sie ausführen sollen, wenn sie gedrückt werden.

Mehr fällt mir hier erstmal nicht ein.

Ciao
Quaese
 
Zurück