윅스 (Wix) 코딩 - 예제 목록 (Wix Code: Index of Examples)

윅스 (Wix) 코딩 - 예제 목록 (Wix Code: Index of Examples)

 

 

 

설명)

다음 코드 예제들은 윅스 코드(Wix Code)를 사용하여 사이트에 다양한 기능을 추가하는 방법을 보여줍니다. 각 예제에서 에디터로 이동하여 템플릿으로 보거나 사이트에 코드를 복사 / 붙여넣기를 할 수 있습니다. 이 예제들을 새로운 기능을 만드는 기초로 사용하고 자신만의 코드를 추가하여 자신만의 사이트의 기능을 추가합니다. 

 

콘텐츠 (Content)

이 섹션에서의 예제들은 사이트를 향상시키기 위한 데이터베이스 컬렉션 콘텐츠를 관리하는 방법을 보여줍니다.

 

다중 참조 쿼리 (Multi-Reference Query)

여러 항목 참조 필드를 쿼리하고 표(Table)에 결과를 표시합니다.

 

데이터베이스 검색 (Search a Database)

입력 요소를 페이지에 추가한 다음 검색을 가능하게하는 코드를 추가하여 사이트에 검색 기능을 추가합니다.

 

다중 선택 드롭다운 (Multi-Select Dropdown)

체크박스가 있는 드롭다운 메뉴를 만들고 여러 필터를 사용하여 데이터베이스를 검색하는 기능을 추가합니다.

 

저장된 검색 (Saved Search)

나중에 검색 할 수 있도록 검색 매개 변수를 저장합니다.

 

중복된 드롭다운 옵션 제거 (Remove Dropdown Duplicates)

연결된 드롭 다운 옵션에서 중복된 항목들을 제거합니다.

 

중복된 데이터베이스 방지 (Prevent Database Duplicates)

중복된 데이터가 데이터베이스 컬렉션에 들어가지 못하도록 합니다.

 

표 인덱스 (Table Index)

컬렉션 컨텐츠를 표시할 표(Table)의 색인 목록을 만듭니다.

 

갤러리 인덱스 (Gallery Index)

컬렉션 컨텐츠에 대한 그림과 같은 시각적인 색인 목록을 만듭니다.

 

텍스트 인덱스 (Text Index)

표나 갤러리 대신 텍스트 요소를 사용하여 사용자 정의된 색인 목록을 만듭니다.

 

주요 항목 (Featured Items)

색인 목록 페이지에서 주요 항목들을 선택하고, 두 개의 데이터세트를 사용하여 색인 항목을 주요 콘텐츠와 일반 콘텐츠로 나눕니다.

 

리뷰 (Reviews)

사용자 생성 콘텐츠를 수집하고 표시합니다. 정규식과 맞춤 유효성 검사 API를 사용하여 양식의 유효성을 검사합니다.

 

 

사용자 상호작용 /사용자 인터렉션 (User Interactions)

이 섹션의 예제들은 사용자의 경험을 향상시키기 위해 사이트에 특별한 기능을 추가하는 방법을 보여줍니다.

 

뒤로가기 버튼 (Back Button)

사이트 방문자가 이전에 본 페이지로 돌아가도록 합니다.

 

평점 입력 및 표시 (Ratings Input and Display)

사용자가 조리법을 평가하고 평점 결과를 표시 할 수 있습니다.

 

동영상 공개 (Reveal Video)

숨은 동영상을 볼 때 숨겨진 비디오의 섹션을 표시합니다.

 

컬러 마우스오버 (Color Hover)

사이트 방문자의 마우스 오버 움직임에 따라 배경색을 변경합니다.

 

슬롯 머신 (Slot Machine)

라이트 박스에서 슬롯 머신을 시뮬레이션합니다.

 

윅스 애니메이션 (Wix Animations)

윅스 애니메이션으로 재생합니다. 보이거나 숨길 때 이미지에 적용된 애니메이션을 변경합니다. 업로드 버튼을 활용하여 이미지를 변경합니다.

 

프리로더 (Preloader)

프리로더를 만들고 표시하여 사용자가 웹사이트 콘텐츠가 로드되고 있음을 알립니다.

 

프로모션 프리로더 (Promotional Preloader)

페이지가 로드될 때 사용자의 시선을 사로 잡도록 설계된 홍보용 프리로더를 만듭니다.

 

사이트 콘텐츠 변경 (Change Site Content)

사용자 상호 작용에 대한 응답으로 사이트 콘텐츠 변경합니다.

 

요소 숨기기 및 표시하기 (Hide and Show Elements)

사용자가 페이지와 상호 작용하는 방식에 따라 다른 페이지 요소를 숨기고 표시합니다.

 

요소 축소하기 (Collapse Elements)

접을 수 있는 섹션을 페이지에 통합합니다.

 

콜아웃 및 하이라이트 (Callout and Highlight)

