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

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

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

강의 내용 요약

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

 

윅스 쇼핑몰에서 방문자가 선호하는 상품을 추천하는 기능을 만듭니다.

 

 

예제 보러가기 (View Example)

Beauty | Related Items view

 

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

Log In | Wix

 

 

강의 내용 만드는법

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

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

 

코드 (Code)

Product Page

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

import wixData from 'wix-data';
import wixLocation from 'wix-location';

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

$w.onReady(async function () {
	// Get the current product's data.
	let product = await $w('#productPage').getProduct();
	// Load the products that are related to the currently displayed product using the loadRelatedProducts() function.
	loadRelatedProducts(product);
});

// Load the products that are related to the currently displayed product.
async function loadRelatedProducts(product) {
	// Get the related product results using the relatedProductsByCollection() and relatedProductsByPrice() functions.
	let relatedProductResults = await Promise.all([
		relatedProductsByCollection(product),
		relatedProductsByPrice(product)
	]);

	// If there are related products found in the "related-products" collection:	
	if (relatedProductResults[0].length > 0)
		// Show the related products from the collection.
		showRelatedProducts(relatedProductResults[0]);
	// If there are no related products found in the "related-products" collection:	
	else
		// Fallback to showing the related products by price.
		showRelatedProducts(relatedProductResults[1]);
}

// Get related products based on the relations set in the "related-products" collection.
async function relatedProductsByCollection(product) {
	// Get the current product's ID.
	let productId = product._id;

	// Find related products in the relationship collection by querying for related products in both relation directions.
	let relatedByTable = await Promise.all([
		wixData.query('related-products')
		.eq('productA', productId)
		.include('productB')
		.find(),
		wixData.query('related-products')
		.eq('productB', productId)
		.include('productA')
		.find()
	]);

	// Merge related products found from both sides of the relationship collection.
	let relatedProducts = [
		...relatedByTable[0].items.map(_ => _.productB),
		...relatedByTable[1].items.map(_ => _.productA)
	];

	//Return the related products found in the collection.
	return relatedProducts;
}

// Get related products based on the the product prices.
async function relatedProductsByPrice(product) {
	// Get the current product's ID.
	let productId = product._id;

	// Query the "Products" collection for product's whose price is within 20% of the current product's price.
	let relatedByPrice = await wixData.query('Stores/Products')
		.between('price', product.price * 0.8, product.price * 1.2)
		.ne('_id', productId)
		.find();
	// Return the related items extracted from the query results.
	return relatedByPrice.items;
}

// Show the related products on the page.
function showRelatedProducts(relatedProducts) {
	// If there are any related products:
	if (relatedProducts.length > 0) {
		// Remove all but the first four related items.
		relatedProducts.splice(4, relatedProducts.length);
		// Set the function that runs when the related items repeater data is loaded to be relatedItemReady().
		$w('#relatedItemsRepeater').onItemReady(relatedItemReady);
		// Set the related items repeater data to the first four related items.
		$w("#relatedItemsRepeater").data = relatedProducts;
		// Expand the related items repeater.
		$w("#relatedItems").expand();
	}
	// If there are no related products:
	else {
		// Collapse the related items repeater.
		$w("#relatedItems").collapse();
	}
}

// Set up the related items repeater as its data is loaded.
function relatedItemReady($item, product) {
	// Populate the repeater elements from the item data.
	$item("#productImage").src = product.mainMedia;
	$item("#productName").text = product.name;
	$item("#productPrice").text = product.formattedPrice;
	// Set the action that occurs when the image is clicked.
	$item('#productImage').onClick(() => {
		// Navigate to the related product's product page.
		loadRelatedProducts(product);
		wixLocation.to(product.productPageUrl);
	});
}

 

API

Wix Data API

Wix Location API

 

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

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

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

 

 

연관된 토픽)

윅스 (Wix) 코딩 강의 초급 (Beginner) - 관련된 글 란 만들기 (Related Posts) - 윅스 블로그 (Wix Blog)

윅스 (Wix) 코딩 고급 (Advanced) - 상품 리뷰 만들기 (Product Reviews) - 윅스 쇼핑몰, 스토어 (Wix Stores)

윅스 (Wix) 코딩 고급 (Advanced) - 커스텀 제품 만들기 (Product Configurator) - 윅스 쇼핑몰, 스토어 (Wix Stores)

 

윅스 홈페이지 만들기 101

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

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

 

출처 :

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

Related Items | Corvid by Wix Examples | Wix.com