npx create-medusa-app@latest

npx create-strapi@latest my-strapi-app

cd my-strapi-app

npm run dev

{
  "kind": "collectionType",
  "collectionName": "products",
  "info": {
    "singularName": "product",
    "pluralName": "products",
    "displayName": "Product",
    "description": "Products from Medusa"
  },
  "options": {
    "draftAndPublish": false
  },
  "pluginOptions": {},
  "attributes": {
    "medusaId": {
      "type": "string",
      "required": true,
      "unique": true
    },
    "title": {
      "type": "string",
      "required": true
    },
    "subtitle": {
      "type": "string"
    },
    "description": {
      "type": "richtext"
    },
    "handle": {
      "type": "uid",
      "targetField": "title"
    },
    "images": {
      "type": "media",
      "multiple": true,
      "required": false,
      "allowedTypes": ["images"]
    },
    "thumbnail": {
      "type": "media",
      "multiple": false,
      "required": false,
      "allowedTypes": ["images"]
    },
    "locale": {
      "type": "string",
      "default": "en"
    },
    "variants": {
      "type": "relation",
      "relation": "oneToMany",
      "target": "api::product-variant.product-variant",
      "mappedBy": "product"
    },
    "options": {
      "type": "relation",
      "relation": "oneToMany",
      "target": "api::product-option.product-option",
      "mappedBy": "product"
    }
  }
}

export default {
  async beforeDelete(event) {
    const { where } = event.params
    
    // Find the product with its relations
    const product = await strapi.db.query("api::product.product").findOne({
      where: {
        id: where.id,
      },
      populate: {
        variants: true,
        options: true,
      },
    })

    if (product) {
      // Delete all variants
      if (product.variants && product.variants.length > 0) {
        for (const variant of product.variants) {
          await strapi.documents("api::product-variant.product-variant").delete({
            documentId: variant.documentId,
          })
        }
      }

      // Delete all options (their values will
      // be cascade deleted by the option lifecycle)
      if (product.options && product.options.length > 0) {
        for (const option of product.options) {
          await strapi.documents("api::product-option.product-option").delete({
            documentId: option.documentId,
          })
        }
      }
    }
  },
}

import { factories } from "@strapi/strapi"

export default factories.createCoreController("api::product.product")

import { factories } from "@strapi/strapi"

export default factories.createCoreService("api::product.product")

import { factories } from "@strapi/strapi"

export default factories.createCoreRouter("api::product.product")

{
  "kind": "collectionType",
  "collectionName": "product_variants",
  "info": {
    "singularName": "product-variant",
    "pluralName": "product-variants",
    "displayName": "Product Variant",
    "description": "Product variants from Medusa"
  },
  "options": {
    "draftAndPublish": false
  },
  "pluginOptions": {},
  "attributes": {
    "medusaId": {
      "type": "string",
      "required": true,
      "unique": true
    },
    "title": {
      "type": "string",
      "required": true
    },
    "sku": {
      "type": "string"
    },
    "images": {
      "type": "media",
      "multiple": true,
      "required": false,
      "allowedTypes": ["images"]
    },
    "thumbnail": {
      "type": "media",
      "multiple": false,
      "required": false,
      "allowedTypes": ["images"]
    },
    "locale": {
      "type": "string",
      "default": "en"
    },
    "product": {
      "type": "relation",
      "relation": "manyToOne",
      "target": "api::product.product",
      "inversedBy": "variants"
    },
    "option_values": {
      "type": "relation",
      "relation": "manyToMany",
      "target": "api::product-option-value.product-option-value",
      "inversedBy": "variants"
    }
  }
}

import { factories } from "@strapi/strapi"

export default factories.createCoreController("api::product-variant.product-variant")

import { factories } from "@strapi/strapi"

export default factories.createCoreService("api::product-variant.product-variant")

import { factories } from "@strapi/strapi"

export default factories.createCoreRouter("api::product-variant.product-variant")

{
  "kind": "collectionType",
  "collectionName": "product_options",
  "info": {
    "singularName": "product-option",
    "pluralName": "product-options",
    "displayName": "Product Option",
    "description": "Product options from Medusa"
  },
  "options": {
    "draftAndPublish": false
  },
  "pluginOptions": {},
  "attributes": {
    "medusaId": {
      "type": "string",
      "required": true,
      "unique": true
    },
    "title": {
      "type": "string",
      "required": true
    },
    "locale": {
      "type": "string",
      "default": "en"
    },
    "product": {
      "type": "relation",
      "relation": "manyToOne",
      "target": "api::product.product",
      "inversedBy": "options"
    },
    "values": {
      "type": "relation",
      "relation": "oneToMany",
      "target": "api::product-option-value.product-option-value",
      "mappedBy": "option"
    }
  }
}

export default {
  async beforeDelete(event) {
    const { where } = event.params
    
    // Find the option with its values
    const option = await strapi.db.query("api::product-option.product-option").findOne({
      where: {
        id: where.id,
      },
      populate: {
        values: true,
      },
    })

    if (option && option.values && option.values.length > 0) {
      // Delete all option values
      for (const value of option.values) {
        await strapi.documents("api::product-option-value.product-option-value").delete({
          documentId: value.documentId,
        })
      }
    }
  },
}

import { factories } from "@strapi/strapi"

export default factories.createCoreController("api::product-option.product-option")

import { factories } from "@strapi/strapi"

export default factories.createCoreService("api::product-option.product-option")

import { factories } from "@strapi/strapi"

export default factories.createCoreRouter("api::product-option.product-option")

{
  "kind": "collectionType",
  "collectionName": "product_option_values",
  "info": {
    "singularName": "product-option-value",
    "pluralName": "product-option-values",
    "displayName": "Product Option Value",
    "description": "Product option values from Medusa"
  },
  "options": {
    "draftAndPublish": false
  },
  "pluginOptions": {},
  "attributes": {
    "medusaId": {
      "type": "string",
      "required": true,
      "unique": true
    },
    "value": {
      "type": "string",
      "required": true
    },
    "locale": {
      "type": "string",
      "default": "en"
    },
    "option": {
      "type": "relation",
      "relation": "manyToOne",
      "target": "api::product-option.product-option",
      "inversedBy": "values"
    },
    "variants": {
      "type": "relation",
      "relation": "manyToMany",
      "target": "api::product-variant.product-variant",
      "mappedBy": "option_values"
    }
  }
}

import { factories } from "@strapi/strapi"

export default factories.createCoreController("api::product-option-value.product-option-value")

import { factories } from "@strapi/strapi"

export default factories.createCoreService("api::product-option-value.product-option-value")

import { factories } from "@strapi/strapi"

export default factories.createCoreRouter("api::product-option-value.product-option-value")

npm install @strapi/client

import { LoaderOptions } from "@medusajs/framework/types"
import { asValue } from "@medusajs/framework/awilix"
import { MedusaError } from "@medusajs/framework/utils"
import { strapi } from "@strapi/client"

export type ModuleOptions = {
  apiUrl: string
  apiToken: string
  defaultLocale?: string
}

export default async function initStrapiClientLoader({
  container,
  options,
}: LoaderOptions<ModuleOptions>) {
  if (!options?.apiUrl || !options?.apiToken) {
    throw new MedusaError(
      MedusaError.Types.INVALID_DATA,
      "Strapi API URL and token are required"
    )
  }

  const logger = container.resolve("logger")

  try {
    // Create Strapi client instance
    const strapiClient = strapi({
      baseURL: options.apiUrl,
      auth: options.apiToken,
    })

    // Register the client in the container
    container.register({
      strapiClient: asValue(strapiClient),
    })

    logger.info("Strapi client initialized successfully")
  } catch (error) {
    logger.error(`Failed to initialize Strapi client: ${error}`)
    throw error
  }
}

import type { StrapiClient } from "@strapi/client"
import { Logger } from "@medusajs/framework/types"
import { ModuleOptions } from "./loaders/init-client"

