Dodawanie niestandardowych atrybutów w Medusa.js

Wyzwanie

Podczas tworzenia niestandardowych sklepów przy użyciu Medusa.js w Rigby, napotkaliśmy wyzwanie związane z dodawaniem niestandardowych atrybutów do produktów.

W Medusa.js brakowało wbudowanego interfejsu API atrybutów niestandardowych, więc do przechowywania naszych atrybutów musieliśmy używać pola metadanych z parami klucz-wartość. Jednakże filtrowanie tych atrybutów okazało się skomplikowanym zadaniem, ponieważ mogły one być różnego typu, np. tablice, ciągi znaków lub liczby. Zwróciliśmy się do zapytań PostgreSQL JSONB, ale takie podejście wiązało się z własnym zestawem problemów.

query.andWhere(
 `product.metadata->’attributes’->>’designer’ IN (:…designers)`,
 {
   designers,
 }
 );

Wyzwania związane z tym podejściem obejmowały:

1. Konieczność rozszerzenia zapytania dla każdego nowego atrybutu.
2. Obsługa atrybutów zależnych od kategorii produktów.
3. Radzenie sobie z wolnymi zapytaniami JSONB.

Rozwiązanie

Aby poradzić sobie z tymi ograniczeniami, opracowaliśmy nową wtyczkę, "medusa-custom-attributes", która dodaje interfejs API dla niestandardowych atrybutów do Medusa.js. Oto, jak możesz jej użyć:

Zainstaluj wtyczkę:

npm install medusa-custom-attributes
// OR
yarn add medusa-custom-attributes

Jeśli korzystasz z kategorii produktów, włącz je w swoim pliku .env:

MEDUSA_FF_PRODUCT_CATEGORIES=true

Następnie, dodaj wtyczkę do pliku medusa-config.js w następujący sposób:

const plugins = [
  // ...
  {
    resolve: `medusa-custom-attributes`,
    options: {
      enableUI: true,
      projectConfig: {
        store_cors: STORE_CORS,
        admin_cors: ADMIN_CORS,
      },
    },
  },
]

I uruchom migracje:

npx medusa migrations run

Po pomyślnym dodaniu wtyczki uzyskasz dostęp do opcji „Atrybuty niestandardowe” w panelu administracyjnym.

Kliknij Dodaj atrybut

Medusa-custom-attributes posiada 3 typy atrybutów:

1. Single — Pozwala zdefiniować 1 wartość atrybutu z opcji.
2. Multiple — Pozwala zdefiniować do 5 wartości atrybutu z opcji (określenie liczby wielokrotności jest konfigurowalne).
3. Boolean

Po dodaniu atrybutu i wybraniu kategorii (lub pozostawieniu pola kategorii pustym dla globalnego atrybutu), możesz je wybrać na stronie szczegółów produktu w widżecie „Atrybuty”.

Używanie na stronie sklepu

Możesz wyświetlać atrybuty, uzyskując dostęp do trasy /store/attributes. W odpowiedzi atrybuty z polem "filterable" ustawionym na true są możliwe do filtrowania. Możesz również filtrować atrybuty według kategorii, korzystając z parametrów zapytania, na przykład:

/store/attributes?categories[0]=t-shirts

Otrzymasz odpowiedź ze szczegółami atrybutów i ich wartościami.

[
    {
        "id": "attr_01HE7NV34RT5E9HKGNQG0DJ551",
        "created_at": "2023-11-02T09:29:14.642Z",
        "updated_at": "2023-11-02T09:29:14.642Z",
        "name": "Style",
        "description": "Style attribute",
        "type": "multi",
        "handle": "style",
        "filterable": true,
        "metadata": null,
        "values": [
            {
                "id": "attr_val_01HE7NV34S6A6MR9ENT7RZF66Q",
                "created_at": "2023-11-02T09:29:14.642Z",
                "updated_at": "2023-11-02T09:29:14.642Z",
                "value": "Vintage",
                "metadata": null,
                "rank": 0
            },
            {
                "id": "attr_val_01HE7NV34SKH8NBQFCMM48KMDW",
                "created_at": "2023-11-02T09:29:14.642Z",
                "updated_at": "2023-11-02T09:29:14.642Z",
                "value": "Casual",
                "metadata": null,
                "rank": 1
            },
            {
                "id": "attr_val_01HE7NV34SZMADRN0S70M4ECA7",
                "created_at": "2023-11-02T09:29:14.642Z",
                "updated_at": "2023-11-02T09:29:14.642Z",
                "value": "Streetwear",
                "metadata": null,
                "rank": 2
            },
            {
                "id": "attr_val_01HE7NV34SZ95MCNYZPTTQVSF3",
                "created_at": "2023-11-02T09:29:14.642Z",
                "updated_at": "2023-11-02T09:29:14.642Z",
                "value": "Formal",
                "metadata": null,
                "rank": 3
            }
        ],
        "categories": [
            {
                "id": "pcat_pants",
                "created_at": "2023-10-22T17:43:13.981Z",
                "updated_at": "2023-10-22T17:43:13.981Z",
                "name": "Pants",
                "description": "",
                "handle": "pants",
                "is_active": true,
                "is_internal": false,
                "parent_category_id": null,
                "rank": 0
            }
        ]
    }
]

Aby filtrować produkty na podstawie atrybutów, użyj parametru wyszukiwania attributes_id:

/store/products?attributes[style][]=attr_val_01HE7NV34S6A6MR9ENT7RZF66Q&attributes[style][]=attr_val_01HE7NV34SKH8NBQFCMM48KMDW

Dodatkowo, trasy sklepu produktów będą zawierać attribute_values, które możesz wykorzystać do wyświetlania atrybutów w listach produktów.

Podsumowanie

Wtyczka upraszcza zarządzanie niestandardowymi atrybutami w Medusa.js, zapewniając bardziej efektywny sposób dodawania, filtrowania i wyświetlania atrybutów. Kliknij, aby pobrać wtyczkę!