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
    Tham gia ngày:
    16/4/14
    Bài viết:
    1,028
    Đã được thích:
    80
    Điểm thành tích:
    48
    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

    seolagi, 13/4/22
    #1
  3. admin
    Tham gia ngày:
    22/5/13
    Bài viết:
    4,894
    Đã được thích:
    1,198
    Đ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
    admin, 13/4/22
    #2
    seolagi thích bài này.
  4. seolagi
    Tham gia ngày:
    16/4/14
    Bài viết:
    1,028
    Đã được thích:
    80
    Điểm thành tích:
    48
    Tuyệt vời quá ạ, em copy code làm theo ngay ạ, cảm ơn ad rất nhiều
     
    seolagi, 13/4/22
    #3
  5. hungvpe
    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
     
    hungvpe, 20/5/22
    #4
  6. kazz2607
    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
     
    kazz2607, 27/6/22
    #5


Chủ để tương tự : Tạo Popup
Diễn đàn Tiêu đề Date
Mã nguồn mở Wordpress Xin code tự động tạo user trong function.php wordpress 6/10/23
Mã nguồn mở Wordpress Lỗi khi tạo subfolder website wordpress, subfolder web vào mục con không được 26/6/23
Mã nguồn mở Wordpress Tạo trang cảm ơn sau khi submit trong Contact form 7 như thế nào? 6/1/22
Mã nguồn mở Wordpress Tắt đăng ký tạo thành viên mới trong Flatsome Wordpress 18/12/21
Mã nguồn mở Wordpress Tạo giỏ hàng trên sidebar single product chi tiết sản phẩm woocommerce 13/10/21