type InjectedDependencies = {
  logger: Logger
  strapiClient: StrapiClient
}

export default class StrapiModuleService {
  protected readonly options_: ModuleOptions
  protected readonly logger_: any
  protected readonly client_: StrapiClient

  constructor(
    { logger, strapiClient }: InjectedDependencies, 
    options: ModuleOptions
  ) {
    this.options_ = options
    this.logger_ = logger
    this.client_ = strapiClient
  }

  // TODO add methods
}

export default class StrapiModuleService {
  // ...
  formatStrapiError(error: any, context: string): string {
    // Handle Strapi client HTTP response errors
    if (error?.response) {
      const response = error.response
      const parts = [context]
      
      if (response.status) {
        parts.push(`HTTP ${response.status}`)
      }
      
      if (response.statusText) {
        parts.push(response.statusText)
      }
      
      // Add request URL if available
      if (response.url) {
        parts.push(`URL: ${response.url}`)
      }
      
      // Add request method if available
      if (error.request?.method) {
        parts.push(`Method: ${error.request.method}`)
      }
      
      return parts.join(" - ")
    }
    
    // If error has a response with Strapi error structure
    if (error?.error) {
      const strapiError = error.error
      const parts = [context]
      
      if (strapiError.status) {
        parts.push(`Status ${strapiError.status}`)
      }
      
      if (strapiError.name) {
        parts.push(`[${strapiError.name}]`)
      }
      
      if (strapiError.message) {
        parts.push(strapiError.message)
      }
      
      if (strapiError.details && Object.keys(strapiError.details).length > 0) {
        parts.push(`Details: ${JSON.stringify(strapiError.details)}`)
      }
      
      return parts.join(" - ")
    }
    
    // Fallback for non-Strapi errors
    return `${context}: ${error.message || error}`
  }
}

export default class StrapiModuleService {
  // ...
  async uploadImages(imageUrls: string[]): Promise<number[]> {
    const uploadedIds: number[] = []

    for (const imageUrl of imageUrls) {
      try {
        // Fetch the image from the URL
        const imageResponse = await fetch(imageUrl)
        if (!imageResponse.ok) {
          this.logger_.warn(`Failed to fetch image: ${imageUrl}`)
          continue
        }

        const imageBuffer = await imageResponse.arrayBuffer()
        
        // Extract filename from URL or generate one
        const urlParts = imageUrl.split("/")
        const filename = urlParts[urlParts.length - 1] || `image-${Date.now()}.jpg`

        // Create a Blob from the buffer
        const blob = new Blob([imageBuffer], {
          type: imageResponse.headers.get("content-type") || "image/jpeg",
        })

        // Upload to Strapi using the files API
        const result = await this.client_.files.upload(blob, {
          fileInfo: {
            name: filename,
          },
        })
        
        if (result && result[0] && result[0].id) {
          uploadedIds.push(result[0].id)
        }
      } catch (error) {
        this.logger_.error(this.formatStrapiError(error, `Failed to upload image ${imageUrl}`))
      }
    }

    return uploadedIds
  }
}

import { MedusaError } from "@medusajs/framework/utils"

export default class StrapiModuleService {
  // ...
  async deleteImage(imageId: number): Promise<void> {
    try {
      await this.client_.files.delete(imageId)
    } catch (error) {
      throw new MedusaError(
        MedusaError.Types.UNEXPECTED_STATE,
        this.formatStrapiError(error, `Failed to delete image ${imageId} from Strapi`)
      )
    }
  }
}

export enum Collection {
  PRODUCTS = "products",
  PRODUCT_VARIANTS = "product-variants",
  PRODUCT_OPTIONS = "product-options",
  PRODUCT_OPTION_VALUES = "product-option-values",
}

export default class StrapiModuleService {
  // ...
  async create(collection: Collection, data: Record<string, unknown>) {
    try {
      return await this.client_.collection(collection).create(data)
    } catch (error) {
      throw new MedusaError(
        MedusaError.Types.UNEXPECTED_STATE,
        this.formatStrapiError(error, `Failed to create ${collection} in Strapi`)
      )
    }
  }
}

export default class StrapiModuleService {
  // ...
  async update(collection: Collection, id: string, data: Record<string, unknown>) {
    try {
      return await this.client_.collection(collection).update(id, data)
    } catch (error) {
      throw new MedusaError(
        MedusaError.Types.UNEXPECTED_STATE,
        this.formatStrapiError(error, `Failed to update ${collection} in Strapi`)
      )
    }
  }
}

export default class StrapiModuleService {
  // ...
  async delete(collection: Collection, id: string) {
    try {
      return await this.client_.collection(collection).delete(id)
    } catch (error) {
      throw new MedusaError(
        MedusaError.Types.UNEXPECTED_STATE,
        this.formatStrapiError(error, `Failed to delete ${collection} in Strapi`)
      )
    }
  }
}

export default class StrapiModuleService {
  // ...
  async findByMedusaId(
    collection: Collection, 
    medusaId: string, 
    populate?: string[]
  ) {
    try {
      const result = await this.client_.collection(collection).find({
        filters: {
          medusaId: {
            $eq: medusaId,
          },
        },
        populate,
      })

      return result.data[0]
    }
    catch (error) {
      throw new MedusaError(
        MedusaError.Types.UNEXPECTED_STATE,
        this.formatStrapiError(error, `Failed to find ${collection} in Strapi`)
      )
    }
  }
}

import { Module } from "@medusajs/framework/utils"
import StrapiModuleService from "./service"
import initStrapiClientLoader from "./loaders/init-client"

export const STRAPI_MODULE = "strapi"

export default Module(STRAPI_MODULE, {
  service: StrapiModuleService,
  loaders: [initStrapiClientLoader],
})

module.exports = defineConfig({
  // ...
  modules: [
    {
      resolve: "./modules/strapi",
      options: {
        apiUrl: process.env.STRAPI_API_URL || "http://localhost:1337/api",
        apiToken: process.env.STRAPI_API_TOKEN || "",
        defaultLocale: process.env.STRAPI_DEFAULT_LOCALE || "en",
      },
    },
  ],
})

npm run dev

STRAPI_API_URL=http://localhost:1337/api
STRAPI_API_TOKEN=your_generated_api_token

import { defineLink } from "@medusajs/framework/utils"
import ProductModule from "@medusajs/medusa/product"
import { STRAPI_MODULE } from "../modules/strapi"

export default defineLink(
  {
    linkable: ProductModule.linkable.product,
    field: "id",
  },
  {
    linkable: {
      serviceName: STRAPI_MODULE,
      alias: "strapi_product",
      primaryKey: "product_id",
    },
  },
  {
    readOnly: true,
  }
)

export default class StrapiModuleService {
  // ...
  async list(filter: { product_id: string | string[] }) {
    const ids = Array.isArray(filter.product_id) 
      ? filter.product_id 
      : [filter.product_id]
    
    const results: any[] = []
    
    for (const productId of ids) {
      try {
        // Fetch product with all relations populated
        const result = await this.client_.collection("products").find({
          filters: {
            medusaId: {
              $eq: productId,
            },
          },
          populate: {
            variants: {
              populate: ["option_values"],
            },
            options: {
              populate: ["values"],
            },
          },
        })
        
        if (result.data && result.data.length > 0) {
          const product = result.data[0]
          results.push({
            ...product,
            id: `${product.id}`,
            product_id: productId,
            // Include populated relations
            variants: (product.variants || []).map((variant) => ({
              ...variant,
              id: `${variant.id}`,
              option_values: (variant.option_values || []).map((option_value) => ({
                ...option_value,
                id: `${option_value.id}`,
              })),
            })),
            options: (product.options || []).map((option) => ({
              ...option,
              id: `${option.id}`,
              values: (option.values || []).map((value) => ({
                ...value,
                id: `${value.id}`,
              })),
            })),
          })
        }
      } catch (error) {
        this.logger_.warn(this.formatStrapiError(error, `Failed to fetch product ${productId} from Strapi`))
      }
    }
    
    return results
  }
}

