Größentabelle erstellen und in der Artikelbeschreibung einfügen

Hallo Jasmin,

wir haben einen Kunden, der hatte sich etwas ähnliches gewünscht. Dort haben wir eine kleine Anpassung geschrieben sodass, Inhalte des content managers (Herstellerabhängig) als Reiter im Produkt geladen werden.

Dort wird quasi das Layout des Reiters im Produkt über den content manager erstellt und anschließend im Produkt automatisch dargestellt.

Wenn du möchtest kann ich dir gerne ein Beispiel zukommen lassen, wie das am Ende aussieht.

 

Wenn du es komplett als Bild machst wird es am Handy schwierig sein.
Ich würde den Text als Text schreiben.
Dann das Bild des Shirts extra und das Bild der Tabelle extra machen.
Beiden Bilder eine eigene Klasse vergeben und diese dann responsive einstellen.
Du kannst auch eine Tabelle als Tabelle schreiben und nicht als Bild.
Diesen kompletten HTML Code kannst du dann in die Artikelbeschreibung einfügen.



Oder im Content-Manager > Artikelinhalte > einen neuen Text erstellen (also hier dein Text mit Bild einfügen).
Hier kannst du dies dann den verschiedenen Artikeln zuordnen.
Sieht dann im Artikel so aus:


wenn du dann auf Größentabelle klickst:


hier habe ich die Tabelle und das Shirt als EIN Bild gemacht. Aber schon ziemlich schmal, damit es responsive am Handy auch noch gut aussieht:

 

Wir haben es auch über den Tab beim Artikel gemacht. Die Tabelle wird mit den Daten gefüllt, die Größen sind ja immer anders. Und die Grafik kommt von einem Content. Die Tabelle und die Grafik passt sich dem Display an.
Beispiel: (Link nur für registrierte Nutzer sichtbar.)

 

Dein html Code muss eine Klasse haben. Und diese Klasse sprichst du mit dem CSS Code an.
Zeig am besten deinen HTML und CSS Code. Dann ist es einfacher.
Das T-Shirt Bild muß so groß sein, dass es erkennbar ist. Bei meinem Beispiel von gestern ist es glaube 500px hoch.

 

wieviel verschiedene Tabellen hast du?
Hast du mehrere Artikel die die gleiche Größentabelle bekommen?
Oder bekommt jeder Artikel eine eigene Tabelle?

 

mit folgendem HTML Code sieht es so aus:
Die Tabelle, das Bild und der Text passen sich der Größe des Bildschirmes an.
Das Bild des Shirts habe ich in der Größe 204x170 hochgeladen. (als png und tshirt genannt)

Code:

<div style="text-align: center;">
    <br />
    <span style="font-size:14px;">richte dich nach dieser Tabelle*</span>
</div>

<table border="2" cellpadding="5" cellspacing="1" style="width:100%;">
    <tbody>
        <tr>
            <td style="text-align: center;">&nbsp;</td>
            <td style="text-align: center;"><span style="font-size:14px;"><strong>&nbsp;92/98&nbsp;&nbsp;</strong></span></td>
            <td style="text-align: center;"><span style="font-size:14px;"><strong>104/110</strong></span></td>
            <td style="text-align: center;"><span style="font-size:14px;"><strong>116/122</strong></span></td>
        </tr>
        <tr>
            <td style="text-align: center;"><span style="font-size:14px;">1/2 Oberweite (Linie A):</span></td>
            <td style="text-align: center;"><span style="font-size:14px;">32</span></td>
            <td style="text-align: center;"><span style="font-size:14px;">34</span></td>
            <td style="text-align: center;"><span style="font-size:14px;">36</span></td>
        </tr>
        <tr>
            <td style="text-align: center;"><span style="font-size:14px;">L&auml;nge ab Schulter (Linie B):</span></td>
            <td style="text-align: center;"><span style="font-size:14px;">43</span></td>
            <td style="text-align: center;"><span style="font-size:14px;">47</span></td>
            <td style="text-align: center;"><span style="font-size:14px;">50</span></td>
        </tr>
    </tbody>
</table>

<div style="text-align: right;">
    <span style="font-size:11px;">* f&uuml;r die Gr&ouml;ssenfeststellung wird keine Haftung &uuml;bernommen.</span>
</div>
&nbsp;

<div class="sizes" style="display: flex; justify-content: center; align-items: center;">
    <div class="imgsizes">
        <img alt="groessentabelle" class="img-responsive" src="images/tshirt.png" style="margin-right: 20px;" />
    </div>

    <div class="textsizes">
        <p style="text-align: center;">
            <span style="font-size:16px;">Bitte messe das T-Shirt deines Kindes nach folgender Anweisung aus,<br />
            damit auch deine neue Jacke passt.</span>
        </p>
    </div>
</div>

Desktop:



Handy:


du hast 2 Möglichkeiten um es den Artikeln zuzuweisen:
- Content-Manager > Artikelinhalte > grüner Button +neue Datei
Content-Typ: Text
Anzeigen In: Artikel auswählen > hinzufügen > nächsten Artikel auswählen > hinzufügen usw.
Inhalt: umschalten auf HTML > hier den HTML Code einfügen. (Dein T-Shirt Bild musst vorher hochladen. Das muss an die Stelle wo "src="images/tshirt.png" im Code steht. (ich habe es als png abgespeichert und tshirt genannt).
Zurückschalten auf Text. Dann siehst du wie es aussieht.
speichern.
Texte anpassen: Nach dieser Phrase suchen: text_media_content_tab "Dokumente" umbennen in "Grössentabelle".
FERTIG. Damit hast du sie allen ausgesuchten Artikeln zugewiesen. Wenn du nun etwas ändern willst, reicht es hier einmal zu ändern. Dann musst du nicht in jeden Artikel.

ODER
- Artikel öffnen
runterscrollen bis TABS
Tab hinzufügen.
Überschrift "Größentabelle"
umstellen auf HTML
HTML Code einfügen
Speichern
Dieses musst dann bei jedem Artikel machen.


Nachtrag: wenn du umstellst auf Text kannst du es natürlich bearbeiten. (Wenn die Tabelle andere Zahlen bekommen sollten oder sonstige Änderungen)

 

Das freut mich.

 

Hallo, ist es auch möglich mehrere Register anzulegen, um je nach Bedarf die Artikel hinzuzufügen?