Kommunikation Laravel & VueJS im Warenkorb

  • Hey, ich bräuchte ein bisschen Hilfe / Input bei folgendem Problem:


    Im Warenkorb unseres kleinen Onlineshops werden, wie üblich, die ausgewählten Artikel aus dem Shop angezeigt und der Gesamtpreis dieser Artikel berechnet.

    Die Artikel(preise) kommen, ebenso wie der Gesamtpreis ($total), über PHP aus dem CartController:



    Die Versandkosten sollen via HTML select gesetzt werden - dabei sollen das Zielland gewählt und die entsprechenden Versandkosten angezeigt werden.

    Das habe ich mit VueJS gelöst, da ich an dieser Stelle nicht möchte, dass die Kunden diese Auswahl nochmal bestätigen müssen, um das "hintenrum" über PHP zu lösen.

    So sieht mein Vue Script dazu aus:



    Und so sieht es im Blade File aus:



    Das funktioniert alles soweit gut und tut, was es soll.


    Nun möchte ich aber natürlich am Ende auch den Gesamtpreis, also Artikelpreise + Versandkosten, anzeigen.

    Und da weiß ich grad nicht weiter.

    Da ich den Gesamtpreis über den Controller ja quasi schon im System hab, würde ich am liebsten diesen Wert irgendwie an mein VueJS Script übergeben und die Versandkosten einfach dazu addieren.

    Ist der einzige Weg, das zu bewerkstelligen, das als Vue Component anzuegen? So könnte ich $total ja wahrscheinlich als Property übergeben, oder?

    Gibt es noch eine andere Möglichkeit ohne Component?


    Danke schonmal und viele Grüße,


    Lena

  • Ich denke das einfachste ist eine Vue Component welche die Artikelpreise als prop bekommt und darin dynamisch die Versandkosten drauf addiert. Genauso wie du es schon vorgeschlagen hast.


    PHP
    1. <shipping-and-total total="{{ $total }}"></shipping-and-total>


    Wenn du lust hast zu experimentieren kannst du dir mal Laravel Livewire anschauen.

  • Ja, ich schätze ich werde um die Component nicht herum kommen in dem Fall... danke auf jeden Fall für die Rückmeldung!


    Livewire klingt tatsächlich spannend, danke für den Tipp. Werde ich mir bei nächster Gelegenheit mal genauer anschauen. :thumbup: