100원딜 이벤트 코드 메모
옵션창에서 일단 기본적으로 이벤트 진행 항목을 새로 기입을 해야한다!
그리고 해당 페이지에서 옵션 항목의 빨간 구역을 선택할 때, 노랑 구역에 옵션 개월수마다 상이한 100원딜 선택 창이 노출된다. 파란 구역을 선택할 때는 따로 100원딜 적용이 불가하도록 설정!
예를 들어 4개월을 선택 시에 최대 갯수가 4개이며, 4개 이상이 갈 경우 경고창이 뜨도록 설정!
또한 -와 +를 눌렀을 때 변하는 숫자값이 (0/4) 부분에 같이 숫자가 변환된다!
또 갯수를 선택 한 후에 선택완료를 누르면(이미지로는 최대 갯수인 4개를 선택해 400원)
하단에 추가한 옵션창이 노출된다! 해당 부분에서 상위의 옵션창을 x를 누르게 되면 아래의 100원딜 옵션창도 트리거 클릭이 되도록 설정하였다!
🖥️ 코드 (추후 자세한 설명 기입 예정)
<script>
if(pdNo == 12){
console.log('100원딜');
// css 변환 코드 (설명 필요 x)
var deal100 = '<div class="deal100"><div class="dim dim1"></div><div class="dim dim2"></div><strong>100원딜<br/></strong><ul><li><p>프리미엄 1개월 본품
~ ~ ~
$('.xans-product-detail .opt_layer > table').after(deal100);
$('.deal100 .dim1').click(function(){
alert('필수 옵션을 선택해주세요');
})
$('.deal100 .dim2').click(function(){
alert('100원딜 선택 불가 옵션입니다');
})
setInterval(function(){
if ($('.xans-product-detail .opt_layer .xans-product-option .ec-product-radio > li:nth-of-type(1)').hasClass('ec-product-selected')) {
$('.deal100 .dim').hide();
$('.deal100 .dim2').hide();
} else if ($('.xans-product-detail .opt_layer .xans-product-option .ec-product-radio > li:nth-of-type(2)').hasClass('ec-product-selected')) {
$('.deal100 .dim').hide();
$('.deal100 .dim2').hide();
} else if ($('.xans-product-detail .opt_layer .xans-product-option .ec-product-radio > li:nth-of-type(3)').hasClass('ec-product-selected')) {
$('.deal100 .dim').hide();
$('.deal100 .dim2').hide();
} else if ($('.xans-product-detail .opt_layer .xans-product-option .ec-product-radio > li:nth-of-type(4)').hasClass('ec-product-selected')) {
$('.deal100 .dim').hide();
$('.max_txt').hide();
$('.deal100 .dim2').show();
} else if ($('.xans-product-detail .opt_layer .xans-product-option .ec-product-radio > li:nth-of-type(5)').hasClass('ec-product-selected')) {
$('.deal100 .dim').hide();
$('.max_txt').hide();
$('.deal100 .dim2').show();
} else if ($('.xans-product-detail .opt_layer .xans-product-option .ec-product-radio > li:nth-of-type(6)').hasClass('ec-product-selected')) {
$('.deal100 .dim').hide();
$('.max_txt').hide();
$('.deal100 .dim2').show();
}
},100)
$(".deal100 .button").click(function() {
var $button = $(this);
var oldValue = $button.parent().find("input").val();
var newVal;
// 현재 선택된 옵션에 따른 최대 개수(opt_max) 설정
var opt_max = 0;
if (prdUl.find('li:nth-of-type(1)').hasClass('ec-product-selected')) {
opt_max = 2;
} else if (prdUl.find('li:nth-of-type(2)').hasClass('ec-product-selected')) {
opt_max = 1;
} else if (prdUl.find('li:nth-of-type(3)').hasClass('ec-product-selected')) {
opt_max = 4;
}
// sum 계산
var sum = 0;
$('.c_input').each(function() {
sum += Number($(this).val());
});
// 값 증가 또는 감소
if ($button.text() == "+") {
newVal = parseFloat(oldValue) + 1;
// 최대 값 초과 제한
if (sum + 1 > opt_max) {
alert('최대 ' + opt_max + '개까지 선택 가능합니다.');
newVal = oldValue; // 값 증가하지 않음
}
} else {
if (oldValue > 0) {
newVal = parseFloat(oldValue) - 1;
} else {
newVal = 0;
}
}
$button.parent().find("input").val(newVal);
// sum 다시 계산 (값이 변경된 후)
sum = 0;
$('.c_input').each(function() {
sum += Number($(this).val());
});
// 옵션에 따른 로직
if (prdUl.find('li:nth-of-type(1)').hasClass('ec-product-selected')) {
console.log('1번 실행');
$('.max_txt').show();
updateMaxTxt(sum, 2); // 함수 호출로 span 업데이트
if (sum == 2) {
$('.c_input').attr('disabled', true);
$('.c_opts td span.comp').css('z-index', '-1');
} else if (sum < 2) {
$('.c_opts td span.comp').css('z-index', '1');
}
} else if (prdUl.find('li:nth-of-type(2)').hasClass('ec-product-selected')) {
console.log('2번 실행');
$('.max_txt').show();
updateMaxTxt(sum, 1); // 함수 호출로 span 업데이트
if (sum == 1) {
$('.c_input').attr('disabled', true);
$('.c_opts td span.comp').css('z-index', '-1');
} else if (sum < 1) {
$('.c_opts td span.comp').css('z-index', '1');
}
} else if (prdUl.find('li:nth-of-type(3)').hasClass('ec-product-selected')) {
console.log('3번 실행');
$('.max_txt').show();
updateMaxTxt(sum, 4); // 함수 호출로 span 업데이트
if (sum == 4) {
$('.c_input').attr('disabled', true);
$('.c_opts td span.comp').css('z-index', '-1');
} else if (sum < 4) {
$('.c_opts td span.comp').css('z-index', '1');
}
} else {
$('.cd_select').hide();
$(".deal100 .button").off('click');
$('.c_input').attr('disabled', false);
$('.c_input').val(0);
$('.c_opts td span.comp').css('z-index', '1');
}
});
// span 업데이트를 위한 함수 추가
function updateMaxTxt(currentSum, opt_max) {
var opt_max_txt = "<div style='color:#008055'>최대 " + opt_max + "개까지 선택 후 '선택 완료' 버튼을 눌러주세요. <span>(" + currentSum + "/" + opt_max + ")</span><strong style='display:block; color:red'> '선택 완료'를 누르면 100원딜 주문이 반영됩니다.</strong></div>";
$('.max_txt').html(opt_max_txt);
}
// 옵션 선택 후 최대 선택 개수 정보 업데이트
$('.xans-product-detail .opt_layer .xans-product-option .ec-product-radio > li').click(function() {
var opt_max = 0;
setTimeout(function() {
if (prdUl.find('li:nth-of-type(1)').hasClass('ec-product-selected')) {
opt_max = 2;
} else if (prdUl.find('li:nth-of-type(2)').hasClass('ec-product-selected')) {
opt_max = 1;
} else if (prdUl.find('li:nth-of-type(3)').hasClass('ec-product-selected')) {
opt_max = 4;
} else {
opt_max = 0;
}
var opt_max_txt = "<div style='color:#008055'>최대 " + opt_max + "개까지 선택 후 '선택 완료' 버튼을 눌러주세요. <span>(" + 0 + "/" + opt_max + ")</span><strong style='display:block; color:red'> '선택 완료'를 누르면 100원딜 주문이 반영됩니다.</strong></div>";
$('.max_txt').html(opt_max_txt);
}, 200);
// 입력된 값 초기화
$('.c_input').attr('disabled', false);
$('.c_input').val(0);
});
// 선택한 옵션을 트리거하는 코드
$(".deal100 .choice").click(function() {
var choice_opt = $('.deal100 .input_wrap input').val();
prdUl2.find('li:nth-of-type(' + choice_opt + ')')[0].click();
});
}
</script>
웹 퍼블리셔의 코딩 일기