윅스 (Wix) 코딩 강의 고급 (Advanced) - 커스텀 제품 만들기 2 (Print on Demand) - 윅스 쇼핑몰, 스토어 (Wix Stores)

윅스 (Wix) 코딩 강의 고급 (Advanced) - 커스텀 제품 만들기 2 (Print on Demand) - 윅스 쇼핑몰, 스토어 (Wix Stores)

윅스 (Wix) 코딩 강의 고급 (Advanced) - 커스텀 제품 만들기 2 (Print on Demand) - 윅스 쇼핑몰, 스토어 (Wix Stores)

강의 내용 요약

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

 

웹사이트에 방문한 방문들이 자신만의 상품을 만들어 주문할 수 있도록 만드는 기능을 만듭니다.

 

예제 보러가기 (View Example)

Notebook

 

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

Log In | Wix

 

 

강의 내용 만드는법

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

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

 

코드 (Code)

Site Code

//// For full API documentation, including code examples, visit http://wix.to/94BuAAs
$w.onReady(function () {

});

 

Home 

import wixLocation from 'wix-location';

$w.onReady(function () {
	// Redirect to a product's dynamic page.
	wixLocation.to("/customProducts/Notebook");
});

 

CustomProducts (Title)

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

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

// A static list of random phrases to be used when a user clicks the random button.
var randomPhrases = [
	"You're my definition of perfect.",
	"You keep me safe, I'll keep you wild.",
	"You're the macaroni to my cheese.",
	"I pinky promise I will love you forever.",
	"Stay Safe. Eat Cake.",
	"Veni, Vidi, Vici."
];

//-------------Data Setup-------------//

// Set up the background color and text color repeaters when the dataset has finished loading. 
export function dynamicDataset_ready() {
	// Get the product data from the current item.
	const currentProduct = $w("#dynamicDataset").getCurrentItem().product;
	// Get the product options from the product data.
	const productOptions = currentProduct.productOptions;
	// Set the background color repeater with the choices from the product's Background Color option. 
	$w('#bgColorRepeater').data = createColorRepeaterData('bgcolor', productOptions['Background Color'].choices);
	// Set the text color repeater with the choices from the product's Text Color option. 
	$w('#textColorRepeater').data = createColorRepeaterData('textcolor', productOptions['Text Color'].choices);
}

// Add an ID to the choices data so it can be used to populate a repeater.
function createColorRepeaterData(idPrefix, choices) {
	// Use the JavaScript map() function to add an _id field to each data item.
	return choices.map((item, index) => {
		item._id = `${idPrefix}-${index}`;
		return item;
	});
}

//-------------Repeater Setup-------------//

// Set up each item in the background colors repeater as it is loaded.
// Each item has a box that contains its color and a transparent button layered on top of the box. 
export function bgColorRepeater_itemReady($w, itemData, index) {
	// Set the current box's color to be the color from the current item's data.
	$w('#bgColorBox').style.backgroundColor = itemData.value;
	// Set the action that occurs when a user clicks the current background color button.
	$w('#bgColorBtn').onClick(() => {
		// Call the updateBackgroudColor() function with the current item's data.
		updateBackgroundColor(itemData);
	});
}

// Set up each item in the text colors repeater as it is loaded.
// Each item has a box that contains its color and a transparent button layered on top of the box.
export function textColorRepeater_itemReady($w, itemData, index) {
	// Set the current box's color to be the color from the current item's data.
	$w('#textColorBox').style.backgroundColor = itemData.value;
	// Set the action that occurs when a user clicks on a text color button.
	$w('#textColorBtn').onClick(() => {
		// Call the updateTextColor() function with the current item's data.
		updateTextColor(itemData);
	});
}

// Update the background color of the product image.
// There is a transparent product image mask layered on top of a box that changes colors. 
function updateBackgroundColor(colorItem) {
	// Set the text label in the color chooser to be the specified color.
	$w('#colorText').text = colorItem.description;
	// Set the background color of the box behind the transparent product image.
	$w("#bgColor").style.backgroundColor = colorItem.value;
}