import { createStep, StepResponse } from "@medusajs/framework/workflows-sdk"
import { STRAPI_MODULE } from "../../modules/strapi"
import StrapiModuleService, { Collection } from "../../modules/strapi/service"

export type CreateOptionsInStrapiInput = {
  options: {
    id: string
    title: string
    strapiProductId: number
  }[]
}

export const createOptionsInStrapiStep = createStep(
  "create-options-in-strapi",
  async ({ options }: CreateOptionsInStrapiInput, { container }) => {
    const strapiService: StrapiModuleService = container.resolve(STRAPI_MODULE)

    const results: Record<string, any>[] = []

    try {
      for (const option of options) {
        // Create option in Strapi
        const strapiOption = await strapiService.create(
          Collection.PRODUCT_OPTIONS, 
          {
            medusaId: option.id,
            title: option.title,
            product: option.strapiProductId,
          }
        )

        results.push(strapiOption.data)
      }
    } catch (error) {
      // If error occurs during loop,
      // pass results created so far to compensation
      return StepResponse.permanentFailure(
        strapiService.formatStrapiError(
          error, 
          "Failed to create options in Strapi"
        ),
        { results }
      )
    }

    return new StepResponse(
      results,
      results
    )
  },
  async (compensationData, { container }) => {
    if (!compensationData) {
      return
    }

    const strapiService: StrapiModuleService = container.resolve(STRAPI_MODULE)

    // Delete all created options
    for (const result of compensationData) {
      await strapiService.delete(Collection.PRODUCT_OPTIONS, result.documentId)
    }
  }
)

import { createStep, StepResponse } from "@medusajs/framework/workflows-sdk"
import { STRAPI_MODULE } from "../../modules/strapi"
import StrapiModuleService, { Collection } from "../../modules/strapi/service"

export type CreateOptionValuesInStrapiInput = {
  optionValues: {
    id: string
    value: string
    strapiOptionId: number
  }[]
}

export const createOptionValuesInStrapiStep = createStep(
  "create-option-values-in-strapi",
  async ({ optionValues }: CreateOptionValuesInStrapiInput, { container }) => {
    const strapiService: StrapiModuleService = container.resolve(STRAPI_MODULE)

    const results: Record<string, any>[] = []

    try {
      for (const optionValue of optionValues) {
        // Create option value in Strapi
        const strapiOptionValue = await strapiService.create(
          Collection.PRODUCT_OPTION_VALUES,
          {
            medusaId: optionValue.id,
            value: optionValue.value,
            option: optionValue.strapiOptionId,
          }
        )

        results.push(strapiOptionValue.data)
      }
    } catch (error) {
      // If error occurs during loop,
      // pass results created so far to compensation
      return StepResponse.permanentFailure(
        strapiService.formatStrapiError(
          error, 
          "Failed to create option values in Strapi"
        ),
        { results }
      )
    }

    return new StepResponse(
      results,
      results
    )
  },
  async (compensationData, { container }) => {
    if (!compensationData) {
      return
    }

    const strapiService: StrapiModuleService = container.resolve(STRAPI_MODULE)
    
    // Delete all created option values
    for (const result of compensationData) {
      await strapiService.delete(
        Collection.PRODUCT_OPTION_VALUES, 
        result.documentId
      )
    }
  }
)

import { createStep, StepResponse } from "@medusajs/framework/workflows-sdk"
import { Modules } from "@medusajs/framework/utils"
import { ProductOptionValueDTO } from "@medusajs/framework/types"

export type UpdateProductOptionValuesMetadataInput = {
  updates: {
    id: string
    strapiId: number
    strapiDocumentId: string
  }[]
}

export const updateProductOptionValuesMetadataStep = createStep(
  "update-product-option-values-metadata",
  async ({ updates }: UpdateProductOptionValuesMetadataInput, { container }) => {
    const productModuleService = container.resolve(Modules.PRODUCT)

    const updatedOptionValues: ProductOptionValueDTO[] = []

    // Fetch original metadata for compensation
    const originalOptionValues = await productModuleService.listProductOptionValues({ 
      id: updates.map((u) => u.id),
    })

    // Update each option value's metadata
    for (const update of updates) {
      const optionValue = originalOptionValues.find((ov) => ov.id === update.id)
      if (optionValue) {

        const updated = await productModuleService.updateProductOptionValues(
          update.id, 
          {
            metadata: {
              ...optionValue.metadata,
              strapi_id: update.strapiId,
              strapi_document_id: update.strapiDocumentId,
            },
          }
        )

        updatedOptionValues.push(updated)

      }
    }

    return new StepResponse(updatedOptionValues, originalOptionValues)
  },
  async (compensationData, { container }) => {
    if (!compensationData) {
      return
    }

    const productModuleService = container.resolve(Modules.PRODUCT)

    // Restore original metadata
    for (const original of compensationData) {
      await productModuleService.updateProductOptionValues(original.id, {
        metadata: original.metadata,
      })
    }
  }
)

import { 
  createWorkflow, 
  WorkflowResponse,
  transform,
} from "@medusajs/framework/workflows-sdk"
import { createOptionsInStrapiStep } from "./steps/create-options-in-strapi"
import { useQueryGraphStep } from "@medusajs/medusa/core-flows"
import { 
  CreateOptionValuesInStrapiInput, 
  createOptionValuesInStrapiStep,
} from "./steps/create-option-values-in-strapi"
import { 
  updateProductOptionValuesMetadataStep,
} from "./steps/update-product-option-values-metadata"

export type CreateOptionsInStrapiWorkflowInput = {
  ids: string[]
}

export const createOptionsInStrapiWorkflow = createWorkflow(
  "create-options-in-strapi",
  (input: CreateOptionsInStrapiWorkflowInput) => {
    // Fetch the option with all necessary fields
    // including metadata and product metadata
    const { data: options } = useQueryGraphStep({
      entity: "product_option",
      fields: [
        "id",
        "title",
        "product_id",
        "metadata",
        "product.metadata",
        "values.*",
      ],
      filters: {
        id: input.ids,
      },
      options: {
        throwIfKeyNotFound: true,
      },
    })

    // @ts-ignore
    const preparedOptions = transform({ options }, (data) => {
      return data.options.map((option) => ({
        id: option.id,
        title: option.title,
        strapiProductId: Number(option.product?.metadata?.strapi_id),
      }))
    })

    // Pass the prepared option data to the step
    const strapiOptions = createOptionsInStrapiStep({
      options: preparedOptions,
    })
    
    // Extract option values
    const optionValuesData = transform({ options, strapiOptions }, (data) => {
      return data.options.flatMap((option) => {
        return option.values.map((value) => {
          const strapiOption = data.strapiOptions.find(
            (strapiOption) => strapiOption.medusaId === option.id
          )
          if (!strapiOption) {
            return null
          }
          return {
            id: value.id,
            value: value.value,
            strapiOptionId: strapiOption.id,
          }
        })
      })
    })
    
    const strapiOptionValues = createOptionValuesInStrapiStep({
      optionValues: optionValuesData,
    } as CreateOptionValuesInStrapiInput)

    const optionValuesMetadataUpdate = transform({ strapiOptionValues }, (data) => {
      return {
        updates: [
          ...data.strapiOptionValues.map((optionValue) => ({
            id: optionValue.medusaId,
            strapiId: optionValue.id,
            strapiDocumentId: optionValue.documentId,
          })),
        ],
      }
    })

    updateProductOptionValuesMetadataStep(optionValuesMetadataUpdate)

    return new WorkflowResponse({
      strapi_options: strapiOptions,
    })
  }
)

