[Gelöst] Detailansicht: Voriger / Nächster Artikel - Button fehlen

Shopware 5 Themes & Design
1

Hallo,

mir ist aufgefallen, dass in den Detrailansichten für alle Viewports außer Destop die Pfleile „voriger“/„nächster“ fehlen. In der Destop Ansicht gibt es ganz außen die Slider-Pfeile, die diese Funktion übernehmen.

Das ist auch bei einer „jungfräulichen Installation“ von SW5.1.3 der Fall. Also fallen Wechselwirkungen mit eigenen Templates/Plugins weg. Ausserdem habe ich überprüft, dass die Option „Artikel Navigation ausblenden“ im Backend NICHT gesetzt ist.

Genauere Inspektion der Seite zeigt, dass diese Links sehr wohl vorhanden sind, aber leider mit „display: none“ versteckt worden sind. Nun könnte ich die „als Workaround“ per CSS wieder dauerhaft aktivieren, habe aber dann das Problem, dass die Pfeile auch angezeigt werden, wenn keine vorigen/nächsten Artikel vorhanden sind. Undecided

Weiß jemand Rat?

2

Was meinst Du mit Viewports ? die Geräteauswahl ? der Einkaufswelten ?

Welche anpassung ? Masonry ?

 

3

Hallo,

Viewports: Viewport – Wikipedia , sozusagen die verfügbare Ansicht (Desktop, Tablet und Smartphone) Wink. Und er spricht von der Artikeldetailseite und nicht von einer Einkaufswelt.

Die Pfeile werden ausgeblendet, weil eben beim Tablet und beim Smartphone nicht mehr der Platz da ist, um Sie anzuzeigen - genauso sollen Sie ja beim Hover-Effekt ausklappen. Den Hover-Effekt gibt es ja aber beim Tablet und Smartphone gar nicht. Am besten du inspezierst einmal die JavaScript-Funktion, die für das Ein- und Ausblenden verantwortlich ist und schaust, ob du diese in deinem eigenen Theme einfach anpassen kannst, so wie du es dir vorstellst.

Beste Grüße

Sebastian

4

Geräteansicht - sag ich doch :wink:

Detrailansicht war mir nur nicht bekannt :wink:

5

Hi,

ich hatte das Problem auch vor ein paar Tagen. Ich habe nun in meinem Theme, welches vom Responsive Theme abgeleitet ist, in der Artikelansicht neben dem Breadcrumb einen „Vor“ und „Zurück“ Button (auch in der Mobile Ansicht).

Ich kann meinen Code gerne hier posten, wenn Du ihn brauchst.Ich habe einen Smarty Block verändert und kleine Änderungen im less gemacht.

Gruss,

Jens

P.S.: Das sieht dann so aus:

1059×763 183 KB

6

Hallo Jens

das wäre super wenn du das machen würdest, ich habe es fast geschafft, allerdings wird die Darstellung im Tablet bzw. Mobilansicht anders dargestellt. Irgendwas übersehe ich definitiv. Vor und Zurück Button werden beim ersten bzw. beim letzten Produkt ausgeblendet aber nur in der Desktop ansicht.

VG

Zeljko

7

Hi Zeljko,

ok. Ich hoffe ich bekomme alles zusammen:

\themes\Frontend<my_theme>\frontend\detail\index.tpl:</my_theme>

{extends file="parent:frontend/detail/index.tpl"}

{* remove article navigation slideouts on the side *}
{block name="frontend_detail_index_navigation"}
{/block}

{* add my article navigation to right side of breadcrumb *}
{block name="frontend_index_breadcrumb_suffix" append}
    {include file="frontend/detail/my_navigation.tpl"}
{/block}

Im gleichen Verzeichnis:
themes\Frontend<my_theme>\frontend\detail\my_navigation.tpl:</my_theme>

{namespace name="frontend/detail/index"}



{* Previous product *}
{block name='frontend_detail_article_back'}
    
        
            {s name='DetailNavPrevious'}{/s}
        
    
{/block}

{* Next product *}
{block name='frontend_detail_article_next'}
    
        
            {s name='DetailNavNext'}{/s}
        
    
{/block}

Und die less Datei für die Produkt Details:
themes\Frontend<my_theme>\frontend_public\src\less_modules\detail.less</my_theme>

//Buttons
.my_navigation_buttons {
  float: right;
  background: transparent;
  display: inline-block;
  .unitize(margin-right,15);

  //the display none is overwritten in the link if there is another product to the left or right
  .navigation--link {
    display: none;
  }

  .link--prev-button, .link--next-button {
    background: transparent;
    color: #fff;
    display: inline-block;
    padding: .625rem .625rem .625rem .625rem;
  }
}

/////////////////////////////////////
// tablet
/////////////////////////////////////

@media screen and (min-width: @tabletViewportWidth) {

  .my_navigation_buttons {

    .unitize(margin-right, 5);

    //the display none is overwritten in the link if there is another product to the left or right
    .navigation--link {
      display: none;
    }

    .link--prev-button, .link--next-button {
      border-radius: 3px;
      background-clip: padding-box;
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
      font-size: 14px;
      font-size: .875rem;
      background-color: #fff;
      background-image: -ms-linear-gradient(top, #fff, #f8f8fa);
      background-image: linear-gradient(to bottom, #fff 0%, #f8f8fa 100%);
      -webkit-font-smoothing: inherit;
      display: inline-block;
      position: relative;
      font-weight: bold;
      text-decoration: none;
      text-align: left;
      cursor: pointer;
      border: 1px solid transparent;
      color: #5f7285;
      padding: 2px 12px 2px 12px;
      padding: .125rem .75rem .125rem .75rem;
      line-height: 34px;
      line-height: 2.125rem;
      background-color: #98c9e9;
      background-image: -ms-linear-gradient(top, #98c9e9, #6aadda);
      background-image: linear-gradient(to bottom, #98c9e9 0%, #6aadda 100%);
      border: 0 none;
      color: #fff;
      display: inline-block;
    }

    .link--prev-button:hover, .link--next-button:hover {
      background: #6aadda;
    }

  }



}

Und natürlich muss die details.less Datei noch in all.less eingetragen werden:

@import "_modules/detail";

Anmerkung: in der Mobile Darstellung sind meine Zurück/Vor Buttons nur weiss auf blauem Hintergrund. Ab der Tablet Darstellung werden es blaue Buttons auf weissem Grund.

Ich hoffe, ich habe nichts vergessen. Bei mir funktioniert’s, auch wenn es sicherlich elegantere Methoden gibt.

Viel Spass,

Jens

3 Likes
8

P.S.: Ich sehe gerade, dass in meinem Quellcode die “” Symbole durch “<” und “>” ersetzt wurden. Keine Ahnung wie ich das ändern kann.

9

Danke Frimsio, für Deine ausführliche Antwort - die hat mich auf den richtigen Weg geführt.

Ich denke, dass Dein Weg schon der eleganteste ist. Ich hatte kurz einmal den Weg mit der Javascript-Datei beschritten, aber bin da nicht weiter gekommen, weil die eigentlich korrekt funktioniert.

Ich hatte dummerweise`` .link--prev-button und.link--next-buttonmit display: inline überschrieben (statt .navigation--link), deshalb hat die js-Funktionalität, die Du treffenderweise in Deinem Code beschrieben hast, nicht greifen können: Das Javascript überschreibt ja die beiden ersten Klassen mit display: inline, wenn es Artikel vor/nach dem aktuellen gibt. Deshalb müssen diese im Normalzustand display: none haben.

Jetzt läuft’s !