Bestimmen Sie die verfügbaren Auswahlmöglichkeiten abhängig von den verfügbaren Produkt-SKUs

Wenn Sie in der Vergangenheit in einer E-Commerce-Anwendung gearbeitet haben oder gearbeitet haben, mussten Sie sich wahrscheinlich mit der Produktpräsentationsseite auseinandersetzen. Dies ist die Seite, die der Benutzer sieht, bevor er entscheidet, ein Produkt in den Warenkorb zu legen oder nicht. Wie alle anderen Seiten muss diese Seite schnell laden und wichtige Informationen zum Produkt wie Beschreibung, Bilder und verfügbare Optionen anzeigen.

Verfügbare Optionen sind die verschiedenen verfügbaren Varianten eines Produkts. Beispielsweise gibt es ein Herrenhemd in der Regel in verschiedenen Größen, es kann jedoch vorkommen, dass im Geschäft eine bestimmte Größe ausgeht. In solchen Situationen ist es sinnvoll, die Auswahl zu deaktivieren, damit der Benutzer im Voraus weiß, dass diese Variante für dieses bestimmte Produkt nicht verfügbar ist.

Eine von zwei Möglichkeiten, dies zu erreichen, besteht darin, einen API-Aufruf an das Backend mit den aktuellen Auswahlen zu tätigen, um anhand dieser Auswahlen zu bestimmen, welche Optionen verfügbar sind. Wenn ich beispielsweise die Farbe Grün auswähle, werden mir nur Größen angezeigt, die für diese bestimmte Farbe verfügbar sind. Wenn die Größe „Medium“ in Grün nicht verfügbar ist, sollte die Option zur Auswahl von „Medium“ deaktiviert werden, sofern zuvor Grün ausgewählt wurde. Bei diesem ersten Ansatz würde die Datenbank abgefragt, um basierend auf den aktuell ausgewählten Optionen die übrigen verfügbaren Optionen zu ermitteln. Dies würde die Datenbank nach ProductSkus, ProductSkuOptions und ConfigurableOptions zusammen mit 10 verschiedenen Abfragen für diese Tabellen abfragen. Dies würde für jede einzelne getroffene Benutzerauswahl durchgeführt.

Die zweite Möglichkeit besteht darin, dass das Backend eine Liste der verfügbaren Variationen in Form von SKUs zurückgibt („ZARA-001-RED-S“, „ZARA-001-BLUE-S“, „ZARA-001-GREEN“). S“, „ZARA-001-RED-M“, „ZARA-001-BLUE-M“). Diese Liste der SKUs kann Teil des Produktdetails-API-Aufrufs sein und würde eine einzelne Datenbankabfrage hinzufügen, nämlich ProductSkus.where(product_id:). Diese Abfrage (Ruby on Rails) gibt die Liste der mit einem Produkt verknüpften SKUs zurück.

Der erste Ansatz erfordert einen Ladezustand zwischen den Auswahlen, was machbar, aber für moderne Webentwicklungsstandards nicht ideal ist. Der zweite Ansatz ist schneller und wird praktisch sofort ausgeführt, ohne dass Ladezustände erforderlich sind. Der erste Ansatz delegiert die schwere Arbeit an das Backend, während der zweite Ansatz die ganze schwere Arbeit im Frontend erledigt. Allerdings wird das Frontend viel schneller ausgeführt, da keine Datenbankkommunikation erforderlich ist.

Ich werde mich in diesem Beitrag auf den zweiten Ansatz konzentrieren.

  const updateUIBasedOnSelection = () => {
    const newAvailableOptions = filterAvailableOptions(
      selectedOptions,
      Object.keys(availableOptions),
      product.available_skus
    )
    // Go through each selection and see what is available according to the other selections
    Object.keys(availableOptions).forEach(type => {
      const selectedOptionsCopy = { ...selectedOptions }
      delete selectedOptionsCopy[type] // remove the current selection so we can see what is available according to the other selections
      const newAvailableOptionsWithSelf = filterAvailableOptions(
        selectedOptionsCopy,
        Object.keys(availableOptions),
        product.available_skus
      )
      newAvailableOptions[type] = new Set([...newAvailableOptions[type], ...newAvailableOptionsWithSelf[type]])
      return newAvailableOptionsWithSelf
    })

    setAvailableOptions(newAvailableOptions)
  }

Dieser Code läuft auf einem Hook, der auf Änderungen an selectedOptions achtet. Dieser Code bestimmt zusammen mit der Funktion filterAvailableOptions, welche Optionen deaktiviert werden. Die hier verwendeten Datenstrukturen sind Objekte mit Variantennamen als Schlüssel (z. B. „Farbe“ und „Größe“) und Javascript-Sets (Set), ähnlich wie Arrays, aber die Werte sind eindeutig und Werte können sich in einem Set nicht wiederholen.

Verfügbare Optionen werden aus allen verfügbaren SKUs erstellt und mit den folgenden Werten initialisiert:

{
 'color': new Set('RED', 'BLUE', 'GREEN'),
 'size': new Set('S', 'M')
}

Ein weiterer praktikablerer Ansatz besteht darin, anstelle des Variantentyps auch die Varianten-ID als Schlüssel zu verwenden.

{
  1: new Set('RED', 'BLUE', 'GREEN'),
  2: new Set('S', 'M')
}

