Tentukan Pilihan Tersedia Bergantung pada SKU Produk Tersedia

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.

Perkara lain yang perlu diingat ialah bahagian hujung belakang ini. Kadangkala pilihan yang akan datang boleh mencapai ratusan. Bahagian belakang anda hendaklah cukup pantas dan tepat untuk mengendalikan jumlah pilihan yang mungkin. Sembang GPT pantas mendedahkan banyak cara untuk membuat ini pantas dan tepat, kebanyakannya terdiri daripada menggunakan kod didorong peristiwa yang mengemas kini inventori apabila transaksi berlaku. Ini sensitif kerana ia mungkin tidak segerak jika tidak dilakukan dengan betul, ingat mutex dan elakkan keadaan perlumbaan di mana dua pelanggan mungkin membeli item pada masa yang sama. Jika saya terpaksa memilih, saya akan memilih gabungan Kafka untuk acara dan Redis untuk menyimpan cache nilai inventori.

Dalam kes peribadi saya, saya tidak perlu memilih salah satu daripada, hanya perlu mengoptimumkan pertanyaan bahagian belakang untuk memastikan ia menjalankan 20 skus setiap 2 saat. Saya mengecilkan skus apabila pengguna membuat pilihan, jadi semakin banyak pilihan yang dibuat pengguna semakin kurang skus yang perlu saya semak inventori dan semakin cepat panggilan api.

Apa pun, saya masih perlu memikirkan sama ada saya perlu mengambil semua perlawanan sku atau baki sku yang menunggu untuk dipilih. Semua skus yang sepadan ialah semua skus yang sepadan dengan pemilihan semasa dan sku yang selebihnya adalah yang tiada untuk dipilih oleh pengguna.

Dalam e-dagang adalah sangat penting untuk menyampaikan kod yang berprestasi kerana sesetengah orang bergantung pada perkhidmatan untuk menerima keselesaan emosi daripada pengalaman pembelian dan kadangkala daripada item yang mereka beli. Menggunakan apl yang ditulis dengan buruk boleh merosakkan hari seseorang dengan mengakibatkan keperluan emosi tidak dapat dipenuhi, yang seterusnya boleh mengakibatkan kemahiran membuat keputusan yang lemah.

Semakan sku hanya boleh dilakukan pada permulaan pemuatan halaman pameran produk tetapi semakan stok boleh dilakukan semasa pengguna membuat pilihan. Jadi pada dasarnya hanya satu pengambilan untuk skus dan beberapa pengambilan untuk semakan stok.

Kesimpulan

Kemungkinan besar terdapat pelbagai cara untuk mencapai hasil ini. Cara ini hampir serta-merta. Terdapat begitu banyak variasi berbeza untuk produk yang sama jadi tidak perlu mengoptimumkannya lagi. Saya menyimpan sebahagian daripada kod untuk diri saya sendiri untuk tidak menghadapi masalah dengan syarikat tempat saya bekerja pada masa ini tetapi saya berbesar hati untuk membincangkan pendekatan yang anda inginkan.

Pendek cerita ambil semua skus (yang sepatutnya berubah apabila pilihan pengguna berubah) dan bina elemen pemilihan pilihan yang tersedia dengan melihat pilihan sku yang berbeza.

Atas ialah kandungan terperinci Tentukan Pilihan Tersedia Bergantung pada SKU Produk Tersedia. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!