FROM CACHE - de_header

Tabelle in Produktseite hinzufügen.

Gelöst

Tabelle in Produktseite hinzufügen.

koenigsprime
Entdecker
15 1 3

Hallo zusammen, ich benötige etwas Unterstützung. Ich habe einen HTML-Code, der jedoch nicht ganz korrekt ist. Ich möchte eine Tabelle auf meiner Produktseite mit Großanlagen hinzufügen.

Bitte schauen Sie sich das Bild an. Nummer 1 im Kreis zeigt, wie ich es haben möchte. Ihr fragt euch vielleicht, warum ich das noch einmal haben möchte, oder warum ich es  nicht einfach kopiere. In dieser einklappbaren Reihe kann ich keine Tabelle einfügen.

 

Screenshot 2024-03-11 125832.png

 

hier ist der HTML-Code: 

 

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.collapsible {
cursor: pointer;
user-select: none;
background-color: #fff;
padding: 10px;
text-align: left;
border: none;
outline: none;
position: relative;
display: flex;
justify-content: space-between;
align-items: center;
}

.collapsible::after { content: url('data&colon;image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" class="icon icon-caret" viewBox="0 0 10 6"><path fill-rule="evenodd" clip-rule="evenodd" d="M9.354 5.354a.5.5 0 01-.708 0L5 1.707 1.354 5.354a.5.5 0 01-.708-.708l4-4a.5.5 0 01.708 0l4 4a.5.5 0 010 .708z" fill="currentColor"></path></svg>'); position: absolute; right: 10px; width: 10px; height: 6px; transform: translateY(-50%); transition: transform 0.3s; /* Hinzugefügte Transitions-Eigenschaft */ } .collapsible.open::after { transform: translateY(-50%) rotate(180deg); /* Pfeil nach oben zeigen lassen */ } .content { display: none; overflow: hidden; border: 1px solid #ddd; padding: 10px; } </style>

</head>
<body>

<div class="collapsible" onclick="toggleSizes()">
Größenangaben
<div id="arrow-container"></div>
</div>
<div class="content" id="sizesContent">
<p>
<strong>Material:</strong> Nylon
<br>
<strong>Anwendbare Sportarten:</strong> Squat Weightlifting, Fitness, Waist Belt, Sports Waist Support
<br>
<strong>Größen:</strong>
<br>
- Größe M: Taillenlänge 78cm, Dicke 17mm, Webbing-Breite 19mm, Gesamtlänge 57cm
<br>
- Größe L: Taillenlänge 81cm, Dicke 17mm, Webbing-Breite 19mm, Gesamtlänge 57cm
<br>
- Größe XL: Taillenlänge 84cm, Dicke 17mm, Webbing-Breite 19mm, Gesamtlänge 57cm
</p>
</div>

<script>
function toggleSizes() {
var content = document.getElementById("sizesContent");
var collapsible = document.querySelector(".collapsible");

content.style.display = (content.style.display === "block") ? "none" : "block"; collapsible.classList.toggle("open", content.style.display === "block"); }

</script>

</body>
</html>

1 AKZEPTIERTE LÖSUNG
koenigsprime
Entdecker
15 1 3

Erfolg.

Hallo Lille,

 

Ich habe eine Tabelle mit HTML eingefügt, was aber leider unschön aussieht. Es gibt 2 Möglichkeiten, die ich kenne:


Möglichkeit 1:
Hier ist ein [YouTube-Video](https://youtu.be/VFAxr_v-8n4?si=EUGZIJCEx-Z1fPqg), wie du ein Bild einfügen kannst.


Möglichkeit 2: App benutzen:
- Clean Size Charts: Size Guide
- Kiwi Size Charts & Recommender

 

Wenn du weitere Apps brauchst, kannst du mir schreiben.

Lösung in ursprünglichem Beitrag anzeigen

10 ANTWORTEN 10

Gabe
Shopify Staff
18475 2895 4263

Hey @koenigsprime 

 

Danke für die Fragen und bei so einem Fall wäre ein befristeter Vorschaulink oder Link zu einem Beispiel sehr hilfreich das schneller zu analysieren. Dein Code scheint auch nicht ganz vollständig zu sein. Wo hast du diesen her wenn ich fragen darf?

 

Du möchtest also die Tabelle mit Größenangaben im Collapsible Tab einfügen, aber in dieser kannst du keine Tabelle einfügen. Haben die die anderen Threads zum Thema helfen können (siehe einen beispielsweise hier). Die Lösung liegt darin, deinen aktuellen HTML-Code etwas zu ergänzen, sodass eine Tabelle integriert werden kann.

 

Hier ist ein Beispiel, wie du eine einfache Tabelle in HTML einfügst:

 

<table>
 <tr>
   <th>Größe</th>
   <th>Taillenlänge</th>
   <th>Dicke</th>
   <th>Webbing-Breite</th>
   <th>Gesamtlänge</th>
 </tr>
 <tr>
   <td>M</td>
   <td>78cm</td>
   <td>17mm</td>
   <td>19mm</td>
   <td>57cm</td>
 </tr>
 <tr>
   <td>L</td>
   <td>81cm</td>
   <td>17mm</td>
   <td>19mm</td>
   <td>57cm</td>
 </tr>
 <tr>
   <td>XL</td>
   <td>84cm</td>
   <td>17mm</td>
   <td>19mm</td>
   <td>57cm</td>
 </tr>
</table>

 

Diesen Code innerhalb des <div class="content" id="sizesContent">-Tags einfügen, um die Tabelle an der gewünschten Stelle anzuzeigen. Auch die CSS-Stile entsprechend anpassen, damit die Tabelle gut in das Design deiner Seite passt, wie folgendes Beispiel:

 

table {
  width: 100%;
  border-collapse: collapse;
}

table, th, td {
  border: 1px solid #ddd;
}

th, td {
  padding: 8px;
  text-align: left;
}

th {
  background-color: #f2f2f2;
}

 

Füge diese Styles in dein <style>-Tag ein, um die Tabelle zu stylen. Du kannst die Farben und Maße natürlich anpassen, um sie an dein Design anzupassen. Falls dir die oben verlinkten Ressourcen nicht weiterhelfen können, sende bitte eine Beschreibung genau wie und wo die Ressourcen dir nicht weiterhelfen können, an welchem genauen Schritt, danke!

 

Hoffe das hilft dir weiter - lass wissen falls nicht! 😉

---
Habt ihr auch den Shop auf Ostern eingestellt das jetzt um die Ecke liegt? Warum nicht eine Ostereierjagd 🐣 in das Shop einbauen, um deinen Kunden etwas Gamification und Fun im Shop anzubieten? Gerne kann ich bei Interesse Tipps dazu geben!

Hast du weitere Fragen zum Shop? Gebe einfach ein Suchbegriff oben in der Suchleiste der Community Landingpage ein, denn das Thema haben wir sehr wahrscheinlich schon besprochen. Halte bitte Ausschau in deiner E-Mail auf Notifications zu Antworten auf deine Fragen in der Community.

 

Gabe | Social Care @ Shopify
 - War meine Antwort hilfreich? Klicke Like um es mich wissen zu lassen! 
 - Wurde deine Frage beantwortet? Markiere es als Akzeptierte Lösung 
 - Um mehr zu erfahren, besuche das Shopify Help Center oder den Shopify Blog

koenigsprime
Entdecker
15 1 3

Danke für die Antwort. 

 

Ich habe mir (siehe einen beispielsweise hier) link angeschaut, aber hilft nicht weiter. 

Ich habe den Code ein bisschen bearbeitet. Jetzt gerade schaut es so aus. Wäre es möglich, dass Sie den Code einfach Korrigieren? 

Screenshot 2024-03-11 151053.png

Hier ist der Aktueller HTML_Code:

 

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.collapsible {
cursor: pointer;
user-select: none;
background-color: #fff;
padding: 10px;
text-align: left;
border: none;
outline: none;
position: relative;
display: flex;
justify-content: space-between;
align-items: center;
}

.collapsible::after {
content: url('data&colon;image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" class="icon icon-caret" viewBox="0 0 10 6"><path fill-rule="evenodd" clip-rule="evenodd" d="M9.354 5.354a.5.5 0 01-.708 0L5 1.707 1.354 5.354a.5.5 0 01-.708-.708l4-4a.5.5 0 01.708 0l4 4a.5.5 0 010 .708z" fill="currentColor"></path></svg>');
position: absolute;
right: 10px;
width: 10px;
height: 6px;
transform: translateY(-50%);
transition: transform 0.3s;
}

.collapsible.open::after {
transform: translateY(-50%) rotate(180deg);
}

.content {
display: none;
overflow: hidden;
border: 1px solid #ddd;
padding: 10px;
}

table {
width: 100%;
border-collapse: collapse;
margin-top: 10px;
}

th, td {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
}
</style>
</head>
<body>

<div class="collapsible" onclick="toggleSizes()">
Größenangaben
<div id="arrow-container"></div>
</div>
<div class="content" id="sizesContent">
<table>
<tr>
<th>Größe</th>
<th>Taillenlänge</th>
<th>Dicke</th>
<th>Webbing-Breite</th>
<th>Gesamtlänge</th>
</tr>
<tr>
<td>M</td>
<td>78cm</td>
<td>17mm</td>
<td>19mm</td>
<td>57cm</td>
</tr>
<tr>
<td>L</td>
<td>81cm</td>
<td>17mm</td>
<td>19mm</td>
<td>57cm</td>
</tr>
<tr>
<td>XL</td>
<td>84cm</td>
<td>17mm</td>
<td>19mm</td>
<td>57cm</td>
</tr>
</table>
</div>

<script>
function toggleSizes() {
var content = document.getElementById("sizesContent");
var collapsible = document.querySelector(".collapsible");

content.style.display = (content.style.display === "block") ? "none" : "block";
collapsible.classList.toggle("open", content.style.display === "block");
}
</script>

</body>
</html>

Gabe
Shopify Staff
18475 2895 4263

Hey @koenigsprime 

 

Schritt-für-Schritt, das schaffen wir...Baby-steps... Aber du hast mir immer noch nicht einen Link zu einem deiner Beispiele gegeben, dass mir helfen kann, das besser zu analysieren! 

 

Dein HTML-Code sieht grundsätzlich ok aus, da du einen einklappbaren Abschnitt erstellt hast, der eine Tabelle mit Größenangaben enthält. Wenn du auf die Überschrift "Größenangaben" klickst, sollte sich die Tabelle ein- und ausklappen lassen. 

 

Probiere mal folgendes: entferne das überflüssige <div>-Element id="arrow-container" sofern es nicht benötigt wird:

 

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* ... Deine vorhandenen Styles ... */
</style>
</head>
<body>

<div class="collapsible" onclick="toggleSizes()">Größenangaben</div>
<div class="content" id="sizesContent">
  <!-- Deine Tabelle -->
</div>

<script>
function toggleSizes() {
  var content = document.getElementById("sizesContent");
  var collapsible = document.querySelector(".collapsible");

  // Schalte die Inhaltsanzeige und die Klasse von collapsible um
  var isContentDisplayed = content.style.display === "block";
  content.style.display = isContentDisplayed ? "none" : "block";
  collapsible.classList.toggle("open", !isContentDisplayed);
}
</script>

</body>
</html>

 

Stelle sicher, dass dieses Skript nach dem HTML-Code für deine Tabelle platziert ist, damit es korrekt ausgeführt werden kann, wenn die Seite geladen wird.

 

Hoffe das hilft dir weiter - lass wissen falls nicht! 😉

Gabe | Social Care @ Shopify
 - War meine Antwort hilfreich? Klicke Like um es mich wissen zu lassen! 
 - Wurde deine Frage beantwortet? Markiere es als Akzeptierte Lösung 
 - Um mehr zu erfahren, besuche das Shopify Help Center oder den Shopify Blog

koenigsprime
Entdecker
15 1 3

Screenshot 2024-03-11 153455.png

koenigsprime
Entdecker
15 1 3

Aber du hast mir immer noch nicht einen Link zu einem deiner Beispiele gegeben, dass mir helfen kann, das besser zu analysieren! 

Kann ich dir Privat schicken, ich bin mit meinem Shop noch nicht fertig?

Gabe
Shopify Staff
18475 2895 4263

@koenigsprime 

 

Ok dafür gäbe es einen befristeten Vorschaulink um das schneller zu analysieren. Dieser läuft nach 2 Tagen ab.

 

VG,

Gabe | Social Care @ Shopify
 - War meine Antwort hilfreich? Klicke Like um es mich wissen zu lassen! 
 - Wurde deine Frage beantwortet? Markiere es als Akzeptierte Lösung 
 - Um mehr zu erfahren, besuche das Shopify Help Center oder den Shopify Blog

koenigsprime
Entdecker
15 1 3

Ich habe eine andere Möglichkeit gefunden, eine Tabelle hinzuzufügen, ohne eine App oder Codierung zu verwenden. Ich bedanke mich bei Ihnen für Ihre Unterstützung. 

koenigsprime
Entdecker
15 1 3

Wer daran interessiert ist, wie ich es gemacht habe, kann gerne hier eine Nachricht hinterlassen. Ich werde dann die Lösung hochladen.

Lille
Besucher
1 0 0

🙋🏻‍♀️ Ich wäre daran interessiert. Ich versuche die ganze Zeit eine Tabelle in das Rich Text Element einzufügen - was aber mit dem obigen html-Code auch funktionieren sollte.  

 

Aber gibt es auch eine Möglichkeit im Custom CSS eine Tabelle einzufügen und die Inhalte der Tabelle mit dynamischen Inhalten aus Shopify zu befüllen ?? Wer eine App kennt, die das kann, auch willkommen. Danke!

koenigsprime
Entdecker
15 1 3

Erfolg.

Hallo Lille,

 

Ich habe eine Tabelle mit HTML eingefügt, was aber leider unschön aussieht. Es gibt 2 Möglichkeiten, die ich kenne:


Möglichkeit 1:
Hier ist ein [YouTube-Video](https://youtu.be/VFAxr_v-8n4?si=EUGZIJCEx-Z1fPqg), wie du ein Bild einfügen kannst.


Möglichkeit 2: App benutzen:
- Clean Size Charts: Size Guide
- Kiwi Size Charts & Recommender

 

Wenn du weitere Apps brauchst, kannst du mir schreiben.