Responsive Template für Modified

[Markus]

Hi Jürgen,

beim Responsive Template Nr. 6 funktioniert das Suchfeld nicht richtig. Allerdings nur beim Smartphone.
Ich habe es mit einem Samsung Handy und verschiedenen Browsern getestet.

Bitte nochmal testen ... es sollte jetzt sauber funktionieren

Markus

[JuergenS]

Hallo Markus,

ja funktioniert.

Besten Dank.

Dann kann ich das Template ja jetzt kaufen. 

Jürgen

[Timm]

Moin

1) Ich hab folgenden Code in der general_bottom.js.php ganz am Ende.

Code: PHP  [Auswählen]

<?php // BOF hpzeller Filterbar Anker ?>
<script>
  $(function(){
    $('#filterBar').css('top', '-' + ($('#layout_navbar').outerHeight() + 5) + 'px');
  });
</script>
<?php // EOF hpzeller Filterbar Anker ?>
 

Nun gibt es ja einen Hookpoint in der general_bottom.js.php und man kann Dateien die in javascript/extra abgelegt sind automatisch einbinden, was super ist, weil man so weniger Templatedateien umändern muss und es updatesicher geht.

Wie kann man aber die Stelle beeinflussen, wo es dann am Ende im Code landet? Ich sollte das damals ans Ende der Datei einfügen. Wenn ich eine neue Datei in javascript/extra mit dem Codeinhalt erstelle, dann wird das ja sicher irgendwo platziert. Oder ist das gar nicht wichtig?

2) Interessehalber: Ich hatte vorher eine Änderung von Markus aus diesem Thread, dass die jQuery im Body und nicht im head geladen wird. Nun wird die neue jQuery in 2.0.5.0 auch automatisch im Body geladen. Allerdings ist der Code in der general.js und general_bottom.js.php wie in 2.0.4.2. wo es ohne Änderung eigentlich im head geladen wurde. Wie wurde das gelöst?

Gruß Timm

[Markus]

Hi Timm,

zur 1. Frage ...
Nimm doch einfach das ganze Filter Script und pack das in eine einzelne js.php Datei rein und lade das in den "extra" Ordner. und benenne die einfach filter.js.php. In Theorie würde ich sagen dass die Reihenfolge keine Rolle spielt aber das kommt auf einen Versuch an.  (Alternativ kannst du das natürlich auch ans Ende der default.js.php einfügen. Sollte die Reihenfolge doch eine Rolle spielen packst du das ganze einfach in die separate Datei und benennst sie x_filter.js.php .... dann wird sie ganz zum Schluss geladen.  Ausgelesen wird das ganze nach dem Namen ... so wie die Dateien normalerweise auch im Ordner auf dem Server sortiert sind.

zur 2. Frage....
in der neuen Version wird jQuery eigentlich nur noch im Footer in der general_bottom.js.php geladen. In der general.js.php dürfte da kein Verweis mehr drin sein. Ich kann dir jetzt nur soviel sagen dass die ganzen Scripte welche standardmäßig verbaut sind damit klar kommen und es zu keinen Problemen kommt. Das musst du einfach testen ob das bei dir auch alles weiterhin funktioniert wenn du jQuery nur noch unten laden lässt. Wenn es da zu Problemen kommen sollte kannst du natürlich auch die bisherige Funktionalität so beibehalten. 

Markus

[Timm]

1) Danke @Markus für die Erklärung. Also gehts alphabetisch bei den auto_include Dateien. Gut zu wissen. Das ist echt eine kleine feine Verbesserung. Werden sich bestimmt auch einige Entwickler drüber freuen.

2) Stimmt in der general.js.php steht gar nichts von jQuery, sondern nur was mit javascript. Hatte ich falsch gelesen. Bin noch am mergen in den letzten Zügen. Ist ja diesmal echt ein Akt bei der riesen Anzahl an Dateien. Updates in kürzeren Abstanden wären m.M.n. besser. Hatte jQuery vorher schon immer unten geladen und es hat funktioniert, deshalb bin ich da hoffnungsvoll.

Habs jetzt selbst wieder verstanden. Die Ausrufezeichen verneinen ja. Also hieß es vorher bei mir in der general_bottom.js.php "wenn nicht Warenkorb oder Checkout, dann lade jQuery unten. Und in der general.js.php "wenn Warenkorb oder Checkout, dann lade jQuery oben. Und original war es ja immer nur in der general.js.php, was immer oben laden bedeutete. Habs also nun verstanden, weil es nun in general_bottom.js.php statt general.js.php ist,  wird jQuery nun immer unten geladen, weil ihr das mit der Paypal Wall hinbekommen habt, das jQuery nicht mehr oben geladen werden muss.

Gruß Timm

[Timm]

