Neu Bilder vom Parent beim Child

[3jojojo]

Guten Morgen
Hat jemand eine gute Idee wie man die Bilder eines Vaterartikels auch bei einem Child Artikel anzeigen kann?

Hintergrund ist das ich sehr viele Artikel habe wo es unterschiedliche Farben gibt. Der Vaterartikel hat dann dazu ein Emotion Bild (zum Beispiel wie die Jeans jemand trägt) diese würde ich nun gern zusätzlich bei den Kinderartikeln anzeigen.

Mir fehlt aber der Ansatz. Als Artikelbilder direkt angeben will ich die Bilder nicht.

 

[david]

Denke du kommst um eine eigene Plugin-Lösung nicht herum, sofern du die Bilder nicht direkt in der Wawi vererben möchtest.

 

[3jojojo]

keiner eine einfach quick and dirty idee für die template datei.

Die Child Artikel kennen doch auch die Vater_Funktionsattribute also Artikel->VaterFunktionsAttribute meine ich. Kommt man so nicht auch an das Bild?

 

[david]

Mehr als {$Artikel->kVaterArtikel} und den vererbten Eigenschaften hast du am Kindartikel nicht, daher nicht allein über Smarty tpl lösbar.

 

[FPrüfer]

Hallo,
eine Lösung per Plugin ist sicherlich der korrekteste Weg. Unser Shop kann aber eine ganze Menge und somit gibt es auch eine Lösung die komplett auf Javascript basiert und damit einfach insTemplate integriert werden kann.
Der Ansatz dabei ist, den Artikelcontent des Vaterartikels beim Child per AJAX nachzuladen, dort die Bildinformationen zu extrahieren und diese in die Gallery des aktuellen Child-Artikels einzufügen. Das klingt kompliziert, sind aber nur ein paar Zeilen Code. Das einzige Problem ist hier der Overhead, der durch das Nachladen der Vater-Artikeldaten entsteht.
In der custom.js des eigenen Child-Templates könnte man das so realisieren:

(function($) {
    function loadParentImage2Gallery() {
        // Parameter (Parent- und Child-ID) aus dem Produktformular holen
        var io   = $.evo.io();
        var args = io.getFormValues('buy_form');

        if (args.a && args.VariKindArtikel && !document.parentImagePushed) {
            // Flag für das Laden des Parent-Image setzen...
            document.parentImagePushed = true;
            // ...und Parent-Content per AJAX holen
            var url  = '/navi.php?a=' + args.a;
            $.ajax(url, {data: 'isAjax'}).done(function(html) {
                // Bilddaten aus dem Content extrahieren...
                var $images = $(html).find('#gallery a[itemprop="image"] img');

                if ($images.length) {
                    // ...und an die Einträge der aktuellen Gallery anhängen
                    var objImage = $images.data('list');
                    var imgItems = $.evo.article().gallery.getStack();
                    imgItems.push(objImage);
                    $.evo.article().gallery.setItems(imgItems);
                    $.evo.article().gallery.render();
                }
            })
        }
    }

    function initParentImage2Gallery() {
        // Wenn eine neue Variante gewählt wird, dann muss das Flag für das Parent-Image zurückgesetzt werden
        $('.variations .variation').click(function() {
            document.parentImagePushed = false;
        });
        $('.variations .form-control').change(function() {
            document.parentImagePushed = false;
        });
    }

    $(document).ready(function() {
        // Einfügen des Parent-Image beim direkten Aufruf des Child-Artikels...
        initParentImage2Gallery();
        loadParentImage2Gallery();
    });

    $(document).on('evo:contentLoaded', function() {
        // ...und auch beim Nachladen per AJAX
        initParentImage2Gallery();
        loadParentImage2Gallery();
    });
})(jQuery);

 

[3jojojo]

genial @FPrüfer DANKE dir ich werde es nachher mal umsetzen

 

[css-umsetzung]

Aber wie er schon sagt, über ein Plugin wäre es besser, du hast ja schon von mir das Plugin für die Templateunterstützung, da könnte man das gut hinzufügen denke ich.

 

[m.preisner]

Was ich mich hierbei frage: Wieso muss denn zwingend, beim Wählen einer Variation, das Child geladen werden? Wäre eine Übergabe der Variable ( ID Child o.ä. ) nicht ausreichend um es in den Warenkorb zu legen?

