Neuigkeiten
  • Die modified eCommerce Shopsoftware ist kostenlos, aber nicht umsonst.
    Spenden
  • Damit wir die modified eCommerce Shopsoftware auch zukünftig kostenlos anbieten können:
    Spenden
  • Thema: Responsive Template für Modified

    Timm

    • Fördermitglied
    • Beiträge: 6.319
    Re: Responsive Template für Modified
    Antwort #150 am: 30. Juni 2018, 14:14:12
    Du kannst einen Anker setzen, damit der Browser wieder an die Stelle springt.
    Danke dir. Ich kanns aber nicht programmieren und es wäre ja wahrscheinlich für alle interessant.

    Gruß Timm

    Timm

    • Fördermitglied
    • Beiträge: 6.319
    Re: Responsive Template für Modified
    Antwort #151 am: 03. Juli 2018, 10:40:49
    Ich hab dafür Ticket #1493 angelegt.

    Gruß Timm

    noRiddle (revilonetz)

    • Experte
    • Beiträge: 13.707
    • Geschlecht:
    Re: Responsive Template für Modified
    Antwort #152 am: 03. Juli 2018, 11:53:50
    Wenn ich mal was vorschlagen darf ;-):

    In /templates/DEIN_TEMPLATE/module/listing_filter.html folgendes machen:
    Aus
    Code: XML  [Auswählen]
          {if count($FILTER_TAG) < 1 && $FILTER_MANUFACTURER != ''}<div class="sort_bar_item">{$FILTER_MANUFACTURER}</div>{/if}
          <div class="sort_bar_item">{$FILTER_SORT}</div>
          <div class="sort_bar_item">{$FILTER_SET}</div>

    das
    Code: XML  [Auswählen]
          {if count($FILTER_TAG) < 1 && $FILTER_MANUFACTURER != ''}<div class="sort_bar_item">{$FILTER_MANUFACTURER|regex_replace:'#action="(.+)" method#':'action="$1#filter-start" method'}</div>{/if}
          <div class="sort_bar_item">{$FILTER_SORT|regex_replace:'#action="(.+)" method#':'action="$1#filter-start" method'}</div>
          <div class="sort_bar_item">{$FILTER_SET|regex_replace:'#action="(.+)" method#':'action="$1#filter-start" method'}</div>

    Jetzt mußt du noch die Sprung-Marke setzen:
    Vielleicht so ?
    Code: XML  [Auswählen]
    <div id="filter-start"></div>
    <div class="filter_bar cf">

    Dafür muß jedoch eine bessere Idee her, das überlasse ich euch.
    Besser weil
    • ein leerer div-Container kein semantisch gutes HTML ist
      und
    • bei einem feststehenden Header die Sprungmarke evtl. zu hoch sitzt und der Filter somit verdeckt wird.

    Vielleicht so in /templates/DEIN_TEMPLATE/module/product_listing/product_listing_v1.html ?
    Code: XML  [Auswählen]
    <span style="display:block;" id="filter-start">&nbsp; </span>
    {$LISTING_FILTER}

    Gruß,
    noRiddle

    Timm

    • Fördermitglied
    • Beiträge: 6.319
    Re: Responsive Template für Modified
    Antwort #153 am: 03. Juli 2018, 14:50:54
    Wenn ich mal was vorschlagen darf ;-):
    DU immer!

    Vielen Dank für deinen Beitrag.

    Hab das mal ausprobiert. Bei mir trifft genau Punkt 2 zu, dass der Filter von meiner sticky layout_navbar überdeckt wird. Mir persönlich würde eine Lösung gefallen, die sich an der Mauspostion orientiert. Oder anders gesagt, dass die Seite genau an dem selben Punkt bleibt, wo sie vor dem Klicken im Filter war.

    Nur als Idee. Wäre es kompliziert das mit AJAX zu machen? Also die Seite ist geladen und bleibt da und nur die Produktreihenfolge wird erneut geladen? Wenn das überhaupt möglich ist und nicht zu aufwendig.

    Zusätzlich müsste das noch auf die Artikeleigenschaftenfilter erweitert werden. Im Moment läuft es für "Sortieren nach" und "Artikel pro Seite" aber nicht für die Filteroptionen darunter. Da geht die Seite wieder ganz hoch.

    Gruß Timm

    hpzeller

    • Experte
    • Beiträge: 4.130
    • Geschlecht:
    Re: Responsive Template für Modified
    Antwort #154 am: 03. Juli 2018, 15:43:56
    [..]
    Dadurch ist mir aufgefallen, dass nach auswählen eines Filters die Seite immer nach ganz oben springt. War vorher aber auch schon so. Allgemein und speziell wenn man einen längeren Kategorietext hat, dann ist das unschön, weil der Kunde runterscrollen muss. Kann man das nicht ändern, dass die Seite auf Höhe der Filter bleibt und der Kunde weiter direkt bei den Produkten ist?

    Besonders unschön ist das auch, wenn zb jemand erneut die Farbe im Filter wechseln will. Dann muss er sogar zweimal nach unten scrollen, bis er wieder bei den Produkten in seiner Wunschfarbe ist.
    [...]

    Vor einiger Zeit, habe ich dem Schreinermeister für das Bootstrap3 Template von Karl zu diesem Problem etwas zusammen gestellt, siehe hier -> Re: TEMPLATE: Bootstrap3 für Shop 2.0 - freies responsive Template

    Das Ergebnis sieht im Bootstrap3 Template so aus -> https://selbst-schreinern.de/Baender-Scharniere---1-5.html#filterBar

    Nun habe ich den Code für das Standardtemplate tpl_modified adaptiert.
    Das Ergebnis sieht mit dem Template tpl_modified  so aus -> https://hpzeller.com/modified2022/Testkategorie-2:::2.html#filterBar

    Falls das jemand auch in seinem Shop einbauen möchte, nachfolgenden die nötigen Änderungen dazu.

    In der Datei templates/tpl_modified/module/listing_filter.html den gesamten Code  mit folgendem Code ersetzen

    Code: PHP  [Auswählen]
    {config_load file="$language/lang_$language.conf" section="filter"}
    {config_load file="lang_`$language`.custom"}
    {config_load file="lang_`$language`.section" section="filter"}
    <div id="filterBar" class="filter_bar cf">
      <div class="sort_bar cf">
        <div class="sort_bar_row cf">
          {if count($FILTER_TAG) < 1 && $FILTER_MANUFACTURER != ''}<div class="sort_bar_item">{$FILTER_MANUFACTURER|replace:'onchange="this':'onchange="$(this.form).attr(\'action\', function (_, oldAction) {return oldAction + \'#filterBar\';});this'}</div>{/if}
          <div class="sort_bar_item">{$FILTER_SORT|replace:'onchange="this':'onchange="$(this.form).attr(\'action\', function (_, oldAction) {return oldAction + \'#filterBar\';});this'}</div>
          <div class="sort_bar_item">{$FILTER_SET|replace:'onchange="this':'onchange="$(this.form).attr(\'action\', function (_, oldAction) {return oldAction + \'#filterBar\';});this'}</div>
          <div class="sort_bar_item right cf">
            <a rel="nofollow" class="view_list{if $smarty.const.PRODUCT_LIST_BOX != 'true'} active{/if}" href="{$LINK_DISPLAY_LIST}#filterBar" title="{#listing_listview#}">&nbsp;</a>
            <a rel="nofollow" class="view_box{if $smarty.const.PRODUCT_LIST_BOX == 'true'} active{/if}" href="{$LINK_DISPLAY_BOX}#filterBar" title="{#listing_boxview#}">&nbsp;</a>
          </div>
        </div>
      </div>
      {if count($FILTER_TAG) > 0}
      <div class="tags_bar">
        <div class="tags_bar_headline cf">
          {#text_filter_options#}
         <a rel="nofollow" class="tags_bar_reset" href="{$LINK_FILTER_RESET}#filterBar" title="Reset">{#text_filter_reset#}</a>
       </div>
        <div class="tags_bar_row cf">
          {if $FILTER_MANUFACTURER != ''}<div class="tags_bar_item">{$FILTER_MANUFACTURER|replace:'onchange="this':'onchange="$(this.form).attr(\'action\', function (_, oldAction) {return oldAction + \'#filterBar\';});this'}</div>{/if}
          {foreach name=aussen item=filter from=$FILTER_TAG}
            <div class="tags_bar_item">{$filter|replace:'onchange="this':'onchange="$(this.form).attr(\'action\', function (_, oldAction) {return oldAction + \'#filterBar\';});this'}</div>
          {/foreach}
        </div>
      </div>
      {/if}
    </div>
     

    und in der Datei templates/tpl_modified/module/pagination.html auch den gesamten Code mit folgendem Code ersetzen.

    Code: PHP  [Auswählen]
    <div class="pagination_bar cf">
      <div class="pagination_text">{$DISPLAY_COUNT}</div>
      <div class="pagination_list">
        <ul>  
          <li class="plain">{$smarty.const.TEXT_RESULT_PAGE}</li>
          {if isset($DISPLAY_LINKS.previous)}<li>{$DISPLAY_LINKS.previous|replace:'<a ':'<a onclick="$(this).attr(\'href\', function (_, oldHref) {return oldHref + \'#filterBar\';});" '}</li>{/if}
          {if isset($DISPLAY_LINKS.previouspages)}<li>{$DISPLAY_LINKS.previouspages|replace:'<a ':'<a onclick="$(this).attr(\'href\', function (_, oldHref) {return oldHref + \'#filterBar\';});" '}</li>{/if}
          {foreach key="keys" name="outer" item="pages" from=$DISPLAY_LINKS.pages}
            <li class="{$keys}">{$pages|replace:'<a ':'<a onclick="$(this).attr(\'href\', function (_, oldHref) {return oldHref + \'#filterBar\';});" '}</li>
          {/foreach}
          {if isset($DISPLAY_LINKS.nextpages)}<li>{$DISPLAY_LINKS.nextpages|replace:'<a ':'<a onclick="$(this).attr(\'href\', function (_, oldHref) {return oldHref + \'#filterBar\';});" '}</li>{/if}
          {if isset($DISPLAY_LINKS.next)}<li>{$DISPLAY_LINKS.next|replace:'<a ':'<a onclick="$(this).attr(\'href\', function (_, oldHref) {return oldHref + \'#filterBar\';});" '}</li>{/if}
        </ul>
      </div>
    </div>
     

    Gruss
    Hanspeter

    Q

    • Fördermitglied
    • Beiträge: 1.482
    Re: Responsive Template für Modified
    Antwort #155 am: 03. Juli 2018, 21:52:33
    Du kannst einen Anker setzen, damit der Browser wieder an die Stelle springt.

    Wenn wir schon bei Ankern sind. Nett wäre bestimmt auch ein Ankersprung in der Artikelliste auf den Artikel den man gerade in den Warenkorb gepackt hat. Sonst muss man jedesmal wieder nach unten scrollen. Oder etwas wie "Ajax FlyingCart". Hatte ich mal für OSC, finde das aber nicht mehr, bzw. bekomme das was ich habe nicht in modified (updatesicher) umgesetzt. Vielleicht fehlt mir dazu gerade auch einfach der Kopf....  :panic:

    Timm

    • Fördermitglied
    • Beiträge: 6.319
    Re: Responsive Template für Modified
    Antwort #156 am: 03. Juli 2018, 23:03:05
    @hpzeller
    Danke fürs teilen deiner Lösung.

    Funktioniert auch im responsive modified template.   :thumbs:

    (hab aber nur die Lösung für Filter getestet, nicht für Pagination-aber auch für die Danke)

    Es sind aber zwei Zeilen leicht anders hinten bei title für die Filter im responsive Template:

    Code: XML  [Auswählen]
    <a rel="nofollow" class="view_list{if $smarty.const.PRODUCT_LIST_BOX != 'true'} active{/if}" href="{$LINK_DISPLAY_LIST}#filterBar" title="Listenansicht">&nbsp;</a>
     

    Code: XML  [Auswählen]
    <a rel="nofollow" class="view_box{if $smarty.const.PRODUCT_LIST_BOX == 'true'} active{/if}" href="{$LINK_DISPLAY_BOX}#filterBar" title="Boxansicht">&nbsp;</a>

    Deine Lösung funktioniert auch mit den Filteroptionen aus den Artikeleigenschaften.

    Aber auch hier besteht das Problem, wenn man die layout_navbar mit sticky versehen hat, dass dann die beiden oberen Filter "Sortieren nach" und "Artikel pro Seite" verdeckt sind.

    Gäbe es dafür eine Lösung, dass man sagt: Sprungmarke "#filterBar+x Punkte nach unten", dass man das dann selbst um die eigene Höhe der layout_navbar nach unten verschieben könnte?

    Ansonsten wäre eine Lösung mit "bleibe nach dem Klick auf einen Filter an der selben Stelle, wo die Seite vorher stand" natürlich noch wünschenswerter. Das würde immer passen und für den Kunden am logischsten sein. Da weiß ich aber überhaupt nicht, wie schwer das wäre.

    Genauso steht in deiner verlinkten Lösung im Bootstrap-Thread, dass eine Ajax Lösung noch eleganter wäre, um nicht soviel an bereits geladenen Daten nochmal unnötig laden zu müssen. Hatte ich kurz drüber ja auch ins Gespräch gebracht. Ist das kompliziert, oder warum gibts das noch nicht?

    @oneq
    Stimmt, da ist es genauso. Das sollte auch geändert werden. Man müsste dann aber auch den ausklappenden Warenkorb verschieben, um ihn zu sehen. Generell gab es dazu glaube auch eine kostenpflichtige Lösung von Alkim, wenn ich mich recht erinnere, wo mit Ajax gearbeitet wurde.

    Gruß Timm

    hpzeller

    • Experte
    • Beiträge: 4.130
    • Geschlecht:
    Re: Responsive Template für Modified
    Antwort #157 am: 03. Juli 2018, 23:37:54
    [...]
    Aber auch hier besteht das Problem, wenn man die layout_navbar mit sticky versehen hat, dass dann die beiden oberen Filter "Sortieren nach" und "Artikel pro Seite" verdeckt sind.

    Gäbe es dafür eine Lösung, dass man sagt: Sprungmarke "#filterBar+x Punkte nach unten", dass man das dann selbst um die eigene Höhe der layout_navbar nach unten verschieben könnte?
    [...]

    Diese Problematik ist nicht neu, gib mal "Anchor Links with a Fixed Header" bei G ein, vielleicht findest Du selbst eine Lösung oder wenigstens einen guten Lösungsansatz.

    [...]
    Genauso steht in deiner verlinkten Lösung im Bootstrap-Thread, dass eine Ajax Lösung noch eleganter wäre, um nicht soviel an bereits geladenen Daten nochmal unnötig laden zu müssen. Hatte ich kurz drüber ja auch ins Gespräch gebracht. Ist das kompliziert, oder warum gibts das noch nicht?
    [...]

    Kompliziert ist eine Ajax Lösung nicht aber einen gewissen Aufwand müsste man schon betreiben. Was man aber genau überdenken müsste ist, welche Konsequenzen eine Ajax Lösung in Bezug auf Technisches SEO hat.

    Gruss
    Hanspeter

    p3e

    • Experte
    • Beiträge: 2.392
    Re: Responsive Template für Modified
    Antwort #158 am: 04. Juli 2018, 12:30:45
    @FräuleinGarn: Ich habe Deine Problematik jetzt nur überflogen (und nicht alles gelesen) und hoffe jetzt nichts übersehen zu haben. Dein Problem ist, dass die Zeile wo der Anker liegt von einem fixierten Element überlagert wird und deshalb unsichtbar ist? Du könntest per JS die Produktlistingseiten um 50 Pixel nach oben verschieben, wenn in der URL ein # vorkommt. Das ganze darf natürlich nur einmal nach dem Laden der Seite ausgeführt werden, ist aber mit onload kein Problem.

    Code: Javascript  [Auswählen]
    /* Akerlink um 50 Pixel nach oben scrollen */
    function scrollanker () {
      if (location.hash)
        window.scrollBy(0,-50);
    }
    window.onload = scrollanker;

    Dabei überprüfen wir mit if (location.hash) ob ein # in der URL vorhanden ist.
    Ist dies der Fall wird durch window.scrollBy(0,-50) um 50 Pixel nach oben gescrollt.
    Durch window.onload = scrollanker wird die Funktion einmalig nach dem Laden der Seite aufgerufen.

    Ich habe das nicht getestet, weil ich heute im Lager bin. Sollte aber so gehen.

    noRiddle (revilonetz)

    • Experte
    • Beiträge: 13.707
    • Geschlecht:
    Re: Responsive Template für Modified
    Antwort #159 am: 04. Juli 2018, 14:00:58
    Die von modified benutzten Tabs auf den Produkt-Seiten sowie das Akkordeon auf der Zahlungsmethode-Seite im Checkout setzt bei Klick ebenfalls Anker.
    Deine Lösung, p3e, könnte also dort problematisch werden.
    *EDIT*(kann man natürlich auf Kategorie-Seiten einschränken)*END_EDIT*

    Was als Lösung unabhängig von den genannten Implementationen sein dürfte ist die Lösung die ich hier im I-net fand. Finde ich eine kluge Lösung.

    Was man machen könnte um die Scroll-Position nach Filtern wiederherzustellen wäre folgendes:
    Man hängt mittels Javascript einen Parameter an die URL des form action welcher die momentane Scroll-Position kodiert beinhaltet.
    Nach Betätigung des Filters und somit Reload der Seite wird der Parameter aus der URL ausgelesen und die Scroll-Position wiederhergestellt, ob animiert oder einfach sprunghaft bleibt dann dem individuellen Geschmack überlassen.

    Um die Filter per Ajax aufzurufen bedürfte es einiger Umbauten die den Core-Code betreffen.
    Allerdings bin ich nach wie vor der Meinung, daß es für alle JS-implementationen (im Frontend) ein Fallback geben sollte für deaktiviertes JS.
    Zwar kommt es inzwischen selten vor, das Javascript im Brower deaktiviert ist
    - in Firefox z.B. geht das Deaktivieren von JS ohne tiefere Kenntnisse oder Plugins schon länger nicht mehr -
    aber man sollte alles abdecken.

    Gruß,
    noRiddle

    *NACHTRAG*
    Das ist auch nicht schlecht...

    hpzeller

    • Experte
    • Beiträge: 4.130
    • Geschlecht:
    Re: Responsive Template für Modified
    Antwort #160 am: 05. Juli 2018, 15:42:36
    Hallo Timm

    [...]
    Aber auch hier besteht das Problem, wenn man die layout_navbar mit sticky versehen hat, dass dann die beiden oberen Filter "Sortieren nach" und "Artikel pro Seite" verdeckt sind.

    Gäbe es dafür eine Lösung, dass man sagt: Sprungmarke "#filterBar+x Punkte nach unten", dass man das dann selbst um die eigene Höhe der layout_navbar nach unten verschieben könnte?
    [...]

    Eigentlich hätte ich erwartet, das der disbezügliche Lösungsvorschlag von p3e in Antwort #158  prinzipiell funktioniert, musste aber leider feststellen, dass sein JS-Code in Zusammenhang mit der CSS-Eigenschaft position:sticky in jedem Browser ein anderes Ergebnis zeigt. Dazu kommt noch das die layout_navbar nicht immer die gleiche Höhe hat, bei kleinen Bildschirmen wird sie nämlich zweizeilig und das muss auch berücksichtigt werden.

    Mein Lösungsvorschlag zum testen:
    Ersetze aus dem ersten Code meiner Antwort #154 folgende Zeile

    Code: XML  [Auswählen]
    <div id="filterBar" class="filter_bar cf">
     

    mit diesem Code.

    Code: XML  [Auswählen]
    <script>
    {literal}
      $(function(){
        $('#filterBar').css('top', '-' + ($('#layout_navbar').outerHeight() + 5) + 'px');
      });
    {/literal}
    </script>
    <a id="filterBar" Style="display: block; position: relative; visibility: hidden;"></a>
    <div class="filter_bar cf">
     

    Gruss
    Hanspeter

    noRiddle (revilonetz)

    • Experte
    • Beiträge: 13.707
    • Geschlecht:
    Re: Responsive Template für Modified
    Antwort #161 am: 05. Juli 2018, 15:53:44
    Ich muß mal kurz mit einem anderen Thema dazwischen gehen.

    HTML-Fehler im Responsive Template:
    In der /module/checkout_confirmation.html gibt es diesen Code:
    Code: XML  [Auswählen]
    <div class="button_right_checkout">{$CHECKOUT_FORM}{if $MODULE_BUTTONS != ''}{$MODULE_BUTTONS}{/if}<div class="cssButtonPos12">{$CHECKOUT_BUTTON}</div></div>

    {$CHECKOUT_FORM} enthält den öffnenden form-tag und {$CHECKOUT_BUTTON} den schließenden form-tag.
    Da form ein Block-Element ist und innerhalb von
    <div class="button_right_checkout">
    geöffnet wird, muß er auch vor dem dazugehörigen schließenden
    </div>
    geschlossen werden und nicht innerhalb von
    <div class="cssButtonPos12">...</div>

    Quick fix:
    Den zu Begin des Postes aufgeführten Code mit folgendem ersetzen (übersichtlicher formatiert):
    Code: XML  [Auswählen]
    <div class="button_right_checkout">
        {$CHECKOUT_FORM}
            {if $MODULE_BUTTONS != ''}{$MODULE_BUTTONS}{/if}
            <div class="cssButtonPos12">{$CHECKOUT_BUTTON|replace:'</form>':''}</div>
        </form>
    </div>

    Man sollte vielleicht generell versuchen die schließenden form-tags aus dem PHP rauszuholen und ins Template zu verlagern (ich weiß, ist nicht ganz so trivial wie es erscheinen mag...).

    Gruß,
    noRiddle

    h-h-h

    • modified Team
    • Beiträge: 4.563
    Re: Responsive Template für Modified
    Antwort #162 am: 05. Juli 2018, 20:42:51
    [...]
    Man sollte vielleicht generell versuchen die schließenden form-tags aus dem PHP rauszuholen und ins Template zu verlagern [...]

    :pro:

    Timm

    • Fördermitglied
    • Beiträge: 6.319
    Re: Responsive Template für Modified
    Antwort #163 am: 05. Juli 2018, 21:41:51
    Ich danke Euch vielmals für den Input, der auf mein spezielles Problem mit der sticky layout_navbar ausgerichtet ist, obwohl mein eigentliches Anliegen ja nur war, dass es für alle am Ende eine gute Lösung gibt. Und versuche morgen das auszuprobieren. Vielleicht wird’s aber erst Dienstag-bin grad auswärts arbeitend.

    Lieben Dank an alle Helfer.

    Gruß Timm

    hpzeller

    • Experte
    • Beiträge: 4.130
    • Geschlecht:
    Re: Responsive Template für Modified
    Antwort #164 am: 06. Juli 2018, 07:49:32
    Hallo Timm

    [...]
    Ansonsten wäre eine Lösung mit "bleibe nach dem Klick auf einen Filter an der selben Stelle, wo die Seite vorher stand" natürlich noch wünschenswerter. Das würde immer passen und für den Kunden am logischsten sein. Da weiß ich aber überhaupt nicht, wie schwer das wäre.

    Genauso steht in deiner verlinkten Lösung im Bootstrap-Thread, dass eine Ajax Lösung noch eleganter wäre, um nicht soviel an bereits geladenen Daten nochmal unnötig laden zu müssen. Hatte ich kurz drüber ja auch ins Gespräch gebracht. Ist das kompliziert, oder warum gibts das noch nicht?
    [...]

    Ein sehr schönes Beispiel einer Artikelliste als Single Page JavaScript Ajax Lösung kannst du hier -> https://fonts.google.com/ sehen. Was sofort positiv auffällt ist das die Filter immer im sichtbaren Bereich des Browsers sind und das es keine Pages gibt, sondern das beim scrollen auf der Seite weitere Artikel einfach nachgeladen werden. Ausserdem ist eine Deteilansicht (Produkt-Info-Seite) durch klick auf SEE SPECIMEN bereits implementiert und auch die möglichkeit einen Artikel einer Merkliste hinzu zu fügen gibt es bereits. So sollte meiner Meinung nach ein modernes Shopsystem, welches viele Produkte hat, daher kommen.

    Gruss
    Hanspeter
    rechtstexte für onlineshop
    48 Antworten
    40444 Aufrufe
    18. Juni 2017, 11:01:06 von Timm
    1 Antworten
    3086 Aufrufe
    24. April 2018, 09:36:44 von lukass
    10 Antworten
    8832 Aufrufe
    28. November 2018, 23:00:26 von cayuco
    3 Antworten
    1906 Aufrufe
    21. Juli 2018, 14:02:31 von Tomcraft
               
    anything