제품 목록 페이지 위젯

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

PLP 위젯 활성화

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

새 설치에 대해 Live Search PLP 위젯이 기본적으로 활성화됩니다. Live Search을(를) 업그레이드하고 있으며 PLP 위젯이 이미 꺼져 있는 경우 그대로 유지됩니다.

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

위젯 기능

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

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

위젯 사용자 정의

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

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

위의 기능을 처리하기 위해 PLP 위젯을 사용자 정의하는 방법에 대한 자세한 내용은 다음 repositorystorefront-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

패싯 헤더 제목

  • .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-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

표시기 로드

PLP 위젯 비활성화

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

  1. 스토어 > 설정 > 구성 > Live Search > 상점 기능(으)로 이동하여 제품 목록 위젯 사용 ​을(를) "아니요"로 설정합니다.
  2. 설정을 저장하려면 구성 저장 ​을 선택하십시오.
recommendation-more-help
1d60634e-b73a-404a-be7a-4a2a36676055