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
10
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
10
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.881
524
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.881
524
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
10
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.881
524
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.881
524
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
10
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
10
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
10
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.881
524
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.881
524
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

Aktives Mitglied
15. Dezember 2021
13
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
Wie versendet die Wawi E-Mails? JTL-Wawi 1.9 0
Neu Wie finde ich per SQL heraus welche Aufträge auf Teillieferbar stehen? JTL Ameise - Eigene Exporte 1
Neu Wie kann ich Artikel mit Lagerbestand 0 beim Import inaktiv setzen) JTL-Ameise - Ideen, Lob und Kritik 16
Neu JTL-Worker als Windows-Dienst - wie macht Ihr das? User helfen Usern - Fragen zu JTL-Wawi 8
Neu Wie entferne ich die Lastschrift Checkbox? Allgemeine Fragen zu JTL-Shop 2
Neu Ameise (WAWI 1.9.5.2) -> Wie funktioniert der Upload der Produktion JTL-Plan&Produce - Ideen, Lob und Kritik 0
Bestehender eBay-Shop -- JTL Shop neu -- Abgleich -- wie vorgehen? JTL-Wawi 1.9 1
Wie lange benötigt bei euch die Wawi zum starten JTL-Wawi 1.9 7
Neu .htaccess wie nun einstellen ? Installation / Updates von JTL-Shop 2
Neu Manueller Worklfow Rechnung für Mahnung, wie den offenen Rechnungsbetrag bei Teilrechnung ausgeben? JTL-Workflows - Ideen, Lob und Kritik 1
Neu Wie in der Wawi gebrauchte Artikel vom Endkunden einkaufen User helfen Usern - Fragen zu JTL-Wawi 4
Neu Wie kann ich den Titel bei Google Ergebnissen ändern? Allgemeine Fragen zu JTL-Shop 6
Neu Bildgrößen auf der Startseite (in den Boxen wie z.B. Top-Angebot) Allgemeine Fragen zu JTL-Shop 3
Neu Hersteller ändert SKU von Kind Artikel (Varianten) | Vater beleibt gleich - wie verfahren bei "gemischtem" Lager alt/neu User helfen Usern - Fragen zu JTL-Wawi 3
Neu Sortierung nach Bestand - so wie im JTL Shop 4 JTL-Shop - Ideen, Lob und Kritik 2
Neu Wie kann ich bestimmte Wörter in der Suchfunktion von JTL-Shop ausschließen? Allgemeine Fragen zu JTL-Shop 0
Neu Vererben der Bildern einer Variation auf alle anderen Variationen, wie beim Vererben von Vater zu Kind-Artikeln, möglich wie? User helfen Usern - Fragen zu JTL-Wawi 0
Neu Drop Shipping - Beide Firmen mit JTL Wawi - Wie löse ich das? Arbeitsabläufe in JTL-Wawi 10
Neu Wie das neue Funktionsattribut storefront_presentation_main_product anlegen? Shopware-Connector 5
Neu GPSR Verordnung - Wie handhabt ihr das im Shop mit dem Nova Template? Betrieb / Pflege von JTL-Shop 14
Neu Bei VarKombi-Artikeln, wie immer eine Farbe und Größe vorauswählen, damit alle Bilder angezeigt werden? Allgemeine Fragen zu JTL-Shop 4
Neu Wechsel Auftragspaket im Kundencenter - wie und wann ? User helfen Usern - Fragen zu JTL-Wawi 6
Paypal Kontosperre / Verbot bestimmte Artikel in bestimmte Länder zu liefern - wie Umsetzen? JTL-Wawi 1.9 2
Neu Wie kann ich über eigene Felder eine Mehrfachauswahl erstellen? User helfen Usern - Fragen zu JTL-Wawi 4
Neu Wie andere Länder und Sprachen vom Google Shopping Plugin mit dem Merchant Center verbinden Plugins für JTL-Shop 6
Neu Wie macht ihr euch euch Testumgebung? Gelöste Themen in diesem Bereich 6
Neu Ebay Verkäufe - Auswahlartikel mit händischer Auswahl in der Rechnung - wie bei Wawi 1.9 vorgehen ?! Arbeitsabläufe in JTL-Wawi 0
Neu Unterschiedliche Lagerplätze, wie konfigurieren? Waage nur mit WMS? Arbeitsabläufe in JTL-WMS / JTL-Packtisch+ 2
Neu Wie Reklamationen aus Statistik ausschließen? Arbeitsabläufe in JTL-Wawi 2
Wie FBA Gutschrift erzeugen ohne Auftragsbezug? JTL-Wawi 1.9 0
Neu Gebinde wie angelegt unter sonstiges als Barcode ausgeben Druck-/ E-Mail-/ Exportvorlagen in JTL-Wawi 11
Neu Kunde zahlt bar bei Anlieferung, wie löse ich das? Arbeitsabläufe in JTL-Wawi 15
In Diskussion Geplante Abkündigung für JTL-POS für Android 7 Geräte wie Sunmi T2 in Sicht? JTL-POS - Fragen zu Hardware 16
Neu cKundenNr im JTL Shop nicht gesetzt. Auch kKundengruppe. Wie Rückkanal zum Shop aktualisieren? JTL-Wawi - Fehler und Bugs 3
Neu Wie handhabt ihr eure Buchhaltung mit JTL? Arbeitsabläufe in JTL-Wawi 9
Neu REST-API nur noch für Premium Kunden - oder wie verhindere ich Nutzung moderner Schnittstellen... Schnittstellen Import / Export 37
Neu Umstellung auf Packtisch von WMS, wie Lagerplatz anzeigen lassen? Arbeitsabläufe in JTL-WMS / JTL-Packtisch+ 4
Neu Falsche Preise - wie nachvollziehen ? eBay-Anbindung - Fehler und Bugs 0
Neu Umlagerungen - Wie, wo, oder SQL? Arbeitsabläufe in JTL-Wawi 2
Neu Täglich ganz viele Suchanfragen mit EAN Nummern - Wie aussperren? Allgemeine Fragen zu JTL-Shop 2
Neu Anhänge wie Widerruf und AGB usw. User helfen Usern - Fragen zu JTL-Wawi 0
Neu Wie kann ich verhindern, dass ein Auftrag den verfügbaren Lagerbestand beeinflusst? JTL-Wawi - Ideen, Lob und Kritik 1
Neu Habe ich ein Sicherheitsproblem oder bin ich nur unfähig? Allgemeine Fragen zu JTL-Shop 2
Neu neue Tarife mit Shop verstehe ich da was falsch? Allgemeine Fragen zu JTL-Shop 3
Neu Warum kann ich bei Druckvorlagen die Seitengröße nicht anpassen? Druck-/ E-Mail-/ Exportvorlagen in JTL-Wawi 7
Neu Ab dem 01.09.2024 neue Lizenzschlüssel, muss ich was machen? User helfen Usern - Fragen zu JTL-Wawi 2
Neu Umtauschartikel und Reparaturdienstleistung, habe ich was falsch eingestellt? User helfen Usern - Fragen zu JTL-Wawi 1
Neu Kann ich das alte EVO-Template löschen? Templates für JTL-Shop 2

Ähnliche Themen