윅스 (Wix) 코딩 강의 초급 (Beginner) - 팝업창 만들기 (Stories) - 상호작용 (Interaction)

윅스 (Wix) 코딩 강의 초급 (Beginner) - 팝업창 만들기 (Stories) - 상호작용 (Interaction)

윅스 (Wix) 코딩 강의 초급 (Beginner) - 팝업창 만들기 (Stories) - 상호작용 (Interaction)

강의 내용 요약

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

 

라이트박스 혹은 팝업창을 활용하여 웹사이트에 방문한 방문자들에게 알리고자 하는 내용 및 문구를 만듭니다.

 

 

예제 보러가기 (View Example)

Home | StoriesExample

 

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

Log In | Wix

 

 

강의 내용 만드는법

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

 

• 데이터베이스 컬렉션 - 팝업창에 표시할 내용을 저장한 데이터베이스 컬렉션이 필요합니다. 컬렉션에는 Member, StoryParts를 만듭니다.
• 열 스트립 (Column Strip)
• 반복 레이아웃 (Repeater)
• 이미지 구성요소
• 텍스트 구성요소 2개
• 버튼 구성요소 2개

 

코드 (Code)

Home

import wixData from 'wix-data';
import wixWindow from 'wix-window';

$w.onReady(function () {

});

export function storiesRepeater_itemReady($item, itemData, index) {
	$item("#storyImage").src = itemData.storyParts[0].src;
	$item("#storyImage").onClick(() => {
		wixWindow.openLightbox("Story", itemData);
	})
}

 

Story

import wixWindow from 'wix-window';
import wixData from 'wix-data'

let story;
let currentStoryPartIndex;

$w.onReady(function () {
	loadCurrentStory();
});

function loadCurrentStory() {
	story = wixWindow.lightbox.getContext(); //Get chosen story data
	currentStoryPartIndex = 0; //Set current displayed story part index
	displayCurrentStoryPart(story.storyParts[currentStoryPartIndex]);

}

function displayCurrentStoryPart(storyPartIndex) {
	$w("#storyImage").src = storyPartIndex.src;
	$w("#storyTitle").text = storyPartIndex.title ? storyPartIndex.title : ""; // Checking if there is a title before placing it, otherwise change to blank.
	$w("#storyContent").text = storyPartIndex.description ? storyPartIndex.description : ""; // Checking if there is content before placing it, otherwise change to blank.
}

export function back_click(event) {
	if (currentStoryPartIndex === 0) { //Closes story lightbox if it is the first story part and user pressed 'back'
		wixWindow.lightbox.close();
	}
	else {
		currentStoryPartIndex -= 1;
		displayCurrentStoryPart(story.storyParts[currentStoryPartIndex]);
	}
}

export function next_click(event) {
	if (currentStoryPartIndex === story.storyParts.length -1) { //Closes story lightbox if it is the last story part and user pressed 'next'
		wixWindow.lightbox.close();
	}
	else {
		currentStoryPartIndex +=1;
		displayCurrentStoryPart(story.storyParts[currentStoryPartIndex]);
	}
}

 

 

API

WixWindow.Lightbox API

$w.Text API

$w.Repeater API

Wix Window API

 

 

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

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

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

 

 

연관된 토픽)

윅스 (Wix) 코딩 초급 (Beginner) - 레이아웃 변경하기 (Change Layout) - 상호작용 (Interactions)

윅스 (Wix) 코딩 초급 (Beginner) - 레이아웃 변경하기 (Change Layout) - 상호작용 (Interactions)

 

윅스 홈페이지 만들기 101

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

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

 

출처 :

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

Stories | Corvid by Wix Examples | Wix.com