Neu Unsauberer HTML Code

[Viti]

Hi,

Habt ihr auch das Problem mit dem "unsauberen" HTML Code in der Produktbeschreibung oder Kurzbeschreibung.

Ich bin da sehr penibel bedacht auf "sauberen" Code und nicht alles in einer Wurst.
Vor allem dann, wenn ich mir die Mühe mache und eine vernünftige Vorlage in HTML erstelle - diese in die Beschreibung reinkopiere und JTL Wawi nach dem speichern alles in eine Codewurst verwandelt.

Habt ihr da vieleicht einen Ansatz?

Was mir auch aufgefallen ist - JTL verwendet gerne den <strong> Tag um Text fett zu schreiben - dies führt aber in manchen Plattformen (z.B. Allyouneed) zu Problemen, denn da wird dieser Tag gar nicht unterstützt sonder der korrekte <b> Tag verwendet (wie gesagt, ist jetzt nicht das große Problem, da ich die Beschreibung ja eh mit vernünftigen Programmen mache)

 

[Xantiva]

Einfach nicht den HTML-Editor der Wawi verwenden. Sobald Du den nicht mit "Abbrechen" verlässt, formartiert der dasn HTML nach seinem Vorstellungen ...

 

[ag-websolutions.de]

Wenn du von "penibel sauberen Code" sprichst, dann solltest du aber beachten, dass "strong" vs "b" ein Vergleich von Äpfel und Birnen ist und "b" genau so richtig sein kann, jenachdem was man erzielen möchte, wie "strong"

http://stellify.net/html5-b-and-i-tags-are-going-to-be-useful-read-semantic-again/

 

[Viti]

ich will ja nicht über strong oder b streiten ob semantisch richtig oder falsch, aber warum kann man den HTML Code nicht so lassen wie er ist, respektive rein kopiert wurde?
Wie gesagt, manche Shops, unter anderem Allyouneed, kennen nur ein paar Tags - in diesem wird z.B. nur <b> erkannt, <strong> aber nicht - was das Anzeigeergebnis abfälscht, da der Text nicht fett geschrieben wird.
Was wiederum dazu führt, dass ich für, in diesem Beispiel AYN, eine eigene Produktbeschreibung brauche, was weiter dazu führt, dass, wenn ich eine Beschreibung des Artikels ändere, ich dies 2x machen muss.

aber lange Rede kurzer Sinn - wie bereits erwähnt - warum lässt man den Code nicht so wie er ist und formatiert den um?
Ich programmier seit 20 Jahrem C#, PhP, HTML, SQL und bisher ist mir kein Editor unter die Augen gekommen wo nach dem speichern der Code nach gut Düngen vom Programm einfach umgeschrieben wurde.

 

[NewBuy]

Dann hast Du noch nie mit den Editoren in CMS Systemen wie Wordpress usw. etwas gemacht

 

[Viti]

Vorweg - soll ja kein rumheulen sein und will auch gar nicht lange über andere Systeme reden und hat auch hier nicht mehr viel verloren.

Ändert aber allerdings nichts daran, dass man im JTL HTML Editor den Code ja einfach so lassen könnte wie er reinkopiert wird. Das Abändern des Codes führt einfach nur zu mehr Arbeit, in Form von unnötiger Suche, wenn man die Beschreibung ändern will, da alles in einer Wurst aneinander gefügt wird.

Was CMS angeht:
doch, allerdings meist nur vom Backend aus, aber der Unterschied ist, dass WP, PhPBB und andere Systeme mit CMS in der Regel auch die gängigsten HTML kennt

AYN unterstützt nur ul, ol, li, br/, b, hr und p Tags

 

[NewBuy]

AYN wird aber auch nicht direkt von JTL unterstützt

Nein gut wäre es hier wenn man bei einzelnen Shop-Texten sagen könnten mit Editor oder ohne bei Amazon ist dieser ja auch deaktiviert.

 

[Viti]

Jo, das stimmt.
AYN wird nicht direkt unterstützt - aber z.B. (wie in deiner Signatur) von Unicorn2

es wird auch alles über API korrekt hochgeladen (auch wenn das Backend von AYN sehr zu wünschen übrig lässt )

Meine Lösung ist es halt, bei der Artikelbeschreibung für AYN eine eigene Beschreibung für den Artikel zu machen.

Aber hier noch ein kleines Beispiel:

der Textumbruch wurde richtig gemacht - JTL Wawi macht aber wieder einen Close-Tag nach dem Speichern. Ungeachtet dessen das z.B. der Close-Tag der Liste </li>an den Anfang geschoben wird

<span style="font-size: 10pt; font-family: Verdana">
<p><b>Original Protek Fernbedienung f&uuml;r 9910 LX / 9911 LX</b></p>
<p /><b>Geeignet f&uuml;r:</b>
<ul>
<li>Protek 9910 LX
</li><li>Protek 9910 LX</li></ul>
<p />
<p><b>Lieferumfang:</b><br />1x Original Protek Fernbedienung f&uuml;r 9910 LX / 9911 LX</p>
<p>Batterien nicht im Lieferumfang enthalten</p></span>

 

[Rico Giesler]

Der HTML-Editor ist ein Drittprogramm welches von uns genutzt wird.
Wir sind damit leider auch nicht zu 100% zufrieden.
Allerdings liegt der Fokus derzeit auf anderen Baustellen und somit muss es vorerst mit dem Editor gehen. (auch wenn es nicht ganz optimal ist)

 

[Viti]

Mich stört halt nur der Single Tag <p /> ... sowas macht man nicht und kann unter Umständen zu Kompatibilitätsproblemen führen. Normalerweise macht man einen Tag auf und am Ende wieder zu - also <p>irgendwas</p>

Eine einfache Lösung für das Problem ist nicht mal aufwendig: - Einfach den Text nicht automatisch durch den Editor formatieren lassen oder durch einen einfachen Texteditor ersetzen