import { createStep, StepResponse } from "@medusajs/framework/workflows-sdk"
import { STRAPI_MODULE } from "../../modules/strapi"
import StrapiModuleService from "../../modules/strapi/service"
import { promiseAll } from "@medusajs/framework/utils"

export type UploadImagesToStrapiInput = {
  items: {
    entity_id: string
    url: string
  }[]
}

export const uploadImagesToStrapiStep = createStep(
  "upload-images-to-strapi",
  async ({ items }: UploadImagesToStrapiInput, { container }) => {
    const strapiService: StrapiModuleService = container.resolve(STRAPI_MODULE)

    const uploadedImages: {
      entity_id: string
      image_id: number
    }[] = []

    try {
      for (const item of items) {
        // Upload image to Strapi
        const uploadedImageId = await strapiService.uploadImages([item.url])
        uploadedImages.push({
          entity_id: item.entity_id,
          image_id: uploadedImageId[0],
        })
      }
    } catch (error) {
      // If error occurs, pass all uploaded files to compensation
      return StepResponse.permanentFailure(
        strapiService.formatStrapiError(
          error, 
          "Failed to upload images to Strapi"
        ),
        { uploadedImages }
      )
    }

    return new StepResponse(
      uploadedImages,
      uploadedImages
    )
  },
  async (compensationData, { container }) => {
    if (!compensationData) {
      return
    }

    const strapiService: StrapiModuleService = container.resolve(STRAPI_MODULE)

    await promiseAll(
      compensationData.map(
        (uploadedImage) => strapiService.deleteImage(uploadedImage.image_id)
      )
    )
  }
)

import { createStep, StepResponse } from "@medusajs/framework/workflows-sdk"
import { STRAPI_MODULE } from "../../modules/strapi"
import StrapiModuleService, { Collection } from "../../modules/strapi/service"

export type CreateVariantsInStrapiInput = {
  variants: {
    id: string
    title: string
    sku?: string
    strapiProductId: number
    optionValueIds?: number[]
    imageIds?: number[]
    thumbnailId?: number
  }[]
}

export const createVariantsInStrapiStep = createStep(
  "create-variants-in-strapi",
  async ({ variants }: CreateVariantsInStrapiInput, { container }) => {
    const strapiService: StrapiModuleService = container.resolve(STRAPI_MODULE)

    const results: Record<string, any>[] = []

    try {
      // Process all variants
      for (const variant of variants) {
        // Create variant in Strapi
        const strapiVariant = await strapiService.create(
          Collection.PRODUCT_VARIANTS, 
          {
            medusaId: variant.id,
            title: variant.title,
            sku: variant.sku,
            product: variant.strapiProductId,
            option_values: variant.optionValueIds || [],
            images: variant.imageIds || [],
            thumbnail: variant.thumbnailId,
          }
        )

        results.push(strapiVariant.data)
      }
    } catch (error) {
      // If error occurs during loop,
      // pass results created so far to compensation
      return StepResponse.permanentFailure(
        strapiService.formatStrapiError(
          error, 
          "Failed to create variants in Strapi"
        ),
        { results }
      )
    }

    return new StepResponse(
      results,
      results
    )
  },
  async (compensationData, { container }) => {
    if (!compensationData) {
      return
    }

    const strapiService: StrapiModuleService = container.resolve(STRAPI_MODULE)
    
    // Delete all created variants
    for (const result of compensationData) {
      await strapiService.delete(Collection.PRODUCT_VARIANTS, result.documentId)
    }
  }
)

import { createStep, StepResponse } from "@medusajs/framework/workflows-sdk"
import { Modules } from "@medusajs/framework/utils"
import { ProductVariantDTO } from "@medusajs/framework/types"

export type UpdateProductVariantsMetadataInput = {
  updates: {
    variantId: string
    strapiId: number
    strapiDocumentId: string
  }[]
}

export const updateProductVariantsMetadataStep = createStep(
  "update-product-variants-metadata",
  async ({ updates }: UpdateProductVariantsMetadataInput, { container }) => {
    const productModuleService = container.resolve(Modules.PRODUCT)

    const updatedVariants: ProductVariantDTO[] = []

    // Fetch original metadata for compensation
    const originalVariants = await productModuleService.listProductVariants({ 
      id: updates.map((u) => u.variantId),
    })

    // Update each variant's metadata
    for (const update of updates) {
      const variant = originalVariants.find((v) => v.id === update.variantId)
      if (variant) {

        const updated = await productModuleService.updateProductVariants(
          update.variantId, 
          {
            metadata: {
              ...variant.metadata,
              strapi_id: update.strapiId,
              strapi_document_id: update.strapiDocumentId,
            },
          }
        )

        updatedVariants.push(updated)

      }
    }

    return new StepResponse(updatedVariants, originalVariants)
  },
  async (compensationData, { container }) => {
    if (!compensationData) {
      return
    }

    const productModuleService = container.resolve(Modules.PRODUCT)

    // Restore original metadata
    for (const original of compensationData) {
      await productModuleService.updateProductVariants(original.id, {
        metadata: original.metadata,
      })
    }
  }
)

import { 
  createWorkflow, 
  WorkflowResponse,
  transform,
  when,
} from "@medusajs/framework/workflows-sdk"
import { acquireLockStep, releaseLockStep, useQueryGraphStep } from "@medusajs/medusa/core-flows"
import { CreateVariantsInStrapiInput } from "./steps/create-variants-in-strapi"
import { createVariantsInStrapiStep } from "./steps/create-variants-in-strapi"
import { uploadImagesToStrapiStep } from "./steps/upload-images-to-strapi"
import { updateProductVariantsMetadataStep } from "./steps/update-product-variants-metadata"

export type CreateVariantsInStrapiWorkflowInput = {
  ids: string[]
  productId: string
}

export const createVariantsInStrapiWorkflow = createWorkflow(
  "create-variants-in-strapi",
  (input: CreateVariantsInStrapiWorkflowInput) => {
    acquireLockStep({
      key: ["strapi-product-create", input.productId],
    })
    // Fetch the variant with all necessary fields including option values
    const { data: variants } = useQueryGraphStep({
      entity: "product_variant",
      fields: [
        "id",
        "title",
        "sku",
        "product_id",
        "product.metadata",
        "product.options.id",
        "product.options.values.id",
        "product.options.values.value",
        "product.options.values.metadata",
        "product.strapi_product.*",
        "images.*",
        "thumbnail",
        "options.*",
      ],
      filters: {
        id: input.ids,
      },
      options: {
        throwIfKeyNotFound: true,
      },
    })

    const strapiVariants = when({ 
      variants,
    }, (data) => !!(data.variants[0].product as any)?.strapi_product)
      .then(() => {
        const variantImages = transform({ 
          variants,
        }, (data) => {
          return data.variants.flatMap((variant) => variant.images?.map(
            (image) => ({
              entity_id: variant.id,
              url: image.url,
            })
          ) || [])
        })
        const variantThumbnail = transform({ 
          variants,
        }, (data) => {
          return data.variants
          // @ts-ignore
          .filter((variant) => !!variant.thumbnail)
          .flatMap((variant) => ({
            entity_id: variant.id,
            // @ts-ignore
            url: variant.thumbnail!,
          }))
        })
    
        const strapiVariantImages = uploadImagesToStrapiStep({
          items: variantImages,
        })
    
        const strapiVariantThumbnail = uploadImagesToStrapiStep({
          items: variantThumbnail,
        }).config({ name: "upload-variant-thumbnail" })
    
        const variantsData = transform({ 
          variants, 
          strapiVariantImages, 
          strapiVariantThumbnail,
        }, (data) => {
          const varData = data.variants.map((variant) => ({
            id: variant.id,
            title: variant.title,
            sku: variant.sku,
            strapiProductId: Number(variant.product?.metadata?.strapi_id),
            strapiVariantImages: data.strapiVariantImages
              .filter((image) => image.entity_id === variant.id)
              .map((image) => image.image_id),
            strapiVariantThumbnail: data.strapiVariantThumbnail
              .find((image) => image.entity_id === variant.id)?.image_id,
            optionValueIds: variant.options.flatMap((option) => {
              // find the strapi option value id for the option value
              return variant.product?.options.flatMap(
                (productOption) => productOption.values.find(
                  (value) => value.value === option.value
                )?.metadata?.strapi_id).filter((value) => value !== undefined)
            }),
          }))

          return varData
        })
    
        const strapiVariants = createVariantsInStrapiStep({
          variants: variantsData,
        } as CreateVariantsInStrapiInput)
    
        const variantsMetadataUpdate = transform({ strapiVariants }, (data) => {
          return {
            updates: data.strapiVariants.map((strapiVariant) => ({
              variantId: strapiVariant.medusaId,
              strapiId: strapiVariant.id,
              strapiDocumentId: strapiVariant.documentId,
            })),
          }
        })
    
        updateProductVariantsMetadataStep(variantsMetadataUpdate)

        return strapiVariants
      })

    releaseLockStep({
      key: ["strapi-product-create", input.productId],
    })

    return new WorkflowResponse({
      variants: strapiVariants,
    })
  }
)