Noch eine Nachfrage: Wenn ich den bxslider nicht verwende, muss ich den dann aus dem extra Ordner löschen, oder kann man den auch umbenennen mit _. zB? Natürlich in der general_bottom.js.php zusätzlich noch auskommentieren.

Gruß Timm

[Markus]

Hi Timm,

du kannst die Datei auch umbenennen ... ich persönlich würde einfach einen Ordner _unused oder _original ... oder sowas in der Art im extra-Ordner anlegen und die da rein verschieben. Und wie du schon sagtest ... der Eintrag aus der general_bottom.js.php muss dann auch zwingend raus ... sonst könnte es Javascript Fehler geben. 

Markus

[Timm]

Danke dir, habs mit einem _unused Ordner gemacht. 

Was mir beim mergen aufgefallen ist, dass ziemlich viele Bilder nun zusätzlich zum alt Attribut auch einen title bekommen haben. Lediglich das Kategorie Bild in product_listing_v1.html hat keinen title bekommen. Habs aber nur im tpl_responsive_1 Template beobachtet, weil ich das gerade bearbeite.

Soll das so sein?

Gruß Timm

[Timm]

@hpzeller
Du hattest mir vor einiger Zeit geholfen den Anker auf die Filterbar zu setzen zb beim ändern eines Filters oder eines Klicks auf die nächste paginierte Seite.

Die Datei tpl_modified_responsive_1/module/listing_filter.html hat nur Korrekturen der fontawesome Icons erhalten, deshalb würde ich denken, dass es da weiterhin funktioniert wie bisher.

In 2.0.5.0 ist die Datei tpl_modified_responsive_1/module/pagination.html aber komplett anders.

in 2.0.4.2 war es so

Code: XML  [Auswählen]

      {if isset($DISPLAY_LINKS.previous)}<li>{$DISPLAY_LINKS.previous}</li>{/if}
      {if isset($DISPLAY_LINKS.previouspages)}<li>{$DISPLAY_LINKS.previouspages}</li>{/if}
      {foreach key="keys" name="outer" item="pages" from=$DISPLAY_LINKS.pages}
        <li class="{$keys}">{$pages}</li>
      {/foreach}
      {if isset($DISPLAY_LINKS.nextpages)}<li>{$DISPLAY_LINKS.nextpages}</li>{/if}
      {if isset($DISPLAY_LINKS.next)}<li>{$DISPLAY_LINKS.next}</li>{/if}
    </ul>
  </div>
</div>

das hattest du für mich geändert zu

Code: XML  [Auswählen]

          {* BOF - hpzeller Filterbar Anker *}
      {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>
{* EOF - hpzeller Filterbar Anker *}

neu sieht der Code der Datei so aus

Code: XML  [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_data)}
        <li><a class="pageResults" href="{$DISPLAY_LINKS.previous_data.LINK}" title="{$DISPLAY_LINKS.previous_data.TITLE}">{$DISPLAY_LINKS.previous_data.TEXT}</a></li>
      {elseif isset($DISPLAY_LINKS.previous)}
        <li>{$DISPLAY_LINKS.previous}</li>
      {/if}
      {if isset($DISPLAY_LINKS.previouspages_data)}
        <li><a class="pageResults" href="{$DISPLAY_LINKS.previouspages_data.LINK}" title="{$DISPLAY_LINKS.previouspages_data.TITLE}">{$DISPLAY_LINKS.previouspages_data.TEXT}</a></li>
      {elseif isset($DISPLAY_LINKS.previouspages)}
        <li>{$DISPLAY_LINKS.previouspages}</li>
      {/if}
      {if isset($DISPLAY_LINKS.pages_data)}
        {foreach key="keys" name="outer" item="pages" from=$DISPLAY_LINKS.pages_data}
          {if $pages.CURRENT == 1}
            <li class="current">{$pages.TEXT}</li>
          {else}
            <li><a class="pageResults" href="{$pages.LINK}" title="{$pages.TITLE}">{$pages.TEXT}</a></li>
          {/if}
        {/foreach}
      {elseif isset($DISPLAY_LINKS.pages)}
        {foreach key="keys" name="outer" item="pages" from=$DISPLAY_LINKS.pages}
          <li class="{$keys}">{$pages}</li>
        {/foreach}
      {/if}
      {if isset($DISPLAY_LINKS.nextpages_data)}
        <li><a class="pageResults" href="{$DISPLAY_LINKS.nextpages_data.LINK}" title="{$DISPLAY_LINKS.nextpages_data.TITLE}">{$DISPLAY_LINKS.nextpages_data.TEXT}</a></li>
      {elseif isset($DISPLAY_LINKS.nextpages)}
        <li>{$DISPLAY_LINKS.nextpages}</li>
      {/if}
      {if isset($DISPLAY_LINKS.next_data)}
        <li><a class="pageResults" href="{$DISPLAY_LINKS.next_data.LINK}" title="{$DISPLAY_LINKS.next_data.TITLE}">{$DISPLAY_LINKS.next_data.TEXT}</a></li>
      {elseif isset($DISPLAY_LINKS.next)}
        <li>{$DISPLAY_LINKS.next}</li>
      {/if}
    </ul>
  </div>
