Aktuellen viewport in TPL abfragen

Shopware 5 Themes & Design
1

Guten Morgen,

ich möchte gerne in einer TPL (in dem Fall in der search.tpl) den Viewport abfragen, um das Suchfeld unterschiedlich zu initiieren. Ist das möglich?

Abhängig vom Viewport hätte ich gerne eine unterschiedliche Einstellung des Suchfelds.  Die search.tpl habe ich bereits angepasst 

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

        {* Search field *}
		{block name='frontend_index_search_field'}
        	
		{/block}

Klappt perfekt auf viewport Desktop, beim Aufrufen der Shopseiten auch auf Tablets oder Mobiles. Auf den viewports führt es aber zu einem ungewollten Verhalten beim Öffnen der Detailsansicht eines Bildes (die Tastatur erscheint dann unnötigerweise). Ich würde diese Anpassung daher gerne nur auf Desktops aktivieren. 

Hat jemand eine Idee? In der Doku und im Forum habe ich leider nichts dazu gefunden.

Mit besten Dank im Voraus!

Viele Grüße

Peter

2

Es wird auf alle Viewports die selbe HTML-Struktur ausgeliefert. Auf Template-Ebene kannst du das nicht anpassen.

Unterschiedliche Attribute für das Input-Feld kannst du am sinnvollsten über ein jQuery-Plugin und den Statemanager lösen.

Nähere Infos dazu findest du hier: jQuery plugins and the StateManager

2 „Gefällt mir“
3

Habe mir selbst einmal ein less/css snippet zusamengebaut das genau das macht was du benötigst:

body:after {
  content: 'Phone Portrait';
  position: fixed;
  bottom: 3px;
  left: 3px;
  background: @brand-primary;
  border: 1px solid darken(@brand-primary, 10%);
  padding: 4px;
  color: #fff;
  font-size: 12px;
  opacity: 0.7;
  z-index: 9999;
  pointer-events: none;
}

@media screen and (min-width: @phoneLandscapeViewportWidth) {
  body:after {
    content: 'Phone Landscape >480px';
  }
}

@media screen and (min-width: @tabletViewportWidth) {
  body:after {
    content: 'Tablet Portrait >768px';
  }
}

@media screen and (min-width: @tabletLandscapeViewportWidth) {
  body:after {
    content: 'Tablet Landscape >1024px';
  }
}

@media screen and (min-width: @desktopViewportWidth) {
  body:after {
    content: 'Desktop >1260px';
  }
}

 

1 „Gefällt mir“
4

Besten Dank für die schnellen Antworten. Das werde ich dann mal (beides) ausprobieren. 

Gruß

Peter