제품 목록 페이지 위젯

마지막 업데이트: 2026년 9월 2일

주제:
상점
구성

작성 대상:

관리자

Live Search Product Listing Page Widget(PLP)은 Commerce Services Platform을 사용하여 성능 좋고 검색 가능하며 구현 가능한 제품 목록 페이지를 제공합니다. 이 항목에서는 PLP 위젯을 활성화하고 스타일링하는 방법을 설명합니다.

PLP 위젯 활성화

Live Search 서비스가 설치되면 기본 검색 기능이 자동으로 Live Search(으)로 변환됩니다.

새로 설치하면 기본적으로 Live Search PLP 위젯이 활성화됩니다.

PLP 위젯이 비활성화된 상태에서 Live Search을(를) 업그레이드하는 경우 업그레이드 후에도 비활성화된 상태로 유지됩니다.

NOTE

더 이상 사용되지 않는 검색 어댑터에서 마이그레이션하는 경우 시나리오, 사전 요구 사항 및 단계별 지침에 대한 자세한 지침은 마이그레이션 안내서를 참조하십시오.

PLP 위젯을 켜려면 다음을 수행합니다.

→ Adobe Commerce 관리자에서 저장소 설정 → 구성으로 이동합니다.
왼쪽 탐색에서 Live Search > Storefront Features을(를) 클릭합니다.
Storefront Features 섹션을 클릭합니다.
Enable Product Listing Widget = 예 설정
구성 저장
메시지가 표시되면 캐시를 플러시합니다([시스템] > [도구] > [캐시 관리] > Flush Magento Cache(으)로 이동).

IMPORTANT

Live Search Product Listing Page Widget이(가) 활성화되면 제품 목록 페이지의 정렬 순서 방향을 변경할 수 없습니다.

위젯 기능

PLP 위젯은 다음과 같은 표준 기능을 제공합니다.

장바구니에 추가 버튼 - 간단한 제품에만 사용할 수 있습니다.
제품당 여러 이미지 - 구성 가능한 제품에 대해 다른 색상을 선택하면 이미지가 변경될 수 있습니다.
색상 견본 지원 - 코드의 유효성을 제대로 검사하려면 색상 특성의 맞춤법이 color이어야 합니다.

위젯 사용자 정의

PLP 위젯의 표준 기능 외에도 다음과 같은 기능을 포함하도록 위젯을 추가로 사용자 정의할 수 있습니다.

속성별 필터링
다중 언어 지원
가격 슬라이더

위의 기능을 처리하기 위해 PLP 위젯을 사용자 정의하는 방법에 대한 자세한 내용은 다음 repository의 storefront-product-listing-page 추가 정보를 참조하십시오. 이 저장소의 추가 정보는 PLP 위젯을 사용자 정의하고 이러한 사용자 정의를 사이트에 배포하는 방법에 대한 예를 제공합니다.

WARNING

리포지토리에서 사용할 수 있는 코드를 사용하여 PLP 위젯을 사용자 정의하는 경우 유지 관리와 필요한 모든 업데이트를 수행해야 합니다. Adobe이 릴리스하는 모든 새로운 PLP 위젯 기능은 사용자 지정된 구현과 호환되지 않을 수 있습니다.

스타일 예

CSS를 사용하여 사이트에 맞게 PLP 위젯의 모양을 사용자 지정할 수 있습니다.

NOTE

Adobe Commerce 테마 내에 사용자 지정 클래스가 있는 요소는 상속되지 않습니다. 사용자 정의 클래스와 일치하도록 특정 클래스별로 이러한 요소를 타깃팅하십시오. 기본 작업 클래스는 위젯 단추에 적용되지 않습니다. CSS 내의 제네릭 타깃팅된 요소는 상속됩니다. button은(는) 위젯 단추에 적용됩니다.

강조 표시된 div에 대상 클래스 ds-sdk-product-item__product-name이(가) 포함되어 있습니다.

페이지 매김

제품 이름을 대문자로 만드는 규칙을 추가하여 사용자 지정합니다.

.ds-sdk-product-item__product-name {
 text-transform: uppercase;
}

페이지 매김

CSS 클래스

제품 목록

.ds-sdk-product-list: 외부 div
.ds-sdk-product-list__grid: 내부 div

페이지 매김

제품 목록 페이지 매김

.ds-plp-pagination

.ds-plp-pagination_item

.ds-plp-pagination_item--current

위젯

.ds-widgets: 외부 div
.ds-widgets__actions: 왼쪽 내부 div
.ds-widgets__results: 오른쪽 내부 div

위젯 결과

정렬 드롭다운

.ds-sdk-sort-dropdown

드롭다운 정렬

.ds-sdk-sort-dropdown__button

드롭다운 단추

.ds-sdk-sort-dropdown__items

드롭다운 항목

.ds-sdk-sort-dropdown__items--item

드롭다운 항목

.ds-sdk-sort-dropdown__items--item-selected

선택한 항목 드롭다운

.ds-sdk-sort-dropdown__items--item-active

드롭다운 활성 선택

패싯

.ds-plp-facets
.ds-plp-facets__header
.ds-plp-facets__header_title
.ds-plp-facets__header__clear-all

패싯 헤더 제목 {width="350"}

.ds-plp-facets__pills
.ds-sdk-pill

패싯 알약 {width="350"}

.ds-sdk-pill__label
.ds-sdk-pill__cta

패싯 레이블 {width="350"}

.ds-plp-facets__list

패싯 목록 {width="350"}

.ds-sdk-input
.ds-sdk-input__label
.ds-sdk-product-item__product-swatch-group
ds-sdk-product-item__product-swatch-item
.ds-sdk-input_fieldset_show-more

.ds-sdk-labelled-input

레이블이 지정된 입력

.ds-sdk-labelled-input__input
.ds-sdk-labelled-input__label

입력 레이블

제품 항목

.ds-sdk-product-item
.ds-sdk-product-item__image
.ds-sdk-product-item__product-name
.ds-sdk-product-item__product-options
.ds-sdk-product-price
- .ds-sdk-product-price--no-discount
- .ds-sdk-product-price--grouped
- .ds-sdk-product-price--bundle
- .ds-sdk-product-price--discount