제품 목록 페이지 위젯
Live Search Product Listing Page Widget (PLP)은 Commerce 서비스 플랫폼을 사용하여 성능 좋고, 검색 가능하며, 패싯 가능한 제품 목록 페이지를 제공합니다. 이 항목에서는 PLP 위젯을 활성화하고 스타일링하는 방법을 설명합니다.
PLP 위젯 활성화
Live Search 서비스가 설치되면 기본 검색 기능이 자동으로 Live Search (으)로 변환됩니다.
새 설치에 대해 Live Search PLP 위젯이 기본적으로 활성화됩니다. Live Search을(를) 업그레이드하고 있으며 PLP 위젯이 이미 꺼져 있는 경우 그대로 유지됩니다.
위젯 기능
PLP 위젯은 다음과 같은 기본 기능을 제공합니다.
- 장바구니에 추가 버튼 - 간단한 제품에만 사용할 수 있습니다.
- 제품당 여러 이미지 - 구성 가능한 제품에 대해 다른 색상을 선택하면 이미지가 변경될 수 있습니다.
- 색상 견본 지원 - 코드의 유효성을 제대로 검사하려면 색상 특성의 맞춤법이
color이어야 합니다.
위젯 사용자 정의
PLP 위젯의 기본 기능 외에도 다음과 같은 기능을 포함하도록 위젯을 추가로 사용자 정의할 수 있습니다.
- 속성별 필터링
- 다중 언어 지원
- 가격 슬라이더
위의 기능을 처리하기 위해 PLP 위젯을 사용자 정의하는 방법에 대한 자세한 내용은 다음 repository의 storefront-product-listing-page 추가 정보를 참조하십시오. 이 저장소의 추가 정보는 PLP 위젯을 사용자 정의하고 이러한 사용자 정의를 사이트에 배포하는 방법에 대한 예를 제공합니다.
스타일 예
CSS를 사용하여 사이트에 맞게 PLP 위젯의 모양과 느낌을 사용자 지정할 수 있습니다.
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
.ds-plp-facets__pills.ds-sdk-pill
.ds-sdk-pill__label.ds-sdk-pill__cta
.ds-plp-facets__list
.ds-sdk-input.ds-sdk-input__label.ds-sdk-product-item__product-swatch-groupds-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
로드 중
.ds-sdk-loading.ds-sdk-loading__spinner.ds-sdk-loading__spinner-label
PLP 위젯 비활성화
PLP 위젯을 비활성화하려면 다음과 같이 하십시오.
- 스토어 > 설정 > 구성 > Live Search > 상점 기능(으)로 이동하여 제품 목록 위젯 사용 을(를) "아니요"로 설정합니다.
- 설정을 저장하려면 구성 저장 을 선택하십시오.