Neu Wie lege ich einen Artikel in den Warenkorb per Javascript? (JTL Shop4 build 12)

Horus Sirius

Gut bekanntes Mitglied
9. März 2017
146
9
Oldenburg
Hallo,
ich möchte einen beliebigen Artikel in den JTL Shop4 Warenkorb packen.

Meine Lösung bis jetzt sieht so aus:

----------- SNIPP HTML FORM ----------
HTML:
<form id="buy_form" onsubmit="return setWarenkorb_product();return false;" action="navi.php" class="buy_form buy_form form form-basket evo-validate" method="post" data-toggle="basket-add">

        <input type="hidden" class="jtl_token" name="jtl_token" value="ECHTER-USER_JTL-TOKEN">               

        <input type="submit" name="inWarenkorb" value="1" class="hidden">

        <input type="hidden" name="show" value="1">

        <input type="hidden" name="wke" value="1">

        <input type="hidden" name="kKundengruppe" value="1">

        <input type="hidden" name="kSprache" value="1">

        <input type="hidden" name="a" value="5355">

        <input type="hidden" name="overview" value="1">

        <input type="hidden" name="Sortierung" value="">

        <input type="hidden" name="k" value="1">

        <input type="hidden" name="anzahl" value="1">



        <div class="quantity-wrapper form-group top7">

            <div class="input-group input-group-sm">

                <input type="hidden" min="0" size="2" id="quantity5355" class="quantity form-control text-right" name="anzahl" autocomplete="off" value="1" data-cip-id="quantity5355">

                                    <button class="btn btn-default" style="background-color: rgba(144, 184, 6, 0.74);color:#FFF" id="submit2" title="In den Warenkorb">

                        <span class="fa fa-shopping-cart"></span>

                        <span class="hidden-md">In den Warenkorb</span>

                    </button>

            </div>

        </div>

</form>

----- SNIP END OF FORM -----------


------ Beginn of JS somewhere loaded -------
JavaScript:
/*

  WARENKORB ABSCHICKEN an User-Script

*/

