اضافه صندوق الدفع الى مدونه بلوجر

اضافه صندوق الدفع الى مدونه بلوجر حيث يمكنك استخدام هذه الاداه اذا كنت تمتلك متجرا الكترونيا عبر مدونتك حيث تتيح هذه الاداه الدفع

 اضافه صندوق الدفع الى مدونه بلوجر حيث يمكنك استخدام هذه الاداه اذا كنت تمتلك متجرا الكترونيا عبر مدونتك حيث تتيح هذه الاداه الدفع عبر باي بال والحساب البنكى

اضافه صندوق الدفع الى مدونه بلوجر

فبمجرد الضغط على زر الشراء يظهر لك صندق منبثق به تفاصيل المنتج بالاضافه الى طريقه الدفع المتاحه لديك

وهذه الاداه هى عباره عن وسيط بين المنتج وصفحه الدفع ولاستخدام هذه الميزه فكل ماعليك هو اضافه رابط صفحه الدفع الى زر الشراء مع تغيير مواصفات المنتجات ويمكنك معاينه هذه الاداه عبر الزر التالى


وهذه الاداه انشاءت بواسطه لغتى html وcss ويمكنك معاينه الاضافه من خلال الزر التالى

معاينه

طريقه اضافه صندوق الدفع الى مدونه بلوجر