import { createStep, StepResponse } from "@medusajs/framework/workflows-sdk"
import { STRAPI_MODULE } from "../../modules/strapi"
import StrapiModuleService, { Collection } from "../../modules/strapi/service"

export type CreateProductInStrapiInput = {
  product: {
    id: string
    title: string
    subtitle?: string
    description?: string
    handle: string
    imageIds?: number[]
    thumbnailId?: number
  }
}

export const createProductInStrapiStep = createStep(
  "create-product-in-strapi",
  async ({ product }: CreateProductInStrapiInput, { container }) => {
    const strapiService: StrapiModuleService = container.resolve(STRAPI_MODULE)

    // Create product in Strapi
    const strapiProduct = await strapiService.create(Collection.PRODUCTS, {
      medusaId: product.id,
      title: product.title,
      subtitle: product.subtitle,
      description: product.description,
      handle: product.handle,
      images: product.imageIds || [],
      thumbnail: product.thumbnailId,
    })

    return new StepResponse(
      strapiProduct.data,
      strapiProduct.data
    )
  },
  async (compensationData, { container }) => {
    if (!compensationData) {
      return
    }

    const strapiService: StrapiModuleService = container.resolve(STRAPI_MODULE)

    // Delete the product
    await strapiService.delete(Collection.PRODUCTS, compensationData.documentId)
  }
)

import { 
  createWorkflow, 
  WorkflowResponse,
  transform,
  when,
} from "@medusajs/framework/workflows-sdk"
import { 
  CreateProductInStrapiInput, 
  createProductInStrapiStep,
} from "./steps/create-product-in-strapi"
import { uploadImagesToStrapiStep } from "./steps/upload-images-to-strapi"
import { 
  useQueryGraphStep, 
  updateProductsWorkflow, 
  acquireLockStep, 
  releaseLockStep,
} from "@medusajs/medusa/core-flows"
import { createOptionsInStrapiWorkflow } from "./create-options-in-strapi"
import { createVariantsInStrapiWorkflow } from "./create-variants-in-strapi"

export type CreateProductInStrapiWorkflowInput = {
  id: string
}

export const createProductInStrapiWorkflow = createWorkflow(
  "create-product-in-strapi",
  (input: CreateProductInStrapiWorkflowInput) => {
    acquireLockStep({
      key: ["strapi-product-create", input.id],
      timeout: 60,
    })
    const { data: products } = useQueryGraphStep({
      entity: "product",
      fields: [
        "id",
        "title",
        "subtitle",
        "description",
        "handle",
        "images.url",
        "thumbnail",
        "variants.id",
        "options.id",
      ],
      filters: {
        id: input.id,
      },
      options: {
        throwIfKeyNotFound: true,
      },
    })

    const productImages = transform({ products }, (data) => {
      return data.products[0].images.map((image) => {
        return {
          entity_id: data.products[0].id,
          url: image.url,
        }
      })
    })

    const strapiProductImages = uploadImagesToStrapiStep({
      items: productImages,
    })

    const strapiProductThumbnail = when(
      ({ products }), 
      // @ts-ignore
      (data) => !!data.products[0].thumbnail
    ).then(() => {
      return uploadImagesToStrapiStep({
        items: [{
          entity_id: products[0].id,
          url: products[0].thumbnail!,
        }],
      }).config({ name: "upload-product-thumbnail" })
    })

    const productWithImages = transform(
      { strapiProductImages, strapiProductThumbnail, products },
      (data) => {
        return {
          id: data.products[0].id,
          title: data.products[0].title,
          subtitle: data.products[0].subtitle,
          description: data.products[0].description,
          handle: data.products[0].handle,
          imageIds: data.strapiProductImages.map((image) => image.image_id),
          thumbnailId: data.strapiProductThumbnail?.[0]?.image_id,
        }
      }
    )

    const strapiProduct = createProductInStrapiStep({
      product: productWithImages,
    } as CreateProductInStrapiInput)

    const productMetadataUpdate = transform({ strapiProduct }, (data) => {
      return {
        selector: { id: data.strapiProduct.medusaId },
        update: {
          metadata: {
            strapi_id: data.strapiProduct.id,
            strapi_document_id: data.strapiProduct.documentId,
          },
        },
      }
    })

    updateProductsWorkflow.runAsStep({
      input: productMetadataUpdate,
    })

    const variantIds = transform({ 
      products,
    }, (data) => data.products[0].variants.map((variant) => variant.id))
    const optionIds = transform({
      products,
    }, (data) => data.products[0].options.map((option) => option.id))

    createOptionsInStrapiWorkflow.runAsStep({
      input: {
        ids: optionIds,
      },
    })

    releaseLockStep({
      key: ["strapi-product-create", input.id],
    })

    createVariantsInStrapiWorkflow.runAsStep({
      input: {
        ids: variantIds,
        productId: input.id,
      },
    })

    return new WorkflowResponse(strapiProduct)
  }
)

import {
  type SubscriberConfig,
  type SubscriberArgs,
} from "@medusajs/framework"
import { createProductInStrapiWorkflow } from "../workflows/create-product-in-strapi"

export default async function productCreatedStrapiSyncHandler({
  event: { data },
  container,
}: SubscriberArgs<{ id: string }>) {
  await createProductInStrapiWorkflow(container).run({
    input: {
      id: data.id,
    },
  })
}

export const config: SubscriberConfig = {
  event: "product.created",
}

npm run develop

npm run dev

info:    Processing product.created which has 1 subscribers

import { createStep, StepResponse } from "@medusajs/framework/workflows-sdk"

export const prepareStrapiUpdateDataStep = createStep(
  "prepare-strapi-update-data",
  async ({ entry }: { entry: any }) => {
    let data: Record<string, unknown> = {}
    const model = entry.model

    switch (model) {
      case "product":
        data = {
          id: entry.entry.medusaId,
          title: entry.entry.title,
          subtitle: entry.entry.subtitle,
          description: entry.entry.description,
          handle: entry.entry.handle,
        }
        break
      case "product-variant":
        data = {
          id: entry.entry.medusaId,
          title: entry.entry.title,
          sku: entry.entry.sku,
        }
        break
      case "product-option":
        data = {
          selector: {
            id: entry.entry.medusaId,
          },
          update: {
            title: entry.entry.title,
          },
        }
        break
      case "product-option-value":
        data = {
          optionValueId: entry.entry.medusaId,
          value: entry.entry.value,
        }
        break
    }

    return new StepResponse({ data, model })
  }
)

import { createStep, StepResponse } from "@medusajs/framework/workflows-sdk"
import { Modules } from "@medusajs/framework/utils"

type ClearProductCacheInput = {
  productId: string | string[]
}