function setWarenkorb_product() {

    $("#submit2").attr("disabled", true);

    $("#submit2").html('Wird bearbeitet...');

 

    var datastring = $("#buy_form").serialize();   

 

    $.ajax({

        type:'POST',

        data:datastring,

        url:'/',

        success:function(data) {

            $("#submit2").attr("disabled", false);

            //alert("Der Artikel befindet sich jetzt im Warenkorb.");

        

            $.ajax({

                type:'POST',

                data:datastring,

                url:'/warenkorb.php',

                success:function(data) {

                

                    // Warenkorb Anzahl erhöhen

                    var val = $(".badge em").html();

                    if(typeof val === "undefined") {

                    //alert(val);

                    

                        $(".cart-menu").html('<a href="/warenkorb.php" class="dropdown-toggle" data-toggle="dropdown" title="Warenkorb"><span class="fa fa-shopping-cart"></span><sup class="badge"><em>1</em></sup><span class="shopping-cart-label hidden-sm"> 0,00 €</span> <span class="caret"></span></a>');

                    

                        // Warenkorb Endsumme erhöhen

                        var val_preis = $(".shopping-cart-label").html();

                        val_preis = val_preis.replace(' €','');

                    

                        var val = $("#jbm_preis").html();

                        val = parseFloat(val.replace(",",".")) + parseFloat(val_preis.replace(",","."));

                        $(".shopping-cart-label").html(val.toFixed(2) + ' €');



                        var warenkorb_beginn = data.indexOf('<table');

                        var warenkorb_end = data.indexOf('</table');

                        var länge = warenkorb_end - warenkorb_beginn;

                    

                        data = data.substr(warenkorb_beginn,länge);

                        //alert(data);

                        $('<ul class="cart-dropdown dropdown-menu dropdown-menu-right"><li>' + data + '</li></ul>').insertAfter( "li.cart-menu a" );                             

                        $('<div class="btn-group btn-group-justified btn-group-full"><a href="/warenkorb.php" class="btn btn-primary" title="Zum Warenkorb"><i class="fa fa-shopping-cart"></i> Zum Warenkorb</a></div>').insertAfter( ".dropdown-cart-items" );                             

            

                    } else {

                    

                        // Warenkorb Anzahl erhöhen

                        val = parseInt(val) + 1;

                        $(".badge em").html(val);

                    

                        // Warenkorb Endsumme erhöhen

                        var val_preis = $(".shopping-cart-label").html();

                        val_preis = val_preis.replace(' €','');                     

                        var val = $("#jbm_preis").html();

                        val = parseFloat(val.replace(",",".")) + parseFloat(val_preis.replace(",","."));

                        $(".shopping-cart-label").html(val.toFixed(2) + ' €');

                        $("td.total").html('<strong>' + val.toFixed(2) + ' €' + '<strong>');

                    

                        var warenkorb_beginn = data.indexOf('<table');

                        var warenkorb_end = data.indexOf('</table');

                        var länge = warenkorb_end - warenkorb_beginn;

                    

                        data = data.substr(warenkorb_beginn,länge);

                        $(".dropdown-cart-items").html(data);                 

                    }

                

                    /* Kein Matomo Fallback */

                    try {

                        _paq.push(['trackEvent', 'maiwell Hand Design Switcher', 'In Warenkorb']);

                    } catch(ex) {

                        console.log(ex);

                    }

                

                    try {

                        tracker = ga.create('UA-24162665-1', 'maiwell.com');

                        tracker.send( 'event', 'Plugin Colorswatch', 'click', 'In Warenkorb');   

                    } catch(ex) {

                        console.log(ex);

                    }

                

                    $("#submit2").html('<span class="fa fa-shopping-cart"></span><span class="hidden-md"> In den Warenkorb</span>');

                

                    return false;     

                },

                error: function (xhr, ajaxOptions, thrownError) {

                    alert(xhr.status);

                    alert(thrownError);

                }

            });         

        

            return false;     

        },

        error: function (xhr, ajaxOptions, thrownError) {

            alert(xhr.status);

            alert(thrownError);

        }

    });

    return false;

}

-------- END OF JS ------------

>> PROBLEM bei dieser Lösung, das die erste Warenkorbposition nicht mehrfach hinzugefügt werden kann.

Ansonsten, funktioniert alles korrekt für die weiteren JTL Shop Artikel mit dem Mehrfachhinzufügen.
 
Zuletzt bearbeitet:

Horus Sirius

Gut bekanntes Mitglied
9. März 2017
146
9
Oldenburg
Wie triggert man die Orginal JS Warenkorb Funktionalität von JTL Shop 4 Build 12?

verheißungsvoll wäre diese Funktionalität...

--- BEGINN ---

JavaScript:
$.evo.io().call('pushToBasket', [productId, quantity, data], that, function(error, data) {







                that.toggleState($main, false);







                if (error) {



                    return;



                }







                var response = data.response;







                if (response) {



                    switch (response.nType) {



                        case 0: // error



                            that.error(response);



                            break;



                        case 1: // forwarding



                            that.redirectTo(response);



                            break;



                        case 2: // added to basket



                            that.updateCart();



                            that.pushedToBasket(response);



                            break;



                    }



                }



            });

--- END OF ------

Wie rufe ich diese $.evo.io().call() Funktion korrekt extern auf ? (aus jtl.basket.js)
 
Zuletzt bearbeitet:

FPrüfer

Moderator
Mitarbeiter
19. Februar 2016
1.878
518
Halle
Hallo, benutze doch bitte für große Code-Blöcke das Code-Widget vom Editor. Das kann (und will) doch sonst keiner lesen... ;)
 

FPrüfer

Moderator
Mitarbeiter
19. Februar 2016
1.878
518
Halle
Wie rufe ich diese $.evo.io().call() Funktion korrekt extern auf ? (aus jtl.basket.js)
Die $.evo.io().call() - Funktion solltest du nicht direkt verwenden, da sonst die Aktualisierungen im Frontend nicht ausgeführt werden.
Grundsätzlich musst du im HTML ein passendes Formular definieren. Dann kannst du dieses Formular mit:
JavaScript:
var $form = $('#meinWarenkorbFormular');
var data  = $form.serializeObject();