// Update the color of the custom text.
function updateTextColor(colorItem) {
	// Set the text label in the color chooser to be the specified color.
	$w('#textColorName').text = colorItem.description;
	// Retrieve the value of the custom text and reset its color using inline html styling.
	$w("#customText").html = "<h6 style='text-align:center;color:" + colorItem.value + "'>" + $w('#customText').text + "</h6>";
}

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

// Change the customization options when a user clicks the Custom Text "tab". 
export function tabMenuText_click(event, $w) {
	$w("#textBox").show();
	$w("#bgBox").hide();
	$w("#tabMenuText").disable();
	$w("#tabMenuBg").enable();
}

// Change the customization options when a user clicks the Background "tab". 
export function tabMenuBg_click(event, $w) {
	$w("#bgBox").show();
	$w("#textBox").hide();
	$w("#tabMenuText").enable();
	$w("#tabMenuBg").disable();
}

// Update the custom text layer on top of the product image when information is entered in the text input element.
export function textInput_keyPress(event, $w) {
	// Delay updating for a tenth of a second to smooth out updates.
	setTimeout(() => {
		// Get the value from the custom text input element.
		const textToShow = $w("#textInput").value;
		// Set the value of the custom text layer on top of the product image.
		$w('#customText').text = textToShow;
		// If there is custom text:
		if (textToShow) {
			// Show the custom text layer.
			$w('#customText').show();
		} else {
			// Otherwise, hide the custom text layer.
			$w('#customText').hide();
		}
	}, 10);
}

// Set a random custom text when the random button is clicked.
export function randomButton_click(event, $w) {
	// Choose a random index value.
	const randomIndex = Math.floor(Math.random() * randomPhrases.length);
	// Set the custom text on the product image to the chosen random text.
	$w('#customText').text = randomPhrases[randomIndex];
	// Set the custom text in the custom text input element to the chosen random text.
	$w('#textInput').value = randomPhrases[randomIndex];
	// Show the custom text layer on the product image.
	$w('#customText').show();
}

// Automatically start the upload of the selected file 1 second after it is chosen.
export function uploadButton_change(event, $w) {
	// If there is a chosen file:
	if ($w("#uploadButton").value.length > 0) {
		//Automatically start the upload of the file 1 second after it is chosen.
		setTimeout(() => {
			$w("#uploadButton").startUpload().then(uploadedFile => {
				$w("#print").src = uploadedFile.url;
			});
		}, 1000);
	}
}

// Add the customized item to the shopping cart.
export function addToCartBtn_click(event, $w) {
	// Get the current product.
	const currentProduct = $w('#dynamicDataset').getCurrentItem().product;
	// Add the current product to the cart with the user's chosen background color, text color, custom text, and custom background image.
	$w('#shoppingCartIcon1').addToCart(currentProduct._id, 1, {
		"choices": {
			"Background Color": $w('#colorText').text,
			"Text Color": $w('#textColorName').text
		},
		"customTextFields": [{
				"title": "Custom Text",
				"value": $w('#textInput').value
			},
			{
				"title": "Background Image",
				"value": $w('#print').src
			}
		]
	});
}

function updateMenuButtons() {
	$w('#repeater1').forEachItem(($w, itemData) => {
		const currentDynamicId = $w('#dynamicDataset').getCurrentItem()._id;
		if (currentDynamicId === itemData._id) {
			$w('#button1').disable();
		} else {
			$w('#button1').enable();
		}
	});
}

export function dataset1_ready() {
	updateMenuButtons()
}

 

API

$w.Repeater API

Wix Location API

Wix Dataset API

 

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

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

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

 

 

연관된 토픽)

윅스 (Wix) 코딩 강의 중급 (Intermediate) - 기프트 선물 퀴즈 만들기 (Gift Quiz) - 윅스 쇼핑몰, 스토어 (Wix Stores)

윅스 (Wix) 코딩 강의 중급 (Intermediate) - 기프트 선물 퀴즈 만들기 (Gift Quiz) - 윅스 쇼핑몰, 스토어 (

 

윅스 홈페이지 만들기 101

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

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

 

출처 :

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

Print on Demand | Corvid by Wix Examples | Wix.com