So richten Sie konfigurierbare Produkte mit Optionen in OpenCart ein

Eine der vielen nützlichen Funktionen von OpenCart sind "Optionen". In diesem Lernprogramm erfahren Sie, wie Sie Optionen verwenden, um verschiedene Variationen desselben Produkts einzurichten, ohne tatsächlich verschiedene Produkte zu erstellen. Insbesondere erfahren Sie, wie Sie konfigurierbare Produkte im Front-End einrichten, sodass der Benutzer zwischen den verschiedenen Varianten wählen kann, die auf der Produktseite selbst verfügbar sind. Wir gehen eine detaillierte Erklärung der Optionen im Admin-Bereich durch und erstellen am Ende eine Demo für ein konfigurierbares Produkt.

Grundlegendes Verständnis von Optionen

Haben Sie schon einmal die Notwendigkeit gesehen, mehrere Produkte mit geringfügigen Abweichungen in den Produktattributen einzurichten? "Optionen" in OpenCart sind genau dafür ausgelegt! Es kann Ihnen dabei helfen, verschiedene Versionen desselben Produkts sowie Preisschwankungen einzurichten.

Nehmen wir ein paar Beispiele aus der realen Welt, um dies zu verstehen. Angenommen, Sie möchten in Ihrem Geschäft verschiedene Farben für das Produkt "T - Shirt" angeben. Und Sie möchten auch ein paar Dollar mehr für die beliebtesten Farben berechnen. Sie können dies mit der Wählen Optionstyp in OpenCart. Nachdem Sie die verschiedenen Farben auf der Administratorseite eingerichtet haben, wird dem Benutzer auf der Produktdetailseite eine Auswahl verschiedener Farben angezeigt. Und ja, der Benutzer wird basierend auf der Farbauswahl berechnet!

Ein fortgeschritteneres Beispiel wäre ein "Graphic Tee", in dem Sie dem Benutzer ein Bild hochladen möchten, das auf das T-Shirt gedruckt wird! In diesem Fall können Sie die Datei Optionstyp. Manchmal müssen Sie einige Eingaben des Benutzers entgegennehmen, z. B. "Ihr Name", die auf eine Schlüsselkette gedruckt werden. Und dafür das Text Optionstyp kommt zur Rettung!

Insgesamt umfasst Optionen also eine Art Benutzereingabe beim Kauf des Produkts. Bei Bedarf können Sie Preisabweichungen basierend auf der Benutzerauswahl vornehmen.

Verschiedene Arten von Optionen

Nun sehen wir uns den Unterschied an Typen der verfügbaren Optionen in OpenCart.

Text und TextArea

Diese Art von Option wird verwendet, um dem Benutzer etwas Eingabetext zu entnehmen. Sie können entweder wählen Text, die ein Textfeld bereitstellt, oder TextArea, der dem Benutzer einen Textbereich zum Eingeben der erforderlichen Details zur Verfügung stellt.

Datei-Upload

Wie der Name schon sagt, können Sie die Datei Art der Option in dem Fall, in dem ein Benutzer eine Datei für das Produkt hochladen muss.

Datum und Uhrzeit

Wie Sie wahrscheinlich bereits erraten haben, werden Sie aufgefordert, Datum und Uhrzeit einzugeben. Es stehen drei weitere unterschiedliche Typen zur Verfügung. Das Terminzeit Mit type können Sie Datum und Uhrzeit zusammen eingeben. Datum ermöglicht dem Benutzer, nur das Datum auszuwählen. Auf die gleiche Weise, Zeit ermöglicht dem Benutzer, nur die Uhrzeit auszuwählen. Dieser Optionstyp ist hilfreich, wenn Sie den Benutzer zur Auswahl eines Liefertermins auffordern möchten.

Auswahlbasierte Eingabe

Bei dieser Art von Option werden dem Benutzer verschiedene Elemente zur Auswahl angeboten. Für die Benutzerauswahl stehen vier verschiedene Typen zur Verfügung:

  • Das Wählen Typ stellt dem Benutzer eine Dropdown-Liste mit verschiedenen Optionen zur Verfügung.
  • Das Radio Typ bietet verschiedene Optionsfelder für jede Option.
  • Das Ankreuzfeld Typ bietet unterschiedliche Kontrollkästchen für jede Option. Sie können diese Option verwenden, wenn Sie mehrere Optionen für dieselbe Option bereitstellen möchten.
  • Bild ähnelt dem Optionstyp "Radio", aber einem Benutzer werden andere Bilder als nur Text angezeigt.

Das ist es also, was verschiedene Optionstypen betrifft. Genug Theorie, lass uns in die Handlung eintauchen!

Ein konfigurierbares Produkt einrichten

In diesem Abschnitt richten wir ein konfigurierbares Produkt von der Administratorseite aus ein. Erstellen Sie zunächst ein Beispielprodukt mit dem Namen Grafisches T - Shirt von der Rückseite der Admin-Seite. Sie müssen nur die grundlegenden Produktinformationen eingeben und die Kategorie auswählen. Die Details, die Sie in das Produkt eingeben, sind nicht wichtig, da wir uns nur auf die Registerkarte Option konzentrieren, die in der Produktbearbeitungsoberfläche verfügbar ist. Ich werde am Ende dieses Abschnitts darauf zurückkommen.

Wir gehen davon aus, dass unser T-Shirt-Produkt so konfiguriert werden kann, dass Farbe ausgewählt, Slogan-Text eingegeben und das Bild hochgeladen werden kann, das auf das T-Shirt gedruckt wird. Sehen wir uns an, wie Sie dies mit den Optionen erreichen.

