윅스 (Wix) 코딩 - 사용자 지정 이벤트 세부정보 페이지 만들기 (Wix Code: Creating a Custom Event Details Page)

윅스 (Wix) 코딩 - 사용자 지정 이벤트 세부정보 페이지 만들기 (Wix Code: Creating a Custom Event Details Page)

 

 

 

설명)

 

사용자 지정 이벤트 세부 정보 페이지를 만드는 데는 몇 가지 장점이 있습니다. 기본 제공 이벤트 세부 정보를 사용하면 페이지 모양이 제한됩니다. 또한 내장된 등록 양식에 링크되는 RSVP 버튼이 있어야합니다. 그러나 사용자 지정 이벤트 세부 정보 페이지를 만들 때 페이지의 디자인을 사용자 지정하고 표시되는 내용과 방법을 결정할 수 있습니다.

 

이 글에서는 아래 표시된 사용자 지정 이벤트 세부 정보 페이지를 작성하는 데 필요한 단계에 대해 설명합니다. 동적 페이지를 만들고 데이터세트를 사용하여 여러 페이지 요소와 페이지 배경을 이벤트 데이터에 연결합니다. 같은 단계에 따라 사이트의 디자인과 필요에 맞게 사용자 지정할 수 있는 이벤트 세부 정보 페이지를 만들 수 있습니다.

 

 

전제 조건 (Prerequisites)

이벤트 데이터를 사용하려면 윅스 코드(Wix Code)를 활성화해야합니다. 에디터 도구 모음에서 코드를 클릭한 다음 개발자 도구 사용을 선택합니다.

사용자 지정 이벤트 세부 정보 페이지를 만들기 전에 사이트에 Wix Events 앱을 추가해야합니다. Wix Events 앱을 사용하여 이벤트를 만들고 이벤트 정보를 추가합니다. Events 라는 이름의 데이터베이스 컬렉션이 사이트에 추가되었습니다. 이 컬렉션에는 모든 이벤트 데이터가 포함되어 있습니다.

 

 

팁 :

Events 컬렉션이 보이지 않으면 에디터 창을 새로고침합니다.

 

 

노트 :

아래에 설명된 추가 기능 중 일부가 제대로 작동하려면 Wix Events 앱을 추가한 후 적어도 한 번 사이트를 게시해야할 수도 있습니다.

 

 

다음 사항을 숙지하고 싶을 수도 있습니다.

- 동적 페이지

- 데이터세트

- Events 컬렉션

 

 

 

일반적으로 방문자는 사용자 지정 이벤트 갤러리를 통해 사용자 지정 이벤트 세부 정보 페이지에 도달합니다. 사용자 지정 이벤트 갤러리를 만드는 방법에 대한 자세한 내용은 사용자 지정 이벤트 갤러리를 만드는 방법을 참조합니다.

 

 

 

 

동적 페이지 생성 (Dynamic Page Creation)

먼저 동적 항목 페이지를 사이트에 추가합니다. 페이지에서 Events/Events 컬렉션의 항목을 표시하도록하려면 해당 컬렉션 옆에 있는 설정 아이콘을 클릭한 다음 동적 페이지 추가를 클릭합니다. 페이지를 설정하기 위해 Events/ 섹션 중 하나를 제거하고 제목을 Slug 입력란(필드)로 바꾸어 기본 URL을 변경합니다. 이제 URL의 편집 가능한 섹션은 Events/{Slug}와 같습니다. 이렇게하면 의미있는 URL을 얻을 수 있으며 이는 검색 결과 최적화 (SEO)에 중요합니다.

 

 

노트 :

Events 컬렉션에 동적 페이지가 이미 설정된 경우 URL을 변경하여 고유해야합니다.

 

 

이제 Events 컬렉션에 연결된 동적 데이터세트가 있는 빈 동적 항목 페이지가 생겼습니다.

 

 

 

 

페이지 설정 (Page Setup)

이 예제에서는 사용자 지정 이벤트 세부 정보 페이지에 다음 정보를 표시하려고합니다.

- 이벤트 이미지 (Event image)

- 이벤트 제목 (Event title)

- 이벤트 날짜 및 시간 (Event date and time)

- 이벤트 설명 (Event description)

 

 

 

이렇게하려면 상자와 세 개의 텍스트 요소를 추가합니다. 제목, 날짜 및 설명을 표시하기 위해 이러한 요소를 동적 데이터세트에 연결합니다. 그 동안 속성 패널을 사용하여 이러한 요소에 의미있는 ID를 부여하기로 결정했습니다. 우리 디자인에서는 이벤트 이미지를 페이지 배경으로 표시하므로 이미지 요소를 추가할 필요가 없습니다.

 

 

 