(XHTML Guidlines - C.3. Element Minimization and Empty Element Content: Given an empty instance of an element whose content model is not EMPTY (for example, an empty title or paragraph) do not use the minimized form (e.g. use <p> </p> and not <p />).

 

[Xantiva]

Wenn Du es so genau nimmst, dann gehört das span aber auch nicht dahin. Ein span ist ein Inline-Element, das innerhalb von block-Elementen verwendet wird. An der Stelle sollte dann statt dessen ein div-Element verwendet werden.

 

[Viti]

so weit wollte ich eigentlich nicht ins Detail gehen und löst ja auch das Problem nicht, da ein <span> semantisch irrelevant ist und eigentlich nur zum formatieren genommen wird, aber du hast recht, mir persönlich wäre ein <div> auch lieber (kann ich genau so zum formatieren verwenden mit CSS und wäre auch korrekt).

Will aber hier auch nicht alles durchexerzieren was und wie man was in HTML macht, oder machen sollte.
Ich würde mir einfach nur wünschen, dass der HTML Editor den Code einfach so belässt wie er ist, das würde komplett ausreichen

 

[JTL4Tom]

Ich hab ein ähnliches Problem. Unsere Tabellen sind für Desktop noch perfekt, doch für mobile dann zu breit.
Umgestaltung via Query kann ich im MOment nicht lösen. Somit behelfen wir uns zur Zeit in dem wir die Tabellen in ein Div mit folgendem Befehl setzen:
<div style="overflow-x: auto">
<table>
...
</table>
</div>

Das funktioniert prima. Aber nur solange man die Finger vom JTL-Wawi-HTML-Editor läßt.
Dieser schmeisst mir unkontrolliert diese <Divs> aus dem Code.
Hab es noch nicht geschafft den genauen Ablauf zu analysieren, wann er das macht. Fakt ist, dass diese Divs irgendwann verschwunden sind und ich verdächtige da ganz schwer diesen Editor.
Kann mir das jemand bestätigen oder weiß eine Lösung?
vg Tom

 

[css-umsetzung]

Ich sage ja immer, das man von dem Editor in der wawi lieber die Finger lassen und die Beschreibung lieber im Shop mit dem CKEditor erstellen sollte.
Einfach so tun als ob man eine neue Seite anlegen möchte, und dann den Editor verwenden.

Tabellen können auch responsiv dargestellt werden, hier muss man aber natürlich immer schauen ob der Aufwand nicht zu hoch ist.
bei einem Kunden habe ich um "seinen" Aufwand zu minimieren eine JS Funktion erstellt, die dann aus einer normalen Tabelle eine Responsive Tabelle erstellt: https://bit.ly/2RxgIK0

Das geht natürlich nicht immer so und wenn der jeweilige Shopbesitzer ein wenig HTML Kenntnisse hat, kann er die Attribute in der Tabelle selbst einfügen.
Hier habe ich bis zu einem gewissen Punkt auch das overflow-auto und dann aber wenn es zu klein wird die Umschaltung auf Responsives verhalten:
https://bit.ly/2FfsgLs

 

[JTL4Tom]

Hallo Andreas,
danke für die Beispiele. Wie sieht denn die Lösung aus?
Bei mir verschiedene Mitarbeiter die Produktbeschreibungen und dazugehörigen Tabellen. Diese arbeiten meist mit dem Shopeditor und kopieren den HTML-Code dann ins Wawi. Die Div-Tags ergänzen ist noch möglich, doch weitere Code-Aktivitäten ist zu viel verlangt. Und ich kenne noch keinen html-Editor, der gleich responsive Tabellen erstellen kann.
Nichtsdestotrotz ist das mit dem JTL-Wawi-Editor ein Problem, denn ich kann nicht verhindern, dass dieser zwischendurch mal kurz von jemand aufgerufen wird um z.B. einen entdeckten Rechtschreibfehler zu korrigieren.
Und schon fliegen die Divs wieder raus.. Das ist einfach grrrrr.

 

[css-umsetzung]

Hier findest du die Erklärung für das was ich gemacht habe:
https://blog.kulturbanause.de/2012/06/tabellen-im-responsive-webdesign/

Wir können uns den html Editor von der wawi leider nicht schön reden und leider sieht JTL selbst das als nicht so wichtig an. Daher bleibt dir nur das arbeiten mit einem externen html Editor und das reinkopieren in das Textfeld.
für Ottonormalos reicht der interne Editor vermutlich dicke aus, aber wenn die Beschreibung aufwendiger wird, muss man leider andere Wege gehen. Man kann sich den Editor ja auch auf den Desktop legen dann muss man nicht immer extra in den Shop und könnte wenn man es lieber hat auch einen TinyMCE nehmen.

Der CKEditor in meinem Shop sieht natürlich ganz anders aus, da stellt sich nicht die Frage ob ich Beschreibungen über die wawi oder über den CKEditor im Shop mache

 

[led-profi]

Hallo Andreas,
danke für die Beispiele. Wie sieht denn die Lösung aus?
Bei mir verschiedene Mitarbeiter die Produktbeschreibungen und dazugehörigen Tabellen. Diese arbeiten meist mit dem Shopeditor und kopieren den HTML-Code dann ins Wawi. Die Div-Tags ergänzen ist noch möglich, doch weitere Code-Aktivitäten ist zu viel verlangt. Und ich kenne noch keinen html-Editor, der gleich responsive Tabellen erstellen kann.
Nichtsdestotrotz ist das mit dem JTL-Wawi-Editor ein Problem, denn ich kann nicht verhindern, dass dieser zwischendurch mal kurz von jemand aufgerufen wird um z.B. einen entdeckten Rechtschreibfehler zu korrigieren.
Und schon fliegen die Divs wieder raus.. Das ist einfach grrrrr.

dann kommentier ich mal meinen eigenen Beitrag mit der nun gefundenen Lösung.
Um Scrollen von Tabellen in responsive zu ermöglichen hatten wir die Tabellen in ein DIV gepackt.
<div style="overflow-x:auto;"> ---> leider macht der Editor das hier draus: <div style="-ms-overflow-x: auto;">, was nicht funktioniert.

Nun hab ich gelesen, dass -x und -y zusammengefasst wurden. Neu muss es also heissen: <div style="overflow:auto">
YES. das akzeptiert der Editor und funktioniert.

 

[gnarx]

Hier gibt es doch genug Könner die das mal einbauen in den Editor über die config vom Editor (im JTL Verzeichnis)
Hier ein paar Ansätze dazu:
https://ckeditor.com/old/forums/CKEditor/Paste-code-without-formating-HTML
https://stackoverflow.com/questions...html-block-level-tags-to-be-wrapped-in-an-anc

Und hier die ganzen Möglichkeiten (linke Seite beachten):
https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_config.html

Hier noch eine Liste der PlugIns die man einbinden könnte:
https://ckeditor.com/cke4/addons/plugins/all

Und hier könnte man suchen oder einfach anfragen wie man die Codeumschreibung abschaltet:
https://support.ckeditor.com/hc/en-us