설명서 Commerce “Live Search 안내서”

제품 목록 페이지 위젯

Last update: Wed May 01 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

주제:
Services
Search

작성 대상:

Admin

다음 Live Search Product Listing Page Widget PLP( )는 Commerce Services 플랫폼을 사용하여 성능 향상되고 검색 가능하며 패싯 가능한 제품 목록 페이지를 제공합니다. 이 항목에서는 PLP 위젯을 활성화하고 스타일링하는 방법을 설명합니다.

PLP 위젯 활성화

다음의 경우 Live Search 서비스가 설치되면 기본 검색 기능이 Live Search 자동으로 표시됩니다.

다음 Live Search PLP 위젯은 새 설치에 대해 기본적으로 활성화되어 있습니다. 업그레이드 중인 경우 Live Search 그리고 PLP 위젯은 이미 꺼져 있으므로 그대로 유지됩니다.

IMPORTANT

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

PLP 위젯 비활성화

PLP 위젯을 비활성화하려면 다음과 같이 하십시오.

다음으로 이동 스토어 > 설정 > 구성 > Live Search > Storefront 기능 및 설정 제품 목록 위젯 활성화 "아니요"로 변경되었습니다.
선택 구성 저장 설정을 저장합니다.

위젯 기능

PLP 위젯은 검색 가능한 제품 페이지에서 기대하는 다양한 기능을 제공합니다. 여기에는 다음이 포함됩니다.

속성별 필터링
색상 견본 지원
장바구니에 추가 기능
다중 언어 지원
가격 슬라이더

위의 기능을 처리하도록 PLP 위젯을 사용자 정의하는 방법에 대한 자세한 내용은 storefront-product-listing-page readme 파일 보고.

스타일 예

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

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

로드 중

.ds-sdk-loading
.ds-sdk-loading__spinner
.ds-sdk-loading__spinner-label

표시기 로드 중

recommendation-more-help

1d60634e-b73a-404a-be7a-4a2a36676055