export const clearProductCacheStep = createStep(
  "clear-product-cache",
  async ({ productId }: ClearProductCacheInput, { container }) => {
    const cachingModuleService = container.resolve(Modules.CACHING)

    const productIds = Array.isArray(productId) ? productId : [productId]

    // Clear cache for all specified products
    for (const id of productIds) {
      if (id) {
        await cachingModuleService.clear({
          tags: [`Product:${id}`],
        })
      }
    }

    return new StepResponse({})
  }
)

import { createStep, StepResponse } from "@medusajs/framework/workflows-sdk"
import { Modules } from "@medusajs/framework/utils"
import { IProductModuleService } from "@medusajs/framework/types"

type UpdateProductOptionValueInput = {
  id: string
  value: string
}

export const updateProductOptionValueStep = createStep(
  "update-product-option-value",
  async ({ id, value }: UpdateProductOptionValueInput, { container }) => {
    const productModuleService: IProductModuleService = container.resolve(
      Modules.PRODUCT
    )

    // Store the old value for compensation
    const oldOptionValue = await productModuleService
      .retrieveProductOptionValue(id)

    // Update the option value
    const updatedOptionValue = await productModuleService
      .updateProductOptionValues(
        id,
        {
          value,
        }
      )

    return new StepResponse(updatedOptionValue, oldOptionValue)
  },
  async (compensateData, { container }) => {
    if (!compensateData) {
      return
    }

    const productModuleService: IProductModuleService = container.resolve(
      Modules.PRODUCT
    )

    // Revert the option value to its old value
    await productModuleService.updateProductOptionValues(
      compensateData.id,
      {
        value: compensateData.value,
      }
    )
  }
)

import { 
  createWorkflow, 
  when,
  transform,
} from "@medusajs/framework/workflows-sdk"
import { useQueryGraphStep } from "@medusajs/medusa/core-flows"
import { prepareStrapiUpdateDataStep } from "./steps/prepare-strapi-update-data"
import { clearProductCacheStep } from "./steps/clear-product-cache"
import { updateProductOptionValueStep } from "./steps/update-product-option-value"
import { 
  updateProductsWorkflow, 
  updateProductVariantsWorkflow, 
  updateProductOptionsWorkflow,
} from "@medusajs/medusa/core-flows"
import { 
  UpsertProductDTO, 
  UpsertProductVariantDTO,
} from "@medusajs/framework/types"

export type WorkflowInput = {
  entry: any
}

export const handleStrapiWebhookWorkflow = createWorkflow(
  "handle-strapi-webhook-workflow",
  (input: WorkflowInput) => {
    const preparedData = prepareStrapiUpdateDataStep({
      entry: input.entry,
    })

    when(input, (input) => input.entry.model === "product")
      .then(() => {
        updateProductsWorkflow.runAsStep({
          input: {
            products: [preparedData.data as unknown as UpsertProductDTO],
          },
        })

        // Clear the product cache after update
        const productId = transform({ preparedData }, (data) => {
          return (data.preparedData.data as any).id
        })

        clearProductCacheStep({ productId })
      })

    when(input, (input) => input.entry.model === "product-variant")
      .then(() => {
        const variants = updateProductVariantsWorkflow.runAsStep({
          input: {
            product_variants: [
              preparedData.data as unknown as UpsertProductVariantDTO,
            ],
          },
        })

        clearProductCacheStep({ 
          productId: variants[0].product_id!,
        }).config({ name: "clear-product-cache-variant" })
      })

    when(input, (input) => input.entry.model === "product-option")
      .then(() => {
        const options = updateProductOptionsWorkflow.runAsStep({
          input: preparedData.data as any,
        })

        clearProductCacheStep({ 
          productId: options[0].product_id!,
        }).config({ name: "clear-product-cache-option" })
      })

    when(input, (input) => input.entry.model === "product-option-value")
      .then(() => {
        // Update the option value using the Product Module
        const optionValueData = transform({ preparedData }, (data) => ({
          id: data.preparedData.data.optionValueId as string,
          value: data.preparedData.data.value as string,
        }))

        updateProductOptionValueStep(optionValueData)

        // Find all variants that use this option value to
        // clear their product cache
        const { data: variants } = useQueryGraphStep({
          entity: "product_variant",
          fields: [
            "id",
            "product_id",
          ],
          filters: {
            options: {
              id: preparedData.data.optionValueId as string,
            },
          },
        }).config({ name: "get-variants-from-option-value" })

        // Clear the product cache for all affected products
        const productIds = transform({ variants }, (data) => {
          const uniqueProductIds = [
            ...new Set(data.variants.map((v) => v.product_id)),
          ]
          return uniqueProductIds as string[]
        })

        clearProductCacheStep({ 
          productId: productIds,
        }).config({ name: "clear-product-cache-option-value" })
      })
  }
)

import { MedusaRequest, MedusaResponse } from "@medusajs/framework/http"
import { simpleHash, Modules } from "@medusajs/framework/utils"
import { 
  handleStrapiWebhookWorkflow, 
  WorkflowInput,
} from "../../../workflows/handle-strapi-webhook"

export const POST = async (
  req: MedusaRequest,
  res: MedusaResponse
) => {
  const body = req.body as Record<string, unknown>
  const logger = req.scope.resolve("logger")
  const cachingService = req.scope.resolve(Modules.CACHING)
  
  // Generate a hash of the webhook payload to detect duplicates
  const payloadHash = simpleHash(JSON.stringify(body))
  const cacheKey = `strapi-webhook:${payloadHash}`
  
  // Check if we've already processed this webhook
  const alreadyProcessed = await cachingService.get({ key: cacheKey })
  
  if (alreadyProcessed) {
    logger.debug(`Webhook already processed (hash: ${payloadHash}), skipping to prevent infinite loop`)
    res.status(200).send("OK - Already processed")
    return
  }
  
  if (body.event === "entry.update") {
    const entry = body.entry as Record<string, unknown>
    const entityCacheKey = `strapi-update:${body.model}:${entry.medusaId}`
    await cachingService.set({
      key: entityCacheKey,
      data: { status: "processing", timestamp: Date.now() },
      ttl: 10,
    })
    
    await handleStrapiWebhookWorkflow(req.scope).run({
      input: {
        entry: body,
      } as WorkflowInput,
    })
    
    // Cache the hash to prevent reprocessing (TTL: 60 seconds)
    await cachingService.set({
      key: cacheKey,
      data: { status: "processed", timestamp: Date.now() },
      ttl: 60,
    })
    logger.debug(`Webhook processed and cached (hash: ${payloadHash})`)
  }

  res.status(200).send("OK")
}

import { 
  defineMiddlewares, 
  MedusaNextFunction, 
  MedusaRequest, 
  MedusaResponse,
} from "@medusajs/framework/http"
import { Modules } from "@medusajs/framework/utils"

export default defineMiddlewares({
  routes: [
    {
      matcher: "/webhooks/strapi",
      middlewares: [
        async (
          req: MedusaRequest,
          res: MedusaResponse,
          next: MedusaNextFunction
        ) => {
          const apiKeyModuleService = req.scope.resolve(
            Modules.API_KEY
          )
          
          // Extract Bearer token from Authorization header
          const authHeader = req.headers["authorization"]
          const apiKey = authHeader?.replace("Bearer ", "")
          
          if (!apiKey) {
            return res.status(401).json({
              message: "Unauthorized: Missing API key",
            })
          }
          
          try {
            // Validate the API key using Medusa's API Key Module
            const isValid = await apiKeyModuleService.authenticate(apiKey)
            
            if (!isValid) {
              return res.status(401).json({
                message: "Unauthorized: Invalid API key",
              })
            }
            
            // API key is valid, proceed to route handler
            next()
          } catch (error) {
            return res.status(401).json({
              message: "Unauthorized: API key authentication failed",
            })
          }
        },
      ],
    },
  ],
})

