HowTo: Zweites Produktbild in Vorschau bei MouseOver

[John]

...kennt man aus den meisten Shops, JTL kann es bisher leider nicht. Geht man in einer Kategorie mit der Maus über ein Vorschaubild, so wird das zweite Vorschaubild (sofern vorhanden) gezeigt.

Hier ein kleines HowTo.

1. Shop Backend "Benutzerdefinierte Template-Dateien verwenden" > JA
2. Datei \templates\JTL-Shop3-Tiny\tpl_inc\suche_liste.tpl in den gleichen Ordner kopieren und in suche_liste_custom.tpl umbennen
3. Den Code

<img src="{$Artikel->cVorschaubild}" alt="{$Artikel->Bilder[0]->cAltAttribut|strip_tags|escape:"quotes"|truncate:60}" id="image{$Artikel->kArtikel}_{$imgcounter}" class="image" />

suchen und ersetzten mit

               {if isset($Artikel->Bilder[1]->cPfadKlein)}
                   <div class="jps-image_overlay">
                        <img src="{$Artikel->cVorschaubild}" alt="{$Artikel->Bilder[0]->cAltAttribut|strip_tags|escape:"quotes"|truncate:60}" id="image{$Artikel->kArtikel}_{$imgcounter}" class="image" />
                   </div>
                   
                    <div class="jps-image_overlay_mouseover">
                        <img src="{$Artikel->Bilder[1]->cPfadKlein}" alt="{$Artikel->Bilder[1]->cAltAttribut|strip_tags|escape:"quotes"|truncate:60}" id="image{$Artikel->kArtikel}_{$imgcounter}_2" class="image" />
                    </div>                    
               {else}
                    <img src="{$Artikel->cVorschaubild}" alt="{$Artikel->Bilder[0]->cAltAttribut|strip_tags|escape:"quotes"|truncate:60}" id="image{$Artikel->kArtikel}_{$imgcounter}" class="image" />                              
               {/if}

4. In der CSS Datei einfügen:

.jps-image_overlay_mouseover {
    display: none;
}

.article_wrapper div.article_image .image_overlay_wrapper:hover .jps-image_overlay_mouseover {
    display: block;
}

.article_wrapper div.article_image .image_overlay_wrapper:hover .jps-image_overlay {
    display: none;
}

 

[dibadu]

AW: HowTo: Zweites Produktbild in Vorschau bei MouseOver

Hallo,

hat das schon mal jemand für Shop 4 umgesetzt?

Viele Grüße
Dirk

 

[zentiva]

Ich schliesse mich an...
Hat das schon mal jemand für Shop 4 umgesetzt?

 

[css-umsetzung]

Ein möglicher Weg ->

snippets/image.tpl

{counter assign=imgcounter print=0}
{if !preg_match("/keinBild/",$Artikel->Bilder[1]->cPfadNormal)}
    {assign var=hoverbild value=$Artikel->Bilder[1]->cPfadNormal}
{else}
    {assign var=hoverbild value=''}
{/if}

<div class="image-box meinebox">
    <div class="image-content">
        <img {if $hoverbild}class="first-image"{/if} alt="{$alt}" data-src="{$src}" data-id="{$imgcounter}" />
                {if $hoverbild}
            <img class="hover-image" alt="{$alt}" data-src="{$Artikel->Bilder[1]->cPfadNormal}" data-id="1-{$imgcounter}" />
        {/if}
    </div>
</div>

stylesheets erweitern

.hover-image {
  display: none;
}
.image-content:hover .first-image {
  display: none;
}
.image-content:hover .hover-image {
  display: block;
}

 

[dibadu]

Wir haben das in unserem Shop durch einen JTL-Servicepartner einbauen lassen.
War keine so große Sache.

 

[saw]

Ein möglicher Weg ->
snippets/image.tpl

Läuft perfekt - danke Herr Peterman.

 

[wawi-dl]

Die Änderung muss dann direkt z.B. im "EVO-Template" erfolgen?

Habe in meinem "Child-Template" die TPL ins Layout gepackt, wurde aber nicht erkannt.
Überschreibe ich die TPL direkt im EVO-Template, funktioniert diese.

Was mache ich falsch?

 

[css-umsetzung]

Immer im aktivem child
Wenn das so ist, eventuell ein cache Problem oder du hast was falsch gemacht 🙂

 

[wawi-dl]

Korrekt, in meinem Child habe ich ja einen Layout-Ordner, da packe ich die TPL nur geändert rein.
Cache etc. alles geleert gehabt, greift aber nicht.

Umbenennen muss ich "image.tpl" ja nicht, sofern ich die komplette TPL überschreiben möchte.

 

[css-umsetzung]

Warum layout ordner?
Es muss der gleiche Ordner sein wie mit parent, also wohl im snippets/image.tpl

 

[wawi-dl]

templates/MeinTemplate/layout/snippets/image.tpl
oder
templates/MeinTemplate/layout/image.tpl
klapt nicht!

Ich muss es zwingend hier ablegen, was ich vermeiden will zwecks Update-Sicherheit:
templates/Evo/layout/snippets/image.tpl

Cache etc. alles geleert, es liegt auch nicht am Browser!
Diese TPL wird nicht angezogen und weis nicht warum.

 

[css-umsetzung]

Oehm.........

Templates/deinChild/snippets/image.tpl ist der richtige Pfad, auch im parent Evo liegt das dort.

Hier kannst du das sehen.
https://gitlab.jtl-software.de/jtlshop/shop4/tree/master/templates/Evo/snippets

 

[wawi-dl]

Glaube ich dir alles, es greift aber nicht ... Ich vermute ein hartnäckiges Cache-Problem.

 

[css-umsetzung]

Aber die Pfade die du angegeben hast, die stimmen ja nicht.

Du kannst ja den cache deaktivieren, dann wird dieser nicht mehr verwendet,
zum anderen kannst du das was in template_c ist auch löschen, denn da wird der cache (wenn es der der Datei cache ist) abgelegt.

Andere Möglichkeit ist, das du einen drauf schauen lässt. bist du noch im slack?

 

[wawi-dl]

😱 Aaaaaahhhhh mann, vor lauter Bäumen!
Danke, ich war eine Ebene zu hoch ... 🙄

Sorry, läuft natürlich jetzt. 😳

 

[Performwerk]

Oehm.........

Templates/deinChild/snippets/image.tpl ist der richtige Pfad, auch im parent Evo liegt das dort.

Hier kannst du das sehen.
https://gitlab.jtl-software.de/jtlshop/shop4/tree/master/templates/Evo/snippets

Irgendwie finde ich den relevanten Ordner im Child-Template nicht, wenn ich nach diesem Pfad vorgehe?

 

[css-umsetzung]

im child sind nur die geänderten Dateien drin, es muss also der Ordner angelegt werden, und die Datei oder der Block dann dort eingefügt werden.