이벤트 및 $w API를 사용하여 사용자 작업에 반응하여 페이지 내용을 변경합니다. 숨기기, 표시하기, 타이머 기능을 사용하여 콜아웃 및 하이라이트를 만듭니다.

 

레이아웃 변경 (Change Layout)

슬라이드쇼 요소를 사용하여 여러 슬라이드에서 여러 레이아웃을 디자인하고 코드를 사용하여 슬라이드를 변경합니다.

 

고정 헤더 (Frozen Header)

이벤트를 사용하여 헤더를 고정하고 사용자가 사이트를 스크롤 할 때 모양을 변경합니다.

 

 

 

사용자 입력 (User Input)

이 섹션의 예제들은 다양하게 사용자 정의된 사용자 입력 요소 및 양식을 사이트에 추가하는 방법을 보여줍니다.

 

반복 레이아웃 입력 구성 요소 (Input Components in Repeater)

반복 레이아웃에서 입력 구성 요소를 사용하고 반복 레이아웃 컨텐츠에 인라인 및 글로벌 조치를 적용합니다.

 

할 일 목록 (To-Do List)

사용자가 사용자 지정된 할 일 목록을 작성, 필터링 및 업데이트 할 수 있게 합니다. 데이터 바인딩이나 윅스 데이터 API(Wix Data API)를 사용하여 동일한 기능을 만들 수 있습니다.

 

기본 양식 (Basic Form)

코드 줄을 작성하지 않고 기본 양식을 작성합니다. 입력 요소, 데이터세트, 버튼등을 사용하여 사용자 입력 자료를 데이터베이스 컬렉션에 저장합니다.

 

축소된 양식 (Collapsing Form)

양식의 섹션을 축소하고 확장합니다.

 

다단계 양식 (Multistage Form)

슬라이드쇼를 사용하여 양식을 여러 단계로 나눕니다.

 

계단식 양식 (Cascading Form)

이전 선택을 기반 옵션을 사용하여 양식 요소를 자동으로 채웁니다.

 

사용자 정의 유효성 검사 (Custom Validations)

정규식과 사용자 지정 유효성 검사 API를 사용하여 양식의 유효성을 검사합니다.

 

메가 메뉴 (Mega Menu)

방문자의 선택을 기반으로 확장되는 메뉴를 만듭니다.

 

 

 

쇼핑몰/스토어 (Stores)

이 섹션의 예제들은 윅스 쇼핑몰 앱(Wix Stores app)에 다양하고 재밌는 기능을 사용자 정의하고 추가하는 방법을 보여줍니다.

 

제품 구성자 (Product Configurator)

고객에게 제품을 완벽하게 사용자 정의된 제품군을 보여줄 수 있는 도구를 제공합니다.

 

관련 상품 (Related Items)

가격, 브랜드등을 기반으로 한 제품을 추천합니다.

 

상점 리뷰 (Shop Reviews)

고객 평점 및 제품 리뷰를 통해 신뢰를 구축합니다.

 

대량 구매 장바구니/카트 담기 (Bulk Add to Cart)

고객이 장바구니에 여러 항목을 한꺼번에 추가 할 수 있게 합니다.

 

주문형 인쇄 (Print on Demand)

색상을 변경, 텍스트를 추가, 이미지를 업로드하여 제품을 개인화할 수 있게 합니다.

 

장바구니/카트 갤러리에 담기 (Add to Cart Gallery)

고객이 제품 갤러리에서 제품을 장바구니에 쉽게 추가 할 수 있게 합니다.

 

선물 퀴즈 (Gift Quiz)

고객이 퀴즈 및 제품 추천으로 완벽한 선물을 찾을 수 있도록 도와줍니다.

 

최고 평점 제품 (Highest Rated Products)

최고의 평점 제품들을 방문자들의 갤러리에 보여줍니다.

 

위시리스트 (Wishlist)

고객이 상품을 위시리스트에 추가하고 나중에 구매하도록 저장하게 합니다.

 

 

 

 

예약 (Bookings)

이 섹션의 예제들은 방문자의 예약 경험을 사용자 정의할 수 있는 방법을 보여줍니다.

 

시간표 (Time Table)

고객이 강의 일정을 이용하여 세션을 예약 할 수 있게 합니다.

 

서비스 페이지 (Service Page)

판매할 관련 제품이 포함된 맞춤 서비스 페이지를 만듭니다.

 

서비스 목록 (Service List)

서비스 목록을 필터링한 다음 사용 가능한 목록을 보여줍니다.

 

빠른 예약 및 예약 보류 (Quick Booking & Pending Appointments)

고객이 진행한 예약이 승인되었는지 거절되었는지 빠르게 알려줍니다.

 

 

SVG (Scalable Vector Graphics)

이 섹션의 예제들은 SVG (Scalable Vector Graphics)로 그래픽, 애니메이션 및 사용자 상호 작용을 만드는 방법을 보여줍니다.

 