module.exports = defineConfig({
  // ...
  modules: [
    // ...
    {
      resolve: "@medusajs/medusa/caching",
      options: {
        providers: [
          {
            resolve: "@medusajs/caching-redis",
            id: "caching-redis",
            options: {
              redisUrl: process.env.REDIS_URL,
            },
          },
        ],
      },
    },
  ],
  featureFlags: {
    caching: true,
  },
})

REDIS_URL=redis://localhost:6379

http:    POST /webhooks/strapi ← - (200) - 153.264 ms

cd apps/storefront

export const listProducts = async ({
  // ...
}: {
  // ...
}): Promise<{
  // ...
}> => {
  // ...

  return sdk.client
    .fetch<{ products: HttpTypes.StoreProduct[]; count: number }>(
      `/store/products`,
      {
        query: {
          fields:
            "*variants.calculated_price,+variants.inventory_quantity,*variants.images,+metadata,+tags,*strapi_product",
          // ...
        },
        // ...
      }
    )
  // ...
}

export interface StrapiMedia {
  id: number
  url: string
  alternativeText?: string
  caption?: string
  width?: number
  height?: number
  formats?: {
    thumbnail?: { url: string; width: number; height: number }
    small?: { url: string; width: number; height: number }
    medium?: { url: string; width: number; height: number }
    large?: { url: string; width: number; height: number }
  }
}

export interface StrapiProductOptionValue {
  id: number
  medusaId: string
  value: string
  locale: string
  option?: StrapiProductOption
  variants?: StrapiProductVariant[]
}

export interface StrapiProductOption {
  id: number
  medusaId: string
  title: string
  locale: string
  product?: StrapiProduct
  values?: StrapiProductOptionValue[]
}

export interface StrapiProductVariant {
  id: number
  medusaId: string
  title: string
  sku?: string
  locale: string
  product?: StrapiProduct
  option_values?: StrapiProductOptionValue[]
  images?: StrapiMedia[]
  thumbnail?: StrapiMedia
}

export interface StrapiProduct {
  id: number
  medusaId: string
  title: string
  subtitle?: string
  description?: string
  handle: string
  images?: StrapiMedia[]
  thumbnail?: StrapiMedia
  locale: string
  variants?: StrapiProductVariant[]
  options?: StrapiProductOption[]
}

import { HttpTypes } from "@medusajs/types"
import {
  StrapiProduct,
  StrapiMedia,
} from "../../types/strapi"

/**
 * Get Strapi product data from a Medusa product
 */
export function getStrapiProduct(
  product: HttpTypes.StoreProduct
): StrapiProduct | undefined {
  return (product as any).strapi_product as StrapiProduct | undefined
}

/**
 * Get product title from Strapi, fallback to Medusa
 */
export function getProductTitle(
  product: HttpTypes.StoreProduct
): string {
  const strapiProduct = getStrapiProduct(product)
  return strapiProduct?.title || product.title || ""
}

/**
 * Get product subtitle from Strapi
 */
export function getProductSubtitle(
  product: HttpTypes.StoreProduct
): string | undefined {
  const strapiProduct = getStrapiProduct(product)
  return strapiProduct?.subtitle
}

/**
 * Get product description from Strapi, fallback to Medusa
 */
export function getProductDescription(
  product: HttpTypes.StoreProduct
): string | null {
  const strapiProduct = getStrapiProduct(product)
  if (strapiProduct?.description) {
    // Strapi richtext is typically stored as a string or structured data
    // For now, we'll handle it as a string. You may need to parse it based on your Strapi configuration
    return typeof strapiProduct.description === "string"
      ? strapiProduct.description
      : JSON.stringify(strapiProduct.description)
  }
  return product.description
}

/**
 * Get product thumbnail from Strapi, fallback to Medusa
 */
export function getProductThumbnail(
  product: HttpTypes.StoreProduct
): string | null {
  const strapiProduct = getStrapiProduct(product)
  
  if (strapiProduct?.thumbnail?.url) {
    return strapiProduct.thumbnail.url
  }
  
  return product.thumbnail || null
}

/**
 * Get product images from Strapi, fallback to Medusa
 */
export function getProductImages(
  product: HttpTypes.StoreProduct
): HttpTypes.StoreProductImage[] {
  const strapiProduct = getStrapiProduct(product)
  
  if (strapiProduct?.images && strapiProduct.images.length > 0) {
    // Convert Strapi media to Medusa product image format
    return strapiProduct.images.map((image: StrapiMedia, index: number) => ({
      id: image.id.toString(),
      url: image.url,
      metadata: {
        alt: image.alternativeText || `Product image ${index + 1}`,
      },
      rank: index + 1,
    })) as HttpTypes.StoreProductImage[]
  }
  
  return product.images || []
}

/**
 * Get variant title from Strapi, fallback to Medusa
 */
export function getVariantTitle(
  variant: HttpTypes.StoreProductVariant,
  product: HttpTypes.StoreProduct
): string {
  const strapiProduct = getStrapiProduct(product)
  const strapiVariant = strapiProduct?.variants?.find(
    (v) => v.medusaId === variant.id
  )
  return strapiVariant?.title || variant.title || ""
}

/**
 * Get option title from Strapi, fallback to Medusa
 */
export function getOptionTitle(
  option: HttpTypes.StoreProductOption,
  product: HttpTypes.StoreProduct
): string {
  const strapiProduct = getStrapiProduct(product)
  const strapiOption = strapiProduct?.options?.find(
    (o) => o.medusaId === option.id
  )
  return strapiOption?.title || option.title || ""
}

/**
 * Get option value text from Strapi, fallback to Medusa
 */
export function getOptionValueText(
  optionValue: { id: string; option_id: string; value: string },
  product: HttpTypes.StoreProduct
): string {
  const strapiProduct = getStrapiProduct(product)
  const strapiOption = strapiProduct?.options?.find(
    (o) => o.medusaId === optionValue.option_id
  )
  const strapiOptionValue = strapiOption?.values?.find(
    (v) => v.medusaId === optionValue.id
  )
  return strapiOptionValue?.value || optionValue.value
}

/**
 * Get all option values for a variant with Strapi labels
 */
export function getVariantOptionValues(
  variant: HttpTypes.StoreProductVariant,
  product: HttpTypes.StoreProduct
): Array<{ optionTitle: string; value: string }> {
  if (!variant.options || variant.options.length === 0) {
    return []
  }

  return variant.options
    .filter((opt) => opt.option_id && opt.id)
    .map((opt) => {
      const option = product.options?.find((o) => o.id === opt.option_id)
      const optionTitle = option
        ? getOptionTitle(option, product)
        : ""
      const value = getOptionValueText(
        { id: opt.id, option_id: opt.option_id!, value: opt.value! },
        product
      )
      return { optionTitle, value }
    })
    .filter((opt) => opt.optionTitle && opt.value)
}

/**
 * Get images for a specific variant from Strapi
 */
export function getVariantImages(
  variant: HttpTypes.StoreProductVariant,
  product: HttpTypes.StoreProduct
): HttpTypes.StoreProductImage[] {
  const strapiProduct = getStrapiProduct(product)
  const strapiVariant = strapiProduct?.variants?.find(
    (v) => v.medusaId === variant.id
  )
  
  // If variant has specific images in Strapi, use those
  if (strapiVariant?.images && strapiVariant.images.length > 0) {
    return strapiVariant.images.map((image: StrapiMedia, index: number) => ({
      id: image.id.toString(),
      url: image.url,
      metadata: {
        alt: image.alternativeText || `Variant image ${index + 1}`,
      },
      rank: index + 1,
    })) as HttpTypes.StoreProductImage[]
  }
  
  // Fall back to Medusa variant images
  if ((variant as any).images && (variant as any).images.length > 0) {
    return (variant as any).images
  }
  
  // Finally, fall back to product images
  return getProductImages(product)
}

