여러 공급업체가 있는 Medusa 매장

Medusa는 Shopify와 같은 많은 강력한 전자 상거래 기능 및 확장 기능을 제공하는 오픈 소스 프로젝트입니다. 저는 Medusa Dev 커뮤니티에서 매우 뛰어난 엔지니어인 Shahed Nasser의 공유를 따릅니다. 그러나 medusa-extender 을 사용한 백엔드 수정에 대해서만 표시되며 프런트엔드 측면의 변경은 포함되지 않습니다.

그래서 스토어 프런트엔드 부분을 수정하는 방법을 알아보기 시작했지만 먼저 모든 공급업체에 대한 원본 API를 사용자 지정해야 합니다.

처음에는 .

둘째, 아래와 같이 store.router.ts 파일을 추가합니다. 어디에서 모든 공급업체에 대한 클라이언트 API '/store/products'를 개선했습니다.

import { MedusaAuthenticatedRequest, Router } from 'medusa-extender';
import { Response, NextFunction } from "express";
import { User } from '../../user/entities/user.entity';

@Router({
    routes: [{
        requiredAuth: false,
        path: '/store/products',
        method: 'get',
        handlers: [
            async (req: MedusaAuthenticatedRequest, res: Response, next: NextFunction): Promise<Response<User[]>> => {
                const productService = req.scope.resolve("productService")
                const resProducts = await productService.list({},
                    {
                        relations: [
                            "variants",
                            "variants.prices",
                            "variants.options",
                            "options",
                            "options.values",
                            "images",
                            "tags",
                            "collection",
                            "type",
                        ],
                    });
                return res.send({
                    "products": resProducts,
                    "count": resProducts.length,
                    "offset": 0,
                    "limit": 100
                });
            }
        ]
    }] 
})
export class StoreRouter {}

그런 다음 store.module.ts에 StoreRouter를 추가합니다.

@Module({
    imports: [Store, StoreRepository, StoreService, StoreRouter],
})

product.service.ts에서 loggingInUser 조건을 건너뛰는 쉬운 방법을 사용하면 제품 목록이 모든 공급업체에 대한 쿼리로 변경됩니다. 까다로워 보이지만 멀티 벤더를 실행 가능하게 만드는 다른 옵션을 얻지 못했습니다.

    prepareListQuery_(selector: object, config: object): object {
        /*const loggedInUser = this.container.loggedInUser
        if (loggedInUser) {
            selector['store_id'] = loggedInUser.store_id // this is for one store
        }*/

        return super.prepareListQuery_(selector, config);
    }

로컬 환경에서 백엔드를 다시 빌드하고 시작하십시오. 우편 배달부에서 새 공급업체를 생성해 보십시오.


이 공급업체에 인증한 다음 새 제품을 만듭니다.


결국 모든 클라이언트는 클라이언트가 아직 로그인하지 않았더라도 새 벤더가 만든 새 제품을 포함한 모든 제품을 쿼리할 수 있습니다.


어려운 부분은 스토어 프런트엔드 수정입니다. 내 스토어 프런트엔드에 Medusa Gatsby Starter을 사용합니다. 그러나 위의 백엔드 수정과 호환되지 않는 것이 많습니다.

프로덕션 환경에 모든 수정 사항을 배포했을 때 상점 프런트엔드도 재구축되었습니다. 그러나 아래와 같이 실패를 보여줍니다.


마지막으로 gatsby-source-filesystem of gatsby의 노드 생성 기능(빌드 시)이 제품 썸네일의 빈 링크 주소 전달을 지원하지 않는다는 것을 발견했습니다. 유효한 URL을 제공해야 합니다.


pgweb tool을 사용하여 postgresql에서 수동으로 업데이트한 다음 성공적으로 다시 빌드했습니다. 그러나 그것은 마지막 임무가 아닙니다. 제품에 업로드된 이미지가 없는 경우 gatsby-starter-medusa에서 여전히 오류를 발견했습니다.

따라서 이 오류를 방지하기 위해 아래 조건을 추가해야 합니다.


이러한 오픈 소스 프로젝트인 gatsby와 medusa에서 동시에 디버그하는 것은 효율적이지 않다고 생각합니다. 하지만 저는 오픈소스와 계속 싸울 것입니다 :)