Neu JTL Shop 5 - Keine Bilder der Unterkategorie in mobiler Ansicht

[griffelspitz]

Hallo zusammen,

wir setzen gerade den Shop 5 neu auf.
In der Shop Version 4 wurden in der mobilen Ansicht die hinterlegten Bilder der Unterkategorien angezeigt. Gibt es das in Shop 5 nicht mehr, oder finde ich die Einstellung nicht?

Gruß
Norbert

 

[ARA-Marketing]

Ja, hab ich auch bemerkt, die sind rausgeflogen, wahrscheinlich wegen den Ladezeiten in Mobile....!

Eas

 

[griffelspitz]

Das wäre aber sehr schlecht. Die Kategoriebilder sind für den Kunden eine sehr gute Orientierungshilfe.
Bezüglich der Ladezeiten ist ja jetzt mit dem Bildformat WebP schon einiges getan worden.
Es sollte dem Shopbetreiber überlassen sein, wie er seine Kategorien darstellen will.
Ich hoffe doch sehr, dass an dieser Stelle an einer Optionseinstellung gearbeitet wird.

 

[css-umsetzung]

Ja das sieht nicht mehr schön aus und wenn man mobile kommt dann erkennt man nicht einmal mehr das es sich um Kategorien handelt.

Leider muss man da etwas mehr tun als nur einen Eintrag zu setzen, ich habe das hier mal angepasst, am schlimmsten ist diese Klasse d-none und das in den styles ständig mit important gearbeitet wird, für mich als "css-umsetzung" ist das ganz schlimm 😉


Hier mal meine Änderung in productlist/header.tpl
anschauen kann man das hier:
http://bit.ly/3pJRky1

    {block name='productlist-header-subcategories'}
        {if $Einstellungen.navigationsfilter.artikeluebersicht_bild_anzeigen !== 'N' && $oUnterKategorien_arr|@count > 0}
            {opcMountPoint id='opc_before_subcategories'}
{* css-umsetzung  - start  *}
            <hr>
{* css-umsetzung  - ende *}

            {row class="row-eq-height content-cats-small"}
                {foreach $oUnterKategorien_arr as $subCategory}
{* css-umsetzung  - start  *}                   
                    {col cols=6 md=4 lg=3 xl=2}
{* css-umsetzung  - ende *}
                    
                        <div class="sub-categories text-center">
                            {if $Einstellungen.navigationsfilter.artikeluebersicht_bild_anzeigen !== 'Y'}
                                {block name='productlist-header-subcategories-image'}
                                    {link href=$subCategory->getURL()}
{* css-umsetzung  - start  *}
                                        <div class="subcategories-image d-md-flex">
{* css-umsetzung  - ende *}

 

[griffelspitz]

Vielen Dank, hat super funktioniert.
Aber sind diese Änderungen nach einem Update wieder weg?

Gruß
Norbert

 

[css-umsetzung]

Das musst du schon in einem Child Template machen, sonst ist das nach einem Update weg wenn du Pech hast.

 

[griffelspitz]

Ich habe ein Child Template. Aber da gibt es "productlist/header.tpl" nicht.

 

[css-umsetzung]