동적 SVG (Dynamic SVG)

사이트에 간단한 SVG 조작을 추가합니다. : 스케일링(scaling), 그라디언트(gradients), 텍스트 라인 곡선 만들기(curved lines of text).

 

글자 이동 (Move Words)

사용자 상호 작용이 있는 고급 SVG 디자인을 사용하여 텍스트를 밀어 넣습니다.

 

선(라인) 간격 (Between the Lines)

사용자 상호 작용이 있는 고급 SVG 디자인을 사용하여 텍스트 줄을 구부립니다.

 

SVG 시계 (SVG Clock)

사용자 정의된 아날로그 시계를 만듭니다.

 

우주 침략군들 (Space Invaders)

고급 SVG 디자인을 사용하여 대화식 게임을 만듭니다.

 

SVG 이미지 수정 (Modify an SVG image)

윅스 패키지 관리자(Wix Package Manager)의 xml-js NPM 라이브러리를 사용하여 기존 SVG 이미지를 수정합니다.

 

 

고급 (Advanced)

이 섹션의 예제들은 고급 사용자에게 사이트에 유용한 기능을 추가하는 방법을 보여줍니다.

 

NPM을 사용하여 Google 시트에 데이터 저장 (Save Data to a Google Sheet Using NPM)

윅스 패키지 관리자(Wix Package Manager)에 포함된 Google API Node.js 클라이언트 패키지를 사용하여 Google 시트에 액세스합니다.

 

사이트 API 노출 및 액세스 (Expose and Access Site APIs)

외부 API를 노출하고 액세스하려면 MyApi 및 MyApiClient를 사용합니다.

 

SendGrid NPM 인터페이스로 이메일 보내기 (Send Email with SendGrid NPM Interface)

SendGrid NPM 라이브러리를 사용하여 전자 메일을 보냅니다.

 

SendGrid REST 인터페이스로 이메일 보내기 (Send Email with SendGrid REST Interface)

SendGrid REST API를 사용하여 전자 메일을 보냅니다.

 

스트라이프 결제 처리 (Stripe Payment Processing)

Stripe 결제 처리 시스템을 사이트에 통합합니다. 방문자, 프리미엄(등록) 및 프리미엄(유료)의 세 가지 기준의 사용자 액세스가 증명됩니다.

 

Google지도 서비스의 Places API 사용 (Using the Places API from Google Map Services)

Google Maps Places API 웹 서비스를 사용하여 위치 정보 쿼리를 보여줍니다. 쿼리는 백엔드(서버측) 웹모듈에서 수행됩니다.

 

Google지도의 다중 마커 (Multiple Markers in Google Maps)

여러 위치 마커, 마커 클러스터링 및 HTML 구성 요소를 사용하는 맞춤 컨트롤이 있는 사이트에 Google지도를 삽입합니다.

 

HTML 구성 요소가 있는 전체 화면 (Fullscreen with HTML Component)

이 예제는 지정된 요소를 전체 화면으로 변경하는 데 사용되는 HTML 전체 화면 API의 requestFullscreen 메소드를 보여줍니다.

 

 

 

추가 예제 (More Examples)

 

결제 API (Pay API)

윅스 코드 결제 API(Wix Code Pay API)를 사용하여 윅스 앱의 윅스 쇼핑몰/스토어(Wix App : Wix Stores)등을 사용하지 않고 방문자가 결제를 할 수 있도록 합니다.

 

데이터베이스 컬렉션을 사용한 결제 API (Pay API Using Collections)

데이터베이스 컬렉션의 제품에 대해 신속하고 안전하게 결제할 수 있도록 합니다.

 

Hello World (Hello World)

윅스 코드 (Wix Code) 소개.

 

날씨 위젯 만들기 (Create a Weather Widget)

제 3자 서비스에서 데이터를 가져와 위젯을 만듭니다.

 

카운트다운 (Countdown)

이벤트 카운트다운 기능 만들기

 

비즈니스 오픈 시간 (Open for Business)

방문객의 현재 날짜와 시간을 기준으로 귀하의 비즈니스가 열렸거나 폐쇄된 경우를 표시합니다.

 

차트 (Chart)

자바스크립트 포스트 메시지를 사용하여 HTML 구성 요소와 통신합니다. 이 예제에서는 페이지에 차트를 포함하는 방법을 배웁니다.

 

자바스크립트 놀이터 (JavaScript Playground)

자바스크립트(JavaScript) 스니펫을 작성하고 실행하기위한 놀이터를 만듭니다.

 

체스 (Chess)

페이지 요소 및 상호 작용을 사용하여 미리 패키지된 코드에 대한 사용자 인터페이스를 만듭니다.

 

 

연관된 토픽)

 

 

윅스 홈페이지 만들기 101

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

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

 

출처 :

https://support.wix.com/en/article/wix-code-index-of-examples