Tạo Popup đặt hàng từ Contact Form 7 Wordpress

Thảo luận trong 'Mã nguồn mở Wordpress' bắt đầu bởi seolagi, 13/4/22.

  1. seolagi

    seolagi

    Moderator

    Thành viên BQT

    Tham gia ngày:
    16/4/14
    Bài viết:
    936
    Đã được thích:
    77
    Điểm thành tích:
    28
    hi admin cho em xin cái popug đặt hàng anh làm cho web salegiatot.com với ạ, em thấy nó hay quá, lúc lick vào nó hiện ra cái popug của Contact Form 7 ấy ạ, rồi ấn vào màn hình trống không chưa popug nó tắt cái popug đi. Ấn vào giỏ hàng hay vị trí nào đó nó sẽ hiện cái popug ra ấy ạ. Cho em template của nó lun với, nhìn đó đẹp quá.

    tao-popug-dat-hang.jpg
     
    Cảm ơn đã xem bài:

    Tạo Popup đặt hàng từ Contact Form 7 Wordpress

  2. admin

    admin Phạm Công Sơn Thành viên BQT

    Tham gia ngày:
    22/5/13
    Bài viết:
    4,604
    Đã được thích:
    1,129
    Điểm thành tích:
    113
    Giới tính:
    Nam
    Trước tiên em vào tạo 1 form mới của Contact Form 7 ở admin wodpress mới với HTML như sau:
    HTML:
    <div class="cs-infopro">
    <div class="cs-infopro-1">
    <h2 class="cs-tilte-dathang">ĐẶT HÀNG ONLINE</h2>
    <p>- <strong>Giá bán:</strong> <strong style="color:#f26122">290.000đ/tuýp. </strong>(vận chuyển: 20.000đ)</p>
    <p>- Mua 2 sp giảm còn <strong>250.000đ/ tuýp</strong>&nbsp;và được <strong>miễn phí vận chuyển</strong>.</p>
    </div>
    <div class="cs-infopro-2">
    <img alt="sản phẩm" src="/wp-content/uploads/2021/04/3D-600x600.jpg"  width="300" height="300" />
    </div>
    </div>
    <div id="csdathang" class="cs-dathang">
    <div class="cs-item">
    <div class="cs-w50">[text* your-name placeholder "Họ và tên (Bắt buộc)"]</div>
    <div class="cs-w50">[tel* tel-269 placeholder "Số điện thoại (Bắt buộc)"]</div>
    </div>
    <div class="cs-item">[text* your-address placeholder "Địa chỉ (Bắt buộc)"]</div>
    <div class="cs-item">[number* number-512 min:1 max:1000 placeholder "Số lượng (bắt buộc)"] </div>
    <div class="cs-item">[textarea textarea-343 placeholder "Ghi chú: giờ giao hàng, hướng dẫn giao hàng"] </div>
    [current_url phieudathang]
    <div class="cs-item" style="text-align:center">
    [submit "Đặt hàng"]
    </div>
    </div>
    
    tao-form-moi.jpg

    Tiếp theo vào footer của web add thêm code sau vào:
    HTML:
    <div id="cspopup">
        <div id="cspopupcontent">
            <?php echo do_shortcode('[contact-form-7 id="123" title="Đặt hàng"]') ?>
            <span class="cs-closepopup" aria-hidden="true">×</span>
        </div>
    </div>
    <div class="cs-bgblack"></div>
    <style>
    .cs-popugactivate
    {
        overflow: hidden;
    }
    .cs-closepopup
    {
        position: absolute;
        right: 0;
        top: 0;
        width: 35px;
        height: 35px;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #c0001a;
        opacity: 1;
        color: #fff;
        font-weight: bold;
        font-size: 35px;
        cursor: pointer;
    }
    .cs-popugactivate .cs-bgblack
    {
        opacity: .5;
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 1040;
        background-color: #000;
        transition: opacity .15s linear;
    }
    #cspopup
    {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 1050;
        display:none;
        overflow: hidden;
        outline: 0;
        overflow-x: hidden;
        overflow-y: auto;
    }
    #cspopupcontent
    {
        transform: translate(-50%,-50%);
        background-color: #fff;
        position: absolute;
        left: 50%;
        margin: 0;
        top: 50%;
        animation-name: dich_chuyen;
        animation-duration: 2s;
        animation-delay: -1s;
        max-width: 650px;
        padding: 20px;
    }
    @keyframes dich_chuyen {
        0%   {top:0px;}
        100%  {top:50%;}
    }
    /* dat hang online */
    .cs-tilte-dathang
    {
        padding-left: 5px;
        color: #f26122;
        margin-bottom: 20px;
        margin-top: 5px;
    }
    .cs-dathang .cs-item
    {
        float:left;
        width:100%;
        position: relative;
    }
    .cs-dathang
    {
        float: left;
        width: 100%;
        padding: 15px;
        box-shadow: 0px 0px 10px 3px #99999942;
        margin-bottom: 15px;
    }
    .wpcf7-spinner {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        margin: 0;
    }
    .cs-dathang input[type="submit"]{
        background-color: #f26122;
        border: 1px solid #f26122;
        color: #fff;
        padding: 7px 30px 8px 30px;
        border-radius: 30px;
        cursor: pointer;
        font-size: 17px;
        font-weight: normal;
        margin-top: 20px;
    }
    .cs-dathang input[type="text"],
    .cs-dathang input[type="tel"]
    {
        display: block;
        width: 100%;
        padding: .375rem .75rem;
        font-size: 16px !important;
        line-height: 1.5;
        color: #495057;
        background-color: #fff;
        background-clip: padding-box;
        border: 1px solid #ced4da;
        border-radius: .25rem;
        transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
        height: 37px;
        margin-bottom: 15px;
    }
    
    .cs-dathang textarea
    {
        display: block;
        width: 100%;
        padding: .375rem .75rem;
        font-size: 16px !important;
        line-height: 1.5;
        color: #495057;
        background-color: #fff;
        background-clip: padding-box;
        border: 1px solid #ced4da;
        border-radius: .25rem;
        transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
        height: 100px;
        min-height: 60px;
    }
    .cs-dathang input[type="number"]
    {
        display: block;
        width: 100%;
        padding: .375rem .75rem;
        font-size: 16px !important;
        line-height: 1.5;
        color: #495057;
        background-color: #fff;
        background-clip: padding-box;
        border: 1px solid #ced4da;
        border-radius: .25rem;
        transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
        height: 37px;
        margin-bottom: 15px;
    }
    .cs-infopro
    {
        width: 100%;
        -js-display: flex;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-flow: row wrap;
        flex-flow: row wrap;
    }
    .cs-infopro p
    {
        font-size: 17px;
        color: #212529;
        line-height: 28px;
        margin-bottom: 5px;
    }
    .cs-infopro img
    {
        max-width: 155px;
    }
    .cs-infopro .cs-infopro-1
    {
        max-width: 65%;
        -ms-flex-preferred-size: 60%;
        flex-basis: 63%;
        padding-top: 5px;
        padding-left: 5px;
        padding-bottom: 15px;
    }
    .cs-infopro .cs-infopro-2
    {
        max-width: 35%;
        -ms-flex-preferred-size: 40%;
        flex-basis: 35%;
        text-align: center;
        padding-bottom: 10px;
    }
    
    @media(min-width:767px) {
        .cs-dathang input[type="tel"]
        {
            margin-left: 15px;
            width: calc(100% - 15px);
        }
    }
    @media(max-width:767px) {
        #cspopupcontent
        {
            width: calc(100% - 20px);
        }
        .cs-infopro .cs-infopro-1 {
          max-width: 100%;
          -ms-flex-preferred-size: 100%;
          flex-basis: 100%;
        }
        .cs-infopro .cs-infopro-2 {
          display:none;
        }
    }
    /* end dat hang online */
    </style>
    <script type="text/javascript">
        (function($){
            $(document).ready(function(){   
                try {
                    $('.cs-closepopup').click(function(){
                         $("#cspopup").css("display", "none");
                         $('body').removeClass("cs-popugactivate");
                          return false;
                     });
                     $('.csbuynowpopup').click(function(){
                         $("#cspopup").css("display", "block");
                         $('body').addClass("cs-popugactivate");
                          return false;
                     });
            
                    const targetindex = document.querySelector('#cspopupcontent');
                    document.addEventListener('click', (event) => {
                        const withinBoundaries = event.composedPath().includes(targetindex);
                        var classindex = event.target.className;
                        //alert(classindex);
                        if (classindex.indexOf("csbuynowpopup") < 0  && $("#cspopupcontent").length && $('#cspopup').css('display') == 'block') {
                            if (!withinBoundaries) {
                                $("#cspopup").css("display", "none");
                                $('body').removeClass("cs-popugactivate");
                            }
                        }
                
                    });
                }
                catch(err) {}
            })
        })(jQuery)
    </script>
    
    • [contact-form-7 id="123" title="Đặt hàng" : là cái shortcode của contact form 7 em mới tạo nhé.
    Muốn ấn vào đâu nó hiển thị popup này thì em chèn class có tên: csbuynowpopup vào là xong.
    Mã:
    <div class="csbuynowpopup">Đặt mua ngay</div>
    • Em tùy biến nút đặt mua này theo ý của mình nhé.
     
    Chỉnh sửa cuối: 29/4/22
    seolagi thích bài này.
  3. seolagi

    seolagi

    Moderator

    Thành viên BQT

    Tham gia ngày:
    16/4/14
    Bài viết:
    936
    Đã được thích:
    77
    Điểm thành tích:
    28
    Tuyệt vời quá ạ, em copy code làm theo ngay ạ, cảm ơn ad rất nhiều
     
  4. hungvpe

    hungvpe Thành Viên Mới

    Tham gia ngày:
    19/5/22
    Bài viết:
    3
    Đã được thích:
    0
    Điểm thành tích:
    1
    Giới tính:
    Nam
    Em xin phép lưu trữ về, cảm ơn Admin
     
  5. kazz2607

    kazz2607 Thành Viên Mới

    Tham gia ngày:
    27/6/22
    Bài viết:
    1
    Đã được thích:
    0
    Điểm thành tích:
    1
    Giới tính:
    Nam
    Mình xin phép lưu về bookmark sử dụng, cảm ơn Admin
     


Like và Share ủng hộ ITSEOVN