Welche JQuery Version

Thema wurde von dmun, 8. Juni 2019 erstellt.

  1. dmun

    dmun Erfahrener Benutzer

    Registriert seit:
    2. Juni 2019
    Beiträge:
    211
    Danke erhalten:
    19
    Danke vergeben:
    4
    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
     
  2. Wilken (Gambio)

    Wilken (Gambio) Administrator
    Mitarbeiter

    Registriert seit:
    7. November 2012
    Beiträge:
    16.908
    Danke erhalten:
    6.397
    Danke vergeben:
    1.959
    Vorsicht, uralt: Müsste 1.11.x sein.

    Wir wollten Jquery schon immer mal rauswerfen weil das Ding ziemlich yesterday ist, so weit sind wir aber noch nicht gekommen, damit dümpelt das etwas ;)
     
  3. dmun

    dmun Erfahrener Benutzer

    Registriert seit:
    2. Juni 2019
    Beiträge:
    211
    Danke erhalten:
    19
    Danke vergeben:
    4
    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
     
  4. Anonymous

    Anonymous Administrator
    Mitarbeiter

    Registriert seit:
    26. April 2011
    Beiträge:
    699
    Danke erhalten:
    601
    Danke vergeben:
    141
    Hi,

    jQuery wird erst am Ende der Seite geladen, da du aber bereits im HTML vorher schon jQuery benutzt, bevor es zur Verfügung steht, läuft das nicht.

    Ich empfehle dir dein JavaScript nicht in die HTML Datei für die Attribute einzufügen, sondern getrennt als .js Datei abzulegen.
    Dazu erstelllst du im Ordner /GXModules/ einen Ordner /MeineFirma/ und darin den Ordner /ddSlick/.

    Die Datei jquery.ddslick.min.js legst du im Ordner /GXModules/MeineFirma/ddSlick/Templates/Honeygrid/Javascript/ProductInfo/ ab.

    Dann erstelltst du eine neue Datei mit dem Namen ZZddSlick.js (ZZ muss sein, damit die Datei nach dem jQuery Plugin geladen wird) im selben Ordner mit folgendem Inhalt:

    Code:
    $(document).ready(function () {
                                                        $('option').ddslick();
                                                        });
    Die Struktur sollte dann wie folgt aussehen:

    /GXModules/
    |--/MeineFirma/
    |----/ddSlick/
    |------/Shop/
    |--------/Templates/
    |------------/Honeygrid/
    |------------------/Javascript/
    |----------------------/ProductInfo/
    |--------------------------jquery.ddslick.min.js
    |--------------------------ZZddSlick.js

    Die Anpassungen an der HTML Datei müssen dann nur noch den Block mit folgendem Inhalt sein:

    HTML:
    {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>
                                                {/block}
    Diese legst du in der Datei /GXModules/MeineFirma/ddSlick/Shop/Templates/Honeygrid/module/product_options/product_options_dropdown.html ab.

    Weitere Infos unter:
    (Link nur für registrierte Nutzer sichtbar.)
    (Link nur für registrierte Nutzer sichtbar.)
     
  5. dmun

    dmun Erfahrener Benutzer

    Registriert seit:
    2. Juni 2019
    Beiträge:
    211
    Danke erhalten:
    19
    Danke vergeben:
    4
    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
     
  6. Anonymous

    Anonymous Administrator
    Mitarbeiter

    Registriert seit:
    26. April 2011
    Beiträge:
    699
    Danke erhalten:
    601
    Danke vergeben:
    141
    Versuche mal folgenden Code:

    Code:
    $(document).ready(function () {
                                                        $('select').ddslick();
                                                        });
    Wenn es dann immer noch nicht funktioniert, brauch ich einen Link zu deinem Shop um das genauer zu prüfen.

    Nimm das /src/ aus dem Pfad ich glaub das war noch ein Fehler, der Pfad zur HTML Datei sollte wie folgt aussehen:

    /GXModules/MeineFirma/ddSlick/Shop/Templates/Honeygrid/module/product_options/product_options_dropdown.html
     
  7. dmun

    dmun Erfahrener Benutzer

    Registriert seit:
    2. Juni 2019
    Beiträge:
    211
    Danke erhalten:
    19
    Danke vergeben:
    4
    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
     
  8. Anonymous

    Anonymous Administrator
    Mitarbeiter

    Registriert seit:
    26. April 2011
    Beiträge:
    699
    Danke erhalten:
    601
    Danke vergeben:
    141
    Hi,

    die ID des Select ist doch id2 wobei 2 die Id der jeweilgen Option ist, da sind keine eckigen Klammern. Das funktioniert bei mir ohne Probleme.

    Die Script Tags im header werden nicht benötigt.

    Es kann eigentlich nur an einer Kleinigkeit liegen.
     

    Anhänge:

  9. Anonymous

    Anonymous Administrator
    Mitarbeiter

    Registriert seit:
    26. April 2011
    Beiträge:
    699
    Danke erhalten:
    601
    Danke vergeben:
    141
    Man kann auch folgendes benutzen, dann wird die ID nicht benötigt und es werden alle Select der Attribute automatisch umgewandelt:

    Code:
    $('.attributes select').ddslick();
     
  10. dmun

    dmun Erfahrener Benutzer

    Registriert seit:
    2. Juni 2019
    Beiträge:
    211
    Danke erhalten:
    19
    Danke vergeben:
    4
    Seltsam, werde ich nochmal versuchen.
    Bie mir wird standardmäßig ID="id[2]" erzeugt, also in eckigen Klammern. Ist auch so im Template definiert.
     
  11. dmun

    dmun Erfahrener Benutzer

    Registriert seit:
    2. Juni 2019
    Beiträge:
    211
    Danke erhalten:
    19
    Danke vergeben:
    4
    sorry, mit der ID war ich falsch !
     
  12. dmun

    dmun Erfahrener Benutzer

    Registriert seit:
    2. Juni 2019
    Beiträge:
    211
    Danke erhalten:
    19
    Danke vergeben:
    4
    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
     
  13. dmun

    dmun Erfahrener Benutzer

    Registriert seit:
    2. Juni 2019
    Beiträge:
    211
    Danke erhalten:
    19
    Danke vergeben:
    4
    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
     
  14. Anonymous

    Anonymous Administrator
    Mitarbeiter

    Registriert seit:
    26. April 2011
    Beiträge:
    699
    Danke erhalten:
    601
    Danke vergeben:
    141
    So funktioniert es ebenfalls:

    Code:
    $(document).ready(function () {
        $('.attributes select').each(function(index) {
                                         $(this).ddslick({
                                                             width: 230
                                                         });
        });
    });
     
  15. dmun

    dmun Erfahrener Benutzer

    Registriert seit:
    2. Juni 2019
    Beiträge:
    211
    Danke erhalten:
    19
    Danke vergeben:
    4
    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
     
  16. dmun

    dmun Erfahrener Benutzer

    Registriert seit:
    2. Juni 2019
    Beiträge:
    211
    Danke erhalten:
    19
    Danke vergeben:
    4
    hat damit scheinbar doch nichts zu tun. Die Preisberechnung geht weder mit [] als auch ohne [].

    Grüße, Dirk
     
  17. dmun

    dmun Erfahrener Benutzer

    Registriert seit:
    2. Juni 2019
    Beiträge:
    211
    Danke erhalten:
    19
    Danke vergeben:
    4
    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
     
  18. dmun

    dmun Erfahrener Benutzer

    Registriert seit:
    2. Juni 2019
    Beiträge:
    211
    Danke erhalten:
    19
    Danke vergeben:
    4
    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
     
  19. Anonymous

    Anonymous Administrator
    Mitarbeiter

    Registriert seit:
    26. April 2011
    Beiträge:
    699
    Danke erhalten:
    601
    Danke vergeben:
    141
    @dmun Die Preisberechnung funktioniert bei mir nun, hierfür musste ich die CSS Klasse js-calculate auf die neuen Elemente die von ddSlick erstellt werden einfügen.

    Ich hab das gesamte jetzt mal als GXModule zusammengepackt:

    Einfach die Datei ins Hauptverzeichnis des Shops entpacken und im Gambio Admin unter "Module->Modul-Center" das Modul "Attributbilder im Attribut DropDown" installieren

    Wenn dann auch noch unter "Artikel->Artikelattribute" die Bilder bei den Attributen zugewiesen sind, werden diese automatisch im DropDown angezeigt.
     

    Anhänge:

  20. dmun

    dmun Erfahrener Benutzer

    Registriert seit:
    2. Juni 2019
    Beiträge:
    211
    Danke erhalten:
    19
    Danke vergeben:
    4
    Auch hier, danke für die Unterstützung, Till. Werde ich schnellstmöglich testen !