TEMPLATE: Bootstrap4 für Shop 2.x - freies responsive Template

[bittalk]

@awids nein darauf bin ich nicht gekommen.

Ich möchte hier niemandem seine Nerven strapazieren und bin mir darüber im klaren das ich für die Experten fragen stelle wo ihr euch bestimmt sagt nicht schon wieder inzwischen verstehe ich schon etwas aber das sind gerade <1%

Danke für deinen TIP

EDIT:
Sorry du ich habe keine Ahnung wo und wie ich da ansetzen muss, habe jetzt versucht was zu ändern das hat aber nicht funktioniert bekomme dann eine weiße Seite.

[awids]

Komisch, dabei sind die Verzeichnisse doch so treffend benannt?!    Zumindest, wenn man nachgeschaut hat. 

Du/Ihr/Man lernst/lernt viel besser, wenn du/ihr/man dich/euch/sich mit den Dateien auch mal auseinander setzt.

Karl leistet hier großartigen und kostenlosen Support für sein mindestens genau so großartiges und ebenfalls kostenloses Template. Da sollte man seine Gutmütigkeit nicht mit solchen Anfänger-Fragen ausnutzen. Und wenn doch, weil man einfach nicht weiter kommt, sehe ich die Mindestvoraussetzung darin, dass man sich so ausdrückt, dass Helfende dein Anliegen erkennen können und nicht raten müssen oder ihre Zeit für eine Lösung in die völlig falsche Richtung verschwenden.

Du kannst dir aus meinen Text rauspicken, was deiner Meinung nach davon auf dich zutrifft. Er ist allgemein verfasst. Ich schaue mir das hier halt schon länger mit an und leiste mir heute mal einen kleinen "Roundhouse-Kick".

[awids]

Beispiel (anhand der /templates/bootstra4/module/categorie_listing/categorie_listing.html)

Fügen diesen Teil von unten:

Code: PHP  [Auswählen]

