웹 사이트 페이지 검토
Café Supremo 마케팅 웹 사이트 애플리케이션에는 세 페이지인 HOME, MENU 및 BLOG가 있습니다.
HOME 페이지
홈 페이지에는 광고 및 프로모션과 같은 마케팅 캠페인이 표시됩니다.
웹 사이트에서 사용 가능한 항목은 홈 페이지에 세부정보와 링크가 포함된 광고입니다. 맨 위에는 자세히 단추가 있는 프로모션이 있습니다. 이 단추를 누르면 항목을 설명하는 페이지가 열립니다. 프로모션 아래에는 shop now 버튼이 있는 세 가지 알림이 있습니다. 홈 페이지 끝에 최신 블로그가 표시되고 클릭하면 해당 블로그 세부 정보 페이지가 열립니다.
그림 home_page.png에 대한 설명
홈 페이지에서 구성요소 교환의 Oracle Content Management 구성요소가 Oracle Visual Builder의 Cafe-Supremo 애플리케이션에서 사용되는 방법을 살펴보겠습니다.
적절한 설정이 있는 콘텐츠 목록 구성요소는 홈 페이지에 콘텐츠를 표시하는 데 사용됩니다.
예를 들어, 페이지 상단에 사용된 콘텐츠 목록 구성요소의 구성을 살펴보겠습니다.
그림 home_page_component.png에 대한 설명
다음 키 설정은 이 구성요소의 속성 창에 지정되어 맨 위에 프로모션을 표시합니다.
- ID - 자산의 고유 API ID입니다.
- Content Server - 기본값
- 채널 토큰 - 기본값
- 콘텐츠 유형 - 프로모션
- 레이아웃 - 프로모션-기본값
- 최대 항목 수 - 1
- 항목에서 시작 - 1
판촉 콘텐츠 유형이 이 구성요소에서 사용됩니다. 표시할 항목 수는 1개로 제한됩니다. 해당 세부 정보 페이지를 가리키도록 more 버튼이 구성됩니다. 이벤트 처리기는 해당 프로모션 세부정보 페이지를 열기 위해 이 더 보기 단추를 구성하도록 설정됩니다. 구성 요소의 속성의 이벤트 탭에서 이벤트 설정은 지정된 이벤트가 발생할 때 발생하는 동작을 지정하는 작업 체인(작업 순서) 및 이벤트를 정의하도록 구성됩니다(예: 계속 단추). 이벤트 리스너는 이벤트 리스너 탭에서 이 페이지에 대해 정의되어 이벤트를 수신하고 작업 탭에 정의된 작업 체인을 시작합니다.
작업 탭에서 콘텐츠 목록 항목의 이벤트 탭에 정의된 이벤트와 연관된 작업이 작업 체인과 함께 정의됩니다. 작업은 작업 체인의 일부입니다. 예를 들어, 작업 탭에서 첫번째 콘텐츠 목록에 대해 정의된 첫번째 작업을 누르면 해당 구성을 볼 수 있습니다. 다이어그램 섹션에서 판촉 세부정보 탐색(탐색 작업)을 누르면 속성 창의 대상 필드가 프로모-세부정보로 설정되므로 사용자가 프로모션에서 계속 단추를 누를 때 세부정보 페이지로 이동합니다.
promo 세부정보 페이지에는 콘텐츠 항목을 동적으로 표시하도록 구성된 콘텐츠 위치 표시자 구성요소가 있습니다. 따라서 사용자가 더 보기 단추를 누르면 프로모션 페이지의 콘텐츠 위치 표시자 구성요소가 연관된 콘텐츠 항목의 세부정보를 자동으로 로드합니다.
마찬가지로, 사용자가 홈 페이지 끝에 표시된 블로그를 누를 때 해당 블로그 문서를 표시하는 데 사용되는 블로그 세부 정보 페이지가 있습니다.
이러한 Oracle Content Management 구성요소는 구성요소 교환에서 웹 사이트 애플리케이션 페이지로 끌어 놓은 다음 필요에 따라 적절한 설정으로 구성할 수 있습니다.
그림 component_exchange.png에 대한 설명
예를 들어, 홈 페이지에 콘텐츠 항목을 추가하는 방법을 이해하려면 이 솔루션 플레이북의 사용자 정의 섹션을 참조하십시오.
마찬가지로 두 개 이상의 컨텐츠 리스트 구성 요소가 프로모션 아래에 광고와 블로그를 표시하는 데 사용됩니다.
해당 설정에 따라 이러한 구성 요소는 Oracle Content Management에서 이전에 생성한 저장소에서 콘텐츠를 동적으로 인출한 다음 홈 페이지에 해당 콘텐츠를 표시합니다.
MENU 페이지
MENU 페이지에는 카탈로그의 모든 메뉴 항목이 나열됩니다.
이 페이지에는 COFFEE, TEA, sendATS라는 세 개의 탭이 표시됩니다. 이러한 각 탭에는 해당 범주에서 사용할 수 있는 다양한 유형의 항목이 표시됩니다. 예를 들어, COFFEE 탭에서 CLASSIC ESPRESSO, SUPREMO CAPPUCCINO, COLD PRESS COFFEE 및 BLACK SUPREMO와 같은 변형이 각 다양성에 대한 정보와 함께 표시됩니다. 일부 항목에는 비디오도 있습니다. 이러한 탭 아래에서 서로 다른 Café Supremo 콤보가 각 콤보에서 사용할 수 있는 항목을 설명하는 이미지를 비롯한 세부 정보와 함께 표시됩니다.
메뉴 페이지에서 사용되는 주요 구성요소 중 일부는 탭 표시줄과 콘텐츠 목록입니다. 이러한 구성요소는 메뉴 페이지에 콘텐츠를 표시하기 위한 적절한 설정과 함께 사용되었습니다. 콘텐츠 목록 구성요소는 구성요소 교환에서 가져온 것입니다.
예를 들어, 페이지 상단에 사용된 콘텐츠 목록 구성요소 중 하나의 구성을 보도록 하겠습니다.
그림 menu_page_component.png에 대한 설명
다음 키 설정은 이 구성요소의 [속성] 창에 지정되어 콘텐츠 항목(메뉴 항목)을 표시합니다.
- ID - 자산의 고유 API ID입니다.
- Content Server - 기본값
- 채널 토큰 - 기본값
- 콘텐츠 유형 - MenuItem
- 레이아웃 - MenuItem-기본값
- 최대 항목 수 - 10
- 항목에서 시작 – 1
- 추가 질의 문자열 - fields.menuitem_category eq "COFFEE"
MenuItem 콘텐츠 유형이 이 구성요소에 사용됩니다. 표시할 항목 수는 10개로 제한됩니다. 첫번째 탭(COFFEE 탭)의 경우 Additional Query String 필드가 fields.menuitem_category eq "COFFEE"로 설정됩니다. 마찬가지로 다른 탭에 대해서도 설정됩니다. [추가 질의 문자열] 필드는 표시된 메뉴 항목 목록을 더욱 세분화하기 위해 추가 질의 매개변수를 지정하는 데 사용됩니다.
마찬가지로, 다른 콘텐츠 목록 구성요소를 적절한 설정과 함께 사용하여 Café Supremo에서 사용할 수 있는 콤보 메뉴 항목을 표시합니다.
구성요소 교환의 구성요소를 사용하면 Oracle Content Management의 저장소에서 콘텐츠를 동적으로 인출하고 Oracle Visual Builder의 애플리케이션에 표시하여 다양한 콘텐츠를 포함할 수 있습니다.
블로그 페이지
블로그 페이지는 다양한 범주의 블로그 글을 표시하는 데 사용됩니다.
log_page.png에 대한 설명
이 페이지에는 HOW TO, DRINKS, PEOPLE 및 RECIPES와 같은 다양한 블로그 범주에 대한 네 개의 탭이 있습니다. 각 탭에는 이미지, 블로그 제목, 게시 날짜 등의 세부 정보와 함께 해당 특정 범주에 사용 가능한 블로그 항목이 표시됩니다. 사용자가 블로그 항목을 클릭하면 동일한 창에서 블로그 문서 페이지가 열립니다.
적합한 설정이 포함된 탭 표시줄 및 콘텐츠 목록과 같은 구성요소는 블로그 페이지에 콘텐츠를 표시하는 데 사용됩니다. 콘텐츠 목록 구성요소는 구성요소 교환에서 가져온 것입니다.
탭 표시줄 구성 요소는 네 개의 범주를 블로그 페이지에 탭으로 표시하도록 적절한 설정으로 구성됩니다. 다음 키 설정은 이 구성요소의 [속성] 창에 지정되어 4개의 블로그 범주를 탭으로 표시합니다.
- ID - 자산의 고유 API ID입니다.
- 선택 - 선택된 항목의 키가 지정됩니다.
- 탭 - 네 가지 범주에 대한 탭 정보를 지정하고 첫 번째 탭은 기본 탭으로 설정됩니다.
- 가장자리 - 위쪽
이러한 탭에 필요한 변수 속성은 변수 탭에서 설정됩니다.
콘텐츠 목록 구성요소의 구성을 살펴보겠습니다. 다음 키 설정은 이 구성요소의 [속성] 창에 지정되어 블로그 항목을 표시합니다.
- ID - 자산의 고유 API ID입니다.
- Content Server - 기본값
- 채널 토큰 - 기본값
- 콘텐츠 유형 - 블로그
- 레이아웃 - 블로그-기본값
- 목록 뷰 - threeColumns
- 최대 항목 수 - 10
- 항목에서 시작 – 1
- 추가 질의 문자열 - fields.blog_category eq "HOW TO"
블로그 콘텐츠 유형은 이 구성요소에서 사용됩니다. 표시할 항목 수는 10개로 제한됩니다. 첫번째 탭(HOW TO 탭)에 대해 Additional Query String 필드가 fields.menuitem_category eq "HOW TO"로 설정됩니다. 마찬가지로 다른 탭에 대해서도 설정됩니다. 이벤트 처리기는 사용자가 블로그 항목을 누를 때 발생하는 동작을 지정하기 위해 콘텐츠 목록 항목과 연관된 작업 및 이벤트를 정의하도록 설정됩니다. 구성요소의 속성의 이벤트 탭에서 이벤트 설정이 이벤트 및 지정된 이벤트가 발생할 때 발생하는 동작, 즉 페이지에서 항목을 누를 때 발생하는 동작을 지정하는 작업 체인을 정의하도록 구성됩니다. 이벤트 리스너는 이벤트 리스너 탭에서 이 페이지에 대해 정의되어 이벤트를 수신하고 작업 탭에 정의된 작업 체인을 시작합니다.
작업 탭에서 콘텐츠 목록 항목의 이벤트 탭에 정의된 이벤트와 연관된 작업이 작업 체인과 함께 정의됩니다. 작업은 작업 체인(작업 시퀀스)의 일부입니다. 예를 들어, 작업 탭에서 첫번째 작업을 누르면 해당 구성을 볼 수 있습니다. 다이어그램 섹션에서 탐색 작업인 블로그 세부 정보 탐색을 누르면 속성 창의 대상 필드가 블로그-세부 정보로 설정되므로 사용자가 블로그 페이지에서 블로그 항목을 누를 때 해당 블로그 문서 페이지(블로그 세부 정보)로 이동합니다.
블로그 세부정보 페이지에는 콘텐츠 항목을 동적으로 표시하도록 구성된 콘텐츠 위치 표시자 구성요소가 있습니다. 따라서 사용자가 블로그 항목을 누르면 블로그 세부정보 페이지의 콘텐츠 위치 표시자 구성 요소가 연관된 콘텐츠 항목의 세부정보를 자동으로 로드합니다.
웹 사이트 애플리케이션이 게시되면 Oracle Content Management 웹 인터페이스에서 새 블로그 문서(블로그 콘텐츠 항목)를 추가하고 게시할 때 이러한 블로그 문서는 웹 사이트 애플리케이션의 블로그 페이지(Oracle Visual Builder)로 동적으로 풀링되고 사용자에게 즉시 제공됩니다.