Auf diese Weise ist der Code nicht darauf beschränkt, eine Variante zu haben, die möglicherweise denselben Typ anzeigt. Vielleicht kann es zum Beispiel zwei Farbauswahlen geben.

Inventar

Zusätzlich zur vorhandenen SKU möchten Sie möglicherweise auch eine Bestandsprüfung aller möglichen Optionen durchführen, die der Benutzer auswählen kann. Auf diese Weise kann der Benutzer auf einen Blick erkennen, ob eine Option verfügbar ist oder nicht. Hierfür findest du alle Skus, die bisher zur aktuellen Auswahl passen.

Wenn der Benutzer bereits die Farbe Rot ausgewählt hat, suchen Sie nach allen Artikeln, die die Farbe Rot enthalten, und führen Sie eine Bestandsprüfung aller Artikel durch, die mit der Farbe Rot übereinstimmen. Auf diese Weise können Sie feststellen, ob die nächstmögliche ausgewählte Option verfügbar ist oder nicht.

Der Benutzer möchte jedoch möglicherweise seine/seine Meinung ändern und anstatt sich für die Farbe Rot und dann für Größe XS zu entscheiden, könnte er/sie die Farbe Rot wählen, seine/seine Meinung ändern und zur Farbe Grün wechseln. Ihr Algorithmus sollte flexibel genug sein, dass er immer die SKU abruft. Manchmal ist es erforderlich, alle verfügbaren Optionen abzurufen, während der Benutzer eine Auswahl trifft. Walmart führt beispielsweise eine Bestandsprüfung durch, wann immer der Benutzer eine Auswahl trifft.

Eine weitere Sache, die Sie im Hinterkopf behalten sollten, ist der Backend-Teil davon. Manchmal kann die bevorstehende Auswahl bis zu Hunderte betragen. Ihr Backend sollte schnell und genau genug sein, um eine solche Menge möglicher Auswahlmöglichkeiten zu bewältigen. Ein kurzer GPT-Chat enthüllte viele Möglichkeiten, dies schnell und genau zu machen. Viele davon bestanden in der Verwendung von ereignisgesteuertem Code, der den Bestand jedes Mal aktualisiert, wenn eine Transaktion stattfindet. Dies ist empfindlich, da es bei unsachgemäßer Ausführung möglicherweise nicht synchron ist. Denken Sie an Mutex und vermeiden Sie Race-Conditions, bei denen möglicherweise zwei Kunden den Artikel gleichzeitig kaufen. Wenn ich wählen müsste, würde ich eine Kombination aus Kafka für Ereignisse und Redis für die Zwischenspeicherung der Inventarwerte wählen.

In meinem persönlichen Fall musste ich keines von beiden auswählen, sondern nur eine Backend-Abfrage optimieren, um sicherzustellen, dass 20 SKUs alle 2 Sekunden ausgeführt werden. Ich schränke die SKUs ein, während der Benutzer eine Auswahl trifft. Je mehr Auswahlen der Benutzer getroffen hat, desto weniger SKUs muss ich im Inventar überprüfen und desto schneller ist der API-Aufruf.

Jedenfalls muss ich noch herausfinden, ob ich alle SKU-Übereinstimmungen abrufen soll oder die verbleibenden SKUs, die darauf warten, ausgewählt zu werden. Alle passenden SKUs sind alle SKUs, die mit der aktuellen Auswahl übereinstimmen, und die verbleibenden SKUs sind diejenigen, die für die Auswahl durch den Benutzer fehlen.

Im E-Commerce ist es sehr wichtig, leistungsstarken Code bereitzustellen, da manche Menschen darauf vertrauen, dass der Service emotionalen Komfort beim Kauferlebnis und manchmal auch bei dem Artikel, den sie kaufen, empfindet. Die Verwendung einer App, die schlecht geschrieben ist, kann jemandem den Tag ruinieren, weil ein emotionales Bedürfnis nicht erfüllt wird, was wiederum zu einer schlechten Entscheidungsfähigkeit führen kann.

Die SKU-Prüfung kann nur zu Beginn des Ladens der Produktshow-Seite durchgeführt werden, die Bestandsprüfung kann jedoch durchgeführt werden, während der Benutzer eine Auswahl trifft. Im Wesentlichen also nur ein Abruf für die SKUs und mehrere Abrufe für die Bestandsprüfungen.

Abschluss

Es gibt höchstwahrscheinlich mehrere Möglichkeiten, dieses Ergebnis zu erzielen. Dieser Weg erfolgt praktisch augenblicklich. Es gibt nur eine begrenzte Anzahl verschiedener Variationen desselben Produkts, sodass es keinen Bedarf für eine weitere Optimierung geben sollte. Ich habe einen Teil des Kodex für mich behalten, um keinen Ärger mit dem Unternehmen zu bekommen, für das ich gerade arbeite, aber ich bespreche gerne Ihren beabsichtigten Ansatz.

Lange Rede, kurzer Sinn: Rufen Sie alle SKUs ab (die sich ändern sollten, wenn sich die Benutzerauswahl ändert) und erstellen Sie die verfügbaren Optionsauswahlelemente, indem Sie sich die verschiedenen SKU-Optionen ansehen.

Das obige ist der detaillierte Inhalt vonBestimmen Sie die verfügbaren Auswahlmöglichkeiten abhängig von den verfügbaren Produkt-SKUs. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!