$.evo.basket().addToBasket($form, data);
absenden. Mehr sollte eigentlich nicht notwendig sein, den Rest an Aktualisierung (Miniwarenkorb, Notification, etc.) müsste das Evo-Framework selbst erledigen.
 
  • Gefällt mir
Reaktionen: Horus Sirius

Horus Sirius

Gut bekanntes Mitglied
9. März 2017
146
9
Oldenburg
Die $.evo.io().call() - Funktion solltest du nicht direkt verwenden, da sonst die Aktualisierungen im Frontend nicht ausgeführt werden.
Grundsätzlich musst du im HTML ein passendes Formular definieren. Dann kannst du dieses Formular mit:
JavaScript:
var $form = $('#meinWarenkorbFormular');
var data  = $form.serializeObject();

$.evo.basket().addToBasket($form, data);
absenden. Mehr sollte eigentlich nicht notwendig sein, den Rest an Aktualisierung (Miniwarenkorb, Notification, etc.) müsste das Evo-Framework selbst erledigen.

Super schnell, sehr cool, vielen Dank :) !!!

ich hoffe es kommt kein "Redirect" weil auf diesen Modus steht der Restliche Shop. Meine das "Neuladen" der Seite.

Geht um ein Plugin https://www.maiwell.com/Acryl-Systeme <-- Die "Nagel-Hand" dort soll man natürlich nicht aus dem Kontext gerissen werden durch einen "Reload"
 

FPrüfer

Moderator
Mitarbeiter
19. Februar 2016
1.878
518
Halle
Der Redirect zum Warenkorb kommt nur, wenn das im Shop so eingestellt ist. Globale Einstellungen -> Artikel -> Weiterleitung zum Warenkorb.
 

FPrüfer

Moderator
Mitarbeiter
19. Februar 2016
1.878
518
Halle
Wenn das "Der Artikel wurde in den Warenkorb gelegt"-Popup noch ausgeblendet werden soll, dann kann man mein Code-Schnipsel noch mit der Lösung aus https://forum.jtl-software.de/threads/io-php-warenkorb-modal-window-abschalten.91530/#post-521008 kombinieren. Das würde dann etwa so aussehen:
JavaScript:
var $form  = $('#buy_form');
var data   = $form.serializeObject();
var basket = $.evo.basket();

basket.pushedToBasket = function(response) {
    // do nothing
};

basket.addToBasket($form, data);
 
  • Gefällt mir
Reaktionen: Horus Sirius

Horus Sirius

Gut bekanntes Mitglied
9. März 2017
146
9
Oldenburg
Natürlich nicht, sieht schöner aus, hatte kein nerv auf korrektur, kein plan beim Code-Editor kaputt gegangen...

334 - Weiterleitung steht auf "NEIN".

Ich möchte nur nicht dieses Popup innerhalb eines Plugins haben. Ansonsten soll alles gemacht werden.

Wie bekomme ich einen Javascript Request zum Warenkorb hin wo kein Popup vom JTL Shop 4 ausgelösst wird?
 

Horus Sirius

Gut bekanntes Mitglied
9. März 2017
146
9
Oldenburg
Wenn das "Der Artikel wurde in den Warenkorb gelegt"-Popup noch ausgeblendet werden soll, dann kann man mein Code-Schnipsel noch mit der Lösung aus https://forum.jtl-software.de/threads/io-php-warenkorb-modal-window-abschalten.91530/#post-521008 kombinieren. Das würde dann etwa so aussehen:
JavaScript:
var $form  = $('#buy_form');
var data   = $form.serializeObject();
var basket = $.evo.basket();

basket.pushedToBasket = function(response) {
    // do nothing
};

basket.addToBasket($form, data);

Vielen dank für die Lösung. So halb via Ticket. :)

