윅스 (Wix) 코딩 고급 (Advanced) - 쇼핑몰 이메일 알림 만들기 (Notification When Back In Stock) - 윅스 쇼핑몰, 스토어 (Wix Stores)

윅스 (Wix) 코딩 고급 (Advanced) - 쇼핑몰 이메일 알림 만들기 (Notification When Back In Stock) - 윅스 쇼핑몰, 스토어 (Wix Stores)

윅스 (Wix) 코딩 고급 (Advanced) - 쇼핑몰 이메일 알림 만들기 (Notification When Back In Stock) - 윅스 쇼핑몰, 스토어 (Wix Stores)

강의 내용 요약

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

 

웹사이트 내 쇼핑몰에 방문한 방문자가 품절된 제품이 다시 들어왔을 때 관련 알람을 받을 수 있는 기능을 만듭니다.

 

예제 보러가기 (View Example)

Shop | Notify In Stock S

 

 

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

Log In | Wix

 

 

 

강의 내용 만드는법

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

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

 

 

코드 (Code)

Product Page

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

wixLocation.onChange((location) => {
	$w('#notifyButton').hide();
	productBackToStockNotificationInit();
});

$w.onReady(() => {
	productBackToStockNotificationInit();
});

async function productBackToStockNotificationInit() {
	const productObj = await getProductObj();
	const userEmail = await getUserEmail();
	const userNotifyObj = await getUserNotifyObj(userEmail, productObj.productId);

	$w('#notifyButton').onClick(async () => await setOnClickNotifyButton(productObj, userEmail));
	notifyButtonUIHandler(productObj, userNotifyObj.shouldNotifyUser);
}

async function getUserNotifyObj(userEmail, productId) {
	const { items } = await wixData.query('stockWaitList').eq('product', productId).eq('userEmail', userEmail).find();
	const shouldNotifyUser = items.length > 0;

	const shouldNotifyUserObj = { shouldNotifyUser };
	if (shouldNotifyUser) {
		shouldNotifyUserObj.itemId = items[0]._id;
	}

	return shouldNotifyUserObj;
}

function notifyButtonUIHandler(productObj, shouldNotifyUser) {
	productObj.isInStock ? $w('#notifyButton').hide() : $w('#notifyButton').show();
	$w('#notifyButton').label = shouldNotifyUser ? 'Cancel Notification' : 'Notify Me When In Stock';
}

async function setOnClickNotifyButton(productObj, userEmail) {
	$w('#notifyButton').label = 'please wait...'
	const newNotifyUserObj = await getUserNotifyObj(userEmail, productObj.productId);
	const objToInsert = {
		userEmail: userEmail,
		product: productObj.productId,
	}
	newNotifyUserObj.shouldNotifyUser ? await wixData.remove('stockWaitList', newNotifyUserObj.itemId) : await wixData.insert('stockWaitList', objToInsert);
	notifyButtonUIHandler(productObj, !newNotifyUserObj.shouldNotifyUser);
}

async function getProductObj() {
	const { inStock, _id } = await $w('#productPage').getProduct();
	const productObj = {
		isInStock: inStock,
		productId: _id,
	}

	return productObj;
}

function getUserEmail() {
	const user = wixUsers.currentUser;
	return user.getEmail();
}

 

email.jsw

import { getSecret } from 'wix-secrets-backend';
import sgMail from '@sendgrid/mail'

export async function sendEmail(userEmail, productName) {
	const sendgridKey = await getSecret('sendGridAPIkey'); // read more about secrets-manager here: https://support.wix.com/en/article/corvid-working-with-the-secrets-manager

	sgMail.setApiKey(sendgridKey);
	const message = {
		to: userEmail,
		from: 'corvid@wix.com',
		subject: 'Product is back to stock!',
		text: `Your product is back to stock: ${productName}`
	}

	return sgMail.send(message)
}

 

jobs.config

{
	"jobs": [{
		"functionLocation": "/checkProductAvailability.jsw",
		"functionName": "checkProductAvailability",
		"description": "check if the requested products are in stock",
		"executionConfig": {
			"time": "09:00"
		}
	}]
}

 

checkProductAvailability.jsw

import wixData from 'wix-data';
import { sendEmail } from 'backend/email.jsw';

export async function checkProductAvailability() {
	const { items } = await wixData.query('stockWaitList').include('product').find();

	items.forEach(async waitingItem => {
		if (waitingItem.product.inStock) {
			sendEmail(waitingItem.userEmail, waitingItem.product.name);
			await wixData.remove('stockWaitList', waitingItem._id);
		}
	});
}

 

API

Wix Stores Backend API

Wix Users API

Wix Data API

Wix Location API

Wix Secrets Backend API

 

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

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

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

 

 

 

 

연관된 토픽)

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

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

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

 

 

 

윅스 홈페이지 만들기 101

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

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

 

출처 :

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

Notification When Back In Stock | Corvid by Wix Examples | Wix.com