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

[noRiddle (revilonetz)]

@Karl1
Das ist ja mal eine ausführliche Beschreibung. So oder so ähnlich gehen auch wir anderen Entwickler alle vor, insofern wir nicht direkt oder indirekt am Entwicklungsprozess beteiligt waren und uns noch erinnern was wir da so verzapft haben.
Allerdings ist mir diese Aussage ein Rätsel:

...
Der Name "Kundenrezessionen" ist schon besser und hat auch keinen Selbstlaut.
...

Selbstlaute, auch Vokale genannt, sind doch genügend in dem Wort vorhanden.
Was hast du wirklich gemeint ?

Gruß,
noRiddle

[Karl1]

Hallo noRiddle,
du hast mich ertappt.

Ich meinte natürlich, was du bestimmt vermutest, Umlaute.
Buchstaben wie äüößÄÜÖ werden in Sprachdateien oft als "ü", "ä" usw. geschrieben.

Gruß Karl

[noRiddle (revilonetz)]

...weshalb man sie dann per Suchfunktion nicht in den Dateien findet, genau.
Bin halt ein Korinthenka..., ehh, -esser , sind lecker 

Gruß,
noRiddle

[xampp]

Guten Tag, Hallo Karl 
dank deiner ausführlichen Beschreibung unter #1303 konnte ich bisher alles zentrieren "was mir über den Weg lief", nur an einer Sache beiße ich mir die Zähne aus 
Es gelingt mir nicht bei "Frage zum Artikel" den rechts neben dem Bild stehenden Artikelnamen mittig über das Bild zu setzen ohne den Shop durcheinander zu bringen 
Wärst du so nett und zeigst mir bitte die richtige Vorgehensweise?
Und, mir ist aufgefallen daß das copyright "modified eCommerce Shopsoftware © 2009-2021" mittig in Footer steht, aber "TestShop © 2021 | Template © 2021 by Karl" linksbündig.
Dafür dürfte doch in der index.html dieser:

Code: PHP  [Auswählen]

<div class="mod_copyright text-secondary text-center small">{$smarty.const.TITLE} &copy; {$smarty.now|date_format:"%Y"} | Template &copy; {$smarty.now|date_format:"%Y"} by Karl</div>

Teil zuständig sein, aber da ist eine mittige Zentrierung vorhanden.
An meiner custom.css liegt es nicht, wenn ich die abschalte bleibt das so. Ist das nur bei mir so?

[Karl1]

Hallo XAMPP,
um den Artikelnamen zu zentrieren muss man ihn aus dem Abschnitt "col-8" rausnehmen.

Ausschnitt aus der Datei templates/bootstrap4/module/product_inquiry.html

Code: PHP  [Auswählen]

        {if !isset($success) ||  $success !='1'}
                <div class="row mb-3">
                        <div class="col-12 text-center">
                                <h4>{$PRODUCTS_NAME}</h4>
                        </div>
                        {if $PRODUCTS_IMAGE!=''}
                                <div class="col-4">
                                        <div class="mb-2"><img class="img-fluid" src="{$PRODUCTS_IMAGE}" alt="{$PRODUCTS_NAME}" /></div>
                                </div>
                        {/if}
                        <div class="{if $PRODUCTS_IMAGE!=''}col-8{else}col-12{/if}">
                                <div class="mb-2">
                                        {$PRODUCTS_SHORT_DESCRIPTION}<br />
                                </div>
                        </div>
                </div>

Mach mal aus der Zeile die du gepostet hast, das hier

Code: PHP  [Auswählen]

<div class="text-center"><div class="mod_copyright text-secondary small">{$smarty.const.TITLE} &copy; {$smarty.now|date_format:"%Y"} | Template &copy; {$smarty.now|date_format:"%Y"} by Karl</div></div>

Gruß Karl

[xampp]

Zwischenzeitlich habe ich die templates/bootstrap4/module/product_inquiry.html so angepasst:

Code: PHP  [Auswählen]

