윅스 (Wix) 코딩 강의 고급 (Advanced) - 장바구니 위시리스트 만들기 (Wishlist) - 윅스 쇼핑몰, 스토어 (Wix Stores)

윅스 (Wix) 코딩 강의 고급 (Advanced) - 장바구니 위시리스트 만들기 (Wishlist) - 윅스 쇼핑몰, 스토어 (Wix Stores)

윅스 (Wix) 코딩 강의 고급 (Advanced) - 장바구니 위시리스트 만들기 (Wishlist) - 윅스 쇼핑몰, 스토어 (Wix Stores)

강의 내용 요약

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

 

웹사이트 만들어진 쇼핑몰에서 자신이 사고자 하는 물건을 담을 수 있는 기능을 만듭니다. 장바구니와 같은 기능입니다.

 

예제 보러가기 (View Example)

Shop | Wishlist view

 

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

Log In | Wix

 

 

강의 내용 만드는법

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

• 데이터베이스 컬렉션
• 데이터셋
• 이미지
• 텍스트

 

코드 (Code)

My Wishlist

// For full API documentation, including code examples, visit http://wix.to/94BuAAs

//-------------Imports-------------//

// Import the wix-data module for working with queries.
import wixData from 'wix-data';
// Import the wix-users module for working with users.
import wixUsers from 'wix-users';
// Import the wix-location module for navigating to pages.
import wixLocation from 'wix-location';

//-------------Page Setup-------------//

$w.onReady(async function () {
	// Get the current user.
	let user = wixUsers.currentUser;
	
	// If the current user is logged in:
	if(user.loggedIn)
		// Load the user's wishlist using the loadWishlist() function.
		return loadWishlist();
	
	// If the current user is not logged in:
	// Collapse the wishlist.
	$w('#wishlist').collapse();
	// Expand the empty whishlist.
	$w('#emptyWishlist').expand();
});

// Load and display the current user's wishlist.
async function loadWishlist(){
	// Get the current user.
	let user = wixUsers.currentUser;
	// Query the "products-wishlist" collection for all wishlist items belonging to the current user.
	let wishlistResult = await wixData.query("products-wishlist")
			.eq("userId", user.id)
			.include('product')
	  		.find()
	
	// If any wishlist items were found:
	if (wishlistResult.length > 0) {
		// Expand the wishlist.
	  	$w("#wishlist").expand();
		// Collapse the empty wishlist.
		$w("#emptyWishlist").collapse();
		// Set the wishlist repeater's data.
	  	$w("#wishlist").data = wishlistResult.items;
		// Set the action that occurs when the wishlist repeater items are loaded to the myItemReady() function. 
		$w('#wishlist').onItemReady(myItemReady);
	} 
	// If no wishlist items were found:
	else {
		// Collapse the wishlist.
	  	$w("#wishlist").collapse();
		// Expand the empty wishlist.
	  	$w("#emptyWishlist").expand();
	}	
}

// Set up the wishlist repeater items when the repeater's data is loaded.
function myItemReady($w, wishlistItem){
	// Get the wishlist product.
	let product = wishlistItem.product;
	// Set the repeater's elements using the item data.
	$w('#productImage').src = product.mainMedia;
	$w('#name').text = product.name;
	$w('#price').text = product.formattedPrice;
	// Set the action that occurs when the product image is clicked.
	$w('#productImage').onClick(() => {
		// Navigate to the wishlist item's product page.
		wixLocation.to(product.productPageUrl);
	});
	// Set the action that occurs when the remove item image is clicked to the removeItem() function.
	$w('#removeItem').onClick(removeItem(wishlistItem._id));
}

// Remove an item from the user's wishlist.
function removeItem(id) {
	return async function() {
		// Remove the item with the specified ID from the "products-wishlist" collection.
		await wixData.remove('products-wishlist', id);
		// Reload the wishlist to reflect the removed item.
		loadWishlist();
	}
}

 

Product Page

//-------------Imports-------------//

// Import the wix-data module for working with queries.
import wixData from 'wix-data';
// Import the wix-users module for working with users.
import wixUsers from 'wix-users';

//-------------Global Variables-------------//