Dann lege dieses Verzeichnis und die Datei an, dann fügst du den kompletten Code hier dort ein.

    {block name='productlist-header-subcategories'}
        {if $Einstellungen.navigationsfilter.artikeluebersicht_bild_anzeigen !== 'N' && $oUnterKategorien_arr|@count > 0}
            {opcMountPoint id='opc_before_subcategories'}
{* css-umsetzung  - start  *}
            <hr>
{* css-umsetzung  - ende *}

            {row class="row-eq-height content-cats-small"}
                {foreach $oUnterKategorien_arr as $subCategory}
{* css-umsetzung  - start  *}                   
                    {col cols=6 md=4 lg=3 xl=2}
{* css-umsetzung  - ende *}
                    
                        <div class="sub-categories text-center">
                            {if $Einstellungen.navigationsfilter.artikeluebersicht_bild_anzeigen !== 'Y'}
                                {block name='productlist-header-subcategories-image'}
                                    {link href=$subCategory->getURL()}
{* css-umsetzung  - start  *}
                                        <div class="subcategories-image d-md-flex">
{* css-umsetzung  - ende *}
                                            {image fluid=true lazy=true webp=true
                                                src=$subCategory->getImage(\JTL\Media\Image::SIZE_SM)
                                                alt=$subCategory->getName()}
                                        </div>
                                    {/link}
                                {/block}
                            {/if}
                            <div>
                                {if $Einstellungen.navigationsfilter.artikeluebersicht_bild_anzeigen !== 'B'}
                                    {block name='productlist-header-subcategories-link'}
                                        <div class="caption">
                                            {link href=$subCategory->getURL()}
                                                {$subCategory->getName()}
                                            {/link}
                                        </div>
                                    {/block}
                                {/if}
                                {if $Einstellungen.navigationsfilter.unterkategorien_beschreibung_anzeigen === 'Y'
                                        && !empty($subCategory->getDescription())}
                                    {block name='productlist-header-subcategories-description'}
                                        <p class="item_desc small text-muted-util d-none d-md-block">
                                            {$subCategory->getDescription()|strip_tags|truncate:68}
                                        </p>
                                    {/block}
                                {/if}
                                {if $Einstellungen.navigationsfilter.unterkategorien_lvl2_anzeigen === 'Y'}
                                    {if $subCategory->hasChildren()}
                                        {block name='productlist-header-subcategories-list'}
                                            <hr class="d-none d-md-block">
                                            <ul class="d-none d-md-block">
                                                {foreach $subCategory->getChildren() as $subChild}
                                                    <li>
                                                        {link href=$subChild->getURL() title=$subChild->getName()}{$subChild->getName()}{/link}
                                                    </li>
                                                {/foreach}
                                            </ul>
                                        {/block}
                                    {/if}
                                {/if}
                            </div>
                        </div>
                    {/col}
                {/foreach}
            {/row}
        {/if}
    {/block}

 

[griffelspitz]

Super, wieder was gelernt. Danke!

 

[Evans_Lifestyle]

Guten morgen!

Ich habe gerade das Update von Shop 4 ->5 durchgeführt und habe ein NOVAChild Template erstellt, welches auch funktioniert. Auch mich hat es sehr gestört, dass es keine Bilder bei den Unterkategorien in der Mobilen Ansicht gibt. Darauf hin, habe ich den header.tpl Code von @css-umsetzung.de verwendet und das hat super funktioniert, vielen Dank!

Es ist jetzt so, dass die Kategorieseiten bei der mobilen Ansicht perfekt für meine Zwecke sind, die Desktop Ansicht der Kategorieseiten lässt aber noch viel zu Wünschen übrig. Am liebsten hätte ich, dass die Desktop Ansicht genau die gleichen Informationen zeigt wie die mobile Ansicht, wobei die Kategoriebilder dürften dann gerne etwas größer sein.

Momentan zeigt die Desktop Ansicht Kategorienlisten der Unter-unter-kategorien und die Links der Unterkategorien haben Beschreibungen dazu. Das ist alles zu viel Information und soll weg. Zum Verständnis, 2 Screenshots, meine momentane Mobile Ansicht und meine momentane Desktop-Ansicht.

Die Frage ist, kennt jemand einen guten Weg um das zu erreichen?

Ich habe den Quellcode der Kategorienseiten angeschaut und sehe, dass CSS Media Queries benutzt werden, vermutlich um zu steuern, wann das Responsive Design von Mobile auf Desktop Ansicht schaltet. Das wäre vielleicht ein Ansatz, wie ich die Desktop Ansicht wie die Mobile Ansicht erscheinen lassen kann. Der besagte Media Queries Code sieht jedoch sehr komplex aus und ich kenne auch nicht die Datei und den Pfad im NOVA-Template, wo es erzeugt wird.

Hat jemand da schon eine Lösung bzw einen Rat, wie ich da weiter komme:

 

[griffelspitz]

Musst du dafür nicht einfach die Einstellung der Unterkategoriebeschreibung ändern?
Einstellung: 1329

 

[Evans_Lifestyle]

Das Leben kann so einfach sein! 😉

Vielen Dank dafür @griffelspitz 🙂)

 

[HMH Marketing]

