Here is some articles how to add custom attributes and handle them on storefont:
The Medusa Custom Attributes Plugin is designed to enhance your e-commerce platform with custom attributes, providing compatibility with versions >= 1.20.0 of @medusajs/medusa
.
To get started, install the Medusa Custom Attributes Plugin with either npm or yarn:
npm install medusa-custom-attributes
or
yarn add medusa-custom-attributes
(Optional) Next toggle categories feature flag to your .env:
MEDUSA_FF_PRODUCT_CATEGORIES=true
Next, add the plugin to your medusa-config.js file as follows:
const plugins = [
// ...
{
resolve: `medusa-custom-attributes`,
options: {
enableUI: true,
projectConfig: {
store_cors: STORE_CORS,
admin_cors: ADMIN_CORS,
},
},
},
];
And run migrations:
npx medusa migrations run
Now you're all set and ready to launch! 🚀
The Medusa Custom Attributes Plugin empowers you to define custom attributes within categories and apply them to your products. With this plugin, you can filter your products based on these custom attributes, offering a more tailored shopping experience for your customers.
To get custom attributes make a /store/attributes
request. If you want to get attributes that is related to certain categories use /store/attributes?categories[]=CATEGORY_HANDLE
param
After adding custom attributes to product, you can see field attribute_values
in product responses. Also, you can filter them using query parameters in the URL. For example:
/store/products?attributes[]=ATTRIBUTE_VAL_ID
Here's an example URL:
/store/products?attributes[]=attr_val_01HDZX4VRNP8PNB3FYJXHAGMWG&attributes[]=attr_val_BQDHQ342NB3FYJXHA4353
this corresponds to the following Axios request:
axios.get("http://localhost:9000/store/products", {
params: {
attributes: [
"attr_val_01HDZX4VRNP8PNB3FYJXHAGMWG",
"attr_val_BQDHQ342NB3FYJXHA4353",
],
},
});
As range attribute is a different table you should use different query to filter products by range attributes:
/store/products?int_attributes[RANGE_ATTRIBUTE_ID][]=0&int_attributes[RANGE_ATTRIBUTE_ID][]=61 // Range from 0 to 61 (included)
Here is an URL example with using range attributes:
/store/products?int_attributes[attr_01HEJ929XKX88616FYER0SM165][]=0&int_attributes[attr_01HEJ929XKX88616FYER0SM165][]=61
this corresponds to the following Axios request:
axios.get("http://localhost:9000/store/products", {
params: {
int_attributes: {
attr_01HEJ929XKX88616FYER0SM165: [0, 61],
},
},
});
In response we get:
{
// ...product fields
"custom_attributes": [
{
"id": "attr_01HEJ929XKX88616FYER0SM165",
"created_at": "2023-11-06T12:17:38.228Z",
"updated_at": "2023-11-06T12:17:38.228Z",
"name": "Custom attribute",
"description": "",
"type": "range",
"handle": "range-test",
"filterable": true,
"metadata": null,
"value": {
"id": "int_attr_val_01HEN6GZ3C1X7Q11Y7XXZJHNTY",
"created_at": "2023-11-07T14:30:55.792Z",
"updated_at": "2023-11-07T14:30:55.792Z",
"value": 61
}
},
{
"id": "attr_01HEN6HFFF0KEMNT1Y70GYM66F",
"created_at": "2023-11-07T15:31:13.008Z",
"updated_at": "2023-11-07T15:31:13.008Z",
"name": "Custom attribute 2",
"description": "",
"type": "range",
"handle": "custom-attribute-2",
"filterable": true,
"metadata": null,
"value": {
"id": "int_attr_val_01HEN738CKGVZ0AWDHTH2SJBR4",
"created_at": "2023-11-07T14:40:55.070Z",
"updated_at": "2023-11-07T14:40:55.070Z",
"value": 60
}
}
]
}
export enum AttributeType {
MULTI = "multi", // Allows you to define several attribute values from the same attribute.
SINGLE = "single", // Permits only 1 value from the attribute.
BOOLEAN = "boolean", // Represents a boolean value (e.g., checkbox).
RANGE = "range", // Integer
}
Attribute values also have a JSONB metadata field in which you can define any additional values you require. Here's an example:
// POST: /admin/attributes
{
"categories": ["pcat_shirts"],
"description": "Color attribute",
"handle": "color",
"name": "Color",
"type": "multi",
"values": [
{
"rank": 0, // Ranking is used to display values in the desired order.
"value": "Black",
"metadata": {
"color": "#000"
}
},
{
"rank": 1,
"value": "White",
"metadata": {
"color": "#fff"
}
}
],
"metadata": {
"color_attribute": true
}
}
/admin/attributes
(GET) - Get a list of attributes. Parameters: "categories" (category handles). Example: ?categories[0]=t-shirts.
/store/attributes
(GET) - Get a list of attributes with field filterable
set to true
. Parameters: "categories" (category handles). Example: ?categories[0]=t-shirts.
/admin/attributes
(POST) - Create a custom attribute.
/admin/attributes/:id
(GET) - Get an attribute by its ID.
/admin/attributes/:id
(POST) - Update an attribute.
/admin/attributes/:id
(DELETE) - Delete an attribute.
To define global attributes that are not tied to specific categories, simply leave the "categories" field empty when creating the attribute.
int_attribute_values
and attribute_values
with simple custom_attributes
.If you find this plugin useful, please consider giving it a star. Developed by in Rigby.