*IDEAL*
 

Horus Sirius

Gut bekanntes Mitglied
9. März 2017
146
9
Oldenburg
Wenn das "Der Artikel wurde in den Warenkorb gelegt"-Popup noch ausgeblendet werden soll, dann kann man mein Code-Schnipsel noch mit der Lösung aus https://forum.jtl-software.de/threads/io-php-warenkorb-modal-window-abschalten.91530/#post-521008 kombinieren. Das würde dann etwa so aussehen:
JavaScript:
var $form  = $('#buy_form');
var data   = $form.serializeObject();
var basket = $.evo.basket();

basket.pushedToBasket = function(response) {
    // do nothing
};

basket.addToBasket($form, data);

Eine kleine Frage, ich möchte auf einer Plugin Template Seite <FullscreenTemplate> die Evo JS korrekt einbinden, wie mache ich das?

JavaScript:
{literal}
<script>
$(document).ready(function(e) {
//  $('.form-control').selectpicker();
//$('.variations select').selectpicker('refresh');
$.evo.article().init();
$.evo.article().register();
$.evo.extended().register();
  });
</script>
{/literal}

so in etwa, geht um eine JTL Appstore Cross-Plattform App (Windows,Android,iOS).... dort würde ich gerne eine Einzelseite eben FullscreenTemplate laden.
Gibt es eine Möglichkeit den Warenkorb zu füllen von dieser Plugin Template Seite aus ?
 

FPrüfer

Moderator
Mitarbeiter
19. Februar 2016
1.878
518
Halle
Hallo,
wie der WK per Javascript-Call befüllt werden kann, habe ich in meinem Beispiel ja schon geschrieben. Das ist ja prinzipiell auf jedes WK-Formular anwendbar. Was du jedoch mit "die Evo JS korrekt einbinden" meinst, ist mir nicht ganz klar.
 

rockon

Aktives Mitglied
15. April 2013
31
0
Herne
Hallo,

eine Einzelartikel per Javascript Call in in den WK zu legen klappt Problemlos. Allerdings wenn ich eine VarKombi versuche in den WK zu legen, erscheint ein Popup welches mich auffordert die entsprechende Variation auszuwählen. Ich hatte auch schon versucht in der an die Javascriptfunktion übergebene "buy_Form" die Hiddenfield mit den jeweiligen Eigenschaftswerten der Variation mit zu übergeben. Komm hier aber nicht richtig weiter. Meine Frage, wie muß die übergeben Form aussehen wenn ich eine VarKombi in den WK legen möchten ? Danke für eure Hilfe !

Gruß
 

FPrüfer

Moderator
Mitarbeiter
19. Februar 2016
1.878
518
Halle
Hallo,
Allerdings wenn ich eine VarKombi versuche in den WK zu legen, erscheint ein Popup welches mich auffordert die entsprechende Variation auszuwählen. Ich hatte auch schon versucht in der an die Javascriptfunktion übergebene "buy_Form" die Hiddenfield mit den jeweiligen Eigenschaftswerten der Variation mit zu übergeben.
Wenn sich in dem "buy_Form" ein korrekter Kindartikel befindet, dann sollte der sich auf die gleiche Art und Weise per JS in den WK legen lassen. Ein Varkombivater lässt sich jedoch nicht direkt in den WK legen, auch nicht wenn man dem Formular die Eigenschaftswerte mitgibt. Hier muss also zuerst - anhand der Eigenschaftswerte - das Varkombikind geladen und das dann in den WK gelegt werden.
 

niba

Aktives Mitglied
12. Juli 2019
12
3
Wenn sich in dem "buy_Form" ein korrekter Kindartikel befindet, dann sollte der sich auf die gleiche Art und Weise per JS in den WK legen lassen.

Hi! Ich bekomme das leider nicht hin und erhalte bei (vermeintlich?) korrekten Kindartikel immer einen Fehler wie hier beschrieben: https://forum.jtl-software.de/threa...keln-mit-variationen-in-den-warenkorb.164632/