Dann lege dieses Verzeichnis und die Datei an, dann fügst du den kompletten Code hier dort ein.

    {block name='productlist-header-subcategories'}
        {if $Einstellungen.navigationsfilter.artikeluebersicht_bild_anzeigen !== 'N' && $oUnterKategorien_arr|@count > 0}
            {opcMountPoint id='opc_before_subcategories'}
{* css-umsetzung  - start  *}
            <hr>
{* css-umsetzung  - ende *}

            {row class="row-eq-height content-cats-small"}
                {foreach $oUnterKategorien_arr as $subCategory}
{* css-umsetzung  - start  *}                  
                    {col cols=6 md=4 lg=3 xl=2}
{* css-umsetzung  - ende *}
                   
                        <div class="sub-categories text-center">
                            {if $Einstellungen.navigationsfilter.artikeluebersicht_bild_anzeigen !== 'Y'}
                                {block name='productlist-header-subcategories-image'}
                                    {link href=$subCategory->getURL()}
{* css-umsetzung  - start  *}
                                        <div class="subcategories-image d-md-flex">
{* css-umsetzung  - ende *}
                                            {image fluid=true lazy=true webp=true
                                                src=$subCategory->getImage(\JTL\Media\Image::SIZE_SM)
                                                alt=$subCategory->getName()}
                                        </div>
                                    {/link}
                                {/block}
                            {/if}
                            <div>
                                {if $Einstellungen.navigationsfilter.artikeluebersicht_bild_anzeigen !== 'B'}
                                    {block name='productlist-header-subcategories-link'}
                                        <div class="caption">
                                            {link href=$subCategory->getURL()}
                                                {$subCategory->getName()}
                                            {/link}
                                        </div>
                                    {/block}
                                {/if}
                                {if $Einstellungen.navigationsfilter.unterkategorien_beschreibung_anzeigen === 'Y'
                                        && !empty($subCategory->getDescription())}
                                    {block name='productlist-header-subcategories-description'}
                                        <p class="item_desc small text-muted-util d-none d-md-block">
                                            {$subCategory->getDescription()|strip_tags|truncate:68}
                                        </p>
                                    {/block}
                                {/if}
                                {if $Einstellungen.navigationsfilter.unterkategorien_lvl2_anzeigen === 'Y'}
                                    {if $subCategory->hasChildren()}
                                        {block name='productlist-header-subcategories-list'}
                                            <hr class="d-none d-md-block">
                                            <ul class="d-none d-md-block">
                                                {foreach $subCategory->getChildren() as $subChild}
                                                    <li>
                                                        {link href=$subChild->getURL() title=$subChild->getName()}{$subChild->getName()}{/link}
                                                    </li>
                                                {/foreach}
                                            </ul>
                                        {/block}
                                    {/if}
                                {/if}
                            </div>
                        </div>
                    {/col}
                {/foreach}
            {/row}
        {/if}
    {/block}

Vielen Dank für diesen Hinweis! Hat alles geklappt und sieht so wesentlich besser aus!

 

[Timme]

In der mobilen Ansicht wird es nun super angezeigt, allerdings werden nun die Bilder in der Desktopvariante sehr viel kleiner Dargestellt.
Dort passt mir die Konfiguration über das standard Template ganz gut.

Wie kann ich die Größen ändern bzw. nur die mobile Ansicht ausgeben lassen?

Ich habe die Varianten XS SM MD und LG bei src=$subCategory->getImage(\JTL\Media\Image::SIZE_SM) durchprobiert und geändert hochgeladen, allerdings verändern sich die Bilder dann nur minimal in der Größe.

 

[Timme]

@css-umsetzung könnt Ihr mir da weiterhelfen? Kann man den Code ggf. nur für die mobile Ansicht einsetzen? 🙂

 

[css-umsetzung]

@css-umsetzung könnt Ihr mir da weiterhelfen? Kann man den Code ggf. nur für die mobile Ansicht einsetzen?

Ja natürlich,
schreib oder rufe mich einfach an, dann kann ich euch (leider nicht kostenlos) helfen.

 

[Timme]

Ja natürlich,
schreib oder rufe mich einfach an, dann kann ich euch (leider nicht kostenlos) helfen.

gelöst 🙂

 

[sah]

Wäre es nicht sinnvoll das Child mit dieser Zeile beginnen zu lassen?

{extends file="../../NOVA/productlist/header.tpl"}

 

[css-umsetzung]

Nein, wird im NOVA nicht gebraucht