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

[noRiddle (revilonetz)]

Wenn ich mal kurz "übersetzen" darf:
Ich denke er meint mit "Produktfelder" die Boxen im Produkt-Listing.
"bei längeren Kategorien" soll wohl lange Kategorienamen meinen.
Es soll also die linke Spalte u.U. breiter und der Haupt-Content rechts schmaler werden, und das dynamisch.
Das Anisnnen ist aber ja ohnehin nur mit sehr hohem Aufwand bis überhaupt nicht durchführbar.

Gruß,
noRiddle

[CHESSBASE]

Dankeschön Karl! Werde mich morgen an Lösung 2 und 3 dranmachen.
Was ich mit 1 meinte, kann ich nachfolgende zeigen:

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

Wenn nun links die Kategiebezeichnungen sehr viele Zeichen haben, könnte ja die Kategoriespalte breiter werden und auf der Content-Seite nötigenfalls statt 4 Unterkategorien nur noch 3 nebeneinander stehen.

LG
Valeri

@noriddle: so meinte ich das. Bei Tabellen wäre das vermutlich einfacher, als bei div's? Wenn es nicht geht, muss ich mir was anderes einfallen lassen. Aber vielleicht gibt es hier viele, die lange Kategorienamen haben.

[noRiddle (revilonetz)]

Das hat nichts mit Tabellen zu tun. Bootstrap gibt da genug Möglichkeiten mit Klassen die Prozentverhältnisse der Breiten von Block-Elementen anzupassen.
Das Problem ist programmatisch zu erfassen wann ein Kategoriename zu lang für die Breite des Containers ist.
Da gibt es zu viele Faktoren wie benutzte Schrift und Schriftgröße sowie Rendering des verwendeten Browsers.
Die Schriften und Ihre Fallbacks in Karl1' Template sind einige.
Welche Schrift beim User geladen wird hängt davon ab welche Schriftarten er auf seinem Gerät hat.
Ausnahme wäre wenn man eine Schrift erzwingt, ohne Fallbacks, weil man sie vom eigenen Server lädt.
In dem Falle könnte man da etwas tricksen, indem man ausprobiert wieviele Zeichen ungefähr welche Breite ergeben.
Aber auch das ist bis zu einem gewissen Grad vage, weil, solange man keine Monospace-Schrift verwendet, nicht jedes Zeichen die gleiche Breite einnimmt.

Fazit:
Imho zu komplex.
Ich lasse mich allerdings belehren...

Gruß,
noRiddle

[bittalk]

Hallo Community,

ich stehe kurz vor Fertigstellung meines Shops, jetzt habe ich das Problem das meine Kategorie Beschreibungen lang sind aber notwendig.

Wollte diese kürzen und über einen Button ein- und ausblenden.

Hierfür habe ich bei meiner suche diesen Beitrag https://www.modified-shop.org/forum/index.php?topic=10436.0 gefunden, dieser scheint wie ich vermute für das tpl_modified template zu sein.

In der categorie_listing.html vom Bootstrap4 Template ist zwar was wo ich denke das es das ist was ich möchte, habe aber keine Programmierkenntnisse um mein vorhaben in die Tat umzusetzen.

Code: PHP  [Auswählen]

{* <p class="subcat_desc small">{$module_data.CATEGORIES_DESCRIPTION|onlytext|truncate:55:"...":true}</p> *}

hier die komplette categorie_listing.html

Code: PHP  [Auswählen]

{config_load file="$language/lang_$language.conf" section="categorie_listing"}
{config_load file="lang_`$language`.custom"}
{config_load file="lang_`$language`.section" section="categorie_listing"}
<div class="cat-listing mb-2 clearfix">
        {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}

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

{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}
                <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>
                                        <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> *}
                                        </div>
                                </div>
                        </a>
                </div>
                {/foreach}
        </div>
</div>
{/if}
{if isset($MODULE_new_products)}{$MODULE_new_products}{/if}

Vielen dank für eure Hilfe.

Greets G.C.

[Tante Uschi]

Hallo,

