윅스 (Wix) 코딩 강의 중급 (Intermediate) - 좋아요 버튼 만들기 (Custom Like Button) - 윅스 블로그 (Wix Blog)

윅스 (Wix) 코딩 강의 중급 (Intermediate) - 좋아요 버튼 만들기 (Custom Like Button) - 윅스 블로그 (Wix Blog)

윅스 (Wix) 코딩 강의 중급 (Intermediate) - 좋아요 버튼 만들기 (Custom Like Button) - 윅스 블로그 (Wix Blog)

강의 내용 요약

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

 

블로그 웹사이트 내에 좋은 콘텐츠를 추천하는 좋아요 버튼 기능을 만듭니다.

 

예제 보러가기 (View Example)

My Favorite Design Shops in Stockholm

 

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

Log In | Wix

 

 

강의 내용 만드는법

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

• 데이터베이스 컬렉션 (Blog/Posts collection)
• 데이터베이스 컬렉션 (Blog/Categories collection)
• 데이터베이스 컬렉션 (Post Likes Data collection)
• 아이콘 버튼
• 이미지

 

코드 (Code)

data.js

import wixData from 'wix-data';

export async function PostLikeData_beforeInsert(item, context) {

	const { items } = await wixData.query("PostLikeData")
		.eq("userId", item.userId)
		.eq("post", item.post)
		.find()
	if (items.length) {
		return Promise.reject("Duplicated Likes Forbidden")
	}
	return item
}

 

Post

import wixData from 'wix-data';
import wixUsers from 'wix-users';

let currentPostId
let currentLikeButtonState

const likeButtonStates = {
	default: 'default',
	active: 'active',
	focus: 'focus'
}

$w.onReady(function () {
	let numberOfLikes

	$w('#post1').getPost().then(async post => {
		currentPostId = post._id;

		const { items: likeRecords } = await wixData.query('PostLikeData')
			.eq('post', currentPostId)
			.find()

		currentLikeButtonState = isLikedByCurrentUser(likeRecords) ? likeButtonStates.focus : likeButtonStates.default
		setLikeButtonStateUI(currentLikeButtonState)

		numberOfLikes = likeRecords.length
		setNumberOfLikes(numberOfLikes)
	})

	$w('#likeButtonDefault').onClick(async () => {
		setLikeButtonStateUI(likeButtonStates.active)
		numberOfLikes = numberOfLikes + 1;
		setNumberOfLikes(numberOfLikes)
		const newLikeRecord = {
			post: currentPostId,
			userId: wixUsers.currentUser.id
		}
		try {
			await wixData.insert('PostLikeData', newLikeRecord)
		} catch (error) {
			setLikeButtonStateUI(likeButtonStates.default)
			numberOfLikes = numberOfLikes - 1;
			setNumberOfLikes(numberOfLikes)
		}

	})

	$w('#likeButtonFocus').onClick(async () => {
		setLikeButtonStateUI(likeButtonStates.default)
		numberOfLikes = numberOfLikes - 1;
		setNumberOfLikes(numberOfLikes)
		try {
			const { items } = await wixData.query('PostLikeData')
				.eq('userId', wixUsers.currentUser.id)
				.find()
			const currentUserLikeRecordId = items[0]._id
			await wixData.remove('PostLikeData', currentUserLikeRecordId)
		} catch (error) {
			setLikeButtonStateUI(likeButtonStates.focus)
			numberOfLikes = numberOfLikes + 1;
			setNumberOfLikes(numberOfLikes)
		}
	})

});

function setNumberOfLikes(numberOfLikes) {
	$w('#likesCounter').text = numberOfLikes.toString()
}

function setLikeButtonStateUI(state) {
	switch (state) {
	case likeButtonStates.default:
		$w('#likeButtonDefault').show()
		$w('#likeButtonFocus').hide()
		break

	case likeButtonStates.focus:
		$w('#likeButtonFocus').show()
		$w('#likeButtonDefault').hide()
		break

	case likeButtonStates.active:
		$w('#likeButtonActive').show()
		$w('#likeButtonFocus').show()
		$w('#likeButtonDefault').hide()

		// Hide active GIF after animation ends
		setTimeout(() => {
			$w('#likeButtonActive').hide()
		}, 1000)
		break
	}
}

function isLikedByCurrentUser(likes) {
	return likes.some(likeRecord => {
		return likeRecord.userId === wixUsers.currentUser.id
	})
}

 

API

$w.VectorImage API

Wix Data API

Wix Users API

 

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

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

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

 

 

연관된 토픽)

윅스 (Wix) 코딩 강의 초급 (Beginner) - 블로그 답변란 만들기 (Custom Comments) - 윅스 블로그 (Wix Blog)

윅스 (Wix) 코딩 강의 중급 (Intermediate) - 블로그 포스트 페이지 만들기 (Custom Post Page) - 윅스 블로그 (Wix Blog)

 

 

윅스 홈페이지 만들기 101

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

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

 

출처 :

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

Custom Like Button | Corvid by Wix Examples | Wix.com