Textarea for Productpage

[Ferismateam]

German:
Hey ich würde gerne eine Textarea in meiner Productseite hinzufügen mit hilfer der shopify.dev Website kann mir jemand helfen beim aufbau  😄

Englisch:
Hey I would like to add a textarea in my product page with the help of the shopify.dev website can someone help me to build  😄

example website Die besten Duftzwillinge/Dupes | Mihenk Parfumes (mihenk-parfum.de)

[Gabe]

Hey @Ferismateam 

• ich würde gerne eine Textarea in meiner Productseite hinzufügen mit hilfer der shopify.dev Website

Hmm, was damit gemeint ist ist nicht ganz klar leider. Was hast du bis jetzt alles ausprobiert und meinst du das unten aus deinem Link Beispiel, oder meinst du die ausklappbare Beschreibungen (collapsible tabs)  weiter unten?

Das ist ein Feature des Expanse Themes und unsere andere Themes haben auch solche Features, die es dir erlauben, einen "Text Area" (was immer das genau bedeutet) auf der PDP zu implementieren. Oder du verwendest Metafelder. Es gibt somit verschiedenen Wege das zu erreichen was ich denke was du meinst.

Somit wäre eine genaue Beschreibung super hilfreich, sowie einen Link zu deinem Shop, so dass wir dir hier eine angepasste Lösung anbieten können.

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

---
Warum nicht etwas Gamification in das Shop einbauen, um deinen Kunden etwas 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.

[Ferismateam]

Hey Gabe

ich meine etwas wo der Kunde eine spezielle Anforderung reinschreiben kann bei der Produktseite bevor er das Produkt in den warenkorb stellt

[Ferismateam]

Bei Shopify.dev heist es TextArea

[Gabe]

Hey @Ferismateam 

Verstehe du meinst diese Seite hier. Ich hatte ja bloß "Hey ich würde gerne eine Textarea in meiner Productseite hinzufügen mit hilfer der shopify.dev Website kann mir jemand helfen beim aufbau"...Warum einfach wenn's auch kompliziert geht, nich? Apropos, es gibt ja auch das Cart Notes Kästchen, wie folgt abgebildet:

Der komplizierte Weg:

Du musst ja auch den Inhalte des TextArea Kästchen vom Kunden weiter an den Cart übermitteln, um es dann auch zum Checkout und Backend zu übertragen. Nicht so einwandfrei wie du dir denkst... 😉

Entweder im product.json oder product-template.liquid (du hast uns dein Theme nicht verraten...) füge den HTML-Code für die Textarea an die gewünschte Stelle in der Produktseite ein, z.B. unterhalb der Produktbeschreibung oder -optionen. Verwende JavaScript, um die Eingaben des Textarea-Felds zu erfassen und an den Warenkorb zu übermitteln:

<div class="product-customization">
  <label for="custom-message">Spezielle Anforderungen</label>
  <textarea id="custom-message" name="properties[Custom Message]" rows="4" placeholder="Gib hier deine speziellen Anforderungen ein"></textarea>
</div>

Füge den folgenden JavaScript-Code hinzu, um sicherzustellen, dass die Eingaben des Textarea-Felds erfasst und zusammen mit dem Produkt in den Warenkorb gelegt werden:

document.addEventListener('DOMContentLoaded', function() {
  const form = document.querySelector('form[action="/cart/add"]');
  
  form.addEventListener('submit', function(event) {
    const customMessage = document.querySelector('#custom-message').value;
    
    if (customMessage) {
      const input = document.createElement('input');
      input.type = 'hidden';
      input.name = 'properties[Custom Message]';
      input.value = customMessage;
      form.appendChild(input);
    }
  });
});

Ein textarea-Feld wird mit der ID custom-message und dem Namen properties[Custom Message] hinzugefügt. Der Name properties[Custom Message] sorgt dafür, dass die Eingabe als benutzerdefinierte Eigenschaft an das Produkt angehängt wird.

JavaScript:

• Ein Event-Listener wird auf das Formular (form[action="/cart/add"]) gesetzt, um die Eingabe des Textarea-Felds zu erfassen, bevor das Formular abgeschickt wird.
• Wenn eine Eingabe im Textarea-Feld vorhanden ist, wird ein verstecktes Input-Feld mit der Eingabe erstellt und dem Formular hinzugefügt, bevor es abgeschickt wird.

Durch diese Anpassungen wird die spezielle Anforderung des Kunden zusammen mit dem Produkt in den Warenkorb gelegt und ist in der Bestellung sichtbar.

Weitere Ressourcen

• How do I add custom fields on Product Pages?
• Add new custom field into Product Page and further use it ...
• 3 easy ways to add custom fields to product pages in Shopify
• Add customise text field option to product pages

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

[Ferismateam]

Hey gabe ich habe das expanse theme wo soll ich den JavaScript installieren ?

lg

[Gabe]

@Ferismateam 

Wenn du meine Ressourcen oben durchgehst wirst du die genaue Stelle im Expanse Theme finden. Es ist meisten dieselbe Liquid Datei als die die für die PDP zuständig ist.

JavaScript-Code kann in derselben product.liquid Datei oder in einer separaten JavaScript-Datei eingefügt werden, die in der Layout-Datei (normalerweise theme.liquid) verlinkt wird.

Beispiel: im theme.liquid:

<!DOCTYPE html>
<html>
<head>
    <!-- Andere Meta-Tags und CSS-Dateien -->
    <script src="{{ 'custom-product.js' | asset_url }}" defer></script>
</head>
<body>
    <!-- Seiteninhalt -->
</body>
</html>

Indem du den HTML-Code in die product.liquid Datei einfügst und das JavaScript entweder direkt in dieser Datei oder in einer separaten JavaScript-Datei verlinkst, und achte darauf, dass der Pfad zur JavaScript-Datei korrekt ist und dass die Änderungen im Shopify Theme Editor gespeichert werden.

Du kannst das CSS für die Textarea anpassen, um es besser an dein Theme anzupassen. Bearbeite die CSS-Dateien deines Themes oder füge inline CSS hinzu:

<style>
  .product-form__customization {
    margin-top: 20px;
  }
  .product-form__customization textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
  }
</style>

Hoffe das hilft dir weiter - bei weiteren Fragen bitte einen Experten oder die Theme Entwickler selber konsultieren! 😉

[Ferismateam]

hey habe den javascript den du mir gennant hast ins theme.js reinkopiert weil es in der theme.liquid auf der websiete wiedergespiegelt wird der code im product.liquid auch die textare wird anerkannt aber ich kann es nicht wie ein abschnit hinzufügen oder löschen

[Ferismateam]

kannst du das tutorial bitte ausführlicher geben für das expanse theme, ich habe eine neue product seite hergestellt und das sollte ein feature sein mit der speziellen anforderung.

[Gabe]

Hey @Ferismateam 

Ich bin kein Experte für das Expanse Theme - da musst du schon mit den Theme Entwickler oder einen unserer zertifizierten Shopify Partner und Programmierer sprechen.

Einen Tutorial habe ich auch nicht aber du kannst gerne deine Frage in unserem Experten Forum auf Englisch posten, aber bitte mit einem direkten Vorschaulink zu einem Beispiel ansonsten werden wenige da antworten. Einer unserer Programmierer aus Indien wird dir da bestimmt weiterhelfen.

Hoffe das hilft dir weiter! 😉