</div>

Könntest du mir sagen, wie ich das anpassen müsste?

Gruß Timm

[Markus]

HI Timm,

bist du da sicher mit dem Title-Attribut oder hat das evtl. was mit deiner Bilderanspassung zu tun?
Mit ist das jetzt gerade nicht bewusst dass wir hier überall title-Atttibute hinzugefügt haben.

Markus

[Timm]

Hallo Markus

Wenn ich das originale mir von Torsten zugeschickte 2.0.4.2 tpl_modified_responsive Paket gegen das aktuelle tpl_modified_responsive_1 Paket vergleiche, dann ist der title bei Bildern mindestens in folgenden Dateien hinzugekommen:

boxes/box_last_viewed.html
boxes/box_reviews..html
boxes/box_specials.html
boxes/box_whatsnew.html
module/product_reviews_info.html
module/product_info/product_info_*_v1.html
module/includes/product_info_include.html
module/includes/product_listing_include.html

nur in der module/product_listing/product_listing_v1.html nicht.

Wann das gemacht wurde, kann ich nicht sagen, da in den Dateien auch die Änderungen der Font Awesome Namen wegen Version 5 gemacht wurden. Muss vermutlich davor gewesen sein. Man sieht ja nur das letzte Änderungsdatum und Templatedateien haben keine Versionsnummer.

Das es gemacht wurde sieht man ja auch, wenn man im aktuellen Demoshop die Bilder untersucht und da nun ein alt und title ist. Bei älteren Shops ist da aber nur ein alt.

Und die Kategoriebilder und Unterkategoriebilder haben weiterhin "nur" ein alt.

Gruß Timm

EDIT: Vielleicht war es Changeset r11489.

[Markus]

Hi Timm,

das ist richtig ... bei allen Produktbildern ist der hinzugekommen ... nicht aber bei den Kategoriebildern. Da hat sich diesbezüglich nichts geändert.

Markus

[Timm]

Das es sich da nicht geändert hat hab ich ja selbst herausgefunden. Die Frage ist ja ob es dort auch gemacht werden sollte? Ich hab keine Ahnung ob das wichtig ist. Wollte nur auf die Inkosistenz hinweisen.

Gruß Timm

P.S. Wüsstest du wie ich den JavaScript Teil für den Anker in die geänderte pagination.html bekomme?

[Scubi]

Hallo Timm,

schau Dir mal in Lighthouse die Barrierefreiheit an. Es kann sein, dass der fehlende Titel bei den Kategoriebildern etc. bemängelt wird. Dann solltest Du den Titel hinzufügen.

[Timm]

@Markus
Könntest du mir bitte sagen, was die Stelle aus der stylesheet.css des tpl_modified_responsive_1 bedeutet?

in 2.0.4.2 war es

Code: CSS  [Auswählen]

.pd_big_image img {
  margin: 0px auto;
  width:100%;
  max-width:240px;
  height:auto;
  vertical-align:bottom;
}

in 2.0.5.0 ist es

Code: CSS  [Auswählen]

.pd_big_image:before {
  content: '';
  padding-top: 100%;
  display: block;
  overflow:hidden;
}
.pd_big_image img {
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  max-width: 25%;
  max-height: 25%;
  font-size: 0;
  -webkit-transform: scale(4.0);
  -moz-transform: scale(4.0);
  -ms-transform: scale(4.0);
  -o-transform: scale(4.0);
  transform: scale(4.0);
}

Wofür ist das hinzugekommene pd_big_image:before ? Brauch ich das?
Wenn ich das bei mir nicht auskommentiere, dann sieht das bei mir so aus.

[ Für Gäste sind keine Dateianhänge sichtbar ]

Mein code aus 2.0.4.2 + pd_big_image:before

Code: CSS  [Auswählen]

.pd_big_image:before {
  content: '';
  padding-top: 100%;
  display: block;
  overflow:hidden;
}
.pd_big_image img {
  margin: 0px auto;
  width:100%;
  /*** BOF  magiczoomplus ***/
  max-width:230px;
  /*** EOF - magiczoomplus ***/
  height:auto;
  vertical-align:bottom;
}  

Und sollte ich Teile der Neuerungen für pd_big_image img aus der 2.0.5.0 übernehmen? Oder kann das so bleiben mit auskommentiertem pd_big_image img?

Gruß Timm