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

[Horus Sirius]

Hallo,
ich möchte einen beliebigen Artikel in den JTL Shop4 Warenkorb packen.

Meine Lösung bis jetzt sieht so aus:

----------- SNIPP HTML FORM ----------

<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 -------

/*

  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.

 

[Horus Sirius]

Wie triggert man die Orginal JS Warenkorb Funktionalität von JTL Shop 4 Build 12?

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

--- BEGINN ---

$.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)

 

[FPrüfer]

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]

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:

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.

 

[Horus Sirius]

Hallo, benutze doch bitte für große Code-Blöcke das Code-Widget vom Editor. Das kann (und will) doch sonst keiner lesen...

>> hab ich doch glatt gemacht, habs ned gefunden ... mein erster Code im Forum *smile*

 

[Horus Sirius]

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:

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]

Der Redirect zum Warenkorb kommt nur, wenn das im Shop so eingestellt ist. Globale Einstellungen -> Artikel -> Weiterleitung zum Warenkorb.

 

[FPrüfer]

>> hab ich doch glatt gemacht, habs ned gefunden ... mein erster Code im Forum *smile*

Formatierst du deinen Quellcode wirklich so? Durch die vielen Leerzeilen sieht das doch immer noch "furchtbar" aus...

 

[FPrüfer]

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:

var $form  = $('#buy_form');
var data   = $form.serializeObject();
var basket = $.evo.basket();

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

basket.addToBasket($form, data);

 

[Horus Sirius]

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]

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:

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]

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:

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?

{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]

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]

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]

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.

 

[_simone_]

Für schnell und einfach evt. dies plugin installieren:
https://css-umsetzung.de/shop/CSS-Externer-Warenkorb

 

[niba]

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/

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

 

[MaxWidth]

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.

{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 ...