HowTo: Zweites Produktbild in Vorschau bei MouseOver

John

Sehr aktives Mitglied
3. März 2012
2.592
496
Berlin
...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
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
Code:
               {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:
Code:
.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;
}
 

css-umsetzung

Offizieller Servicepartner
SPBanner
6. Juli 2011
6.638
1.583
Berlin
Ein möglicher Weg ->

snippets/image.tpl


Code:
{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
Code:
.hover-image {
  display: none;
}
.image-content:hover .first-image {
  display: none;
}
.image-content:hover .hover-image {
  display: block;
}
 
  • Gefällt mir
Reaktionen: saw

wawi-dl

Sehr aktives Mitglied
29. April 2008
5.921
568
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?
 

wawi-dl

Sehr aktives Mitglied
29. April 2008
5.921
568
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.
 

wawi-dl

Sehr aktives Mitglied
29. April 2008
5.921
568
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

Offizieller Servicepartner
SPBanner
6. Juli 2011
6.638
1.583
Berlin
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

Sehr aktives Mitglied
29. April 2008
5.921
568
:eek: Aaaaaahhhhh mann, vor lauter Bäumen!
Danke, ich war eine Ebene zu hoch ... :rolleyes:

Sorry, läuft natürlich jetzt. :oops:
 

css-umsetzung

Offizieller Servicepartner
SPBanner
6. Juli 2011
6.638
1.583
Berlin
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.