Welche JQuery Version

Hallo,

ich würde gerne ein JQuery Plugin verwenden, welches aber scheinbar mit der bei Gambio GX3 verwendeten JQuery Version nicht klar kommt. Ich finde aber auch keinen Hinweis welche JQuery Version bei Gambio überhaupt verwendet wird.
Kann mir jemand helfen und sagen wo ich die Version finde ?

Grüße, Dirk

 

Hallo Wilken,

das wäre für mich eigentlich grundsätzlich gut, denn mit JQuery 1.11.x sollte es gehen, aber das tut es nicht.
Idee ist dieses Javascript Plugin einzubinden: https://designwithpc.com/Plugins/ddSlick#demo sodass bei den Optionen die Bilder im Dropdown mit angezeigt werden (solch eine Lösung habe ich auch schon seit Jahren im aktuellen, alten Shop, allerdings nicht genau dieses JS Plugin). Auf einer statischen testseite funktioniert soweit alles problemlos mit JQuery 1.11.4, daher habe ich jetzt das Modul in der products_options_dropdown.html wie folgt eingebaut:

Code:

{block name="module_product_options_dropdown_if"}
    {if $options!=''}
        {block name="module_product_options_dropdown"}
            <fieldset class="attributes">
                {block name="module_product_options_dropdown_option_foreach"}
                    {foreach name=outer item=options_data from=$options}
                        {block name="module_product_options_dropdown_option"}
                            {if $options_data.DATA || $GM_HIDE_OUT_OF_STOCK == 'false'}
                                <div class="form-group">
                                    {block name="module_product_options_dropdown_select_label"}
                                        <label class="control-label col-xs-4 {if 'ENABLE_JS_HYPHENATION'|gm_get_conf == 'true'}hyphenate{/if}">{$options_data.NAME}:</label>
                                    {/block}

                                    {block name="module_product_options_dropdown_select_container"}
                                        <div class="col-xs-8">
                                            {block name="module_product_options_dropdown_select"}
                                                <select class="form-control {if $PRICE_STATUS != 1} js-calculate{/if}" name="id[{$options_data.ID}]" id="id{$options_data.ID}">
                                                    {foreach key=key_data item=item_data from=$options_data.DATA}
                                                        <option value="{$item_data.ID}" data-imagesrc="http://i.imgur.com/XkuTj3B.png" data-description="Description with Facebook" title="{$item_data.TEXT|replace:'"':'&quot;'} {if $item_data.PRICE}{$item_data.PREFIX} {$item_data.PRICE}{/if}{if $GM_SHOW_STOCK == 'true' && $options_data.NAME != 'downloads'} {$GM_STOCK_TEXT_BEFORE|replace:'"':'&quot;'}{$item_data.GM_STOCK}{$GM_STOCK_TEXT_AFTER|replace:'"':'&quot;'}{/if}" {if !$chk} selected="selected" {$chk = true}{/if}>{$item_data.TEXT} {if $item_data.PRICE}{$item_data.PREFIX} {$item_data.PRICE}{/if}{if $GM_SHOW_STOCK == 'true' && $options_data.NAME != 'downloads'} {$GM_STOCK_TEXT_BEFORE}{$item_data.GM_STOCK}{$GM_STOCK_TEXT_AFTER}{/if}</option>
                                                    {/foreach}
                                                </select>
                                                {literal}                                           
                                                    <script type="text/javascript">
                                                    // <![CDATA[
                                                    $(document).ready(function () {
                                                    $('#{/literal}id{$options_data.ID}{literal}').ddslick();
                                                    });
                                                    // ]]>
                                                    </script>
                                                {/literal}   
                                            {/block}
                                            {$chk = false}
                                        </div>
                                    {/block}
                                </div>
                            {/if}
                        {/block}
                    {/foreach}
                {/block}
            </fieldset>
        {/block}
        {literal}
        <script type="text/javascript" src="https://cdn.rawgit.com/prashantchaudhary/ddslick/master/jquery.ddslick.min.js" ></script>
        {/literal}
    {/if}
{/block}

Doch das funktioniert nicht, das Modul wird nicht aktiviert.
Schau ich mir den Source der Seite an sieht alles einwandfrei aus, lege ich diese als statische HTML ab und rufe sie auf, funktioniert das Plugin auch nicht.
In der Konsule des FF bekomme ich diese Fehlermeldung:

ReferenceError: $ is not defined

und zwar mehrfach.

Selbst das erneute Einbinder der JQuery bringt nichts:

Code:

<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>

dann wird aber nur einmal obige Fehlermeldung angezeigt.

Daher dachte ich, dass hier zwei JQuery Versionen kollidieren, was aber scheinbar auch nicht der Fall ist.

Kopiere ich aber aus dem Source der Seite alles nach
<fieldset class="attributes"> ... bis zum schliessenden </fieldset> raus, kopiere dies in meine statische html-Testdatei und rufe diese dann auf, ist die Anzeige korrekt.

Ich stehe daher jetzt ein wenig auf dem Schlauch und habe keine Idee wo ich noch suchen oder was ich noch machen könnte.

Jemand noch einen Lösungsvorschlag ?

Grüße, Dirk

 

Hi Till,

