본 가이드는 기본 스킨(오로라)를 기준으로 스크립트를 사용하여 POD서비스를 구축하는 가이드입니다.
사전 정보
•
상품 관련 정보 조회
위의 페이지를 참조하여 작성하시면 되며,
isProduceMode가 EDIT 값이면 커스텀하기 버튼을 보여주고
DIRECT값이면 바로담기 버튼을 보여주도록 합니다.•
상품 옵션 리스트에서 EditorNo라는 필드가 생기는데 고객 분들께 안보이게 숨겨 주세요.
1.
구매 버튼 구성 변경
•
POD서비스에 맞게 아래와 같이 버튼 구성을 변경합니다.
•
버튼 별 기능은 아래를 참고해 주세요.
•
커스텀 가능여부 - 커스텀 가능 (isProduceMode ⇒ EDIT)
변경 전
POD 기능 적용 상태
•
커스텀 가능여부 - 바로구매 (isProduceMode ⇒ DIRECT)
변경 전
POD 기능 적용 상태 - 커스텀하기 버튼 제외 (편집이 불가하므로)
•
버튼 설명
◦
[커스텀하기]
▪
선택한 옵션을 기준으로 상품을 편집하는 기능
◦
[바로담기]
▪
상품을 편집하지 않고 바로 장바구니에 담는 기능
[주의사항]
•
POD상품은 편집이 필요해 한개의 옵션만 선택이 가능하여 여러개의 옵션이 들어가지 않도록 해주세요.
•
아래는 오로라 스킨 기준 구현 모습입니다.
•
[샘플 코드] 프로덕트 정보 조회 및 저장
const [isCustomBtn , setIsCustomBtn ] = useState("");
let saveInterval = null;
useEffect(() => {
if(saveInterval || isCustomBtn) return;
// 스크립트 로드 인터벌 생성
saveInterval = setInterval(()=>{
// 스크립트 로드 확인
if(window.podShop){
window.podShop.productInfo({callback : (value) => {
//정보 저장 후 인터벌 초기화
setIsCustomBtn(value.productInfo.isProduceMode);
clearInterval(saveInterval);
saveInterval = null;
}})
}
},300)
}, []);
JavaScript
복사
•
[샘플 코드] 커스텀하기 / 바로담기
//커스텀하기 / 바로담기 공통으로 사용합니다.
//커스텀하기는 editor , 바로담기는 directSave를 파라미터로 사용합니다.
//호출예시
//커스텀하기 : onClickCustom('editor')
//바로담기 : onClickCustom('directSave')
const onClickCustom = (type) => {
//옵션 선택여부를 확인합니다.
if (quantities.length === 0 || textOptionsByProduct.length === 0) {
openAlert({
message: '옵션을 선택해 주세요.'
});
return false;
}
//현재 선택된 옵션 정보를 가져옵니다.
const itemInfo = quantities[0].quantity;
//사전지식 부분에서 설명한 Editor-No의 Input 정보를 가져옵니다.
const editorNoVal = textOptionsByProduct[0].textOption;
//스크립트를 호출합니다. 자세한 사항은 스크립트 설명 부분을 봐 주세요.
window.podShop[type]({
channelProductVariantId : itemInfo.optionManagementCd,
callback : async (value) => {
const { data, type } = value;
//저장 완료 상태일때
if (data && type === "COMPLETE_SAVE") {
//저장 API를 실행합니다.
await addCart([
{
orderCnt: itemInfo.count,
channelType: searchParams.get('channelType'),
optionInputs: [{
inputNo: editorNoVal.inputNo,
inputLabel: editorNoVal.inputLabel,
//콜백에 전달된 editorNo의 값을 전달합니다.
inputValue: data.editorNo
}],
optionNo: itemInfo.optionNo,
productNo,
},
]);
//카트로 이동합니다.
navigate('/cart');
}
}
})
}
JavaScript
복사