5 Antworten zu diesem Thema

[Michael Herzog]

HTML-Inhalte können in SmartStore.NET an mehreren Stellen über einen HTML-Editor erfasst werden, z.B. in der ausführlichen Produktbeschreibung, in Widgets oder HTML-Seiten, im Content Slider, dem Mega Menu usw. Für die responsive Darstellung dieser Inhalte in SmartStore.NET 3, gilt ein paar Dinge im Hinterkopf zu behalten. 

 

Responsive Bilder 

 

Nachdem ein Bild über den HTML-Editor eingefügt wurde, muss mann einmal in den HTML-Quellcode gehen, den man bequem über einen Button im HTML-Editor erreichen kann. Das style Attribut des img-Elements sollte entfernt werden und das Bild sollte mit der Klasse img-fluid augestattet werden.

<img class="img-fluid" scr="#" ... />

 

Layout 

 

Es kommt relativ häufig vor, dass man Inhalte über mehrere Spalten aufteilen möchte. Da SmartStore.NET 3 mit Bootstrap 4 erstellt wurde, kann man die Klassen welche von Bootstrap zur Verfügung gestellt werden für diese Zwecke nutzen.

 

Ein paar einfache Beispiele sind unter folgendem Link einsehbar:

https://v4-alpha.get...om/layout/grid/

 

 

##################

## To be continued ##

################

[MediArt]

Hallo zusammen,

 

was bedeutet das für die Bilder in den diversen HTML-Texten nach dem Update auf die V3: Die muss dann ja wohl hoffentlich nicht händisch alle im Quelltext nachbearbeiten?

[kusnez]

Hallo

 

 

muss mann einmal in den HTML-Quellcode gehen

Um nicht jedes Bild bearbeiten zu müssen habe ich in "_custom.scss" folgendes eingefügt:

 

#pd-tabs-1 img{ max-width: 100%; height: auto !important;}
.category-description img{ max-width: 100%; height: auto !important;}

1. Zeile für Produkt-Langtext
2. Zeile für Warengruppe-Langtext

danach werden auch die Tabellen (mit Bilder) ordentlich angezeigt (skaliert).

[Michael Herzog]

Hi,

 

mit dem nächsten Release wird das Zufügen der Klasse und auch der Workaround über das eigene CSS nicht mehr nötig sein:

https://github.com/s...88893331dcea7af

 

MfG

[Michael Herzog]

Responsive Tabellen

 

auf Layouting mit Hilfe von Tabellen muss generell verzichtet werden, statt dessen sollte der Link berücksichtigt werden, der weiter oben (unter Layout) aufgeführt ist.

 

Wenn man allerdings eine tabellerarische Auflistung darstellen möchte, kommt man um die Nutzung eines Table-Tags nicht herum. Um dieses responsive zu machen genügt das Zufügen von CSS-Klassen wie in folgendem Beispiel:

<table class="table table-responsive">
...
</table>

[stefanmueller]

Zu diesem Thema gibt es hier einen Blogbeitrag "Tipps & Tricks: Bootstrap für Shopbetreiber":

 

https://smartstore.c...ricks-bootstrap