wordpress woocommerce order 버튼 누를때 다음 단계로 넘어가기 전에 customizing alert창

wordpress woocommerce order 버튼 누를때 다음 단계로 넘어가기 전에 customizing alert창

더시민 0 767 0

angular js 여서 좀 깝깝하긴 했는데

 

 

진행 처리 과정에서

 

html에 적당하게 넣어준 모달 alert 창 하나 만들어주고 


<style>
.check-section{ display: none;width:100%;max-width: 500px;height: 242px;border-radius: 5px;padding: 2em 1em;box-sizing: border-box;text-align: center;background: #f4d6de;box-sizing: border-box;position: absolute;top: 50%;left: 50%;-webkit-transform: translate(-50%, -50%);-ms-transform: translate(-50%, -50%);-moz-transform: translate(-50%, -50%);-o-transform: translate(-50%, -50%);transform: translate(-50%, -50%);z-index: 9999;}
.menu_msg{font-size: 1.2em;font-weight:bold;color:#000;}
.enroll_box p{}
.gray_btn {width: 90px;background: #ffffff;color: #999999;height: 36px;line-height: 36px;transition: 0.5s;font-size: 17px;}
.pink_btn {width: 90px;background: #ed1779;color: #fff;height: 36px;line-height: 36px;transition: 0.5s;font-size: 17px;border: none;}
@media screen and (max-width: 769px) {
.check-section{top:70%;}    
.menu_msg{font-size: 1.0em;}
}
.type-confirm.active{display:block;}
</style>
<section class="check-section type-confirm" id="pre_pop">
    <div class="enroll_box">
        <p class="menu_msg">Merry Christmas & Happy New Year!</p>
        <p class="menu_msg">+ 2 WEEK CLOSURE -23rd Dec - 06th Jan *</p>
        <p class="menu_msg">If you place an order, please expet to hear back from us<br />after 6th of January 2022.</p>
    </div>
    <div class="enroll_btn">
        <button class="btn pink_btn btn_ok" ng-click="order_click(event)" ng-disabled="form.disable_btn">OK</button>
    </div>
</section>        

 

js로 가서 

 

order_함수 에서 

 

아주 단순하게 방법찾음

처음에는 sync async . promise 등등 setinterval ...온갖 방법찾아내다가 그냥

step1단계에서 커스터마이징 된 alert창이 있으면 .....주문으로 통과하고 없으면 창 띄우기로 하면 됨.끝

그리고 alert창의 확인 버튼도 주문이벤트 똑같이 걸어버리면 됨;

.......
if (jQuery(".type-confirm").hasClass("active")) {
    jQuery(".type-confirm").removeClass("active");
}else  {
    jQuery(".type-confirm").addClass("active");
    return false;
}        
.........

 

 

0 Comments
제목
Category
Facebook Twitter GooglePlus KakaoStory KakaoTalk NaverBand