{if !isset($success) ||  $success !='1'}<div class="text-center"><h4>{$PRODUCTS_NAME}</h4></div>
                <div class="row mb-3">
                        {if $PRODUCTS_IMAGE!=''}
                                <div class="col-4">
                                        <div class="mb-2"><img class="img-fluid" src="{$PRODUCTS_IMAGE}" alt="{$PRODUCTS_NAME}" /></div>
                                </div>
                        {/if}
                        <div class="{if $PRODUCTS_IMAGE!=''}col-8{else}col-12{/if}">
                                <div class="mb-2">
                                        {*{$PRODUCTS_SHORT_DESCRIPTION}<br />*}
                                </div>
                        </div>
                </div>

Damit ist der Artikelname mittig zentriert, obwohl mein Dateiausschnitt (vorher) anders aussieht als deiner  ich hoffe das ist trotzdem richtig.
Nur jetzt fällt mir natürlich auf......das Bild bleibt ja links  meine Versuche das gleiche mit

Code: PHP  [Auswählen]

{if $PRODUCTS_IMAGE!=''}

zu machen scheiterten allerdings. Habe ich hier einen Denkfehler oder lässt sich das Bild nicht genauso mittig setzen?

[Karl1]

Hallo XAMPP,
jetzt willst du also auch noch das Bild mittig.
Bei der Überschrift schrieb ich schon, dass der Artikelnamen aus dem Abschnitt "col-8" raus muss um ihn zu zentrieren - gleiches gilt für "col-4" des Bildes.

Schau dir am besten mal den Abschnitt Grid bei Bootstrap durch.

Gruß Karl

[computerextra]

Hallo zusammen,

gibt es eine Möglichkeit, den Button "Frage zum Artikel" zu versetzen (Unter "In den Warenkorb") bzw. Umzubenennen und dann in dem PopUp die Felder vor auszufüllen (Wie z.B. bei Betreff) bzw. deren Inhalt zu editieren?
Ich finde die benötigten Dateien nicht.

Ich danke schon mal allen im Voraus.

Grüße

[Karl1]

Hallo computerextra,
wenn man die Dateien nach "Frage zum Artikel" durchsucht landet man bei "lang/german/extra/bs4_additional_modules.php".

Schau in die Dateien "templates/bootstrap4/module/product_info/product_info..." dort findest du den Eintrag für den Fragebutton

Code: PHP  [Auswählen]

{if isset($PRODUCT_INQUIRY)}<div class="col-sm-6 mb-2">{$PRODUCT_INQUIRY}</div>{/if}

Weiter oben der Eintrag für den Warenkorb

Code: PHP  [Auswählen]

{$ADD_CART_BUTTON|replace:'btn ':'mb-2 btn '}

Schreibe unter diese Zeile

Code: PHP  [Auswählen]

{if isset($PRODUCT_INQUIRY)}{$PRODUCT_INQUIRY|replace:'btn btn-xs ':'mb-2 btn btn-sm '}{/if}

Das Formular wird mit den Kundendaten vorausgefüllt, sobald man angemeldet ist.
Die Daten kommen aus der Datei "bs4_product_inquiry.php".

Gruß Karl

[computerextra]

Vielen Dank für die schnelle Antwort.
Es hat alles funktioniert, die Geschäftsführung wird begeistert sein

[xampp]

Hallo Karl, vielen Dank für deine Zeit und den Link, das ist ja interessant  erinnert mich schlagartig an den html Tabellenbau aus vergangenen Zeiten.

Code: XML  [Auswählen]

<table>
 <tr>
  <td>&nbsp;</td>
 </tr>
 <tr>
  <td>&nbsp;</td>
 </tr>
</table>

Das macht bestimmt Spaß damit Tabellen zu basteln, werde ich auf jeden Fall demnächst ausprobieren, am Jahresende geht es in Rente dann habe ich genug Zeit 
Habe jetzt den verantwortlichen Teil so angepasst und Text und Bild mittig zentriert.

Code: PHP  [Auswählen]

{if !isset($success) ||  $success !='1'}<div class="text-center"><h4>{$PRODUCTS_NAME}</h4>
        <div class="mb-2"><img class="img-fluid" src="{$PRODUCTS_IMAGE}" alt="{$PRODUCTS_NAME}" /></div></div>
                <div class="row mb-3">
                        {if $PRODUCTS_IMAGE!=''}
                                <div class="col-4">
                                        </div>
                                </div>
                        {/if}
                        <div class="{if $PRODUCTS_IMAGE!=''}col-8{else}col-12{/if}">
                                <div class="mb-2">
                                        {*{$PRODUCTS_SHORT_DESCRIPTION}<br />*}
                                </div>
                        </div>
                </div>