import { 
  getProductTitle, 
  getProductImages, 
  getProductThumbnail,
} from "@lib/util/strapi"

const title = getProductTitle(product)
const images = getProductImages(product)
const thumbnail = getProductThumbnail(product) || product.thumbnail

return (
  <LocalizedClientLink href={`/products/${product.handle}`} className="group">
    <div data-testid="product-wrapper">
      <Thumbnail
        thumbnail={thumbnail}
        images={images}
        size="full"
        isFeatured={isFeatured}
      />
      <div className="flex txt-compact-medium mt-4 justify-between">
        <Text className="text-ui-fg-subtle" data-testid="product-title">
          {title}
        </Text>
        <div className="flex items-center gap-x-2">
          {cheapestPrice && <PreviewPrice price={cheapestPrice} />}
        </div>
      </div>
    </div>
  </LocalizedClientLink>
)

import {
  getProductImages,
  getVariantImages,
  getProductTitle,
  getProductSubtitle,
  getProductThumbnail,
} from "@lib/util/strapi"
import { StrapiMedia } from "../../../../../types/strapi"

function getImagesForVariant(
  product: HttpTypes.StoreProduct,
  selectedVariantId?: string
) {
  // Get Strapi images or fallback to Medusa images
  const productImages = getProductImages(product)

  if (!selectedVariantId || !product.variants) {
    return productImages
  }

  const variant = product.variants!.find((v) => v.id === selectedVariantId)
  if (!variant) {
    return productImages
  }

  // Get variant images from Strapi or fallback to Medusa
  const variantImages = getVariantImages(variant, product)
  
  // If variant has specific images, use those; otherwise use product images
  if (
    variantImages.length > 0 && 
    (variant as any).images && 
    (variant as any).images.length > 0
  ) {
    const imageIdsMap = new Map((variant as any)
      .images.map((i: StrapiMedia) => [i.id, true]))
    return productImages.filter((i) => imageIdsMap.has(i.id))
  }

  return productImages
}

const title = getProductTitle(product)
const subtitle = getProductSubtitle(product)
const thumbnail = getProductThumbnail(product) || product.thumbnail

return {
  title: `${title} | Medusa Store`,
  description: subtitle || title,
  openGraph: {
    title: `${title} | Medusa Store`,
    description: subtitle || title,
    images: thumbnail ? [thumbnail] : [],
  },
}

npm install react-markdown

import {
  getProductTitle,
  getProductDescription,
} from "@lib/util/strapi"
import Markdown from "react-markdown"

const title = getProductTitle(product)
const description = getProductDescription(product)

return (
  <div id="product-info">
    <Heading
      // ...
    >
      {title}
    </Heading>
  </div>
)

<div
  className="text-medium text-ui-fg-subtle whitespace-pre-line"
  data-testid="product-description"
>
  <Markdown 
    allowedElements={[
      "p", "ul", "ol", "li", "strong", "em", "blockquote", "hr", "br", "a",
    ]}
    unwrapDisallowed
  >
    {description}
  </Markdown>
</div>

import { HttpTypes } from "@medusajs/types"
import { clx } from "@medusajs/ui"
import React from "react"
import { getOptionValueText } from "@lib/util/strapi"

type OptionSelectProps = {
  option: HttpTypes.StoreProductOption
  current: string | undefined
  updateOption: (title: string, value: string) => void
  title: string
  product: HttpTypes.StoreProduct
  disabled: boolean
  "data-testid"?: string
}

const OptionSelect: React.FC<OptionSelectProps> = ({
  option,
  current,
  updateOption,
  title,
  product,
  "data-testid": dataTestId,
  disabled,
}) => {
  const filteredOptions = (option.values ?? []).map((v) => ({
    originalValue: v.value,
    displayValue: getOptionValueText(
      { id: v.id, option_id: option.id, value: v.value },
      product
    ),
  }))

  return (
    <div className="flex flex-col gap-y-3">
      <span className="text-sm">Select {title}</span>
      <div
        className="flex flex-wrap justify-between gap-2"
        data-testid={dataTestId}
      >
        {filteredOptions.map(({ originalValue, displayValue }) => {
          return (
            <button
              onClick={() => updateOption(option.id, originalValue)}
              key={originalValue}
              className={clx(
                "border-ui-border-base bg-ui-bg-subtle border text-small-regular h-10 rounded-rounded p-2 flex-1 ",
                {
                  "border-ui-border-interactive": originalValue === current,
                  "hover:shadow-elevation-card-rest transition-shadow ease-in-out duration-150":
                    originalValue !== current,
                }
              )}
              disabled={disabled}
              data-testid="option-button"
            >
              {displayValue}
            </button>
          )
        })}
      </div>
    </div>
  )
}

export default OptionSelect

import { getOptionTitle } from "@lib/util/strapi"

return (
  <>
    {(product.options || []).map((option) => {
      const optionTitle = getOptionTitle(option, product)
      return (
        <div key={option.id}>
          <OptionSelect
            option={option}
            current={options[option.id]}
            updateOption={setOptionValue}
            title={optionTitle}
            product={product}
            data-testid="product-options"
            disabled={!!disabled || isAdding}
          />
        </div>
      )
    })}
  </>
)

import { getProductTitle, getOptionTitle } from "@lib/util/strapi"

return (
  <>
    <span data-testid="mobile-title">{getProductTitle(product)}</span>
  </>
)

return (
  <>
    {(product.options || []).map((option) => {
      const optionTitle = getOptionTitle(option, product)
      return (
        <div key={option.id}>
          <OptionSelect
            option={option}
            current={options[option.id]}
            updateOption={updateOptions}
            title={optionTitle}
            product={product}
            disabled={optionsDisabled}
          />
        </div>
      )
    })}
  </>
)

import { HttpTypes } from "@medusajs/types"
import { Text } from "@medusajs/ui"
import { getVariantTitle, getVariantOptionValues } from "@lib/util/strapi"

type LineItemOptionsProps = {
  variant: HttpTypes.StoreProductVariant | undefined
  product?: HttpTypes.StoreProduct
  "data-testid"?: string
  "data-value"?: HttpTypes.StoreProductVariant
}

const LineItemOptions = ({
  variant,
  product,
  "data-testid": dataTestid,
  "data-value": dataValue,
}: LineItemOptionsProps) => {
  if (!variant) {
    return null
  }

  // Get product from variant if not provided
  const productData = product || (variant as any).product

  // Get variant title from Strapi
  const variantTitle = productData
    ? getVariantTitle(variant, productData)
    : variant.title

  // Get option values from Strapi
  const optionValues = productData
    ? getVariantOptionValues(variant, productData)
    : []

  // If we have option values, show them; otherwise show variant title
  if (optionValues.length > 0) {
    const displayText = optionValues
      .map((opt) => `${opt.optionTitle}: ${opt.value}`)
      .join(" / ")

    return (
      <Text
        data-testid={dataTestid}
        data-value={dataValue}
        className="inline-block txt-medium text-ui-fg-subtle w-full overflow-hidden text-ellipsis"
      >
        {displayText}
      </Text>
    )
  }

  return (
    <Text
      data-testid={dataTestid}
      data-value={dataValue}
      className="inline-block txt-medium text-ui-fg-subtle w-full overflow-hidden text-ellipsis"
    >
      Variant: {variantTitle}
    </Text>
  )
}

export default LineItemOptions

return (
  <Table.Row>
    <LineItemOptions
      variant={item.variant}
      product={item.variant?.product!}
      data-testid="product-variant"
    />
  </Table.Row>
)

return (
  <div>
    <LineItemOptions
      variant={item.variant}
      product={item.variant?.product!}
      data-testid="cart-item-variant"
      data-value={item.variant}
    />
  </div>
)

return (
  <Table.Row>
    <LineItemOptions
      variant={item.variant}
      product={item.variant?.product!}
      data-testid="product-variant"
    />
  </Table.Row>
)

npm run dev