1.قم بالدخول الى لوحه التحكم الخاصه بمدونه بلوجر ثم قم باختيارالمظهرثم تعديل html
2.قم بالبحث عن وسم ]]></b:skin> ثم اضف الكود التالى اعلى الوسم     
 span.purchase-type {margin-right: 24px;}
  a.bank-pay,a.paypal-pay  {color: #575656;}
a.paypal-pay:hover {text-decoration: none;color: #16967f;}
a.bank-pay:hover {text-decoration: none;color: #16967f;}
  label.close-icon:hover {cursor: pointer;}
.pc-wrap{position:fixed;height:100%;width:100%;top:0;right:0;left:0;bottom:0;background:rgba(0,0,0,.5);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);z-index:9999999;visibility:hidden;opacity:0;transition:all .2s ease}
.pop-box{position:relative;top:50%;right:50%;padding:20px;display:flex;background:#fff;flex-direction:column;width:80%;max-width:800px;line-height:30px;border-radius:5px;transform: translate(50% , -50%) scale(0.97);overflow:hidden;box-sizing:border-box}
.pop-box:before{content:'';display:block;position:absolute;left:-5px;top:-80px;width:50%;height:450px;border-top-right-radius:50%;border-bottom-right-radius:50%;background-color:#f1f1f0}
.close-icon{position:absolute;top:5px;left:0px;width:50px;height:50px;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M278.6 256l68.2-68.2c6.2-6.2 6.2-16.4 0-22.6-6.2-6.2-16.4-6.2-22.6 0L256 233.4l-68.2-68.2c-6.2-6.2-16.4-6.2-22.6 0-3.1 3.1-4.7 7.2-4.7 11.3 0 4.1 1.6 8.2 4.7 11.3l68.2 68.2-68.2 68.2c-3.1 3.1-4.7 7.2-4.7 11.3 0 4.1 1.6 8.2 4.7 11.3 6.2 6.2 16.4 6.2 22.6 0l68.2-68.2 68.2 68.2c6.2 6.2 16.4 6.2 22.6 0 6.2-6.2 6.2-16.4 0-22.6L278.6 256z' fill='%23878787'/%3E%3C/svg%3E");background-repeat:no-repeat;background-size:30px}
.left-box{position:relative;display:inline-block;margin-top:15px;width:50%;color:#48525c} 
.right-box{position:absolute;display:inline-block;margin-top:30px;right:50%;width:50%;color:#48525c;align-items:left;text-align:right;padding-right:50px} 
.left-box h2,.right-box h2{font-size:20px;margin:-10px auto 10px;color: #000;}
.type-product,.price-pay{font-size:17px;font-weight:600;color:#48525c}.price-pay{margin-top:-20px}
.type-product:before,.price-pay:before{content:attr(aria-label);display:flex;font-size:12px;font-weight:400;color:#767676;margin:20px 0 0}
.buy-details,.buying-succeeded{font-size:12px;color:#767676;margin-top:10px}.buy-details a,.buying-succeeded a,right-box a{text-decoration:none;color: #16967f;}
.right-box span{font-size:17px;color:#767676;margin-right:35px}
.bank-pay,.paypal-pay{display:inline-block;width:calc(100% - 30px);border:1px solid #999;border-radius:3px;margin:10px auto 0;padding:10px}
svg.paypal-pay-svg{width:20px;height:20px;position:absolute;fill:#767676;margin-top:5px}
svg.bank-pay-svg {width: 20px;height: 20px;position: absolute;fill: #767676;margin-top: 5px;}
svg.bank-pay-svg{fill:none!important;stroke:#767676;stroke-linecap:round;stroke-linejoin:round;stroke-width:2}
.buy-button{display:inline-flex;align-items:center;margin:15px 15px;padding:10px 20px;outline:0;border:0;border-radius:2px;color:#fefefe;background-color:#16967f
;font-size:14px;white-space:nowrap;overflow:hidden;max-width:100%;line-height:2em} 
#check-pc:checked ~ .pc-wrap{visibility:visible;opacity:1}
#check-pc{display:none}
@media screen and (max-width:600px){.type-product,.price-pay{margin:15px 0}.type-product:before,.price-pay:before{margin:5px 0}.right-box,.left-box,.bank-pay,.paypal-pay{position:relative;width:calc(100% - 10px)}.right-box{right:0;padding:0}.pop-box{width:400px}.pop-box:before{content:'';display:block;position:absolute;right:0;top:270px;width:400px;height:400px;background-color:#f1f1f0;border-top-right-radius:15px;border-top-left-radius:15px;border-bottom-right-radius:0}}
@media screen and (max-width:420px){.pop-box{width:300px;line-height:20px}.pop-box:before{top:250px;width:300px}.left-box{margin-bottom:0}.buy-details{line-height:20px}.close-icon:before{top:5px}.type-product:before,.price-pay:before{margin-bottom:10px}svg.paypal-pay-svg{margin-top:0}}
3.قم بنسخ الكود التالى  واضفه فى الصفحه التى تريد ان يظهر بها الصندوق
<div style='text-align: center;'>
<label class='buy-button' for='check-pc'>اشتري الآن <i class="fas fa-shopping-cart"></i></label>
</div>
<input id='check-pc' type='checkbox'/>
<div class='pc-wrap'>
<div class='pop-box'>
<label class='close-icon' for='check-pc'></label>
<div class='right-box'>
<h2>شراء</h2>
<div class='type-product' aria-label='التفاصيل'>قالب بلوجر</div>
<div class='price-pay' aria-label='السعر'> 150 ألف دولار / 12 دولارً</div>
<div class='buy-details'>* يمكن أن تتم عمليات الشراء عبر Gopay و OVO وغيرها<a href='#' target='_blank'> تفاصيل </a></div>  
</div>
<div class='left-box'>
<h2>طريقة الدفع او السداد</h2>
<a class='bank-pay' href='#' target='_blank'>
<svg class='bank-pay-svg' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><rect height='16' rx='2' ry='2' width='22' x='1' y='4'></rect><line x1='1' x2='23' y1='10' y2='10'></line></svg>
<span class="purchase-type">التحويل المصرفي</span></a>
<a class='paypal-pay' href='#' target='_blank'>
<svg class='paypal-pay-svg' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><g><path d='M26.28,9.58A6.64,6.64,0,0,0,19.65,3H10a1,1,0,0,0-1,.84L5.58,25.29a1,1,0,0,0,.23.8,1,1,0,0,0,.76.36H10.7l-.22,1.39a1,1,0,0,0,1,1.16h4.65a1,1,0,0,0,1-.83l1-6.11h3.15a7.46,7.46,0,0,0,7.43-7.45v-.28A5.87,5.87,0,0,0,26.28,9.58ZM10.85,5h8.8a4.64,4.64,0,0,1,4.51,3.61,5.68,5.68,0,0,0-1.32-.15H14.5a1,1,0,0,0-1,.84L12.91,13a1,1,0,0,0,2,.32l.46-2.88h7.49a3.87,3.87,0,0,1,1.4.27,6.47,6.47,0,0,1-6.4,5.69H13.22a1,1,0,0,0-1,.83L11,24.45H7.74Zm15.86,9.61a5.46,5.46,0,0,1-5.43,5.45h-4a1,1,0,0,0-1,.83l-1,6.11H12.64l.22-1.39h0l1.2-7.19h3.78A8.46,8.46,0,0,0,26,12.1a3.82,3.82,0,0,1,.71,2.23Z'/></g></svg>
<span class="purchase-type">باي بال</span></a>
<div class='buying-succeeded'>مدفوع بالفعل؟ التأكيد<a href='#' target='_blank'> هنا </a></div>
</div>
</div>
</div>

تحميل الاكواد

Pay Box.zip 2.42KB

والان نكون قد انتهينا من شرح هذا الموضوع اذا واجهتك مشكله فى تطبيق هذه الخطوات يرجى مراسلتنا عبر التعليقات اونموذج الاتصال

الاسم احمد منصور امتلك خبره اكثر من ثلاث سنوات فى مجال التدوين مهتم بمجال التدوين والبرمجه

تعليقان (2)

  1. أخي ماشاء الله ماتقدمه نافع واصل في محتواك ومبدع يا مبدع
    1. شكرا اخى ربنا يخليك تعليقك دا فرحنى جداً