윅스 (Wix) 코딩 강의 중급 (Intermediate) - 추천 상품 만들기 (Featured Items) - 상호작용 (Interactions)

윅스 (Wix) 코딩 강의 중급 (Intermediate) - 추천 상품 만들기 (Featured Items) - 상호작용 (Interactions)

윅스 (Wix) 코딩 강의 중급 (Intermediate) - 추천 상품 만들기 (Featured Items) - 상호작용 (Interactions)

강의 내용 요약

다음의 예제는 Wix 윅스 무료 홈페이지 만들기의 자바스크립트 (Javascript) 코딩 기능을 활용할 수 있는 Corvid by Wix (윅스 코딩 - 콜비드) 를 활용하여 만듭니다.

 

웹사이트 내의 인덱스 페이지에 추천된 제품 기능을 만듭니다.

 

예제 보러가기 (View Example)

Featured Items | v2-content-featured

 

예제 에디터 확인하기 (Edit Now)

Log In | Wix

 

 

강의 내용 만드는법

만들고자 하는 윅스 사이트에 다음과 같은 구성 요소들이 필요합니다.

• 데이터베이스 컬렉션
• 데이터셋
• 갤러리
• 테이블 / 표
• 동적 페이지

 

코드 (Code)

Recipes (Title)

export function dynamicDataset_onReady(event) {
	let foodistaLink = $w('#dynamicDataset').getCurrentItem().linkFromFoodista;
	$w('#foodistaCredit').html = `<p style="font-size:10px; line-height:1.2em; text-align:center"><span style="letter-spacing:0em">
	  <span style="font-size:10px"><span class="color_11"><span style="font-weight:bold">
	  Recipe originally published by <span style="font-family:avenir-lt-w01_85-heavy1475544,sans-serif"><a href="${foodistaLink}" 
	  target="_blank">Foodista.com</a></span></span></span></span></span></p>`;
}

 

API

$w.HtmlComponent API

$w.HtmlComponent - Corvid API Reference

 

Corvid by Wix (윅스 코딩 - 콜비드) 개발자 모드/도구 활성화하는 방법

윅스 (Wix) 코딩 - 개발자 도구를 활성화하기 (Wix Code: How to Enable Developer Tools)

윅스 (Wix) 코딩 - 개발자 도구를 활성화하기 (Wix Code: How to Enable Developer Tools)

 

 

연관된 토픽)

윅스 (Wix) 코딩 중급 (Intermediate) - 관련 상품 만들기 (Related Items) - 윅스 쇼핑몰, 스토어 (Wix Stores)

윅스 (Wix) 코딩 중급 (Intermediate) - 관련 상품 만들기 (Related Items) - 윅스 쇼핑몰, 스토어 (Wix Stores)

 

윅스 홈페이지 만들기 101

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

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

 

출처 :

콜비드 - 윅스 코딩 (Corvid - Wix coding)

Featured Items | Corvid by Wix Examples | Wix.com