사용자 지정 세부 정보 페이지이기때문에 원하는대로 디자인할 수 있습니다. 페이지는 동적 페이지이므로 한 번만 디자인하면 모든 이벤트에서 동일하게 나타납니다. 예를 들어 페이지 배경, 추가 버튼 또는 원하는 요소를 사용하는 대신 이미지를 추가할 수 있습니다.

 

 

 

 

 

데이터 연결 (Data Connections)

데이터세트는 Events 컬렉션 데이터와 페이지의 요소 간 연결 고리 역할을 합니다. 페이지에 이미 데이터세트가 있으므로 해야 할 일은 

 데이터 연결 버튼을 사용하여 페이지 요소에 연결하기만하면 됩니다.

 

 

다음은 연결해야 하는 요소들입니다.

 

요소 ID (Element ID)	입력란(필드) 이름 (Field Name)	예제 데이터 (Example Data)
titleText	Title	Wix Meetup: San Francisco
dateText	Schedule formatted	December 17, 2018 at 7:00 PM
descriptionText	Description	Join us for the Wix Meetup in...
page1	Main image	-

 

 

 

 

사용자 지정 이벤트 세부 정보 페이지 링크 (Link to a Custom Event Details Page)

이 시점에서 우리는 작동중인 사용자 지정 세부 정보 페이지를 가지고 있습니다. 이제 사용자가 세부 정보 페이지에 접근할 수 있는 방법을 설정해야합니다. 일반적으로 방문자는 사용자 지정 이벤트 갤러리를 통해 사용자 지정 이벤트 세부 정보 페이지에 도달합니다. 사용자 지정 이벤트 갤러리를 이미 만들었다고 가정하면 갤러리의 세부 정보 페이지에 대한 링크를 추가해야합니다.

 

세부 정보 페이지에 연결하기 위해 이벤트 갤러리의 반복 레이아웃에 버튼을 추가합니다. 링크의 

 데이터 연결 버튼을 사용하여 위에 만든 동적 페이지인 Events/Events{Slug}에 버튼을 연결합니다.

 

 

 

 

선택적 링크 (Optional Links)

원하는 경우 사용자 지정 세부 정보 페이지의 추가 기능에 대한 링크를 추가할 수 있습니다. 이 예에서는 세 개의 버튼을 추가합니다.

- 이벤트 목록으로 돌아가기

- 구글(Google) 캘린더에 추가하기

- 이벤트 등록하기

 

 

 

 

 

이벤트 목록으로 돌아가기 (Back to Event List)

뒤로 버튼은 사용자 지정 이벤트 갤러리로 방문자를 보냅니다. 그것을 만들기 위해 버튼을 추가하고 텍스트를 이벤트 목록으로 돌아가기로 변경합니다. 사용자 지정 이벤트 갤러리는 동적 페이지가 아닌 페이지에 만들어지기 때문에 

 링크 버튼을 사용합니다

 

사용자 지정 갤러리를 사용하여 페이지에 대한 링크를 설정합니다.

 

 

 

 

구글(Google) 캘린더에 추가하기 (Add to Google Calendar)

구글(Google) 캘린더에 추가 버튼은 이벤트를 방문자의 구글(Google) 캘린더에 추가합니다. 그것을 만들기 위해 버튼을 추가하고 텍스트를 구글(Google) 캘린더에 추가로 변경합니다. 구글(Google) 캘린더 링크는 Events 컬렉션에 저장되어 있으므로 

 데이터 연결 버튼을 사용하여 페이지 데이터세트에 연결합니다. 링크에서 구글(Google) 캘린더 URL 입력란(필드)를 선택합니다.

 

 

 

 

이벤트 등록하기 (Register for Event)

이벤트 버튼 등록 버튼은 방문객을 내장된 등록 양식으로 안내합니다. 이것을 만들기 위해 버튼을 추가하고 텍스트를 이벤트 등록으로 변경합니다. 다시 한번 링크가 Events 컬렉션에 저장되기 때문에 

 데이터 연결 버튼을 사용하여 페이지 데이터세트에 연결합니다. 링크에서 등록 URL 입력란(필드)를 선택합니다.

 

 

 

팁 :

등록 페이지의 뒤로 버튼을 누르면 방문자가 사용자 지정 갤러리가 아닌 기본 제공 이벤트 세부 정보 페이지로 이동합니다. 방문자가 클릭하지 못하게하는 페이지 요소로 뒤로 버튼을 숨길 수 있습니다.

 

 

 

 

 

연관된 토픽)

 

 

윅스 홈페이지 만들기 101

윅스 (Wix) 홈페이지 만들기 101 - E-Book - Index

윅스 (Wix) 홈페이지 만들기 101 - E-Book - Index

 

출처 :

https://support.wix.com/en/article/creating-a-custom-event-details-page