diff --git a/www/apps/resources/app/how-to-tutorials/tutorials/category-images/page.mdx b/www/apps/resources/app/how-to-tutorials/tutorials/category-images/page.mdx
index d7e24b224b..a6ba074949 100644
--- a/www/apps/resources/app/how-to-tutorials/tutorials/category-images/page.mdx
+++ b/www/apps/resources/app/how-to-tutorials/tutorials/category-images/page.mdx
@@ -559,7 +559,7 @@ export const createCategoryImagesWorkflow = createWorkflow(
.then(
() => {
const categoryIds = transform({
- input
+ input,
}, (data) => {
return data.input.category_images.filter(
(img) => img.type === "thumbnail"
@@ -676,10 +676,10 @@ To apply middleware to a route, create the file `src/api/middlewares.ts` with th
```ts title="src/api/middlewares.ts"
import {
defineMiddlewares,
- validateAndTransformBody
-} from "@medusajs/framework/http";
+ validateAndTransformBody,
+} from "@medusajs/framework/http"
import {
- CreateCategoryImagesSchema
+ CreateCategoryImagesSchema,
} from "./admin/categories/[category_id]/images/route"
export default defineMiddlewares({
@@ -688,11 +688,11 @@ export default defineMiddlewares({
matcher: "/admin/categories/:category_id/images",
method: ["POST"],
middlewares: [
- validateAndTransformBody(CreateCategoryImagesSchema)
- ]
+ validateAndTransformBody(CreateCategoryImagesSchema),
+ ],
},
],
-});
+})
```
You apply Medusa's `validateAndTransformBody` middleware to `POST` requests sent to the `/admin/categories/:category_id/images` route. The middleware function accepts a Zod schema that you created in the API route's file.
@@ -980,7 +980,7 @@ export const CategoryImageGallery = ({
{/* Existing images */}
{visibleExistingImages.map((image) => {
- if (!image.id) return null
+ if (!image.id) {return null}
const imageId = image.id
const isThumbnail = currentThumbnailId === imageId
@@ -1323,7 +1323,7 @@ Next, you'll add a function to handle file uploads. Replace the `// TODO handle
```tsx title="src/admin/components/category-media/category-media-modal.tsx"
const handleUploadFile = (files: FileList | null) => {
- if (!files || files.length === 0) return
+ if (!files || files.length === 0) {return}
const filesArray = Array.from(files)
uploadFilesMutation.mutate(filesArray, {
@@ -1597,6 +1597,8 @@ export const updateCategoryImagesStep = createStep(
type: img.type,
}))
)
+ }
+)
```
This step accepts an array of updates, where each update contains the category image ID to update and the new type.
@@ -1643,7 +1645,7 @@ export const updateCategoryImagesWorkflow = createWorkflow(
.then(
() => {
const categoryImageIds = transform({
- input
+ input,
}, (data) => data.input.updates.filter(
(u) => u.type === "thumbnail"
).map((u) => u.id))
@@ -1654,11 +1656,11 @@ export const updateCategoryImagesWorkflow = createWorkflow(
id: categoryImageIds,
},
options: {
- throwIfKeyNotFound: true
- }
+ throwIfKeyNotFound: true,
+ },
})
const categoryIds = transform({
- categoryImages
+ categoryImages,
}, (data) => data.categoryImages.map((img) => img.category_id))
convertCategoryThumbnailsStep({
@@ -1693,7 +1695,7 @@ Create the file `src/api/admin/categories/[category_id]/images/batch/route.ts` w
```ts title="src/api/admin/categories/[category_id]/images/batch/route.ts"
import { MedusaRequest, MedusaResponse } from "@medusajs/framework/http"
import {
- updateCategoryImagesWorkflow
+ updateCategoryImagesWorkflow,
} from "../../../../../../workflows/update-category-images"
import { z } from "zod"
@@ -1984,7 +1986,7 @@ Then, add a function that sets the selected image as the thumbnail:
```tsx title="src/admin/components/category-media/category-media-modal.tsx"
const handleSetAsThumbnail = () => {
- if (selectedImageIds.size !== 1) return
+ if (selectedImageIds.size !== 1) {return}
const selectedId = Array.from(selectedImageIds)[0]
setCurrentThumbnailId(selectedId)
@@ -1992,7 +1994,9 @@ const handleSetAsThumbnail = () => {
// update uploaded file type to thumbnail
const uploadedFileId = selectedId.replace("uploaded:", "")
setUploadedFiles((prev) =>
- prev.map((file) => file.id === uploadedFileId ? { ...file, type: "thumbnail" } : file)
+ prev.map((file) => {
+ return file.id === uploadedFileId ? { ...file, type: "thumbnail" } : file
+ })
)
}
@@ -2273,8 +2277,8 @@ export const deleteCategoryImagesWorkflow = createWorkflow(
id: input.ids,
},
options: {
- throwIfKeyNotFound: true
- }
+ throwIfKeyNotFound: true,
+ },
})
// Transform the category images to extract file IDs
@@ -2315,7 +2319,7 @@ In `src/api/admin/categories/[category_id]/images/batch/route.ts`, add the follo
```ts title="src/api/admin/categories/[category_id]/images/batch/route.ts"
import {
- deleteCategoryImagesWorkflow
+ deleteCategoryImagesWorkflow,
} from "../../../../../../workflows/delete-category-image"
```
@@ -2494,7 +2498,7 @@ After that, add a function that marks selected images for deletion:
```tsx title="src/admin/components/category-media/category-media-modal.tsx"
const handleDelete = () => {
- if (selectedImageIds.size === 0) return
+ if (selectedImageIds.size === 0) {return}
const uploadedFileIds: string[] = []
const savedImageIds: string[] = []
@@ -2609,12 +2613,17 @@ You update the `handleSave` function to:
Finally, in the `return` statement, replace the `/* TODO add delete command */` comment with the following:
```tsx title="src/admin/components/category-media/category-media-modal.tsx"
-
-
+return (
+ 0}>
+ {/* ... */}
+
+
+
+)
```
You add a command to "Delete" the selected images. You can also press the "d" key as a shortcut.
@@ -3046,7 +3055,7 @@ export default function CategoryTemplate({
const pageNumber = page ? parseInt(page) : 1
const sort = sortBy || "created_at"
- if (!category || !countryCode) notFound()
+ if (!category || !countryCode) {notFound()}
const parents = [] as HttpTypes.StoreProductCategory[]
@@ -3151,7 +3160,7 @@ You've now added support for category images in Medusa. You can expand on this b
- Adding images to other models, such as collections.
- Adding support for reordering category images.
-- Allowing setting multiple thumbnails for different use cases (e.g., mobile vs. desktop).
+- Allowing setting multiple thumbnails for different use cases (for example, mobile vs. desktop).
- Adding alt text for category images for better accessibility and SEO.
### Learn More About Medusa