Fügen Sie eine "Farbe" -Option hinzu

Gehen Sie zum hinteren Ende von OpenCart. Gehe zu Katalog> Optionen. Die im Shop vorhandenen Optionen werden aufgelistet. Klicke auf das Einfügen Schaltfläche, um ein neues zu erstellen Farbe Möglichkeit.

Füllen Sie die Werte wie im obigen Screenshot gezeigt aus. Wir sind eingetreten Farbe in dem Name der Option Feld. Es wird als Titel angezeigt. Das nächste Feld ist Art, für das wir gewählt haben Wählen, da möchten wir ein Dropdown für die Farbe bereitstellen. Sortierreihenfolge wird nur verwendet, um die verschiedenen Optionen in einer bestimmten Reihenfolge anzuzeigen. Für jetzt werden wir eintreten 1 in diesem Bereich.

Nachdem wir nun grundlegende Informationen hinzugefügt haben, müssen Sie Optionswerte hinzufügen. In diesem Fall werden sie natürlich verschiedene Farben haben. Klicke auf das Optionswert hinzufügen Schaltfläche, um Werte für die Option Farbe hinzuzufügen. Im Screenshot zeigt es, dass wir eingegeben haben rot in dem Optionswertname und wieder die Sortierreihenfolge ist 1. Ignorieren wir das Bild Feld der Einfachheit halber jetzt. Fügen Sie auf dieselbe Weise zwei weitere Farben hinzu, Blau und Grün.

Fügen Sie eine Option "Slogan Text" hinzu

Nun gehen wir weiter und richten die Option "Slogan Text" ein. Klicken Sie erneut auf die Schaltfläche Einfügen Taste auf der Katalog> Optionen Seite.

Wie Sie sehen können, sind wir eingetreten Slogan-Text in dem Name der Option Feld. Und das Art ist eingestellt auf Text. Sortierreihenfolge ist eingestellt auf 2.

Fügen Sie eine Option "T - Shirt - Bild" hinzu

Das letzte ist "T - Shirt Image", also machen wir weiter und fügen das hinzu. Klicke auf das Einfügen Taste auf der Katalog> Optionen Seite.

Wie Sie sehen können, sind wir eingetreten T - Shirt Bild in dem Name der Option Feld. Und das Art ist eingestellt auf Datei. Sortierreihenfolge ist eingestellt auf 3.

Wir haben das Einrichten von "Optionen" erledigt. Nun müssen wir unsere Optionen mit dem Produkt verknüpfen, damit es im Frontend angezeigt werden kann. Ich gehe davon aus, dass Sie das Beispielprodukt "Graphic T - Shirt" erstellt haben, wie ich bereits erwähnt habe. Wenn Sie dies noch nicht getan haben, tun Sie dies einfach, bevor Sie mit dem nächsten Abschnitt fortfahren!

Weisen Sie dem Produkt Optionen zu

Lassen Sie uns das Produkt "Graphic T - Shirt" sofort bearbeiten, um die Optionen hinzuzufügen. Gehe zum Möglichkeit Registerkarte in der Produktbearbeitungsoberfläche. Auf der linken Seite sehen Sie das Textfeld, das automatisch vervollständigt wird. Wenn Sie "Farbe" eingeben, wird Ihnen die zuvor hinzugefügte Option "Farbe" angezeigt.

Klicken Sie auf die Farbe Die Option im Textfeld für die automatische Vervollständigung fügt eine neue Zeile für Farbe hinzu (siehe Abbildung). In diesem Abschnitt können Sie verschiedene Optionswerte hinzufügen, die Sie für die Farboption im Frontend anzeigen möchten. Klicke auf Optionswert hinzufügen um verschiedene Farboptionen hinzuzufügen.

Wie Sie sehen können, habe ich drei Optionen hinzugefügt: Blau, Grün, und rot. Die andere wichtige Sache ist die Preis Felder. Für jede Option können Sie die Preise mithilfe von ändern +/-- unterschreiben um den eingegebenen Betrag. Zum Schluss müssen Sie das angeben Menge für jede Art von Option, sonst wird sie nicht im Frontend angezeigt. Jetzt haben wir die Option "Farbe" beendet.

Nun weisen wir den "Slogan Text" auf ähnliche Weise zu. Für dieses Feld benötigen wir keine Konfiguration, da es sich um eine einfache Textbox handelt.

Schließlich können wir das "T-Shirt Image" zuweisen. Wir benötigen auch keine Konfiguration für dieses Feld, da es sich um ein einfaches Feld zum Hochladen von Dateien handelt.

Speichern Sie das Produkt, nachdem Sie dem Produkt alle drei Optionen zugewiesen haben. Und glaub mir, du bist fertig!

Testfahrt Front - End

Lass uns gleich die Produktdetailseite im Fron-T-End besuchen, um das Ergebnis zu sehen!

Sieht gut aus, nicht wahr? Sie haben also gerade ein konfigurierbares T-Shirt-Produkt eingerichtet, mit dem der Benutzer die Farbe auswählen, den Text für den Slogan eingeben und ein Bild hochladen kann. Sie haben wahrscheinlich bemerkt, dass mit jeder anderen Farbe gemäß unserer Konfiguration im Backend zusätzliche Kosten anfallen!

Sie sollten sich also jetzt mit Optionen und dem Erstellen von konfigurierbaren Produkten in OpenCart vertraut machen. So ist es für heute! Ich würde gerne Ihr Feedback hören.