{if $module_content != '' && $TR_COLS > 0}
<div class="catlist-subcats mb-2">
   <h4 class="card p-2 bg-h">{#heading_more_categories#}</h4>
  <div class="row">
      {foreach name=aussen item=module_data from=$module_content key=spalten}
           {if !isset($module_data.CATEGORIES_PRODUCTS) || (isset($module_data.CATEGORIES_PRODUCTS) && $module_data.CATEGORIES_PRODUCTS > 0)}
         <div class="col-sm-6 col-md-4 col-lg-3 text-center mb-2">
            <a class="subcat card h-100" href="{$module_data.CATEGORIES_LINK}">
               <div class="card-body flex-fill d-flex flex-column text-center">
                  <div class="w-100 mb-auto">
                  {if $module_data.CATEGORIES_IMAGE}
                     <img class="img-fluid d-block mx-auto" src="{$module_data.CATEGORIES_IMAGE}" alt="{$module_data.CATEGORIES_NAME|onlytext}" />
                  {/if}
                  <>
                  <div class="mt-2">
                     <span class="subcat_title lead text-secondary">{$module_data.CATEGORIES_NAME}</span>
                     {* <p class="subcat_desc small">{$module_data.CATEGORIES_DESCRIPTION|onlytext|truncate:55:"...":true}</p> *}
                  <>
               <>
            </a>
         <>
         {/if}
      {/foreach}
   <>
<>
{/if}
{if isset($MODULE_new_products)}{$MODULE_new_products}{/if}

nach:

Code: PHP  [Auswählen]

   {if isset($CATEGORIES_HEADING_TITLE) && $CATEGORIES_HEADING_TITLE != ''}
     <h3 class="card p-2 bg-h">{$CATEGORIES_HEADING_TITLE}</h3>
   {else}
     <h3 class="card p-2 bg-h">{$CATEGORIES_NAME}</h3>
   {/if}

ein.

Dann hast du oben die Überschrift, darunter die Subcategories, (ggf. "Neue Produkte") und zum Schluss/darunter dann die Kategorie-Beschreibung.

[bittalk]

Komisch, dabei sind die Verzeichnisse doch so treffend benannt?!    Zumindest, wenn man nachgeschaut hat. 

Du/Ihr/Man lernst/lernt viel besser, wenn du/ihr/man dich/euch/sich mit den Dateien auch mal auseinander setzt.

Nachgeschaut habe ich und ich versuche mich damit auch auseinander zu setzen, nur habe ich nicht das gelernt wodurch du einen Vorteil hast.

Karl leistet hier großartigen und kostenlosen Support für sein mindestens genau so großartiges und ebenfalls kostenloses Template. Da sollte man seine Gutmütigkeit nicht mit solchen Anfänger-Fragen ausnutzen. Und wenn doch, weil man einfach nicht weiter kommt, sehe ich die Mindestvoraussetzung darin, dass man sich so ausdrückt, dass Helfende dein Anliegen erkennen können und nicht raten müssen oder ihre Zeit für eine Lösung in die völlig falsche Richtung verschwenden.

Das Karl hier eine wirklich großartige Arbeit leistet nicht nur mit seinem Support, wie du sagst auch mit seinem Template das weiss ich.
Ja, Anfänger fragen werden gestellt und nicht nur von mir da ich dieses Thread ja auch verfolge. Nur wie kommst du auf "Da sollte man seine Gutmütigkeit nicht mit solchen Anfänger-Fragen ausnutzen. " ??? Ich versuche mich hier so gut es geht verständlich zu formulieren. Bisher habe ich durch viel lesen das meiste hinbekommen und wenn ich nicht weiterkomme Frage ich und Entschuldige das ich hierbei nicht die Fachbegriffe verwende wenn ich diese nicht beherrsche.

Du kannst dir aus meinen Text rauspicken, was deiner Meinung nach davon auf dich zutrifft. Er ist allgemein verfasst. Ich schaue mir das hier halt schon länger mit an und leiste mir heute mal einen kleinen "Roundhouse-Kick".

Das versuche ich und bin dir dafür auch Dankbar.

Nur eines noch Kick in eine andere Richtung

[awids]

Sieht du bei dem langen Text noch, dass ich dir oben ein Beispiel gegeben habe? 

[bittalk]

Natürlich Danke  

[bittalk]

Ich glaube ich hab´s hingekriegt  danke awids dein Beispiel hat mir sehr geholfen.
Wenn einer das gebrauchen kann.
Die Auflistung ist
-Unterkategorien
-Kategoriename
-Artikel
-Content

Code: PHP  [Auswählen]

{config_load file="$language/lang_$language.conf" section="index"}
{config_load file="lang_`$language`.custom"}
{config_load file="lang_`$language`.section" section="index"}
<h1 class="card p-2 bg-h">{$LIST_TITLE}</h1>
{if isset($CATEGORIES_LISTING)}{$CATEGORIES_LISTING}{/if}

{$LISTING_FILTER}

{if (isset($MANUFACTURER_DESCRIPTION) && $MANUFACTURER_DESCRIPTION != '')
    || (isset($MANUFACTURER_IMAGE) && $MANUFACTURER_IMAGE != '')
    || (isset($MANUFACTURER_NAME) && $MANUFACTURER_NAME != '')}
<div class="manufacturer mb-2 clearfix">
        <h4 class="card p-2 bg-h">{$MANUFACTURER_NAME}</h4>
        <div class="manu_description mb-2">
          {if $MANUFACTURER_IMAGE}<img class="{if (isset($MANUFACTURER_DESCRIPTION) && $MANUFACTURER_DESCRIPTION != '')}col-4 {/if}img-fluid float-left mb-2 mr-4" src="{$MANUFACTURER_IMAGE}" alt="{$MANUFACTURER_NAME|onlytext}" />{/if}
          {if $MANUFACTURER_DESCRIPTION}{$MANUFACTURER_DESCRIPTION}{/if}
        </div>
</div>
{/if}


{$PAGINATION}
{include file="module/includes/product_listing_include.html"}
{$PAGINATION}

<div class="prod-listing mb-2 clearfix">
       
        {if (isset($CATEGORIES_DESCRIPTION) && $CATEGORIES_DESCRIPTION != '')
             || (isset($CATEGORIES_IMAGE) && $CATEGORIES_IMAGE != '')}
        <div class="cat_description p-2 mb-2">
          {if isset($CATEGORIES_IMAGE) && $CATEGORIES_IMAGE != ''}<img class="{if (isset($CATEGORIES_DESCRIPTION) && $CATEGORIES_DESCRIPTION != '')}col-4 {/if}img-fluid float-left mb-2 mr-4" src="{$CATEGORIES_IMAGE}" alt="{$CATEGORIES_NAME|onlytext}" />{/if}
          {if (isset($CATEGORIES_DESCRIPTION) && $CATEGORIES_DESCRIPTION != '')}{$CATEGORIES_DESCRIPTION}{/if}
        </div>
        {/if}
</div>
 

[xampp]

Guten Tag Karl 
ich hoffe du hast nichts dagegen dass ich die vorherigen 83 Seiten mal auf das wesentliche zusammengerafft und ein "Inhaltsverzeichniss" erstellt habe:

Navbar fullwidth:
Zahlungsmethoden im Footer mittig-zentriert:
Zwei Startseiten-Content:
Box "Zahlungsmethoden" deaktivieren:
Abstand im Warenkorb für Mengenfeld und die 3 Buttons (Löschen, Update, Merkzettel) ändern:
Hintergrundbild bg.gif anlegen:
Banner ganz nach oben setzen:
Das untere Preislabel rechts und etwas grösser darstellen:
Scrollen bei Unterkategorie-Klick verhindern:
Bilder und Tabellen in den Artikelbeschreibungen selbst responsive gestalten:
{debug} Beispiel:
Theme Einstellungen:

Zu den Bootstrap 4 Theme-Einstellungen:
Dort gemachte Änderungen wirken sich vorerst nicht im Shop aus - es ist eine Spielwiese zum Testen.
Beispiel 1 - Shop soll das Beispieltheme "Solar" erhalten:
Im Tab Allgemeines wählst du als Pfad zum Template "bootstrap4" und als Theme "Solar" und aktualisierst.
In der Vorschau siehst du jetzt "Solar" mit den CSS-Definitionen von Solar.
Das Theme entspricht deinen Vorstellungen und du klickst im Tab Allgemeines auf den roten Button "Fertig - Theme ins Template übernehmen".
Jetzt wird die vorher erzeugte Datei bootstrap.min.css in das Template kopiert, die dort vorhandene Datei in .bak umbenannt.

Beispiel 2 - Shop soll ein eigenes Theme erhalten:
Im Tab Allgemeines wählst du als Pfad zum Template "bootstrap4" und als Theme "eigenes Theme 1" und aktualisierst.
In der Vorschau siehst du jetzt "eigenes Theme 1".
Im Tab eigenes Theme 1 wählst du als Themevorlage "Flatly" und klickst anschließend Vorlage laden.
In der Vorschau siehst du jetzt "eigenes Theme 1", aber mit den CSS-Definitionen von Flatly.
Du willst die Linkfarbe in orange ändern, also scrollst du weiter nach unten zur Linkfarbe, wählst "$orange orange" und klickst auf Aktualisieren.
Beim Klick auf "Aktualisieren" wird intern eine neue Bootstrap-CSS-Datei für die Vorschau erzeugt, deshalb sind die Links in der Vorschau jetzt orange.
Das Theme entspricht jetzt deinen Vorstellungen und du klickst im Tab Allgemeines auf den roten Button "Fertig - Theme ins Template übernehmen".
Jetzt wird die vorher erzeugte Datei bootstrap.min.css in das Template kopiert, die dort vorhandene Datei in .bak umbenannt.

Hinweis: Cache und Komprimierung sollten bei Templateanpassungen immer aus sein!

Theme-Einstellungen wirken sich im Frontend nur aus, wenn man den roten Button drückt.
Dann erzeugt der Sass-Compiler eine CSS-Datei und kopiert sie ins eingestellte Bootstrap-Template.
Im Ordner templates/bootstrap4/css/bootstrap werden BAK-Dateien mit Datum angelegt sobald eine neue CSS-Datei einkopiert wird.

Attributlagerampel:
Schriftgrößen der Kategorien ändern:
Farbe der Buttons und dessen Schriftfarbe ändern:
Nutzung der einzelnen Modified Button im Shop:
Die drei Punkte am Ende des gekürzten Artikelnamen in roter Farbe anzeigen:
Zwischen den Namen und...
...den Details steht eine null in Klammern:
Slider Einstellungen:
"Top-Artikel" auf der Hauptseite deaktivieren:
Hintergrundbilder im Menü je nach Level der Kategorie hinterlegen:
Farbe der beiden Footer-Spalten (Zahlungsmethoden & Newsletteranmeldung) aendern:
Navigationspfeile der Kategoriebox ausschalten:
Name des Produktes bei "Bild vergroessern" (Modalbox) entfernen:
"Neue Artikel":

Wenn im ->Adminbereich ->Erw. Konfiguration ->Bootstrap 4 Template Manager ->BS4 Konfiguration im Reiter Menüs bei "Link Neue Artikel:" auf Nein steht,
wird anstelle des Eintrags in der Menüleiste die Box angezeigt.
Das gleiche gilt für Standardtemplates, nur das es dort in der Datei config.php eingestellt werden muss.
Neue Artikel werden aber auch auf der Startseite angezeigt, sobald keine Top-Artikel vorhanden sind.
Die Überschrift "Top-Artikel" kann im Template in der Datei lang_german.custom geändert werden.

Banner + Slider:
Überschriften updatesicher ueber neue Datei per css anpassen:
Rahmenfarbe der Login-Maske per css aendern:
"Infinity EUR" pro Stueck:

Erscheint wenn der Artikel eine VPE und einen VPE-Wert hat, die Attribute jedoch nicht.

CSS-Datei des Template...
...wieder herstellen:
Text mit einem Smarty-Modifier an jeder Stelle im Template einfügen:
Der "untere Preis-Updater" arbeitet nicht:
Zusaetzliche Box in der product_info_tabs_v1_3_spaltig.html anlegen:
Box "Top Artikel" nach oben verschieben:
"Mehr Bilder" nur einmal anzeigen:

Vielleicht wäre jetzt hier die Möglichkeit gegeben diesen Thread bis zur 2.0.5.1 zu begrenzen und für die gerade veröffentlichte Version 2.0.6.0 mit einem neuen Thread ab 2.0.6.x anzufangen 

[xampp]

Guten Tag Karl und allen anderen
wenn ich dieses Template mit der Version 2.6.0.0 (local) benutze und in der BS4 Konfiguration -> Module
z. Bsp. auf "Bitte deaktivieren Sie: Einkaufen nicht vorrätiger Ware erlauben" klicke, finde ich mich abgemeldet auf der Startseite wieder.
[ Für Gäste sind keine Dateianhänge sichtbar ]
Das passiert auch an anderen Stellen in der Konfiguration. Das ausschalten "Soll das Suchfeld dauerhaft angezeigt werden?" kann ich speichern, beim wieder einschalten bin ich auf der Startseite 

[xampp]

Nachdem ich gestern ....zig mal den Cache im Shop gelöscht, verschiedene Browser probiert und keine Änderung verzeichnen konnte, habe ich die Rechner erstmal runter gefahren und wollte mich heute wieder auf die Suche machen 
Aber.... jetzt funktioniert alles, die Konfiguration, die Theme- Einstellungen, alles flutscht 
Also, manchmal kann ich nicht folgen 

[bittalk]

Hallo,

nachdem ich mithilfe von Karl und awids nochmals vielen Dank für eure Hilfe das Problem wegen dem Content unten lösen konnte. Taucht schon das nächste Problem auf.

Bei den Bestseller und Top Artikel boxen, im Slide oder fade Modus springt der Content immer ca. 5mm hoch und runter, entsprechend der länge vom Artikelnamen.

Über Element untersuchen habe ich nun feststellen können, das die Box Höhe sich jedes mal ändert wegen der unterschiedlichen Artikelnamen. (siehe Bild)

Ich weiß inzwischen das die Stylesheet dafür verantwortlich ist (Nicht das awids wieder irgendwelche Roundhouse-Kicks verteilt ), nur wo ich da wie ansetzen muss damit die Bestsellerbox und Topartikelbox eine feste Rahmengröße haben ist mir ein Mysterium.

[Karl1]

Hallo bittalk,
es gibt zwei Möglichkeiten.
Entweder du gibst per CSS eine feste Höhe vor
"#bs4_TopCarousel .lb_title" für die Top-Artikel
"#bs4_BsCarousel .lb_title" für die Bestseller
oder du stellst unter Erw. Konfiguration -> Bootstrap 4 Template Manager -> BS4 Konfiguration Tab "Slider" die beiden Werte für  "Anzahl der Zeilen, die der Artikelname belegen soll (0 = auto)." auf die entsprechende Zeilenanzahl.

Gruß Karl

[Karl1]

Hallo Zusammen,
das Update für Shopversion 2.0.6.0 ist gemacht.

Gruß Karl

[Karl1]

Hallo Zusammen,
wie von XAMPP vorgeschlagen hatte ich gestern ein neues Thema für das Template ab Shopversion 2.0.6.0 eröffnet.

Leider wurde der neue Thread, ohne Angabe von Gründen, gelöscht.

Gruß Karl

[awids]

Doch, da stand als Grund drunter, dass es das selbe Template ist wie im vorliegenden Thread ist und das sich nicht mal der Link zu Github geändert hat, sodass man wirklich von 2 Versionen sprechen könnte. Keine Ahnung, warum der Beitrag dann gelöscht wurde. (Wurde eigentlich nur mit vorstehenden Begründungen geschlossen.)