Aber außerhalb von col-4 verliert das Bild die Skalierung und wird in voller Größe angezeigt. Wie kann ich denn die Größe wieder auf den vorherigen Wert anpassen?

[Karl1]

Hallo XAMPP,
ich vermute, wenn du selber drüber nachdenkst, dann kommst du auf mehrere Lösungen.

Du kannst, z.B.

• dem IMG-Tag ein Attribut (style="width:300px;") hinzufügen.
• der CSS-Datei eine Anweisung hinzufügen.
• beim IMG-Tag das Attribut SRC so ändern {$PRODUCTS_IMAGE|replace:'info_images':'thumbnail_images'}
• dem IMG-Tag die CSS-Klasse "col-4" hinzufügen.

Bestimmt gibt es noch mehr Möglichkeiten.

Gruß Karl

P.S.: Du hast in dem col-4-Div ein "</div>" zuviel stehen lassen.
Wenn du die Beschreibung nicht möchtest, dann lösche den ganzen Teil doch oder kommentiere ihn {* Beginn}...{Ende *} einfach aus.

[xampp]

Hallo Karl, vielen Dank für die wieder einmal ausführliche Hilfe, ich habe mich für die "col-4" Variante entschieden und das überflüssige div entfernt, jetzt sieht (für mich) alles gut aus 
Alles gut? Nicht ganz.....
Das copyright:

Code: PHP  [Auswählen]

<div class="mod_copyright text-secondary text-center small">{$smarty.const.TITLE} &copy; {$smarty.now|date_format:"%Y"} | Template &copy; {$smarty.now|date_format:"%Y"} by Karl</div>

reagiert einfach nicht, auch:

Code: PHP  [Auswählen]

<div class="text-center"><div class="mod_copyright text-secondary small">{$smarty.const.TITLE} &copy; {$smarty.now|date_format:"%Y"} | Template &copy; {$smarty.now|date_format:"%Y"} by Karl</div></div>

zwingt diese Zeile nicht in die Mitte  wenn ich aber aus Karl Karla (Entschuldigung) mache sehe ich dass ich an der richtigen Stelle bin.
An der index.html habe ich aber bisher keine Hand angelegt und an Modulen nur dein Template und die "Matrix" installiert, hast du noch eine Idee wie ich "dich" in die Mitte bekomme?

[Karl1]

Hallo XAMPP,
poste mal den Code des Footers der in deiner index.html steht.

Gruß Karl

Nachtrag: Hast du schon mal dein HTML validiert?

[xampp]

Guten Tag,

Code: PHP  [Auswählen]

{* BEGINN FOOTER *}
        <div id="layout_footer" class="container-fluid bg-{$smarty.const.BS4_FOOTER_BG} py-4">
                <div class="container mb-2">
                        <div id="layout_footer_inner" class="row">
                                {if $smarty.const.MODULE_NEWSLETTER_STATUS == 'true'}{$col = 3}{else}{$col = 4}{/if}
                                {if isset($box_CONTENT)}<div class="col-lg-{$col} col-md-6 mb-2">{$box_CONTENT} </div>{/if}
                                {if isset($box_INFORMATION)}<div class="col-lg-{$col} col-md-6 mb-2">{$box_INFORMATION} </div>{/if}
                                {if isset($box_MISCELLANEOUS)}<div class="col-lg-{$col} col-md-6 mb-2">{$box_MISCELLANEOUS} </div>{/if}
                                {if isset($box_NEWSLETTER)}<div class="col-lg-{$col} col-md-6 mb-2">{$box_NEWSLETTER}</div>{/if}
                        </div>
                <div class="text-center"><div class="mod_copyright text-secondary small">{$smarty.const.TITLE} &copy; {$smarty.now|date_format:"%Y"} | Template &copy; {$smarty.now|date_format:"%Y"} by Karl</div></div>
                </div>
        </div>
        {* ENDE FOOTER *}

Validiert habe ich nichts, nur die von mir verwendete Datei mit der Original-Datei verglichen. Nur die copyright Zeile ist anders, eben in

Code: PHP  [Auswählen]

<div class="text-center"></div>

gepackt.