die ausgeklammerte Zeile sagt, dass per Smarty die Beschreibung nach 55 Zeichen abgeschnitten werden soll, dies macht aber keinen Sinn, da Deine Beschreibung ja dann weg ist.

Besser als ein Button ist die CSS-Klasse overflow: scroll; siehe:

http://www.ohne-css.gehts-gar.net/0064.php

Tante Edit sagt:

Du kannst auch direkt in der Kategoriebeschreibung im Admin den Quelltext nutzen, dann brauchst Du nichtmal in der html was ändern (Sorry, ich kriege es gerade beim editieren nicht hin den Code in den passenden Forumskasten zu paken, fällt mir grade nicht ein):

<div class="Kategorietext">Bla Bla</div>

in die stylesheet.css kommt das:

.Kategorietext {
    height: 250px;
    overflow: auto;
    text-align: justify;
    padding: 20px;

Fertsch

Gruß

[Karl1]

Hallo Zusammen,

@Chessbase:
Die Ansicht der Unterkategorien habe ich so ausgelegt, dass sie bei breiten Bildschirmen 4-spaltig, bei mittleren Bildschirmen 3-spaltig und bei Kleinen 2-spaltig angezeigt werden.
Ist ein Kategoriename länger, dann erhöht sich die Zeile entsprechend.
Eine individuelle Anpassung ist nicht möglich.

@bittalk:
Die Kategoriebeschreibung wird in zwei verschiedenen Dateien erzeugt.
Probiere folgendes
in den Dateien module/product_listing/product_listing_v1.html und module/categorie_listing/categorie_listing.html
ersetze

Code: PHP  [Auswählen]

{$CATEGORIES_DESCRIPTION}

mit

Code: PHP  [Auswählen]

                <div class="catview">{$CATEGORIES_DESCRIPTION|truncate:150:"...":true}<span class="catbtn"><b>&nbsp;&nbsp;mehr..</b></span></div>
                <div class="catview" style="display:none">{$CATEGORIES_DESCRIPTION}<span class="catbtn"><b>&nbsp;&nbsp;...ausblenden</b></span></div>
 

und in javascript/bs4.min.js fügst du das hier hinzu.

Code: Javascript  [Auswählen]

$(".catbtn").click(function(){$('.catview').toggle('slow');});

Gruß Karl

[Tante Uschi]

@ Karl

gestatte mir die Frage, warum das Ganze unnötig aufblähen mit Javascript und Inline CSS wenn es doch per overflow: auto; geht?

Code: PHP  [Auswählen]

<div class="Kategorietext">{$CATEGORIES_DESCRIPTION}</div>

und in die Stylesheet:

Code: PHP  [Auswählen]

/* scrollen der Kategoriebeschreibung */
.Kategorietext {
    height: 250px;
    overflow: auto;
    text-align: justify;
    padding: 20px;
}

Verstehe ich jetzt nicht wirklich, zumal man das Ganze auch wie gesagt per Admin-Eingabe machen kann, siehe meine erste Antwort dazu (was den Vorteil hat, dass man die css Klasse anpassen kann, denn hat man mal den Wunsch es in irgend einer Kategorie anders zu gestallten, sieht das mit Deiner Methode ziemlich schlecht aus, da man dort erst die Abfrage nach der jeweiligen ID machen müsste, so ändert bzw. ergänzt man im Editor und in der Stylsheet die Angaben)  oder eben wie hier gezeigt per html Dateien (ohne den Vorteil).

Ein unnötiges Aufblähen des Codes bedeutet auch immer höhere Ladezeiten und Inline-css (style="display:none") ist eigentlich auch nicht mehr so modern, zumal Du damit die Kategoriebeschreibung 2 mal lädst, was wiederum zu höheren Ladezeiten führt, ein schlichtes (style="display:none") zeigt es zwar nicht an, läd es aber trotzdem?

Gruß

[Tante Uschi]

Nachtrag:

interessant wäre es zudem einmal zu wissen ob der Button:

Code: PHP  [Auswählen]

<span class="catbtn">

überhaupt die Anforderungen des "Mindestabstandes" erfüllt, nee nicht den von Corina sondern den Mindestabstand hier (wäre dann auch ein nicht zu unterschätzendes Argument, allerdings kann ich es nicht testen ich nutze (sehr dankbar) Dein bootstrap3).

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

[Karl1]

Hallo Tante Uschi,
die Frage von bittalk zielte aus meiner Sicht nach einer Lösung ähnlich dem verlinkten Beitrag.
Dazu passt meine Antwort, ob das Sinn macht muss bittalk selbst entscheiden.

Dein Vorschlag, ich habe ihn nicht getestet verstehe aber die Anweisungen so, bietet die Möglichkeit innerhalb eines Abschnittes (250px hoch) zusätzlich zu scrollen.
Das finde ich nicht so prickelnd, vor allem auf dem Smartphone - ist aber Geschmackssache.

Den Mindestabstand von dem Button kann man wieder sehr leicht verändern, dazu gibt es in Bootstrap4 genügend CSS-Klassen, z.B. "catbtn btn btn-secondary" oder nur Abstand "catbtn mx-3" usw..

Gruß Karl

[bittalk]

Danke für eure Vorschläge  

Habe den Vorschlag von karl1 verwendet, nur eine Frage hätte ich noch dazu.
Kann man das so machen das wenn ich auf mehr... klicke er nicht die Buchstaben wie bei einer MG raus schießt, sondern nach unten fährt?

Hier ein Link um zu verdeutlichen was ich meine.

https://www.innocigs.com/elektro-zigaretten/box-mods/50-watt.html

Vielen Dank

[CHESSBASE]

Hallo bittalk,
habe neugierig deine seite aufgerufen. Wie hast Du das gemacht, dass sie "breiter" ist? und wenn man den Bildschirm schmaler macht, passt es auch noch? Will auch gern haben
Und da ich nie was von Akkuträgern hörte, hab ich mal nachgesehen. Und den Begriff gibt es selbst bei Wikipedia nicht. Sind das "Feuerzeuge für Elektrozigaretten"?
Aber die Seite - nicht das Rauchen - gefällt mir sehr gut.
LG
Valeri

[Karl1]

Hallo bittalk,
ersetzte toogle mit slideToogle.

Gruß Karl

[Tante Uschi]

Hallo Karl,

Das finde ich nicht so prickelnd, vor allem auf dem Smartphone - ist aber Geschmackssache.

Ja diesen Einwand verstehe ich, da hast Du recht mein Vorschlag macht nur Sinn mit einem Kategoriebild, da dort der Platz ist auf dem Smartphone neben dem scrollbaren Div weiter die ganze Seite zu scrollen.

Danke für Deine Gedanken.

Gruß

[bittalk]

@CHESSBASE

Habe die Kategorien auf der linken Seite entfernt. Mit Bootstrap4 geht es im Backend durch an- und abwählen.

Der Begriff Akkuträger hier kurz und kanpp erklärt:

E-Zigaretten Box Mods sind auch unter dem Begriff Akkuträger bekannt, dies geht daraus hervor, dass der Akku / die Akkus in die Box eingesetzt werden.

Meine Seite ist aktuell offline,. Wie hast du sie gesehen?

@Karl1

ersetzte toogle mit slideToogle

und in javascript/bs4.min.js fügst du das hier hinzu.

Code: Javascript  [Auswählen]

$(".catbtn").click(function(){$('.catview').toggle('slow');});

sicherlich meinst du hier? Wenn ich es so ersetze wie du sagst ist das (mehr...) nicht anwählbar

[CHESSBASE]

Hallo bittalk: Danke für die Antwort.
Und über diesen Link bin ich zu der Seite gelangt:

https://www.modified-shop.org/forum/index.php?action=seored;u=aHR0cHMlM0ElMkYlMkZ3d3cuaW5ub2NpZ3MuY29tJTJGZWxla3Ryby16aWdhcmV0dGVuJTJGYm94LW1vZHMlMkY1MC13YXR0Lmh0bWw=

Viele Grüße
Valeri