// Current product.
let product;
// Current user.
let user = wixUsers.currentUser;

//-------------Page Setup-------------//

$w.onReady(async function () {
	// Get the currently displayed product.
	product = await $w('#productPage1').getProduct();
    // Check if the current product is in the wishlist and act accordingly.
	checkWishlist();
	// Set the action that occurs when the login message is clicked to be the loginMessageClick() function.
	$w('#loginMessage').onClick(loginMessageClick);
});

// Check if the current product is in the wishlist and act accordingly.
async function checkWishlist() {
	// If the current user is logged in:
	if (wixUsers.currentUser.loggedIn) {
		// Query the "products-wishlist" collection to find if the product was already added to the user's wishlist.
		let wishListResult = await wixData.query("products-wishlist")
			.eq("product", product._id)
			.eq("userId", user.id)
			.find();

		// If the product was already added to the user's wishlist:
		if(wishListResult.items.length > 0)
			// Show the "inWishList" image with a fade effect.
			$w('#inWishList').show('fade', {duration: 100});
		// If the product was not yet added to the user's wishlist:
		else
			// Show the "notInWishList" image with a fade effect.
			$w('#notInWishList').show('fade', {duration: 100});	
	}
	// If the current user is not logged in:
	else {
		// Show the "notInWishList" image with a fade effect.
		$w('#notInWishList').show('fade', {duration: 100});
	}
}

//-------------Event Handlers-------------//

// Set the action that occurs when the "inWishList" image is clicked.
export function inWishList_click(event, $w) {
	// If the current user is logged in:
	if (user.loggedIn) 
		// Remove the current product from the wishlist.
		removeFromWishlist();
}

// Set the action that occurs when the "notInWishList" image is clicked.
export function notInWishList_click(event, $w) {
	// If the current user is logged in:
	if (user.loggedIn) 
		// Add the current product to the wishlist.
		addToWishlist()
	// If the current user is not logged in:
	else 
		// Show the login message.
		$w('#loginMessage').show();
}

// Set the action that occurs when the login message is clicked.
async function loginMessageClick() {
	// Set the login options.
	let options = {"mode": "login"};
	// Hide the login message.
	$w('#loginMessage').hide();
	// Prompt the user to login using the options created above.
	await wixUsers.promptLogin(options);
}

//-------------Wishlist Functionality-------------//

// Add the current product to the current user's wishlist and update the page accordingly.
async function addToWishlist() {
	// Create the wishlist item relating the current product to the current user.
	let wishListItem = {
		product: product._id, 
		userId: user.id
	};
    
	// Hide the "notInWishList" image with a fade effect.
	$w('#notInWishList').hide('fade', {duration: 100});
	// Show the "inWishList" image with a fade effect.
	$w('#inWishList').show('fade', {duration: 100});
	// Insert the item created above into the "products-wishlist" collection.
	let result = await wixData.insert("products-wishlist", wishListItem);
}

// Remove the current product to the current user's wishlist and update the page accordingly.
async function removeFromWishlist() {
	// Query the "products-wishlist" collection to find the wishlist item corresponding to the current product and current user.
	let wishListResult = await wixData.query("products-wishlist")
		.eq("product", product._id)
		.eq("userId", user.id)
		.find();

	// If a wishlist item was found:
	if (wishListResult.length > 0) {
		// Show the "notInWishList" image with a fade effect.
		$w('#notInWishList').show('fade', {duration: 100});
		// Hide the "inWishList" image with a fade effect.
		$w('#inWishList').hide('fade', {duration: 100});
		// Remove the wishlist item from the "products-wishlist" collection.
		await wixData.remove("products-wishlist", wishListResult.items[0]._id)
	}
}

 

API

$w.ProductPage 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) 코딩 강의 고급 (Advanced) - 인기 상품 만들기 (Highest-Rated Products) - 윅스 쇼핑몰, 스토어 (Wix Stores)

윅스 (Wix) 코딩 강의 고급 (Advanced) - 인기 상품 만들기 (Highest-Rated Products) - 윅스 쇼핑몰, 스토어 (W

 

 

윅스 홈페이지 만들기 101

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

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

 

출처 :

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

Wishlist | Corvid by Wix Examples | Wix.com