Aus Bootstrap Variable an Jquery übergeben

Shopware 5 Programmierung
1

Hallo liebe Community,

 

ich habe ein ganz simples Plugin. Es gibt ein Textfeld, in dem ich “Hallo Welt” eintrage.

Wenn ich die Variable über “$view->assign(‘meintext’, $config->meintext);” ausgebe, dann kann ich diese über die .tpl anzeigen lassen.

 

So weit alles gut - nur jetzt kommt mein Problem:

Ich habe Jquery eingebunden. Natürlich auch den Event registriert.

public function addJsFiles(Enlight_Event_EventArgs $args) {
   $jsFiles = array(__DIR__ . ‘/Views/frontend/plugins/hallowelt/_public/src/js/script.js’);
   return new Doctrine\Common\Collections\ArrayCollection($jsFiles);
}

Gebe ich nun in meiner “script.js” folgendes ein:

jQuery(document).ready(function ($) {

alert(‘Hallo Welt’); 

});

dann wird mir “Hallo Welt” angezeigt.

 

Versuche ich allerdings:

jQuery(document).ready(function ($) {

alert(’{$hallowelt}’); 

});

 

dann wird mir {$hallowelt} angezeigt.

 

Natürlich könnte ich über die .tpl die Variable {$hallowelt} Javascript als Variable zuordnen - was auch funtioniert.

Ich würde mir aber gerne den umständlichen Weg über die Javascript Variable sparen.

In Less gibt es ja die Möglichkeit direkt auf Variablen aus der Bootstrap zuzugreifen:

 

    public function addLessFiles(Enlight_Event_EventArgs $args)
    {
        $less = new \Shopware\Components\Theme\LessDefinition(
        //configuration
            array(
                ‘halloweltbreite’ => $this->Config()->get(‘halloweltbreite’),

            
            ),
            //less files to compile
            array(
                __DIR__ . ‘/Views/frontend/plugins/hallowelt/_public/src/less/all.less’
            ),
            //import directory
            __DIR__
        );
        return new Doctrine\Common\Collections\ArrayCollection(array($less));
    }

über:

@halloweltbreite*1px

in der “style.less”

 

Gibt es denn nicht die Möglichkeit Variablen aus der Bootstrap DIREKT in meiner script.js zu verwenden, ohne den Umweg .tpl --> Javascript???

 

Wenn diese Möglichkeit existiert, dann würde ich mich sehr über ein Beispiel freuen.

Ich habe auch schon den Artikel “Getting started with the statemanager and the jQuery plugin base” gelesen, weiss aber leider nicht ob es das richtige ist und wie ich es nutzen könnte.

Vielen Dank im voraus

Hoppler

2

Hallo,

soweit mir bekannt ist, gibt es im Gegensatz zu LESS und Smarty keinen direkten Weg, in der JavaScript-Datei auf die Variable zuzugreifen.

Du könntest diese aber unproblematisch dem entsprechenden Element in der Template-Datei bspw. als “data”-Eigenschaft zuordnen und diese Eigenschaft dann in deiner JavaScript-Datei abfragen etc.

Beste Grüße

Sebastian

3

Hallo Sebastian,

 

vielen lieben Dank für Deine Antwort.

Das hört sich sehr gut an! Nur, sorry, wie mache ich das?

Muss ich eine DIV Box erstellen und diese dann mit Werten aus der View meines Plugins befüllen?

Und wie würde ich das in meiner JavaScript abfragen?

Ich weiss, viele Fragen - aber wer nicht fragt, kann nichts lernen. Thumb-Up

L.G.

Hoppler

 

4

@hoppler schrieb:

Hallo Sebastian,

 

vielen lieben Dank für Deine Antwort.

Das hört sich sehr gut an! Nur, sorry, wie mache ich das?

Muss ich eine DIV Box erstellen und diese dann mit Werten aus der View meines Plugins befüllen?

Und wie würde ich das in meiner JavaScript abfragen?

Ich weiss, viele Fragen - aber wer nicht fragt, kann nichts lernen. Thumb-Up

L.G.

Hoppler

 

Hallo,

naja du nutzt ja so und so ein neues Textfeld - dem könntest du ja einfach ein Attribut bspw. data-meinattribut=„{$hallowelt}“ mit zuweisen

und dann in deiner JavaScript-Datei bspw. über:

var meinattribut = $('.mein-textfeld').attr("data-meinattribut");

den Wert abfragen.

Beste Grüße

Sebastian

1 „Gefällt mir“
5

Vielen lieben Dank für die schnelle Hilfe!!!

 

Nur schade dass man Bootstrab Form Variablen nicht über JavaScript oder Jquery direkt auslesen kann.

L.G.

Hoppler

6

Du schreibst ein JQuery Plugin und gibst die Variablen an die Initialisierung des Plugins mit.

Zum Beispiel so:

$("#variantselector").variantSelector({
requestUrl : "https://www.meinestruempfe.de/CbeVariantsDetail/getVariants",
articleID : "498",
articleTax : "19",
availableStockText : "Artikel verfügbar",
lowStockText : "Nur noch sehr wenige Artikel verfügbar",
lowStockTextPrefix : "Nur noch",
lowStockTextSuffix : "Artikel verfügbar",
outOfStockText : "Artikel leider vergriffen",
intoBasketText : "In den Warenkorb",
regularPriceText : "(Unser regulärer Preis)",
lastArticleText : "Das ist der letzte Artikel! Schnell zugreifen!",
variantsDeliveryText : "Wieder lieferbar:",
useZoomPlus : false,
lowStockValue : 3,
imgSrcSmall : 0,
imgSrc : 1,
imgSrcZoom : 2,
notificationText : "Benachrichtigen Sie mich, wenn der Artikel lieferbar ist."
});