웹사이트 기능 – 즐겨찾기 추가 및 위시리스트

  • 0:10 min

  • 0 comments

활용예 잠재고객이 장바구니에 관심제품을 추가합니다.블로그 게시물 또는 특정 유형의 글 중에서 관심글을 등록하고 '나중에 보기' 목록을 만듭니다. 기능 개요 이를 위해서 사용자가 현재 보고 있는 게시물에서 즐겨찾기에 등록하거나 해제할 수…

활용예

잠재고객이 장바구니에 관심제품을 추가합니다.
블로그 게시물 또는 특정 유형의 글 중에서 관심글을 등록하고 ‘나중에 보기’ 목록을 만듭니다.

기능 개요

이를 위해서 사용자가 현재 보고 있는 게시물에서 즐겨찾기에 등록하거나 해제할 수 있도록 하거나 퀴리 루프 내부에서 “즐겨찾기”를 추가 또는 제거할 수 있도록 합니다.

사용자의 즐겨찾기에서 현재 게시물/제품 추가/제거(현재 보고 있는 게시물 또는 쿼리 루프 내부에서).
목록에서 특정 항목 지우기(사용자 목록 내부에서 사용되는 경우).
목록을 완전히 지웁니다.
선택한 목록에 있는 게시물 수를 표시합니다.

이 기능은 단순한 ‘좋아요’ 버튼과는 다른 기능을 수행합니다. 즉, 고객이 고객만의 ‘즐겨찾기’목록을 생성할 수 있도록 합니다.

기능에 대한 접근

기본적으로 사용자에 대한 정보를 저장하는 기능이므로 로그인 된 사용자에 대해서만 기능이 동작되는 것이 일반적입니다. 단, 로그인하지 않은 유저에 대해서도 이 기능을 활성화하기 위해서는 쿠키로 저장해야 하며, 이 경우 쿠키는 최장 7일간 저장될 수 있습니다.

즐겨찾기 쿼리루프

즐겨찾기 버튼 요소는 사용자 목록에서 항목을 추가/제거하기 위한 것입니다. 하지만 즐겨찾기 쿼리 루프를 사용하여 해당 목록을 어딘가에 표시해야 할 수도 있습니다.

이렇게 하기 위해선, BricksExtras 설정에서 Misc > Query Loop Extras 옵션을 활성화 한 후, Query Type을 Extras 로 한 후 “Favorite” query를 선택하면 해당 쿼리루프를 출력할 수 있습니다.

즐겨찾기 목록에서 삭제하기

사용자가 목록을 보는 동안 항목을 제거할 수 있도록 하려면 루프 내부의 즐겨찾기 버튼 요소를 사용하고 동작을 ‘목록에서 항목 지우기’로 설정합니다. 해당 버튼을 클릭하면 목록에서 해당 특정 항목이 제거됩니다.

참고 – 로그아웃한 사용자가 목록을 만들 수 있도록 허용하는 경우 캐싱에 유의하세요. 체크아웃 페이지와 마찬가지로 각 사용자에 대한 고유한 목록이 포함된 ‘대시보드 페이지’는 페이지 캐싱에서 제외해야 합니다. (Bricks의 AJAX 팝업에 포함하는 경우 팝업 콘텐츠를 가져오면 콘텐츠가 동적으로 가져오므로 필요하지 않습니다.)

툴팁

사용자가 즐겨찾기 엘리먼트와 상호 작용할 때 시각적 피드백을 제공하기 위해 버튼에 도구 설명을 추가할 수 있습니다. 도구 설명 내용은 항목이 추가되었는지, 제거되었는지 또는 버튼이 비활성화되었는지에 따라 변경할 수 있습니다.

일반적인 도구 설명 설정은 다양한 동작 및 스타일 사용자 정의에 사용할 수 있습니다.

어느 한 특정 포스트 타입에 여러개의 즐겨찾기 목록을 만들수 있을까?

기본적으로 사용자는 각 게시물 유형에 대한 즐겨찾기 목록에 게시물을 저장합니다.

동일한 게시물 유형에 대한 두 번째 목록을 만들어야 하는 경우 Favorite Button의 설정옵션에서 Custom List를 활성화하고 List identifier(문자, 숫자 및 밑줄만 포함)를 지정하면 됩니다.

이렇게 하면 즐겨찾기 목록에 저장할 때 해당 List identifier에 저장되고 이 List identifier를 이용해서 쿼리루프에 출력할 수 있습니다.

인기글

08

11월

활용예 잠재고객이 장바구니에 관심제품을 추가합니다.블로그 게시물 또는 특정 유형의 글 중에서 관심글을 등록하고 '나중에 보기' 목록을 만듭니다. 기능 개요 이를 위해서 사용자가 현재 보고 있는 게시물에서 즐겨찾기에 등록하거나 해제할 수…

01

10월

작동 방식 Fancy Animations는 CSS 애니메이션 프레임워크로, 원하는 요소에 애니메이션 이름이 포함된 CSS 클래스를 추가하기만 하면 쉽게 사용할 수 있습니다. 이 간단한 방식 덕분에 복잡한 코드 없이도 다양한 애니메이션을 구현할…

30

5월

인스타그램 피드를 웹사이트에서 사용하려면 Instagram Basic Display API 액세스 토큰이 필요합니다. 이 액세스 토큰은 Meta for Developers 플랫폼을 통해 얻으실 수 있습니다. Step 1: 애플리케이션 설정 Step 2: 앱 생성하기…

Leave the first comment