Code:
SyntaxError: Unexpected token < in JSON at position 33
    at JSON.parse (<anonymous>)
    at n.parseJSON ([...]/js/jquery-1.12.0.min.js:4:16515)
    at Wb ([...]/js/jquery-1.12.0.min.js:4:18828)
    at y ([...]/js/jquery-1.12.0.min.js:4:22274)
    at XMLHttpRequest.c ([...]/js/jquery-1.12.0.min.js:4:26750)


Ich bin der Meinung, dass das mal geklappt hat. Wir nutzen JTL- Shop 4 in der aktuellsten Version 4.06.18
 
  • Gefällt mir
Reaktionen: MaxWidth

MaxWidth

Mitglied
15. Dezember 2021
10
3
gleich wie der vorherige Beitrag von Niba erhalte ich bei Artikeln die einen Vater-Artikel haben (Variationen) auch diesen Syntax-Fehler.

Wenn ich dem hidden-input-Feld mit dem name="a" den ID-Wert des Vaters gebe dann geht es aber dann nimmt er halt den Vater anstatt des Kindes.
Das Hinzufügen von den beiden folgenden hidden-inut-Feldern: name="VariKindArtikel" und name="eigenschaftwert[{$Artikel->kEigenschaftKombi}]" führt bei mir nicht dazu dass das Kind genommen wird - weiterhin der Vater wird zu basket hinzugefügt.

Code:
{form action=$Artikel->cURLFull class="jtl-validate x_article_cnt"}
    <input type="hidden" name="anzahl" value="1">
    <input type="hidden" name="a" value="{if !empty({$Artikel->kVaterArtikel})}{$Artikel->kVaterArtikel}{else}{$Artikel->kArtikel}{/if}"}>
    {if !empty({$Artikel->kVaterArtikel})}
        <input type="hidden" name="VariKindArtikel" value="{$Artikel->kArtikel}">
        <input type="hidden" name="eigenschaftwert[{$Artikel->kEigenschaftKombi}]" value={$Artikel->kEigenschaftKombi}>
    {/if}
    {button class="x_btn_test" name="inWarenkorb" type="submit" value="{lang key='addToCart'}" variant="primary"}{lang key='addToCart'}{/button}
{/form}

kann hier jemand weiterhelfen ? Vielen Dank im Voraus ...
 
