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

Horus Sirius

Gut bekanntes Mitglied
9. März 2017
138
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
138
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.520
361
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.520
361
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
138
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.520
361
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.520
361
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
138
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
138
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
138
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.520
361
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
28
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.520
361
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.
 
Ähnliche Themen
Titel Forum Antworten Datum
Neu Wie lange dauert ein Abgleich? User helfen Usern - Fragen zu JTL-Wawi 13
Neu Wie kann ich Bestellungen vom 16.07 - 22.07 nochmals in die Wawi importieren Shopware-Connector 4
Neu Wie kann ich die hinterlegte E-Mail Adresse für Rechnungsversand von "Eigene Felder" in E-Mail Vorlage abfragen? User helfen Usern - Fragen zu JTL-Wawi 8
Neu Wie bekomme ich Änderungen im Childtheme mehrsprachig? Templates für JTL-Shop 2
Neu Fehlermeldung "Wert darf nicht NULL sein" kein einloggen der WaWi mehr möglich - wie beheben? JTL-Wawi - Fehler und Bugs 41
Neu Ust.-IdNr. Deregistrierung wie möglich? User helfen Usern - Fragen zu JTL-Wawi 0
Neu Wie macht Ihr das? Buchhaltung / Steuer / DATEV User helfen Usern - Fragen zu JTL-Wawi 5
Neu Bedingung wie PLZ enthält Leerzeichen? User helfen Usern - Fragen zu JTL-Wawi 4
Neu Lagerbestand per CSV Einfügen, aber wie ? User helfen Usern - Fragen zu JTL-Wawi 12
Neu Artikel durch Amazon und Händler versenden? Wie? Amazon-Anbindung - Ideen, Lob und Kritik 2
Neu JTL-Wawi 1.5.46.0 - Kunde hat Paket im Paketshop nicht abgeholt - Rückläufer soll nach Wareneingang erneut versandt werden, wie vorgehen? User helfen Usern - Fragen zu JTL-Wawi 2
In Diskussion Wie ist euer Ablauf an der POS ( Kassenbuch - Z-Bon, Gutschriften, Warentausch etc....) Allgemeine Fragen zu JTL-POS 1
Neu Wie gebe ich im JTL Exportformat alle Kategorien aus, in denen sich ein Artikel befindet Einrichtung von JTL-Shop4 0
Neu Betriebsferien Shop 5.0 bekannt geben wie wo Allgemeine Fragen zu JTL-Shop 1
Neu tab4 name – "Datentyp" ausgegraut: Wie zu "Wertliste ändern"? User helfen Usern - Fragen zu JTL-Wawi 6
Neu Wie kann man ein Artikel in mehrere Artikel verwandeln ? Arbeitsabläufe in JTL-Wawi 0
Neu Ein Artikel zwei Steuersätze. Wie löse ich das Problem? Arbeitsabläufe in JTL-Wawi 3
Neu Große Product-Streams wie Artikellisten anzeigen Betrieb / Pflege von JTL-Shop 1
Neu Ist eine Bildvergößerung im NOVA-Template möglich wie im EVO-Template Technische Fragen zu Plugins und Templates 0
Neu Leider gibt es nach wie vor Fehler bei der Ausgabe von Adressetiketten JTL-Wawi - Fehler und Bugs 0
Neu Footer aufteilen.. aber wie? Templates für JTL-Shop 4
In Diskussion TSE Cloud mit POS Verknüpfung fehlgeschlagen - Wie kann ich die IP ändern? Einrichtung / Updates von JTL-POS 6
Neu Doofinder JTL5 Plugin wie kriege ich den Shop angebunden Plugins für JTL-Shop 1
Neu NOVA > Wie eigene Fonts im Child-Theme einbinden Templates für JTL-Shop 5
Neu Wie bekomme ich die Platzhalter für Bilder in eine neue Template? User helfen Usern - Fragen zu JTL-Wawi 1
Neu Wie kriege ich Kinderartikel auf eine Packliste User helfen Usern - Fragen zu JTL-Wawi 0
Neu Kategorieattribute: getter should be used to get categoryAttributes! Aber wie? JTL-Shop - Fehler und Bugs 2
Neu Wie kann ich für Lieferantenartikel die EK Staffelpreise importieren? Schnittstellen Import / Export 2
Neu Wie ändere ich den Wert, der für die Variable cGoogleCategorie hinterlegt ist? Betrieb / Pflege von JTL-Shop 3
Neu Umsatzsteuer-ID-Änderung: Wie in bereits erstellten Rechnungen korrigieren? Arbeitsabläufe in JTL-Wawi 0
Neu Wie kann man bei einem Shop-Update informiert werden? Betrieb / Pflege von JTL-Shop 2
Neu Wie läuft Plugin-Update von Shop4 auf Shop5? Technische Fragen zu Plugins und Templates 4
Neu Wie kommen diese Suchanfragen zusammen Allgemeine Fragen zu JTL-Shop 0
Neu Versandfenster komplett ausblenden beim Kauf/ Anpassungen der Wärter wie "Artikel" im Shop Allgemeine Fragen zu JTL-Shop 0
Neu Wie verbuche ich einen Warenausgang? User helfen Usern - Fragen zu JTL-Wawi 2
Neu Wie kann man den Warenkorb editieren? Templates für JTL-Shop 3
Neu Kreditlimit Warnung offene Posten höher wie in Wirklichkeit ? User helfen Usern - Fragen zu JTL-Wawi 0
Neu Suche SQL für die Ausgabe von Lieferländern mit wie vielen Paketen beliefert und welcher netto warenwert gestaffelt nach Jahr, Monat, Woche und Tag? User helfen Usern 3
Neu Track & Trace Pakete werden nicht angezeigt bzw. erhalten keinen neuen Status - wie ist eure Erfahrung ? JTL-Track&Trace - Fehler und Bugs 1
Neu Rechnung 2.0 - wie herausfinden ob bezahlt? Druck-/ E-Mail-/ Exportvorlagen in JTL-Wawi 2
Neu JTL-Shop 5.0.1 - Registrierung Rechnungsadresse anzeige NUR der Länder nach der GEO-BlockingVerordnung und NICHT der ganzen Welt, wie? Allgemeine Fragen zu JTL-Shop 8
Neu Wie WMS-Lagerplatznummer in Artikeletikett drucken? Druck-/ E-Mail-/ Exportvorlagen in JTL-Wawi 7
Neu Wie kann ich Fehler in der Suche umgehen/lösen? JTL-Shop - Fehler und Bugs 1
Neu Verkauf nach Großbritannien wie richtig verbuchen Einrichtung und Installation von JTL-eazyAuction 0
Neu Ameise - Wie exportiere ich ein einzelnes Eigenes Feld von allen Artikeln? User helfen Usern - Fragen zu JTL-Wawi 2
Neu Connector bricht ab, wie finden wir heraus durch welche Produkte dies verursacht wird Shopify-Connector 7
Neu Wo/Wie wird der Lizenzschlüssel bei einem Upgrade der CFE auf die JTL Shop Standardversion eingetragen? Installation / Updates von JTL-Shop 4
Neu Wie kann ich gelöschte Rechnungskorrekturen mir anzeigen lassen und ausdrucken lassen User helfen Usern - Fragen zu JTL-Wawi 0
Neu JTL Shop 5 - Container mit Link versehen - wie geht das Allgemeine Fragen zu JTL-Shop 3
Neu Artikelbeschreibung überarbeiten - Wie vorgehen? User helfen Usern - Fragen zu JTL-Wawi 1

Ähnliche Themen