Freitextfelder per Ajax nachladen

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

 

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 in der Methode requestData  entsprechende Events geworfen, auf welche Du Dich registrieren kannst:

 plugin/swAjaxVariant/onBeforeRequestData plugin/swAjaxVariant/onRequestData

Infos zu den Events findest Du auch hier:
jQuery plugins and the StateManager

 

Sonnige Grüße,
Phil

 

 

2 Likes

Haben die Varianten auch deren Freitextfelder gefüllt?

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! :confused:

Hoffe mir kann jemand behilflich sein! :) 

@jonas3301 schrieb:

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! :) 

 

warum natürlich? was wird denn geladen? 

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! :smiley:

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.

@jonas3301 schrieb:

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

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: https://forum.shopware.com/discussion/comment/170979/#Comment_170979 .

Beste Grüße

Sebastian

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” neu laden… aber was? :confused:

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

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());

 

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…

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.

 

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

 

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

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

 

Das steht auch in der tabstpl bei mir 

 

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

 

Gruß Richard

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 

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

 

Gruß Richard