Zuletzt bearbeitet:
Ähnliche Themen
Titel Forum Antworten Datum
Workflow Manuell HTML Request wie Server Antwort verarbeiten JTL-Wawi 1.7 0
Trackinglink enthält Hashtag - wie eingeben? JTL-Wawi 1.8 0
Neu Wie setzt Ihr eure Dev/Staging Umgebungen auf? Betrieb / Pflege von JTL-Shop 0
Neu Fehler: Sonderpreis falsch formatiert, wird nicht importiert; obwohl importiert genau wie exportiert User helfen Usern - Fragen zu JTL-Wawi 0
Neu Wie erstelle ich das richtige Layout für handy, Desktop etc Allgemeine Fragen zu JTL-Shop 0
Neu Wie gut ist die Datenbanksynchronisation? JTL-Wawi - Ideen, Lob und Kritik 4
Neu Wie kann ich im JTL-Shop einen Abwesenheitshinweis einstellen? Allgemeine Fragen zu JTL-Shop 1
Neu Artikelpreise Verknüpfen (ähnlich wie Stücklisten) User helfen Usern - Fragen zu JTL-Wawi 0
Neu Wie kann ich eine Inventurliste als Excel- oder csv-Datei erstellen? Gelöste Themen in diesem Bereich 3
Wie kann ich eine Benachrichtigung bei einem Wareneingang auslösen mit einer Mail über die Artikel die eingebucht wurden JTL-Wawi 1.8 2
Neu Conrad anbindung an JTL / eazy auction, aber wie? User helfen Usern - Fragen zu JTL-Wawi 4
[JTL-WAWI API] Wie funktioniert die Item-Image API? JTL-Wawi 1.8 0
Neu Wie kann ich die vergebene Coupons sehen. Welche Kunde welchen Copoun Allgemeine Fragen zu JTL-Shop 0
Neu Wie kann ich Alt-Texte für Bilder an Shopify senden? Shopify-Connector 2
Neu Wawi Artikelattribut = externer Link wie am besten darstellen beim Artikel? Allgemeine Fragen zu JTL-Shop 0
Neu Expressbearbeitung-Gebühr. Wie realisieren? Allgemeine Fragen zu JTL-Shop 1
Zusatzkosten wie Zölle JTL-Wawi 1.7 2
Neu Wie Wawi (Kundendaten) zurücksetzen User helfen Usern - Fragen zu JTL-Wawi 10
Neu [Umfrage] - Was hälst du von Updates - Innovativ oder aufwendig? Wie kann es besser gehen? Installation / Updates von JTL-Shop 0
Neu Wie Lizenz kündigen User helfen Usern - Fragen zu JTL-Wawi 13
Neu Wie funktioniert Individualproduktion / Einzelfertigung JTL-Plan&Produce - Ideen, Lob und Kritik 4
Neu Wie kann ich nicht mehr vorhandene ausländische USt-ID löschen? User helfen Usern - Fragen zu JTL-Wawi 1
Neu Kategoriebilder werden immer mit großem leeren Platz (wie für das 2.Bild) angezeigt Allgemeine Fragen zu JTL-Shop 6
Zusatzkosten wie Zölle JTL-Wawi 1.7 4
Neu 2 Mandanten 2 Datenbanken wie läuft es mim POS User helfen Usern 0
Neu Wie bekomme ich Statistik "Kunde/Artikelnummer/Menge/Netto-VK" auf Basis Rechnungspositionen? Arbeitsabläufe in JTL-Wawi 0
SQL ifGetPrice liefert nur netto Preise, wie komme ich an Brutto ran? JTL-Wawi 1.7 4
Neu Wie importiere ich die Zahlungs-ID für meine eigene benutzerdefinierte Zahlung, wie es andere Anbieter wie Paypal und Molli Payments in Shopware 6? Onlineshop-Anbindung 0
Neu Wie macht ihr das? Ebay Verkäufe automatisieren. Arbeitsabläufe in JTL-Wawi 3
Firmen- und E-Mail Einstellungen: Wie einrichten, wenn Firmenname (Impressum) anders ist als Shopname/Marke? JTL-Wawi 1.8 0
Neu - Lieferzeit in Wochen / Monaten statt Tagen SHOP-4080 - wo finde ich diese Möglichlichkeit im Admin Bereich Installation / Updates von JTL-Shop 1
Neu Wo kann ich einstellen, welche Rechnungsvorlage "gezogen" wird Druck-/ E-Mail-/ Exportvorlagen in JTL-Wawi 13
Kann ich eine email an die Wawi senden durch die dann ein neuer Auftrag generiert wird? (Daten müssen händisch vervollständigt werden...) JTL-Wawi 1.8 2
Verwiesen an Support wo finde ich die Logdatei von den Workflows JTL-Workflows - Fehler und Bugs 9
Gelöst Zebra T21 Scanner mit Installierten JTL POS 1.0.9.3 beim Bon versuche Ich einfach zu Scannen er sucht aber kein Artikel JTL-POS - Fehler und Bugs 1
Neu Kostenloses Webinar: BWA – Leg ich ab? Richtiges lesen einer BWA zur Unternehmenssteuerung im Onlinehandel Smalltalk 0
Kein Abgleich zum Shop, ich komme nicht in Plattformen/Verkaufskanäle rein JTL-Wawi 1.8 3
Was mache ich falsch? Kaufland API meldet - already exists kaufland.de - Anbindung (SCX) 1
Wo finde ich die "Serie" JTL-Wawi 1.8 8
Neu Lieferschein - wo finde ich die Textvorlage? Druck-/ E-Mail-/ Exportvorlagen in JTL-Wawi 1

Ähnliche Themen