Beim Javascript einbinden 403

Thema wurde von BigRib, 2. Januar 2020 erstellt.

  1. BigRib

    BigRib Erfahrener Benutzer

    Registriert seit:
    26. September 2018
    Beiträge:
    248
    Danke erhalten:
    48
    Danke vergeben:
    29
    Hallo zusammen, ich bastel gerade etwas rum und wollte mittels diesem Tutorial custom Javascript einbinden

    https://developers.gambio.de/docs/3.15.3.0/jsdoc/

    Die Test .js lautet combination_button.js und der Inhalt ist

    Code:
    tnd.widgets.module('combination_button', [], function(data) { 
      return {
        init: function(done) {
            alert('Hello World');
            done();
        }
      };
        console.log('combination_buttons.js geladen 1');
    });
    console.log('combination_buttons.js geladen 2');
    
    Der Namespace ist definiert:

    Code:
    <div class="product-info product-info-default row" data-tnd-namespace="/themes/Thrownatur/javascripts/tnd">
    
    Und das Widget wird auch aufgerufen:

    Code:
    <div id="tnd_properties" data-tnd-widget="combination_button">
    
    Als Fehlermeldung kommt jedoch:

    Code:
    Page Namespaces: gambio,jse,tnd
    require.js:1963 GET https://testshop.thrownatur.de/themes/Thrownatur/javascripts/tnd/widgets/combination_button.js net::ERR_ABORTED 403
    
    Sprich, es besteht keine Berechtigung die Datei aufzurufen. Was mache ich falsch?

    Danke und frohes Neues!
     
  2. Wilken (Gambio)

    Wilken (Gambio) Erfahrener Benutzer

    Registriert seit:
    7. November 2012
    Beiträge:
    18.737
    Danke erhalten:
    7.309
    Danke vergeben:
    2.208
    Du versuchst das direkt aus /themes aufzurufen, das geht nicht, das ist absichtlich blockiert. Du musst das aus dem Themecache referenzieren. Das ist dann public/theme/javascripts/....
     
  3. BigRib

    BigRib Erfahrener Benutzer

    Registriert seit:
    26. September 2018
    Beiträge:
    248
    Danke erhalten:
    48
    Danke vergeben:
    29
    Hi Wilkem,

    danke für die Antwort, das erklärt es. Nun bräuchte ich noch eine Info, wie ich verhindere, dass der Shop meinen Ordner und den Inhalt bei jedem Seitenaufruf aus dem public Ordner löscht :)
     
  4. Wilken (Gambio)

    Wilken (Gambio) Erfahrener Benutzer

    Registriert seit:
    7. November 2012
    Beiträge:
    18.737
    Danke erhalten:
    7.309
    Danke vergeben:
    2.208
    Du legst dein Javascript in themes/[MeinTheme] ab, das idealerweise ein Kind deines Basisthemes ist, zum Beispiel Honeygrid. Dann wird es bei jeder Cacheleerung nach public/theme kopiert. In public/theme werden die Themes in Reihenfolge ihrer Vererbung aufeinander gestapelt. In deiner Referenzierung benutzt du dann aber nicht einen Pfad auf themes/... sondern public/theme/.... weil dort nach Erzeugung die temporäre lebende Variante lebt.
     
  5. BigRib

    BigRib Erfahrener Benutzer

    Registriert seit:
    26. September 2018
    Beiträge:
    248
    Danke erhalten:
    48
    Danke vergeben:
    29
    #5 BigRib, 2. Januar 2020
    Zuletzt bearbeitet: 2. Januar 2020
    Hmmm ich stehe wohl etwas auf dem Schlauch. Die Datei liegt in:

    /themes/Thrownatur/javascripts/tnd/widgets

    im Ordner

    /public/theme/javascripts

    ist aber lediglich der system Ordner.

    //Edit

    Ich habe die Datei gefunden, aber nicht in Public, sondern in

    /themes/Thrownatur_preview/javascripts/tnd/widgets
     
  6. Wilken (Gambio)

    Wilken (Gambio) Erfahrener Benutzer

    Registriert seit:
    7. November 2012
    Beiträge:
    18.737
    Danke erhalten:
    7.309
    Danke vergeben:
    2.208
    Die Ordner mit preview im Namen werden nicht live ausgespielt.

    Das sind Vorschauen die Styleedit erzeugt, und die benutzt werden, solange Styleedit zum editieren des Themes offen ist.

    Es muss in public/theme sein, spätestens nach einer Seitencacheleerung im Backend.
     
  7. BigRib

    BigRib Erfahrener Benutzer

    Registriert seit:
    26. September 2018
    Beiträge:
    248
    Danke erhalten:
    48
    Danke vergeben:
    29
    Das ist alles etwas komisch, wie in dem Beitrag https://www.gambio.de/forum/threads...l-dateien-werden-nicht-beruecksichtigt.42190/ schonmal geschrieben, werden keine Änderungen an den Dateien sichtbar, wenn ich nicht nebenbei den Styleeditor offen habe, ich muss da nix drin machen, es muss nur ein Tab damit offen sein.

    Sobald ich Styleedit öffne und den Cache lösche, wird aber mein Ordner aus dem public ordner gelöscht.

    Ich schicke Dir gleich mal einen Link zu einem Video, das erklärt es deutlich besser, als das ichs schreiben könnte.
     
  8. Anonymous

    Anonymous Administrator
    Mitarbeiter

    Registriert seit:
    26. April 2011
    Beiträge:
    1.656
    Danke erhalten:
    1.261
    Danke vergeben:
    300
    Die JavaScripte müssen im Ordner /themes/myTheme/javascripts/custom/ liegen, nur dann werden die automatisch beim Leeren des Caches in den Ordner /public/theme/javascripts/custom/ kopiert. Dein NameSpace muss das dann auch aus dem /public/theme/javascripts/custom/ laden.

    Ein Widget muss dafür nicht erstellt werden, die Scripte werden automatisch eingebunden und ausgeführt. Du musst nur die ensprechenden Trigger schreiben wann dein Code was tun soll.
     
  9. BigRib

    BigRib Erfahrener Benutzer

    Registriert seit:
    26. September 2018
    Beiträge:
    248
    Danke erhalten:
    48
    Danke vergeben:
    29
    @Till (Gambio)

    Das hatte ich schon versucht, das Script wurde auch eingebunden, aber ich kann nichts triggern, da das Script wohl eingebunden wird, bevor der der Teil für die Eigenschaft-Kombinationen aufgerufen wird. Habs dann auch mal mit .on('click') probiert, ging aber auch nicht.

    Deswegen dachte ich mit, ich versuche es mal mit einem Modul, da der card_handler.js der die Kombinationsprüfung auf der Produkt-Seite macht, auch als Modul eingebunden wird.
     
  10. BigRib

    BigRib Erfahrener Benutzer

    Registriert seit:
    26. September 2018
    Beiträge:
    248
    Danke erhalten:
    48
    Danke vergeben:
    29
    Auch aus dem ordner '/themes/myTheme/javascripts/custom/' wird nichts nach public kopiert, müssen sie aber auch nicht, da die .js im custom ordner automatisch eingebunden werden.

    Dann brauchts auch kein NameSpace, oder bin ich jetzt voll neben der Spur?

    Laut euren tuts sollen in den custom ordner aber nur "Erweiterung vorhandener Javascripts".
     
  11. BigRib

    BigRib Erfahrener Benutzer

    Registriert seit:
    26. September 2018
    Beiträge:
    248
    Danke erhalten:
    48
    Danke vergeben:
    29
    #11 BigRib, 2. Januar 2020
    Zuletzt bearbeitet: 3. Januar 2020
    Okay, vergessen wir das mal alles :) Ich glaube es ist besser, das ich euch erzähle was ich letztendlich haben möchte, evtl erledigt sich dann das eine oder andere. Zu dem Thema gibt es auch ein Ticket, ich dachte aber, dass dies Unabhängig voneinander ist. (ID: 100850239)

    Bei der Verwendung von Eigenschaften, gibt es im Product-Info-Detail Bereich ein Anzahl X Dropdowns. Ich finde dies jedoch zu umständlich, weshalb ich die Kombinationen als Buttons anzeigen lasse. Um jetzt aber nicht x Seiten umzubauen, habe ich ein kleines jQuery Scipt geschrieben, welches die Dropdowns auf die jeweiligen Werte einstellt, wenn man einen Button klickt.

    Beispiel: Für die Kombination [Gewicht 175g & Farbe Rot] habe ich einen Button erstellt, wenn man diesen Klickt, dann wird beim Dropdown [Gewicht] -> 175g ausgewählt und beim Dropdown [Farbe] -> Rot. Die Dropdowns selber habe ich unsichtbar gemacht, da diese ja für den Kunden nicht mehr sichtbar sein müssen.

    Zu sehen ist das hier: https://thrownatur-discgolf.de/de/atom-electron-firm.html

    Das Ganze hat auch alles funktioniert (habe aktuell noch V3.10 am laufen). Nun möchte ich aber die Version 3.15 mit Theme nutzen und da scheitere ich am Einbau.

    Ich habe eine .js Datei mit dem notwendigen Code erstellt, diese Datei wird auch eingebunden, jedoch funktioniert es nur bis zu den Zeitpunkt, bis das Div [<div class="product-info-details....>] refreshed wurde, danach geht es nicht mehr. Setze ich das JS Script in das DIV, dann funktioniert es, nur wäre es mir lieber, ich hätte das Script in einer separaten Datei. Wie bekomme ich das hin? .js-calculate in der cart-_handler.js funktioniert ja auch, leider bin ich aber nicht so fit, dass ich wüsste, wie ich das für mich kopiere.

    Gruß Sven
     
  12. barbara

    barbara G-WARD 2014-2020

    Registriert seit:
    14. August 2011
    Beiträge:
    35.352
    Danke erhalten:
    11.198
    Danke vergeben:
    1.601
    Ich kann Dir nicht helfen ,aber ich habe eine Frage:
    Warum gibt es denn 3x die selben Werte? (162g rosa / 163g rosa)
    Ich suche da den Unterschied, sehe aber keinen.....
     
  13. BigRib

    BigRib Erfahrener Benutzer

    Registriert seit:
    26. September 2018
    Beiträge:
    248
    Danke erhalten:
    48
    Danke vergeben:
    29
    War mal ein Usability test, den ich mal mit ein paar Kunden gemacht hatte. Später hatte ich dann die Anzahl zusätzlich in Klammern dahinter gesetzt. Normal ist es so wie bei der Gelben mit 161g, da sind es 4 mal die gleichen und eine etwas dunkler. Da die Scheiben aber alle gelabelt sind, habe ich es in diesem Fall nicht rückgängig gemacht :)

    Habe jetzt mal ein besseres Beispiel in den oberen Beitrag gesetzt :)
     
  14. Sergej (Gambio)

    Sergej (Gambio) Erfahrener Benutzer
    Mitarbeiter

    Registriert seit:
    1. August 2016
    Beiträge:
    336
    Danke erhalten:
    205
    Danke vergeben:
    69
    Was dir helfen könnte ist
    Code:
    $(document).ajaxComplete(function(event, xhr, settings) {
                    if (settings.url === 'shop.php?do=CheckStatus' && xhr.status === 200) {
                        // Hier kommt mein Code hin
                        console.log('huch...');
                    }
                });
    In deinem JS wartest du im Prinzip auf eine bestimmte URL die über Ajax ausgeführt wird (z.B. shop,php?do=CheckStatus) damit anschließend dein Code für eventuell neu hinzugefügte Elemente auch gültig ist.

    siehe dazu https://api.jquery.com/ajaxComplete/
     
  15. BigRib

    BigRib Erfahrener Benutzer

    Registriert seit:
    26. September 2018
    Beiträge:
    248
    Danke erhalten:
    48
    Danke vergeben:
    29
    Danke schonmal :) Jetzt muss ich im Prinzip nur noch die URL rausfinden oder? Das Div wird ja aber jedes Mal neu geladen, sobald eine Änderung (Kombinationsprüfung) durchgeführt wird, das würde ja bedeuten, das es dann auch nur einmal klappt, oder?
     
  16. Wilken (Gambio)

    Wilken (Gambio) Erfahrener Benutzer

    Registriert seit:
    7. November 2012
    Beiträge:
    18.737
    Danke erhalten:
    7.309
    Danke vergeben:
    2.208
    Ich schätze ja du brauchst wenn man schon das alte jQuery Zeugs nehmen mag eher on().

    https://api.jquery.com/on/

    Damit hängt man Events an Selektoren, das geht immer wieder.
     
  17. Sergej (Gambio)

    Sergej (Gambio) Erfahrener Benutzer
    Mitarbeiter

    Registriert seit:
    1. August 2016
    Beiträge:
    336
    Danke erhalten:
    205
    Danke vergeben:
    69
    Die Konsole des Browsers im Bereich Netzwerk wird dir die URL mitteilen. Müsste etwas mit CheckStatus sein.

    Nein, weil das ajaxComplete() in deinem JS-Code auch jedes mall abgefeuert wird, sobald die URL im Netzwerk erscheint. Grob formuliert :)
     
  18. BigRib

    BigRib Erfahrener Benutzer

    Registriert seit:
    26. September 2018
    Beiträge:
    248
    Danke erhalten:
    48
    Danke vergeben:
    29
    #18 BigRib, 3. Januar 2020
    Zuletzt bearbeitet: 3. Januar 2020
    Ja das hatte ich auch schon versucht, aber auch hier, keine Reaktion nachdem das Div neu geladen wurde. Was wäre denn die Alternative zum alten jQuery Code? Ich hatte es ja mit der API versucht, aber wie ich dir im Video gezeigt hatte, werden die Javascript Datein nur gelöscht und nicht kopiert.

    Jup, du hattest bereits die richtige URL im Code.

    Ich habe in der Datei nun folgenden Code:

    Code:
    console.log('properties_buttons.js geladen');
    
    
    $(document).ajaxComplete(function(event, xhr, settings) {
                    if (settings.url === 'shop.php?do=CheckStatus' && xhr.status === 200) {
                        // Hier kommt mein Code hin
                        console.log('huch...');
                    }
                });
    
    Allerdings kommt nicht mehr als (properties_buttons.js geladen) in der Console. Das Huch erscheint nicht einmal.

    //Edit

    Kann es sein, dass es nicht funktioniert, da settings.url folgende URL enthält?

    Code:
    shop.php?do=CheckStatus&properties_values_ids%5B23%5D=0&properties_values_ids%5B35%5D=0&properties_values_ids%5B59%5D=0&properties_products_id=1270&products_id=1270&products_qty=1&btn-add-to-cart=In%20den%20Warenkorb&target=check&isProductInfo=1&page_token=&_=1578047357588
    
     
  19. Sergej (Gambio)

    Sergej (Gambio) Erfahrener Benutzer
    Mitarbeiter

    Registriert seit:
    1. August 2016
    Beiträge:
    336
    Danke erhalten:
    205
    Danke vergeben:
    69
    Ja, daran liegt es ;)

    Statt "===" nimm dafür z.B. "indexOf" also
    Code:
    settings.url.indexOf('shop.php?do=CheckStatus') >= 0
    Der Part mit ajaxComplete() kommt in die "init" oberhalb von "done()";
     
  20. BigRib

    BigRib Erfahrener Benutzer

    Registriert seit:
    26. September 2018
    Beiträge:
    248
    Danke erhalten:
    48
    Danke vergeben:
    29
    Juhu dass funktioniert :D Super vielen lieben Dank!!