danke für die Hilfestellung. Funktioniert leider noch nicht. Die "ReferenceError: $ is not defined" Fehlermeldungen sind alle weg, es werden eigentlich gar keine JavaScript Fehlermeldungen in der Konsole mehr angezeigt, aber die Dropdowns sind immer noch wie gehabt. Cache im Shop und im Browser schon mehrfach gelöscht.
Strukturen schon mehrfach geprüft, sieht alles so aus wie von Dir beschrieben...

Grüße, Dirk

 

Nein, bringt auch nicht den erhofften Erfolg und es sieht auch so aus, als müsste jedes select einzeln über dessen ID angesprochen werden und die ID darf keine [ ] enthalten. Derzeit wird die ID so ausgegeben id="id[3]" damit kann ich das select nicht ansprechen, ändere ich die id ab auf id="id3" dann kann ich mittels ... $('id3').ddslick(); ... den select ansprechen und das Plugin aktivieren aber nur in der Testdatei in der ich dann diese beiden Einträge nach oben in den <header> verschoben habe:

Code:

            <script src="templates/Honeygrid/assets/javascript/init-de.min.js?bust=049aabd36fe38c69dc9a7cdf94465ae5" data-page-token="f32e3462e13d5f3e757c780e23339281" id="init-js"></script>
            <script type="text/javascript" src="https://cdn.rawgit.com/prashantchaudhary/ddslick/master/jquery.ddslick.min.js"></script>    

Da der Testshop nicht online ist, wird ein Zurgiff von Deiner Seite derzeit leider nicht funktionieren, daher die Grundsätzliche Frage: kann ich die Anpassung des Moduls auch bei euch beauftragen, sodass am Ende einfach nur ein Paket mit den ganzen Dateien und der Verzeichnisstruktur von euch bereit gestellt wird, welches ich dann im Shop entpacke ? Ich vermute es das Problem liegt einfach in der Reihenfolge wann was geladen wird, aber ich bin da jetzt noch nicht sonderlich tief in der Materie.

Grüße, Dirk

 

Seltsam, werde ich nochmal versuchen.
Bie mir wird standardmäßig ID="id[2]" erzeugt, also in eckigen Klammern. Ist auch so im Template definiert.

 

sorry, mit der ID war ich falsch !

 

In der Tat, ein grosser Schritt weiter, die Anzeige selbst geht jetzt, aber die Inhalte sind gemischt. Ich gehe davon, dass jedes Select einzeln zugeordnet werden muss, damit die Daten richtig angezeigt werden, also pro select ein
... $('IDXX').ddslick(); ... erfolgen muss.
Kann man nicht in Javascript die Seite prüfen und alle selects auslesen und zuordnen ?

Grüße, Dirk

 

so würde es funktionieren (Höhe und Breite werden ebenfalls noch angepasst), wobei dies sicherlich eine ganz schlechte Umsetzung ist, aber ich kenne mich mit Javascript nicht wirklich aus...

Code:

$(document).ready(function() {
    var i;
    var s;
    for (i = 0; i < 100; i++) {
        s = '#id' + i;
        $(s).ddslick({
        height: 300,
        width: 300
        });
    }
});

Grüße, Dirk

 

Leider nicht ganz. Ich habe doch noch einen Fehler eingebaut. Das select tag muss mit id='id[X]' bezeichnet werden, andernfalls geht die Preisberechnung nicht mehr, also Attribute mit Auf oder Abschlägen werden nicht mehr berücksichtigt. Hatte ich bei den Tests raus genommen, weil mir aufgefallen ist, dass das ddslick-Script mit den [] ein Problem hat und dies ist jetzt wieder der Fall. Wenn man also auf die Preisberechnung verzichten kann dann geht es wie oben beschrieben, wenn nicht dann geht es so noch leider noch nicht. So ein Mist aber auch...

Grüße, Dirk

 

hat damit scheinbar doch nichts zu tun. Die Preisberechnung geht weder mit [] als auch ohne [].

Grüße, Dirk

 

Da es etwas später war gestern, habe ich heute morgen nochmal alles in Ruhe ausprobiert, doch leider muss ich feststellen, dass die Preisberechung bei mir nicht geht wenn das ddSlick Plugin aktiviert ist. Es hat nichts mit der schreibweise der ID zu tun soweit ich feststellen konnte. Auf der Konsole wird auch kein Fehler ausgegeben.
Ich habe nochmal eine Änderung an dem Aufruf des Plugins gemacht, aber dies bringt auch keine Änderung. Soweit ich JS bis jetzt verstanden habe, müsste dies im Prinzip der letzten Änderung von Till entsprechen.

Code:

$(document).ready(function () {
    $('select[name^=id]').each(function(index) {
         $(this).ddslick({
            width: 230,
            hight: 300
         });
    });
});

Noch eine Idee ?

Grüße, Dirk

 

Hallo Till,

hast Du noch eine Idee wieso die Preisberechnung ausgehebelt wird oder soll ich eine offizielle Anfrage an euch stellen und euch mit der Fehlersuche beauftragen, sofern möglich ? Ich bin an der Lösung sehr interessiert.

Grüße, Dirk

 

Auch hier, danke für die Unterstützung, Till. Werde ich schnellstmöglich testen !