TEMPLATE: Bootstrap3 für Shop 2.0 - freies responsive Template

[Timm]

Das mit JavaScript am Ende wurde hier beschrieben.

Gruß Timm

[hpzeller]

Hallo Chris

[...]
Störend ist das nach jeder Auswahl einer Filteroption die Seite nach unten springt.
Besteht da die Möglichkeit einen Anker ( glaube das nennt man so ) zu setzen.
[...]

Leider habe ich keinen Shop mit Artikelfilter um zu testen, aber du kannst mal folgendes versuchen, ersetze den kompletten Code der Datei 'templates/bootstrap3/module/listing_filter.html' mit diesem Code.

Code: XML  [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 clearfix">
  <div class="sort_bar well well-sm bs form-inline clearfix{if count($FILTER_TAG) > 0} mb{/if}">
      {if count($FILTER_TAG) < 1 && $FILTER_MANUFACTURER != ''}<div class="form-group">{$FILTER_MANUFACTURER|replace:'<select':'<select class="form-control input-sm" '}</div>{/if}
      <div class="form-group">{$FILTER_SORT|replace:'<select':'<select class="form-control input-sm" '|replace:'onchange="this':'onchange="$(this.form).attr(\'action\', function (_, oldAction) {return oldAction + \'#filterBar\';});this'}</div>
      <div class="form-group">{$FILTER_SET|replace:'<select':'<select class="form-control input-sm" '|replace:'onchange="this':'onchange="$(this.form).attr(\'action\', function (_, oldAction) {return oldAction + \'#filterBar\';});this'}</div>
      <div class="view-buttons pull-right">
        <a rel="nofollow" class="view_box btn btn-sm{if $smarty.const.PRODUCT_LIST_BOX == 'true'} disabled{/if}" href="{$LINK_DISPLAY_BOX}#filterBar" title="Boxansicht"><span class="glyphicon glyphicon-th"></span></a>&nbsp;&nbsp;
        <a rel="nofollow" class="view_list btn btn-sm{if $smarty.const.PRODUCT_LIST_BOX != 'true'} disabled{/if}" href="{$LINK_DISPLAY_LIST}#filterBar" title="Listenansicht"><span class="glyphicon glyphicon-th-list"></span></a>
      </div>
  </div>
  {if count($FILTER_TAG) > 0}
  <div class="tags_bar well well-sm clearfix">
    <div class="small clearfix">
      <strong>{#text_filter_options#}</strong>
      <a rel="nofollow" class="pull-right" href="{$LINK_FILTER_RESET}#filterBar" title="Reset">{#text_filter_reset#}</a>
    </div>
    <div class="tags_bar_row bs form-inline clearfix">
      {if $FILTER_MANUFACTURER != ''}<div class="form-group">{$FILTER_MANUFACTURER|replace:'<select':'<select class="filter form-control input-sm "'|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="form-group">{$filter|replace:'<select':'<select class="filter form-control input-sm" '|replace:'onchange="this':'onchange="$(this.form).attr(\'action\', function (_, oldAction) {return oldAction + \'#filterBar\';});this'}</div>
      {/foreach}
    </div>
    </div>
  {/if}
</div>
 

Gruss
Hanspeter

[hpzeller]

Nachtrag:

Habe die Hersteller-Auswahl vergessen.

Code: XML  [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 clearfix">
  <div class="sort_bar well well-sm bs form-inline clearfix{if count($FILTER_TAG) > 0} mb{/if}">
      {if count($FILTER_TAG) < 1 && $FILTER_MANUFACTURER != ''}<div class="form-group">{$FILTER_MANUFACTURER|replace:'<select':'<select class="form-control input-sm" '|replace:'onchange="this':'onchange="$(this.form).attr(\'action\', function (_, oldAction) {return oldAction + \'#filterBar\';});this'}</div>{/if}
      <div class="form-group">{$FILTER_SORT|replace:'<select':'<select class="form-control input-sm" '|replace:'onchange="this':'onchange="$(this.form).attr(\'action\', function (_, oldAction) {return oldAction + \'#filterBar\';});this'}</div>
      <div class="form-group">{$FILTER_SET|replace:'<select':'<select class="form-control input-sm" '|replace:'onchange="this':'onchange="$(this.form).attr(\'action\', function (_, oldAction) {return oldAction + \'#filterBar\';});this'}</div>
      <div class="view-buttons pull-right">
        <a rel="nofollow" class="view_box btn btn-sm{if $smarty.const.PRODUCT_LIST_BOX == 'true'} disabled{/if}" href="{$LINK_DISPLAY_BOX}#filterBar" title="Boxansicht"><span class="glyphicon glyphicon-th"></span></a>&nbsp;&nbsp;
        <a rel="nofollow" class="view_list btn btn-sm{if $smarty.const.PRODUCT_LIST_BOX != 'true'} disabled{/if}" href="{$LINK_DISPLAY_LIST}#filterBar" title="Listenansicht"><span class="glyphicon glyphicon-th-list"></span></a>
      </div>
  </div>
  {if count($FILTER_TAG) > 0}
  <div class="tags_bar well well-sm clearfix">
    <div class="small clearfix">
      <strong>{#text_filter_options#}</strong>
      <a rel="nofollow" class="pull-right" href="{$LINK_FILTER_RESET}#filterBar" title="Reset">{#text_filter_reset#}</a>
    </div>
    <div class="tags_bar_row bs form-inline clearfix">
      {if $FILTER_MANUFACTURER != ''}<div class="form-group">{$FILTER_MANUFACTURER|replace:'<select':'<select class="filter form-control input-sm "'|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="form-group">{$filter|replace:'<select':'<select class="filter form-control input-sm" '|replace:'onchange="this':'onchange="$(this.form).attr(\'action\', function (_, oldAction) {return oldAction + \'#filterBar\';});this'}</div>
      {/foreach}
    </div>
    </div>
  {/if}
</div>
 

Gruss
Hanspeter

[Karl1]

Hallo Michael,

CSS-Dateien im Head:
Schau in die templates/bootstrap3/css/general.css.php, dort werden die CSS-Dateien in ein Array geschrieben und anschließend innerhalb des Head-Tags ausgegeben.
Wenn du z.B. die Datei zusatzmodul.min.css einbinden möchtest, dann leg die Datei in den Ordner templates/bootstrap3/css/ und füge dies ein.

Code: PHP  [Auswählen]

$css_array[] = DIR_TMPL_CSS.'zusatzmodul.min.css';

Füge das aber vor der Zeile stylesheet.css ein, damit sichergestellt ist, dass deine individuellen CSS-Anweisungen nicht "überschrieben" werden.

Ohne CSS-Komprimierung werden die Dateien einzeln nacheinander geladen.
Schaltest du die Komprimierung ein, dann werden alle im $css_array befindlichen Dateien zusammengefasst zu einer Datei.

JS im Body-Tag:
Schau in die templates/bootstrap3/javascript/general.bottom.js.php, dort werden die JS-Dateien in ein Array geschrieben und anschließend am Ende des Body-Tags ausgegeben.
Wenn du z.B. die Datei zusatzmodul.min.js einbinden möchtest, dann leg die Datei in den Ordner templates/bootstrap3/javascript/ und füge dies ein.

Code: PHP  [Auswählen]

$script_array[] = DIR_TMPL_JS .'zusatzmodul.min.js';

Füge das aber nach dem ersten großen $script_array (damit sichergestellt ist, dass jQuery als erstes geladen wird - ist oft Voraussetzung für Skripte) und vor dem $script_min ein.

Einzelne Skripte kannst du weiter unten einfügen, z.B.

Code: Javascript  [Auswählen]

<script type="text/javascript">
  $('#mein_button').on('click',function() {
    $(this).hide();
  });
</script>

Gruß Karl

[Talismann]

Hallo Karl,

vielen Dank für die große Hilfe. Habe ich auch so versucht mit dem tpl_plugins.min.js aber irgendwie war dann das Template unten weiß. Vielleicht kannst du mir hier noch eine Hilfestellung geben. Vielleicht auch ob ich alle unten aufgelisteten Dateien so einbinden kann.

JS im Body-Tag:

Ich habe nun bei PageSpeed 3 Javascript Dateien (Entfernen Sie JavaScript, das das Rendering blockiert:)
https://armardi.de/templates/bootstrap2/javascript/tpl_plugins.min.js?v=1505990433
https://armardi.de/includes/external/shariff/shariff.complete.js
https://armardi.de/AmazonLoginAndPay/js/static.js

Kann ich die alle drei so wie du es geschrieben hast einfügen? Wenn ja, nach dem ersten $css_array in Zeile 23 oder nach Zeile 33 (// Cloud Zoom) oder sogar noch tiefer? Das ($script_min) ist in Zeile 44. Würde ich dann am besten alle drei so in Zeile 43 einfügen?

CSS-Dateien im Head:

Goggle PageSpeed sagt: Optimieren Sie die CSS-Darstellung für die folgenden URLs:
Die kann man aber nicht weiter komprimieren.
Soll ich mit allen nachfolgenden Dateien so verfahren wie du es beschrieben hast??

https://armardi.de/templates/bootstrap2/css/bootstrap/meine.min.css?v=1505846591
https://armardi.de/templates/bootstrap2/css/cloud-zoom.css?v=1505902607
https://armardi.de/templates/bootstrap2/css/pushy.min.css?v=1505902474
https://armardi.de/templates/bootstrap2/css/jquery.alerts.css?v=1505846903
https://armardi.de/templates/bootstrap2/css/trafficlight.css?v=1505902263
https://armardi.de/templates/bootstrap2/stylesheet.css?v=1505991957
https://armardi.de//templates/bootstrap2/css/shariff.complete.css
https://armardi.de/includes/external/mailhive/configbeez/config_shopvoting/templates/stylesheetbox.css?v=3.8008
https://armardi.de/templates/bootstrap2/amazon-checkout.css

Das (stylesheet.css) steht bei mir in Zeile 43. Sollten dann also die dateien direkt davor eingebunden werden als so in Zeile 42?

Karl, es tut mir Leid, das ich dich soviel fragen muss. Ich versuche ja alles irgendwie selbst hin zu bekommen. Tue mir aber ein bisschen schwer, da ich dies nicht gelernt habe. Sorry

Gruß Michael

[Frank1888]

Hallo Zusammen,

habe auch das super geniale Bootstrap3 Template von Karl mit Theme Slate installiert.
Allerdings ist das Menü weiß in weiß, die Seitenleiste wird farblich richtig dargestellt.
Wo und wie kann ich die Farben ändern? Hier im Forum hab ich leider nichts gefunden wie ich es ändern kann.
Wäre super nett, wenn mir einer helfen könnte.

Gruß Frank

[Karl1]

Hallo Michael,

JS:
Die tpl_plugins.min.js?v=... ist die Datei, die erzeugt wird bei eingeschalteter JS-Komprimierung.
Die ist das Ergebnis aus dem $script_array und wird dein Rendering immer blockieren.

Die beiden Anderen schreibst du wie ich beschrieben habe in die Zeile 43.

CSS:
Schalte deine CSS-Komprimierung ein und es werden einige deiner Dateien zur stylesheet.min.css zusammengefasst.

Die Dateien die übrig geblieben sind, die fügst du in Zeile 42 ein.

Beachte aber, dass die Dateien durch das Einfügen nicht zweimal aufgerufen werden.
Die bisherigen Links musst du löschen.

Gruß Karl

[Karl1]

Hallo Frank,
jetzt hast du mich erwischt, das ist mir entgangen.

Hier ein Workaround:
Öffne die templates/bootstrap3/boxes/box_categories_responsivemenu.html und ändere diese Zeile 4

Code: PHP  [Auswählen]

<nav class="responsive-nav">

in

Code: PHP  [Auswählen]

<nav class="responsive-nav{if $smarty.const.BOOTSTRAP_THEME == 'slate'} navbar-default{/if}">

Gruß Karl

[Frank1888]

Hallo Karl,

vielen Dank für die schnelle Antwort.
Leider hat sich nichts verändert.

Gruß Frank

[Karl1]

Hallo Frank,
hast du in der templates/bootstrap3/config/config.php auch wirklich

Code: PHP  [Auswählen]

define('BOOTSTRAP_THEME', 'slate');

stehen?

Caches gelöscht?

Steht bei dir auch navbar-default wie im Bild?
[ Für Gäste sind keine Dateianhänge sichtbar ]

Hast du einen Link zum Shop?

Gruß Karl

[Talismann]

Hallo Karl,

du bist echt hilfsbereit - Vielen Dank 

Ich werde mich gleich einmal daran machen das umzusetzen.
P.S. Die CSS Kompriemierung war eingeschaltet. Habe es jetzt einmal ausgeschaltet und wieder eingeschaltet. Sind noch alle CSS da. Also muß ich alle so einbauen.

Nun habe ich aber noch eine Frage:

Beachte aber, dass die Dateien durch das Einfügen nicht zweimal aufgerufen werden.
Die bisherigen Links musst du löschen.

Wo muß man diese Links löschen?

Vielen Dank für alles Karl

Gruß
Michael

[Talismann]

Oh, habe was vergessen Karl.

Du hast geschrieben:

Wenn du z.B. die Datei zusatzmodul.min.js einbinden möchtest, dann leg die Datei in den Ordner templates/bootstrap3/javascript/ und füge dies ein.

Soll ich diese in dem vorherigen Ordner wo diese drinnen waren löschen oder nur von dort heraus kopieren und in den Ordner css legen?

Gruß
Michael

[Frank1888]

Hallo Karl,

vielen lieben Dank für Deine schnelle Hilfe.
Jetzt funktioniert es. Hatte bei define('BOOTSTRAP_THEME', 'slate'); "meine" stehen.

Nochmals Danke und Gruß

Frank

[Karl1]

Hallo Frank,

wenn du das Template, so wie in meiner Anleitung beschrieben, verändern willst, dann muss in der config.php "meine" und in der templates/bootstrap3/boxes/box_categories_responsivemenu.html anstatt "slate" auch "meine" stehen.

Gruß Karl

[Schreinermeister]

Nachtrag:

Habe die Hersteller-Auswahl vergessen.

Code: XML  [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 clearfix">
  <div class="sort_bar well well-sm bs form-inline clearfix{if count($FILTER_TAG) > 0} mb{/if}">
      {if count($FILTER_TAG) < 1 && $FILTER_MANUFACTURER != ''}<div class="form-group">{$FILTER_MANUFACTURER|replace:'<select':'<select class="form-control input-sm" '|replace:'onchange="this':'onchange="$(this.form).attr(\'action\', function (_, oldAction) {return oldAction + \'#filterBar\';});this'}</div>{/if}
      <div class="form-group">{$FILTER_SORT|replace:'<select':'<select class="form-control input-sm" '|replace:'onchange="this':'onchange="$(this.form).attr(\'action\', function (_, oldAction) {return oldAction + \'#filterBar\';});this'}</div>
      <div class="form-group">{$FILTER_SET|replace:'<select':'<select class="form-control input-sm" '|replace:'onchange="this':'onchange="$(this.form).attr(\'action\', function (_, oldAction) {return oldAction + \'#filterBar\';});this'}</div>
      <div class="view-buttons pull-right">
        <a rel="nofollow" class="view_box btn btn-sm{if $smarty.const.PRODUCT_LIST_BOX == 'true'} disabled{/if}" href="{$LINK_DISPLAY_BOX}#filterBar" title="Boxansicht"><span class="glyphicon glyphicon-th"></span></a>&nbsp;&nbsp;
        <a rel="nofollow" class="view_list btn btn-sm{if $smarty.const.PRODUCT_LIST_BOX != 'true'} disabled{/if}" href="{$LINK_DISPLAY_LIST}#filterBar" title="Listenansicht"><span class="glyphicon glyphicon-th-list"></span></a>
      </div>
  </div>
  {if count($FILTER_TAG) > 0}
  <div class="tags_bar well well-sm clearfix">
    <div class="small clearfix">
      <strong>{#text_filter_options#}</strong>
      <a rel="nofollow" class="pull-right" href="{$LINK_FILTER_RESET}#filterBar" title="Reset">{#text_filter_reset#}</a>
    </div>
    <div class="tags_bar_row bs form-inline clearfix">
      {if $FILTER_MANUFACTURER != ''}<div class="form-group">{$FILTER_MANUFACTURER|replace:'<select':'<select class="filter form-control input-sm "'|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="form-group">{$filter|replace:'<select':'<select class="filter form-control input-sm" '|replace:'onchange="this':'onchange="$(this.form).attr(\'action\', function (_, oldAction) {return oldAction + \'#filterBar\';});this'}</div>
      {/foreach}
    </div>
    </div>
  {/if}
</div>
 

Gruss
Hanspeter

Hallo Hanspeter

PERFEKT !

So hab ich mir das vorgestellt.
Danke für deine Hilfe !!

Gruß Chris