검색 어댑터에서 PLP 위젯으로 마이그레이션
검색 어댑터는 4.0.0부터 사용되지 않음Live Search이며 보안 업데이트만 받습니다. PLP(제품 목록 페이지) 위젯은(는) 앞으로 모든 Live Search 구현에 대해 지원되는 솔루션입니다. 이 안내서는 마이그레이션이 간단한 경우와 추가 작업이 필요한 경우를 이해하는 데 도움이 됩니다.
사전 요구 사항
마이그레이션 프로세스를 시작하기 전에 환경이 이러한 요구 사항을 충족하는지 확인하십시오.
마이그레이션을 시작하기 전:
기술 요구 사항:
- Adobe Commerce 2.4.4 이상
- Live Search 확장이 설치되었습니다.
- 명령줄 액세스(CLI).
- Commerce 관리자 액세스 권한.
- 테스트를 위한 스테이징 또는 QA 환경.
백업 및 준비:
- 데이터베이스와 코드를 백업합니다.
- 현재 사용자 지정을 문서화합니다.
- 경계 및 제한을 검토하여 PLP 위젯이 사용자의 요구 사항을 충족하는지 확인하십시오.
- 트래픽이 적은 기간 동안 마이그레이션을 예약합니다.
- 상점 행동에 대한 잠재적인 변경 사항을 이해 당사자에게 알립니다.
현재 구현 검토:
- 현재 Live Search 버전을 확인하세요.
- 사용 중인 패싯과 해당 구성을 문서화합니다.
- 모든 검색 기능을 테스트하고 예상되는 동작을 문서화합니다.
- 현재 검색 결과 프레젠테이션의 스크린샷을 캡처합니다.
버전 호환성:
- Adobe Commerce 2.4.4 이상을 실행하고 있습니다.
- Live Search 4.0.0 이상으로 업그레이드할 준비가 되었습니다.
마이그레이션 시나리오
간단한 마이그레이션(추가 작업 필요 없음)
구현이 다음 기준을 모두 충족하는 경우 PLP 위젯으로 직접 마이그레이션할 수 있습니다.
표준 Luma 기반 상점:
- Luma 테마 또는 최소한의 사용자 지정으로 Luma에서 상속되는 테마를 사용합니다.
- PLP 레이아웃 또는 템플릿에 대한 사용자 정의 수정을 수행하지 않았습니다.
- 검색 결과와 상호 작용하는 사용자 지정 JavaScript 확장을 만들지 않았습니다.
표준 제품 카탈로그:
- 모든 제품 속성은 표준 소스 모델을 사용합니다(사용자 지정 소스 모델이 아님).
- 특수 렌더링 논리를 필요로 하는 사용자 지정 제품 유형은 없습니다.
- 카탈로그는 표준 패싯과 필터링만 사용합니다.
표준 통합:
- 분석에 Google 태그 관리자(GTM)를 사용하고 있지 않습니다.
- 검색 동작을 수정하는 타사 확장을 사용하고 있지 않습니다.
구현이 이러한 기준에 일치하면 표준 마이그레이션 단계로 진행하십시오.
추가 작업이 필요한 마이그레이션
구현에 다음 중 하나가 있는 경우 추가 작업이 필요합니다.
사용자 지정 테마 수정:
- Luma 템플릿을 오버라이드하는 사용자 정의 PLP 레이아웃입니다.
- 검색 어댑터별 요소를 대상으로 하는 사용자 지정 CSS 또는 JavaScript.
- PLP 또는 관련 파일에 대한 사용자 정의 템플릿 수정.
- 테마는 Luma에서 상속하지 않습니다(예: 처음부터 사용자 지정 테마).
사용자 지정 제품 특성:
- 사용자 지정 소스 모델이 패싯으로 사용되는 제품 속성입니다.
- 특별 표시 요구 사항이 있는 사용자 정의 제품 유형입니다.
"is_user_defined": false을(를) 사용하는 프로그래밍 특성입니다.
고급 통합:
- Google 태그 관리자(GTM)는 추적에 적극적으로 사용됩니다.
- 서드파티 분석 또는 개인화 도구가 검색과 통합됩니다.
- 사용자 지정 이벤트 추적 또는 데이터 레이어 구현.
- 외부 검색 또는 추천 엔진과 통합.
헤드리스 또는 PWA 구현:
- Headless 아키텍처(예: PWA Studio, Vue Storefront) 사용.
- 사용자 지정 프론트엔드 프레임워크(React, Vue, Angular).
- 카탈로그 쿼리에만 GraphQL 사용.
- 사용자 지정 Storefront 이벤트 구현.
사용자 지정 위젯 코드:
- 이전에 검색 어댑터 코드를 사용자 지정했습니다.
- 자체 CDN에서 위젯의 사용자 정의 버전을 호스팅합니다.
- 검색 기능을 위한 사용자 지정 JavaScript 확장.
구현에 이러한 시나리오가 있는 경우 복잡한 마이그레이션 시나리오를 참조하십시오.
표준 마이그레이션 단계
특별한 사용자 지정 사항이 없는 구현의 경우 다음 단계를 따르십시오.
1단계: Live Search 업그레이드
PLP 위젯에 액세스하려면 Live Search 확장을 버전 4.0 이상으로 업그레이드하십시오.
역할: 판매자 또는 파트너
-
현재 Live Search 버전 확인:
code language-bash composer show magento/live-search | grep version -
버전 3.x 또는 이전 버전인 경우 업그레이드하기 전에 AdvancedSearch 모듈을 활성화합니다.
code language-bash bin/magento module:enable Magento_AdvancedSearch -
composer.json을(를) 업데이트하여 Live Search 4.0 이상 필요:code language-json "require": { "magento/live-search": "^4.0" } -
업그레이드 실행:
code language-bash composer update magento/live-search --with-dependencies -
설치 업그레이드 실행 및 다시 컴파일:
code language-bash bin/magento setup:upgrade bin/magento setup:di:compile -
필요한 경우 정적 콘텐츠를 배포합니다.
code language-bash bin/magento setup:static-content:deploy
2단계: PLP 위젯 활성화
Commerce 관리에서 PLP 위젯을 구성합니다.
역할: 판매자
PLP 위젯은 Live Search 4.0.0+의 새 설치에 대해 기본적으로 활성화됩니다. 이전 버전에서 업그레이드하는 경우:
- Stores > 설정 > Configuration(으)로 이동합니다.
- Live Search > Storefront Features(으)로 이동합니다.
- Storefront Features 섹션을 확장합니다.
- Enable Product Listing Widgets을(를) 예(으)로 설정합니다.
- Save Config을(를) 클릭합니다.
- 캐시를 플러시합니다. System > 도구 > Cache Management > Flush Magento Cache.
3단계: 스테이징 시 테스트
시작하기 전에 비프로덕션 환경에서 마이그레이션의 유효성을 검사하십시오.
역할: 판매자/파트너
프로덕션에 배포하기 전에 검색 기능을 철저히 테스트하십시오.
기능 테스트:
- 검색 결과가 올바르게 표시되는지 확인합니다.
- 구성된 모든 Facet을 테스트합니다.
- 범주 탐색이 작동하는지 확인합니다.
- 결과를 통해 페이지 매김을 테스트합니다.
- 정렬 옵션이 예상대로 작동하는지 확인합니다.
- 간단한 제품에 대한 장바구니 추가 기능을 테스트합니다.
시각적 테스트:
- 제품 이미지가 올바르게 표시되는지 확인합니다.
- 제품 이름과 가격이 올바르게 렌더링되는지 확인합니다.
- 색상 견본 테스트(사용하는 경우).
- 모바일 장치에서 응답형 동작을 확인합니다.
- 스타일이 브랜드와 일치하는지 확인합니다.
성능 테스트:
- 페이지 로드 시간 측정
- 실제 카탈로그 크기로 테스트합니다.
- 서버 리소스 사용을 모니터링합니다.
- 브라우저 콘솔에서 JavaScript 오류를 확인합니다.
4단계: 프로덕션에 배포
검증된 구성을 라이브 스토어프론트로 이동합니다.
역할: 판매자/파트너
- 가능한 경우 유지 관리 기간 동안 배포를 예약합니다.
- 표준 배포 프로세스를 따릅니다.
- 2단계: PLP 위젯을 사용하도록 설정을 사용하여 프로덕션에서 PLP 위젯을 사용하도록 설정합니다.
- 배포 후 즉시 모든 문제를 모니터링합니다.
- 중요한 문제가 발생하면 롤백 계획을 준비하십시오.
5단계: 유효성 검사 및 모니터링
마이그레이션 후 검색 성능 및 고객 경험을 추적합니다.
역할: 판매자
배포 후 주요 지표를 모니터링합니다.
- 결과 없음 검색률
- Search-to-Cart 전환율
- 페이지 로드 성능
- 고객 피드백 또는 지원 티켓
- 브라우저 콘솔의 JavaScript 오류
복잡한 마이그레이션 시나리오
다음 시나리오에서는 표준 마이그레이션 단계를 넘어 추가적인 계획 수립, 사용자 지정 개발 또는 전문 지원이 필요합니다.
레이아웃을 수정한 사용자 정의 테마
이 시나리오에는 기본 제품 목록 동작을 재정의하는 사용자 지정 템플릿 또는 레이아웃이 있습니다.
역할: 개발자/파트너
-
사용자 지정 감사:
- 테마의 모든 사용자 지정 레이아웃 XML 파일을 문서화합니다.
- 제품 목록 페이지 또는 관련 파일에 대한 사용자 지정 템플릿 수정 사항을 검토합니다.
- 스타일링에 사용되는 사용자 지정 CSS 클래스를 식별합니다.
- 사용자 지정 JavaScript 상호 작용을 문서화합니다.
-
CSS 기반 사용자 지정으로 마이그레이션:
- PLP 위젯은 특정 CSS 클래스를 사용합니다(PLP 스타일 가이드 참조).
- PLP 위젯 CSS 클래스를 사용하여 시각적 맞춤화를 재생성합니다.
- 사용자 정의 스타일이 올바르게 적용되는지 테스트합니다.
-
충돌하는 사용자 지정 제거:
- 제품 목록 구조를 수정하는 레이아웃 XML을 제거합니다.
- 검색 어댑터별 요소를 대상으로 하는 JavaScript을 정리합니다.
- 위젯 렌더링과 충돌하는 템플릿 재정의를 업데이트합니다.
-
철저하게 테스트:
- 모든 시각적 사용자 지정이 PLP 위젯에서 작동하는지 확인합니다.
- 레이아웃 충돌이 없는지 확인합니다.
- 모든 중단점 및 장치에서 테스트합니다.
사용자 정의 소스 모델이 있는 제품 속성
이 시나리오에서는 검색 어댑터에서 지원하지 않지만 PLP 위젯에서 지원하는 사용자 정의 소스 모델과 함께 제품 속성을 사용하는 패싯이 있습니다.
역할: 판매자(관리자 구성)
-
영향을 받는 특성 식별:
- 패싯으로 사용되는 제품 속성을 검토하십시오.
- 사용자 정의 소스 모델을 사용하는 사용자를 식별합니다.
- 현재 Facet 구성을 문서화합니다.
-
PLP 위젯 업그레이드 및 활성화:
- 표준 마이그레이션 단계를 따르십시오.
- PLP 위젯은 사용자 정의 소스 모델 속성을 지원합니다.
-
패싯 다시 구성:
- Marketing > SEO 및 검색 > Live Search(으)로 이동합니다.
- 영향을 받는 속성에 대한 Facet 구성을 검토합니다.
- 테스트 패싯이 사용자 지정 소스 모델에 올바르게 작동합니다.
-
유효성 검사:
- 사용자 지정 소스 모델 패싯을 사용하여 필터링을 테스트합니다.
- 모든 속성 값이 올바르게 표시되는지 확인합니다.
- 성능이 적절한지 확인합니다.
Google Tag Manager (GTM) 통합
이 시나리오에서, PLP 위젯을 활성화하는 것은 GTM을 실패하게 할 수 있는 알려진 문제가 있다.
역할: 개발자/파트너 + 고객 엔지니어링
옵션 1: 검색 어댑터를 사용하여 계속합니다(임시 전용)
- GTM이 비즈니스에 중요한 경우 검색 어댑터를 활성화한 상태로 유지합니다.
- 보안 업데이트만 받습니다.
- GTM 호환성이 해결되면 마이그레이션할 계획입니다.
- GTM 호환성에 대한 업데이트는 Adobe 지원 센터에 문의하십시오.
옵션 2: GTM 추적을 대체 접근 방식으로 마이그레이션
-
사용자 지정 이벤트 컬렉션 구현:
- Storefront Events SDK를 사용하십시오.
- 검색 및 제품 상호 작용 이벤트를 캡처합니다.
- 이벤트를 GTM 데이터 레이어에 수동으로 푸시합니다.
-
다음 단계를 완료하십시오:
- 현재 GTM 추적 요구 사항 감사
- GTM 이벤트를 Storefront 이벤트에 매핑합니다.
- 사용자 지정 이벤트 리스너를 구현합니다.
- GTM으로의 데이터 흐름을 테스트합니다.
- 분석 보고서의 유효성을 검사합니다.
옵션 3: GTM을 Adobe Analytics으로 바꾸기
- 해당되는 경우 Adobe Analytics(으)로 마이그레이션하는 것이 좋습니다.
- 지침은 고객 엔지니어링 팀에 문의하십시오.
문의할 사람: GTM 호환성 업데이트 또는 고객 엔지니어링 지원에 대한 지원 티켓을 제출합니다.
시나리오: Headless 또는 PWA 구현
이 시나리오에서는 사용자 정의 이벤트 수집이 필요하며 표준 PLP 위젯 UI를 사용할 수 없는 Headless 또는 PWA 스토어프론트가 있습니다.
역할: 개발자/파트너
-
참조 구현 검토:
- PLP 위젯 소스 코드를 살펴봅니다.
- Live Search GraphQL에 대한 API 설명서를 검토하십시오.
- 카탈로그 서비스 쿼리를 이해합니다.
-
사용자 지정 UI 구현:
- 쿼리에 Live Search GraphQL API를 사용합니다.
- 구성 요소를 나열하는 사용자 정의 제품을 빌드합니다.
- 얼굴 맞춤화를 위한 UI 구현
- 페이지 매김 및 정렬을 처리합니다.
-
이벤트 컬렉션 구현:
-
Storefront 이벤트 설명서를 검토하십시오.
-
필요한 이벤트를 구현합니다.
search-request-sentsearch-response-receivedsearch-results-viewproduct-page-viewadd-to-cart
-
Adobe Commerce에 대한 이벤트 데이터 흐름을 테스트합니다.
-
-
패싯 정렬 구성:
- Headless 구현의 경우 패싯을 카운트별로 정렬할 수 있습니다.
- Live Search > Facets 작업 영역에서 구성합니다.
- 더 나은 UX를 위해 Sort Type을(를) Count(으)로 설정하십시오.
-
테스트 및 유효성 검사:
- 검색 결과의 정확성을 확인합니다.
- Facet 기능을 테스트합니다.
- 이벤트가 올바르게 추적되는지 확인합니다.
- 성능 지표 모니터링.
- 지능형 머천다이징 기능이 작동하는지 확인합니다.
시나리오: 사용자 정의 위젯 코드 수정
이 시나리오에서는 이전에 검색 어댑터 또는 위젯 코드를 사용자 정의했으며 사용자 정의를 마이그레이션해야 합니다.
역할: 개발자/파트너
-
기존 사용자 지정 문서:
- 검색 어댑터에 대한 모든 사용자 지정을 나열합니다.
- 각 맞춤화를 추진하는 비즈니스 요구 사항 파악
- 맞춤화가 계속 필요한지 확인합니다.
-
기본 제공 기능이 사용자의 요구를 충족하는지 확인:
- PLP 위젯 기능을 검토합니다.
- CSS 기반 사용자 지정이 충분한지 확인합니다.
- 기본 PLP 위젯 동작을 테스트합니다.
-
사용자 지정 코드가 필요한 경우:
- PLP 위젯 리포지토리를 복제합니다.
- 맞춤화 구현.
- 자체 CDN에서 호스팅합니다.
- 사용자 정의 위젯을 사용하도록 Commerce 구성을 업데이트합니다.
note warning WARNING 리포지토리의 코드를 사용하여 PLP 위젯을 사용자 정의하는 경우 유지 관리 및 업데이트를 담당합니다. Adobe의 새 PLP 위젯 기능이 사용자 정의 기능과 호환되지 않을 수 있습니다. -
철저하게 테스트:
- 모든 사용자 지정 기능을 테스트합니다.
- Commerce 업데이트가 사용자 지정을 중단하지 않는지 확인합니다.
- 사용자 지정 구현을 문서화합니다.
- 지속적인 유지 관리를 위한 계획.
알려진 제한 사항 및 극단적 사례
마이그레이션할 때 다음 제한 사항에 유의하십시오.
PLP 위젯 제한:
- 정렬 순서 방향: PLP 위젯이 활성화되면 제품 목록 페이지의 정렬 순서 방향을 변경할 수 없습니다(오름차순/내림차순).
- 장바구니에 추가: 장바구니에 추가 단추는 위젯의 간단한 제품에만 사용할 수 있습니다.
- 계층 가격: PLP 위젯에서는 지원되지 않습니다.
- VAT 표시: 가격에는 VAT가 포함되지만 VAT는 별도의 값으로 표시할 수 없습니다.
검색 어댑터의 기능 차이점:
- 색상 견본: 견본이 제대로 작동하려면
color특성의 철자를color("color" 또는 사용자 지정 이름이 아님)과 정확히 동일하게 지정해야 합니다. - 테마 스타일: 사용자 지정 테마 클래스는 위젯에서 상속되지 않습니다. 위젯별 CSS 클래스를 대상으로 해야 합니다.
- 사용자 지정 제품 유형: 위젯에서 지원되지 않습니다.
성능 고려 사항:
- 큰 카탈로그(50,000개 이상의 제품)는 초기 페이지 로드 시간이 길어질 수 있습니다.
- 값이 많은 여러 패싯이 성능에 영향을 줄 수 있습니다.
- 모바일 장치 성능은 카탈로그 크기에 따라 달라질 수 있습니다.
호환성 문제:
- Google 태그 관리자 호환성 문제(GTM 시나리오 참조).
- 일부 서드파티 확장이 PLP 위젯과 충돌할 수 있습니다.
- 사용자 지정 체크아웃 확장 기능은 업데이트가 필요할 수 있습니다.
도움말 보기
특정 요구 사항에 따라 적절한 리소스에 문의하십시오.
Adobe 지원은(는) 다음을 지원할 수 있습니다.
- 표준 라이브 검색 마이그레이션 절차
- PLP 위젯 구성 문제
- 패싯 또는 속성 색인화 문제
- 기본 구현과 관련된 성능 문제
- 업그레이드 오류
개발 파트너/시스템 통합업체에게 연락하여 문의해야 하는 사항:
- 사용자 정의 테마 수정
- 사용자 지정 위젯 코드 구현
- 타사 확장 호환성
- 헤드리스 또는 PWA 구현
- 사용자 지정 이벤트 추적
Adobe 지원에 문의하려면 도움말 센터 사용 안내서를 참조하세요.
FAQ
검색 어댑터에서 PLP 위젯으로 마이그레이션하는 방법에 대한 일반적인 질문에 대한 답변을 살펴보십시오.
Q: 검색 어댑터가 버그 수정 또는 기능 업데이트를 수신합니까?
A: 아니요. 검색 어댑터는 더 이상 사용되지 않으며 보안 업데이트만 수신합니다. 버그 수정, 성능 개선 및 새로운 기능은 PLP 위젯에서만 사용할 수 있습니다. 검색 어댑터에 문제가 발생하면 PLP 위젯으로 마이그레이션하는 것이 좋습니다.
Q: 마이그레이션으로 인해 내 상점이 중단됩니까?
A: 스테이징에서 적절한 테스트 절차를 따르는 경우 마이그레이션이 원활하게 이루어져야 합니다. 프로덕션 배포에 대한 롤백 계획이 준비되었습니다.
Q: 마이그레이션에 얼마나 걸립니까?
A: 표준 구현의 경우: 1~2시간. 사용자 지정 구현의 경우: 복잡성에 따라 1~4주.
Q: 내 검색 머천다이징 규칙이 계속 작동합니까?
A: 예. Live Search 작업 영역에 구성된 모든 검색 머천다이징 규칙, 동의어 및 패싯이 PLP 위젯에서 계속 작동합니다.
Q: Facet을 다시 구성해야 합니까?
A: 일반적으로 그렇지는 않지만, 검색 어댑터가 있는 사용자 정의 소스 모델 속성에 의해 제한된 경우 이제 PLP 위젯에서 사용할 수 있습니다.
Q: 사용자 지정 CSS는 어떻게 됩니까?
A: PLP 위젯 클래스를 타깃팅하려면 CSS를 업데이트해야 합니다. CSS 클래스 참조를 참조하십시오.
Q: 검색 성능에 영향을 줍니까?
A: PLP 위젯은 성능 기준에 맞게 디자인되었습니다. 대부분의 상인들은 동등하거나 더 나은 성과를 본다. 스테이징에서 큰 카탈로그를 테스트해야 합니다.