Wie fügt man in BigCommerce eine benutzerdefinierte Stickfunktion hinzu?

This entry was posted in BigCommerce and tagged on by .

Wenn Sie einem BigCommerce-Shop die Option „Stickerei hinzufügen“ hinzufügen möchten, ist Ihr erster Impuls vielleicht, nach einer App zu suchen. Es gibt einige Personalisierungs-Apps auf dem Markt, und die sind durchaus in Ordnung. Allerdings fallen dafür monatliche Gebühren an. In der Regel speichern sie die Eingaben der Kunden außerhalb von BigCommerce, und es gelingt selten, die Benutzeroberfläche so zu gestalten, dass sie wie ein integraler Bestandteil der Website wirkt und nicht wie ein nachträglich angehängtes Element.

Es gibt einen einfacheren Weg, der ausschließlich die Funktionen nutzt, die BigCommerce bereits bereitstellt: Produktmodifikatoren. Ich habe das nun schon einige Male umgesetzt, daher hier eine grobe Beschreibung meiner Vorgehensweise.

Die Kurzfassung: Richte die Stickfelder als normale Produktoptionen ein und verwende dann ein wenig JavaScript, um sie auf der Produktseite korrekt anzuzeigen und alles mit den Preisregeln zu verknüpfen, die BigCommerce bereits verwaltet. Sie bauen kein zweites System auf, um zu verfolgen, was der Kunde auswählt, sondern verbessern lediglich die Darstellung des Systems, über das BigCommerce bereits verfügt.

Beginnen Sie im Admin-Bereich, nicht im Code

Nehmen wir an, Sie möchten dies für eine Jacke umsetzen. Bevor Sie auch nur eine Vorlage bearbeiten, richten Sie die Modifikatoren direkt am Produkt selbst ein, unter „Optionen/Modifikatoren“:

  • Ein Kontrollkästchen mit einer Bezeichnung wie „Stickerei“ ist lediglich ein von JavaScript gesteuertes Kennzeichen, damit der Rest des Shops weiß, ob dieser Artikel bestickt ist.
  • Ein Textfeld für den Sticktext, gegebenenfalls mit einer Zeichenbegrenzung, falls Ihr Stickdienstleister eine solche vorsieht. Kunden werden versuchen, einen ganzen Absatz dort hineinzuschreiben, wenn Sie es zulassen.
  • Ein Dropdown-Menü für die Schriftart.
  • Eine Farbmuster-Option für die Garnfarbe, sofern der Farbmustertyp von BigCommerce für Ihr Angebot geeignet ist. Eine Liste mit Farbnamen ist weitaus weniger nützlich als ein echtes Farbmuster.
  • Eine Auswahl mit Optionsfeldern für die Platzierung (linke Brustseite, Ärmel, Rücken usw.). Dies ist in der Regel die Option, die einen Preisaufschlag mit sich bringt, und Sie legen diese Preisregel direkt dort im Modifikator fest.

Dieser letzte Punkt ist der entscheidende Trick, um das Ganze einfach zu halten: Berechnen Sie die Stickpreise nicht selbst. Überlassen Sie das BigCommerce. Sobald die Regel auf der Option hinterlegt ist, funktioniert die integrierte Funktion „Preis bei Optionsänderung neu berechnen“ einfach, und Sie müssen die Preislogik in Ihrem eigenen Code nie anfassen.

Lassen Sie die Optionen auf der Produktseite anzeigen

Lassen Sie die Felder wie jede andere Option direkt auf der Produktseite erscheinen und nutzen Sie JavaScript, um die Benutzererfahrung rund um diese Felder zu optimieren. Hier sind einige empfehlenswerte Maßnahmen:

  • Blenden Sie die Stickfelder erst ein, wenn das Kontrollkästchen „Stickerei“ aktiviert ist, anstatt jedem Besucher standardmäßig fünf zusätzliche Felder anzuzeigen.
  • Fügen Sie eine kleine Live-Vorschau des Textes neben der Option hinzu, die sich während der Eingabe des Kunden aktualisiert, damit dieser Feedback erhält, ohne die Seite verlassen zu müssen.
  • Deaktivieren Sie die Schaltfläche „In den Warenkorb“, bis die erforderlichen Felder (Text, Farbe, Platzierung) ausgefüllt sind. So verlassen Sie sich nicht allein auf die Standard-Validierungsmeldungen von BigCommerce.

Das muss alles nicht kompliziert sein. Etwas wie das Folgende reicht aus, um das Ein- und Ausblenden sowie die Vorschau zum Laufen zu bringen:

const toggle = document.querySelector('#attribute_embroidery_toggle');
const fields = document.querySelector('.embroidery-fields');
const textInput = document.querySelector('[data-name="Embroidery Text"]');
const preview = document.querySelector('#embroideryPreview');

toggle?.addEventListener('change', () => {
  fields.style.display = toggle.checked ? 'block' : 'none';
});

textInput?.addEventListener('keyup', (e) => {
  preview.textContent = e.target.value || 'Your embroidery text will appear here';
});

Das war’s auch schon, was die Kernfunktionalität angeht. Verknüpfen Sie die Auswahl „Vor dem Hinzufügen zum Warenkorb erforderlich“ genauso wie jede andere Pflichtoption im Theme, und überlassen Sie es der BigCommerce-eigenen Option-Änderungsverarbeitung, den Preis anzupassen, wenn sich die Platzierung ändert.

Was passiert, sobald der Artikel im Warenkorb liegt?

Sobald sich ein bestickter Artikel im Warenkorb befindet, stellt BigCommerce für konfigurierbare Produkte bereits einen Link zum Bearbeiten der Optionen bereit, sodass ein Kunde zurückgehen und seinen Text, seine Schriftart oder die Platzierung ändern kann, ohne den Support kontaktieren zu müssen. Dieser Ablauf nutzt dieselben Felder und dieselbe Logik – er wird lediglich vom Warenkorb aus ausgelöst statt von der Produktseite. Bei Interesse wäre das einen eigenen Beitrag wert.

Warum ich dies einer App vorziehe

Vor allem, weil es kostenlos ist und weil die Daten BigCommerce nie verlassen. Die Stickoptionen erscheinen als normale Optionswerte in der Bestellung, genau dort, wo jeder, der sie im Admin-Bereich einsieht, sie erwarten würde. Kein separates Dashboard, kein Webhook, der eines Tages still und leise die Synchronisierung einstellen könnte.

Der Nachteil ist, dass ihr selbst dafür verantwortlich seid. Wenn später jemand Zeichenbeschränkungen pro Schriftart wünscht oder eine Validierung, die verhindert, dass Kunden Emojis in den Sticktext eingeben, müsst ihr das selbst entwickeln – es steht nicht auf der Roadmap eines Anbieters. Für viele Shops ist das ein fairer Kompromiss. Für andere ist es die bessere Entscheidung, für eine App zu bezahlen, die diese Sonderfälle bereits abdeckt. Es lohnt sich, dieses Gespräch mit dem Kunden zu führen, bevor ihr anfangt – nicht erst danach.

Bitte kontaktieren Sie uns unter wargis@bay20.com / manish@bay20.com oder rufen Sie uns unter +91-9582784309 oder +91-8800519180 an, wenn Sie Unterstützung im Zusammenhang mit Bigcommerce benötigen. Sie können auch unsere Website besuchen, um sich über unsere Dienstleistungen zu informieren.