Vorallem weil ich auch die Artikelbeschreibungen für die einzelnen Varkombis anlegen, speichern und laden muss, obwohl die, bei mir, immer identisch sind.

Gibts hierzu eine Lösung?

 

[laweb]

@FPrüfer
Vielen Dank für den Code. Funktioniert super. Das einizige Problem ist, dass bei Child Articles die kein Bild haben noch diese Platzhalterbild (Kamera auf grauem Background) haben. Kennst du eine Lösung um das auszublenden? Denn Leider wird dieser Platzhalter dann auch im Warenkorb und ähnlichen Sachen verwendet. Danke!

Marco

 

[FPrüfer]

Da müsste man jetzt aus objImage in einer Schleife noch die Elemente rausfiltern, die als src einen Verweis auf das Platzhalterbiild (/gfx/keinBild.gif) haben.
Die Anzeige des Platzhalters im Warenkorb wirst du damit aber nicht verhindern, da bei Variationskombinationen ja jedes Child ein eigener Artikel ist.

 

[snPerranporth]

Hallo, auch ich wünsche mir, dass die Bilder des Vaterartikels beim Child nachgeladen werden.

Ich habe den obigen Code in die Custom des Child Templates per Copy Paste eingefügt. Aber leider tut sich bei mir nichts. Was mache ich falsch?

 

[FPrüfer]

Hallo,

Ich habe den obigen Code in die Custom des Child Templates per Copy Paste eingefügt. Aber leider tut sich bei mir nichts. Was mache ich falsch?

das kann man leider so pauschal nicht sagen. Wird den die custom.js korrekt geladen? Treten Javascriptfehler auf?

 

[snPerranporth]

Hallo, Danke, dass du dich mit meiner Rückfrage beschäftigst.

Die custom wird geladen. Die Ausgabe lautet wie folgt:

(function($) {
    function loadParentImage2Gallery() {
        var io = $.evo.io();
        var args = io.getFormValues('buy_form');
        if (args.a && args.VariKindArtikel && !document.parentImagePushed) {
            document.parentImagePushed = true;
            var url = '/navi.php?a=' + args.a;
            $.ajax(url, {
                data: 'isAjax'
            }).done(function(html) {
                var $images = $(html).find('#gallery a[itemprop="image"] img');
                if ($images.length) {
                    var objImage = $images.data('list');
                    var imgItems = $.evo.article().gallery.getStack();
                    imgItems.push(objImage);
                    $.evo.article().gallery.setItems(imgItems);
                    $.evo.article().gallery.render();
                }
            })
        }
    }
    function initParentImage2Gallery() {
        $('.variations .variation').click(function() {
            document.parentImagePushed = false;
        });
        $('.variations .form-control').change(function() {
            document.parentImagePushed = false;
        });
    }
    $(document).ready(function() {
        console.log("ParentImages2Gallery wird ausgefuehrt");
        initParentImage2Gallery();
        loadParentImage2Gallery();
    });
    $(document).on('evo:contentLoaded', function() {
        initParentImage2Gallery();
        loadParentImage2Gallery();
    });
}
)(jQuery);

Oder gilt der Code nur für das Hauptbild? Das wird angezeigt, ist aber auch im Kind hinterlegt.

 

[FPrüfer]

Hast du mal eine URL unter der man sich das ansehen kann!?

 

[snPerranporth]

Weil ich mich hier nicht blamieren wollte, habe ich mein Anliegen per PN geklärt.

Da ich ein Template nutze, musste der Code leicht angepasst werden. Mit folgender Änderung klappt der Code von 2017 (!) dann aber auch bei mir.

PHP:
...
// Bilddaten aus dem Content extrahieren...
var $images = $(html).find('#gallery a img');
...

Und für diejenigen, die wie ich dem Child lediglich ein Hauptbild hinterlegen, welches mit dem Parent identisch ist und daher nicht nachgeladen werden soll, der ändere wie folgt:

Wenn das "Hauptbild" einfach nur das erste Bild ist, dann sollte es reichen, die Schleife:

for (var i = 0; i < $images.length; i++) {
    var objImage = $($images[i]).data('list');
    imgItems.push(objImage);
}

statt von 0 einfach von 1 laufen zu lassen. Dann werden immer nur alle Bilder ab dem Zweiten übernommen

So kann man das ganze also noch etwas anpassen. Vielleicht hilft es jemandem.
Vielen lieben Dank an FPrüfer für die tolle Hilfe und die Geduld mit mir als Nicht-Programmierer!