# Freitextfelder per Ajax nachladen

**URL:** <https://forum.shopware.com/t/freitextfelder-per-ajax-nachladen/37632>\
**Category:** Themes & Design\
**Created:** [22. Juni 2016 um 12:04 UTC](https://forum.shopware.com/t/freitextfelder-per-ajax-nachladen/37632 "2016-06-22T12:04:20Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![Sascha\_Kertz](https://avatars.discourse-cdn.com/v4/letter/s/ccd318/32.png) [@Sascha\_Kertz](https://forum.shopware.com/u/Sascha_Kertz)\
**Post date:** [22. Juni 2016 um 12:04 UTC](https://forum.shopware.com/t/freitextfelder-per-ajax-nachladen/37632/1 "2016-06-22T12:04:20Z")

</div>

Hallo zusammen!

Folgendes Problem…  
Wir wollen zusätzlich zu den Angaben der Artikelgrößen die Angaben für die Packmaße anzeigen lassen. Das Ganze soll gelöst werden über ein Freitextfeld (variantenfähig).

Dieses Freitextfeld haben wir dann in den Beschreibungstext im eigenen Template positioniert. Soweit so gut, es wird korrekt angezeigt.

Das Problem liegt ist nun daran, dass bei einem Variantenwechsel die Werte des Freitextfeldes nicht nachgeladen werden.  
Das funktioniert nur, wenn man die Seite komplett neu lädt, oder aber auch wenn das Freitextfeld oben unter dem Button „In den Warenkorb“ liegt. (attr1)

Wir möchten diese Angabe allerdings nicht so prominent plazieren und dachten uns das wir das Ganze direkt in den Beschreibungstext zu legen.  
Wir nutzen Shopware 5.1.4, hat jemand Ahnung wie man das Lösen kann? Danke

&nbsp;

---

<div class="post-metadata">

**Author:** ![Philipp\_Schuch](https://avatars.discourse-cdn.com/v4/letter/p/8797f3/32.png) [@Philipp\_Schuch](https://forum.shopware.com/u/Philipp_Schuch)\
**Post date:** [23. Juni 2016 um 13:35 UTC](https://forum.shopware.com/t/freitextfelder-per-ajax-nachladen/37632/2 "2016-06-23T13:35:44Z")

</div>

Hallo,

das jQuery Plugin welches für den Ajax-Wechsel zuständig ist findest Du hier:  
**themes/Frontend/Responsive/frontend/\_public/src/js/jquery.ajax-variant.js**

Dort werden&nbsp;in der Methode **requestData&nbsp;** entsprechende&nbsp;Events geworfen, auf welche&nbsp;Du Dich registrieren kannst:

```
 plugin/swAjaxVariant/onBeforeRequestData plugin/swAjaxVariant/onRequestData

```

Infos zu den Events findest Du auch hier:  
[jQuery plugins and the StateManager](https://developers.shopware.com/designers-guide/javascript-statemanager-and-pluginbase/#global-jquery-event-observer)

&nbsp;

Sonnige Grüße,  
Phil

&nbsp;

&nbsp;

---

<div class="post-metadata">

**Author:** ![NextMike](https://avatars.discourse-cdn.com/v4/letter/n/838e76/32.png) [@NextMike](https://forum.shopware.com/u/NextMike)\
**Post date:** [24. Juni 2016 um 14:29 UTC](https://forum.shopware.com/t/freitextfelder-per-ajax-nachladen/37632/3 "2016-06-24T14:29:36Z")

</div>

Haben die Varianten auch deren&nbsp;Freitextfelder gefüllt?

---

<div class="post-metadata">

**Author:** ![regentanker](https://avatars.discourse-cdn.com/v4/letter/r/50afbb/32.png) [@regentanker](https://forum.shopware.com/u/regentanker)\
**Post date:** [7. November 2016 um 14:40 UTC](https://forum.shopware.com/t/freitextfelder-per-ajax-nachladen/37632/4 "2016-11-07T14:40:19Z")

</div>

Hallo,

ich binde über zwei Tabs Artikelfreitextfeld 3 bzw. Artikelfreitextfeld 4 auf der Artikeldetailseite ein. Aktiviere ich den Variantenwechsel per ajax werden die Freitextfelder der Varianten natürlich nicht neu geladen. Was muss ich in dieser js-Datei anpassen, damit auch bei den Varianten die Freitextfelder geladen werden? Bin in diesem Bereich leider nicht so fit! 😕

Hoffe mir kann jemand behilflich sein! :)&nbsp;

---

<div class="post-metadata">

**Author:** ![NextMike](https://avatars.discourse-cdn.com/v4/letter/n/838e76/32.png) [@NextMike](https://forum.shopware.com/u/NextMike)\
**Post date:** [7. November 2016 um 14:49 UTC](https://forum.shopware.com/t/freitextfelder-per-ajax-nachladen/37632/5 "2016-11-07T14:49:57Z")

</div>

> [@jonas3301 schrieb:](https://forum.shopware.com/profile/11193/jonas3301 "jonas3301")
> 
> Hallo,
> 
> ich binde über zwei Tabs Artikelfreitextfeld 3 bzw. Artikelfreitextfeld 4 auf der Artikeldetailseite ein. Aktiviere ich den Variantenwechsel per ajax werden die Freitextfelder der Varianten natürlich nicht neu geladen. Was muss ich in dieser js-Datei anpassen, damit auch bei den Varianten die Freitextfelder geladen werden? Bin in diesem Bereich leider nicht so fit! ![:/](https://dub1.discourse-cdn.com/flex013/resources/emoji/confused.png ":/")
> 
> Hoffe mir kann jemand behilflich sein! ![:)](https://dub1.discourse-cdn.com/flex013/resources/emoji/smile.png ":)")&nbsp;
> 
> &nbsp;

warum natürlich? was wird denn geladen?&nbsp;

---

<div class="post-metadata">

**Author:** ![regentanker](https://avatars.discourse-cdn.com/v4/letter/r/50afbb/32.png) [@regentanker](https://forum.shopware.com/u/regentanker)\
**Post date:** [7. November 2016 um 15:10 UTC](https://forum.shopware.com/t/freitextfelder-per-ajax-nachladen/37632/6 "2016-11-07T15:10:10Z")

</div>

Naja, das ist ja das Ausgangsproblem des Thread-Erstellers, der ja auch vermutlich mit der Antwort von Philipp Schuch gelöst wurde, ich bin nur nicht fähig das ganze umzusetzen! 😃

Ich habe mir einen neuen Tab erstellt, diesen in die tabs.tpl eingefügt, anschließen auch die entsprechende Datei für den Inhalt erstellt und das entsprechnde Freitextfeld angelegt. Jede Variante hat hier einen anderen Text. Geladen wird das aber nur, wenn ich die Seite selber aktualisiere und nicht, bei Varianten-Wechsel über ajax.

---

<div class="post-metadata">

**Author:** ![sschreier](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.shopware.com/sschreier/32/23296_2.png) [@sschreier](https://forum.shopware.com/u/sschreier)\
**Post date:** [7. November 2016 um 15:13 UTC](https://forum.shopware.com/t/freitextfelder-per-ajax-nachladen/37632/7 "2016-11-07T15:13:02Z")

</div>

> [@jonas3301 schrieb:](https://forum.shopware.com/profile/11193/jonas3301 "jonas3301")
> 
> Naja, das ist ja das Ausgangsproblem des Thread-Erstellers, der ja auch vermutlich mit der Antwort von Philipp Schuch gelöst wurde, ich bin nur nicht fähig das ganze umzusetzen! ![:D](https://dub1.discourse-cdn.com/flex013/resources/emoji/lol.png ":D")
> 
> Ich habe mir einen neuen Tab erstellt, diesen in die tabs.tpl eingefügt, anschließen auch die entsprechende Datei für den Inhalt erstellt und das entsprechnde Freitextfeld angelegt. Jede Variante hat hier einen anderen Text. Geladen wird das aber nur, wenn ich die Seite selber aktualisiere und nicht, bei Varianten-Wechsel über ajax.

Hallo,

siehe: [Neuer Tab/Reiter Fehler bei Artikelvarianten - #4 von TeichDatensysteme - Programmierung - Shopware Community Forum](https://forum.shopware.com/discussion/comment/170979/#Comment%5C_170979) .

Beste Grüße

Sebastian

---

<div class="post-metadata">

**Author:** ![regentanker](https://avatars.discourse-cdn.com/v4/letter/r/50afbb/32.png) [@regentanker](https://forum.shopware.com/u/regentanker)\
**Post date:** [7. November 2016 um 16:06 UTC](https://forum.shopware.com/t/freitextfelder-per-ajax-nachladen/37632/8 "2016-11-07T16:06:29Z")

</div>

Das ist ein sehr guter Ansatz, aber löst mein Problem (noch) nicht. In diesem Thread wollen ja die meisten das nachladen verhindern, ich möchte aber, dass sowohl die Beschreibung (in dieser ist auch ein Freitextfeld “verbaut”), als auch die Tabs nachladen. Hierfür müsste ich ja die JS-Datei ergänzen.

Habe es jetzt ganz amateurhaft mit “productDetailsDescriptionSelector2: ‘.content–description2’” probiert… natürlich ohne erfolg, da muss wohl noch mehr geändert werden, damit auch Divs mit div class=“content–description2”&nbsp;neu laden… aber was? 😕

```
defaults: {
            productDetailsSelector: '.product--detail-upper',
            configuratorFormSelector: '.configurator--form',
            orderNumberSelector: '.entry--sku .entry--content',
            historyIdentifier: 'sw-ajax-variants',
            productDetailsDescriptionSelector: '.content--description',
			productDetailsDescriptionSelector2: '.content--description2'
			
        },
```

---

<div class="post-metadata">

**Author:** ![regentanker](https://avatars.discourse-cdn.com/v4/letter/r/50afbb/32.png) [@regentanker](https://forum.shopware.com/u/regentanker)\
**Post date:** [7. November 2016 um 16:17 UTC](https://forum.shopware.com/t/freitextfelder-per-ajax-nachladen/37632/9 "2016-11-07T16:17:58Z")

</div>

Ok, habe es jetzt selber gelöst in dem ich an folgenden Stellen auch n och Änderungen vorgenommen habe (immer wo die “2” auftaucht):

```
$.ajax({
                url: stateObj.location,
                data: values,
                method: 'GET',
                success: function(response) {
                    var $response = $($.parseHTML(response)),
                        $productDetails,
                        $productDescription,
						$productDescription2,
                        ordernumber;

                    // Replace the content
                    $productDetails = $response.find(me.opts.productDetailsSelector);
                    $(me.opts.productDetailsSelector).html($productDetails.html());

                    // Replace the description box
                    $productDescription = $response.find(me.opts.productDetailsDescriptionSelector);
                    $(me.opts.productDetailsDescriptionSelector).html($productDescription.html());
					
					// Replace the description box
                    $productDescription2 = $response.find(me.opts.productDetailsDescriptionSelector2);
                    $(me.opts.productDetailsDescriptionSelector2).html($productDescription2.html());

```

&nbsp;

Sollte Shopware aber evtl mal zum standard machen, dass die Freitextfelder hie rneu geladen werden. Ich mein, wenn schon alle Varianten von Haus aus Freitextfelder haben können…

---

<div class="post-metadata">

**Author:** ![RichardBruse](https://avatars.discourse-cdn.com/v4/letter/r/e5b9ba/32.png) [@RichardBruse](https://forum.shopware.com/u/RichardBruse)\
**Post date:** [12. September 2017 um 12:02 UTC](https://forum.shopware.com/t/freitextfelder-per-ajax-nachladen/37632/10 "2017-09-12T12:02:52Z")

</div>

Hallo,

bitte sende mir dein js zu mit der olugin überschreibung.

Habe ein ähnliches Problem mit der EAN die auch pro Variante vergeben wird.

Beim AJAX-Reload wird das ebenfalls nicht aktualisiert.

&nbsp;

EDIT-------------  
Das Javascript habe ich richtig erstellt.  
war verwirrt das du den Code nicht ausgeschrieben hast.

&nbsp;

Deine tabs.tpl würde mich interessieeren.  
Aktuell sieht meine Abfrage so aus  
&nbsp;

```
                 {if $sArticle.ean || $sArticle.suppliernumber}
                    
                        
							{if $sArticle.ean}{s name="DetailEANLable"}EAN: {/s}{$sArticle.ean}{/if}
                            {if $sArticle.suppliernumber}{s name="DetailSuppliernumberLable"}Herstellernummer: {/s}{$sArticle.suppliernumber}{/if}
                        
                     
                 {/if}

```

&nbsp;

Das steht auch in der tabstpl bei mir&nbsp;

&nbsp;

mein js sieht so aus

```
$.overridePlugin('swLastSeenProducts', {
		defaults: {
            productDetailsSelector: '.product--detail-upper',
            configuratorFormSelector: '.configurator--form',
            orderNumberSelector: '.entry--sku .entry--content',
            historyIdentifier: 'sw-ajax-variants',
            productDetailsDescriptionSelector: '.content--description',
			productDetailsDescriptionSelector2: '.content--description2'
        },
        requestData: function(values, pushState) {
			"use strict";
            var me = this,
                stateObj = me._createHistoryStateObject();

            $.loadingIndicator.open({
                closeOnClick: false,
                delay: 100
            });

            $.publish('plugin/swAjaxVariant/onBeforeRequestData', [me, values, stateObj.location]);

            values.template = 'ajax';

            if (stateObj.params.hasOwnProperty('c')) {
                values.c = stateObj.params.c;
            }

		$.ajax({
                url: stateObj.location,
                data: values,
                method: 'GET',
                success: function(response) {
                    var $response = $($.parseHTML(response)),
                        $productDetails,
                        $productDescription,
						$productDescription2,
                        ordernumber;

                    // Replace the content
                    $productDetails = $response.find(me.opts.productDetailsSelector);
                    $(me.opts.productDetailsSelector).html($productDetails.html());

                    // Replace the description box
                    $productDescription = $response.find(me.opts.productDetailsDescriptionSelector);
                    $(me.opts.productDetailsDescriptionSelector).html($productDescription.html());
					
					// Replace the description box
                    $productDescription2 = $response.find(me.opts.productDetailsDescriptionSelector2);
                    $(me.opts.productDetailsDescriptionSelector2).html($productDescription2.html());
					
                    // Get the ordernumber for the url
                    ordernumber = $.trim(me.$el.find(me.opts.orderNumberSelector).text());

                    // Update global variables
                    window.controller = window.snippets = window.themeConfig = window.lastSeenProductsConfig = window.csrfConfig = null;
                    $(me.opts.footerJavascriptInlineSelector).replaceWith($response.filter(me.opts.footerJavascriptInlineSelector));

                    StateManager.addPlugin('select:not([data-no-fancy-select="true"])', 'swSelectboxReplacement')
                        .addPlugin('*[data-image-slider="true"]', 'swImageSlider', { touchControls: true })
                        .addPlugin('.product--image-zoom', 'swImageZoom', 'xl')
                        .addPlugin('*[data-image-gallery="true"]', 'swImageGallery')
                        .addPlugin('*[data-add-article="true"]', 'swAddArticle')
                        .addPlugin('*[data-modalbox="true"]', 'swModalbox');

                    // Plugin developers should subscribe to this event to update their plugins accordingly
                    $.publish('plugin/swAjaxVariant/onRequestData', [me, response, values, stateObj.location]);

                    if (pushState && me.hasHistorySupport) {
                        var location = stateObj.location + '?number=' + ordernumber;

                        if (stateObj.params.hasOwnProperty('c')) {
                            location += '&c=' + stateObj.params.c;
                        }

                        window.history.pushState(stateObj.state, stateObj.title, location);
                    }
                },
                complete: function() {
                    $.loadingIndicator.close();
                }
            });
        },
});

```

Irgendwas läuft aber noch falsch weswegen mich deine lösung interesssiert

&nbsp;

Gruß Richard

---

<div class="post-metadata">

**Author:** ![RichardBruse](https://avatars.discourse-cdn.com/v4/letter/r/e5b9ba/32.png) [@RichardBruse](https://forum.shopware.com/u/RichardBruse)\
**Post date:** [15. September 2017 um 15:15 UTC](https://forum.shopware.com/t/freitextfelder-per-ajax-nachladen/37632/11 "2017-09-15T15:15:20Z")

</div>

Hab es selbst gelößt,

mein js

```
$.overridePlugin('swAjaxVariant', {
		defaults: {
            productDetailsSelector: '.product--detail-upper',
            configuratorFormSelector: '.configurator--form',
            orderNumberSelector: '.entry--sku .entry--content',
            historyIdentifier: 'sw-ajax-variants',
            productDetailsDescriptionSelector: '.content--description',
			productDetailsean: '.content--ean',
			productDetailsmanufacturernumber: '.content--manufacturernumber'
        },
        requestData: function(values, pushState) {
			"use strict";
            var me = this,
                stateObj = me._createHistoryStateObject();

            $.loadingIndicator.open({
                closeOnClick: false,
                delay: 100
            });

            $.publish('plugin/swAjaxVariant/onBeforeRequestData', [me, values, stateObj.location]);

            values.template = 'ajax';

            if (stateObj.params.hasOwnProperty('c')) {
                values.c = stateObj.params.c;
            }

		$.ajax({
                url: stateObj.location,
                data: values,
                method: 'GET',
                success: function(response) {
                    var $response = $($.parseHTML(response)),
                        $productDetails,
                        $productDescription,
						$productsean,
						$productsmanufacturernumber,
                        ordernumber;

                    // Replace the content
                    $productDetails = $response.find(me.opts.productDetailsSelector);
                    $(me.opts.productDetailsSelector).html($productDetails.html());

                    // Replace the description box
                    $productDescription = $response.find(me.opts.productDetailsDescriptionSelector);
                    $(me.opts.productDetailsDescriptionSelector).html($productDescription.html());
					
					// Replace the ean
                    $productsean = $response.find(me.opts.productDetailsean);
                    $(me.opts.productDetailsean).html($productsean.html());
					
					// Replace the manufacturernumber
                    $productsmanufacturernumber = $response.find(me.opts.productDetailsmanufacturernumber);
                    $(me.opts.productDetailsmanufacturernumber).html($productsmanufacturernumber.html());
					
                    // Get the ordernumber for the url
                    ordernumber = $.trim(me.$el.find(me.opts.orderNumberSelector).text());

                    // Update global variables
                    window.controller = window.snippets = window.themeConfig = window.lastSeenProductsConfig = window.csrfConfig = null;
                    $(me.opts.footerJavascriptInlineSelector).replaceWith($response.filter(me.opts.footerJavascriptInlineSelector));

                    StateManager.addPlugin('select:not([data-no-fancy-select="true"])', 'swSelectboxReplacement')
                        .addPlugin('*[data-image-slider="true"]', 'swImageSlider', { touchControls: true })
                        .addPlugin('.product--image-zoom', 'swImageZoom', 'xl')
                        .addPlugin('*[data-image-gallery="true"]', 'swImageGallery')
                        .addPlugin('*[data-add-article="true"]', 'swAddArticle')
                        .addPlugin('*[data-modalbox="true"]', 'swModalbox');

                    // Plugin developers should subscribe to this event to update their plugins accordingly
                    $.publish('plugin/swAjaxVariant/onRequestData', [me, response, values, stateObj.location]);

                    if (pushState && me.hasHistorySupport) {
                        var location = stateObj.location + '?number=' + ordernumber;

                        if (stateObj.params.hasOwnProperty('c')) {
                            location += '&c=' + stateObj.params.c;
                        }

                        window.history.pushState(stateObj.state, stateObj.title, location);
                    }
                },
                complete: function() {
                    $.loadingIndicator.close();
                }
            });
        },
});

```

und mein tabs.tpl ist&nbsp;

```
...
                 {if $sArticle.ean || $sArticle.suppliernumber}
                    
                        
							{if $sArticle.ean}{s name="DetailEANLable"}EAN: {/s}{$sArticle.ean}{/if}
                            {if $sArticle.suppliernumber}{s name="DetailSuppliernumberLable"}Herstellernummer: {/s}{$sArticle.suppliernumber}{/if}
                        
                     
                 {/if}
...

```

&nbsp;

Gruß Richard
