مدونة هلا تك

تركيب زر سلة المشتريات في قوالب بلوجر

سلسلة تحويل قالب بلوجر الى قالب لبيع المنتجات الجزء الثاني

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

تركيب جدول عرض المنتجات و أسعارها بداخل المواضيع

في هذا الموضوع نستكمل السلسة و هي اضافة سلة المشتريات للقالب و هي من أهم العناصر الأساسية في أي قالب مخصّص لبيع المنتجات عبر الإنترنت، إذ تلعب دورًا محوريًا في تحسين تجربة المستخدم وزيادة فرص إتمام عمليات الشراء. فعندما يتصفح العميل المنتجات المختلفة داخل المتجر الإلكتروني، يحتاج إلى وسيلة سهلة ومنظمة تمكنه من جمع المنتجات التي يرغب في شرائها ومراجعتها قبل الانتقال إلى مرحلة الدفع، وهنا تأتي أهمية سلة المشتريات.

تساعد سلة المشتريات على توفير تجربة تسوق مريحة ومرنة، حيث تتيح للمستخدم إضافة المنتجات أو حذفها أو تعديل الكميات المطلوبة في أي وقت دون الحاجة إلى إعادة البحث عن المنتجات من جديد. كما تمنح العميل رؤية واضحة لمحتويات طلبه، بما في ذلك أسماء المنتجات والأسعار والكميات والتكلفة الإجمالية، مما يساعده على اتخاذ قرار الشراء بثقة أكبر.

ومن الجوانب المهمة أيضًا أن سلة المشتريات تسهم في تعزيز المبيعات من خلال عرض ملخص شامل للمنتجات المختارة، بالإضافة إلى إمكانية اقتراح منتجات إضافية أو مكملة قد تهم العميل. وهذا الأسلوب يُستخدم على نطاق واسع لزيادة متوسط قيمة الطلب وتحفيز العملاء على شراء المزيد من المنتجات.

علاوة على ذلك، فإن وجود سلة مشتريات احترافية يعكس مصداقية المتجر الإلكتروني ويمنح المستخدم شعورًا بالأمان والتنظيم أثناء عملية التسوق. فالمتاجر التي تفتقر إلى هذه الميزة قد تبدو غير مكتملة أو غير احترافية، مما قد يؤدي إلى فقدان ثقة العملاء وتقليل معدلات التحويل.

كما تساهم سلة المشتريات في تسهيل عملية الدفع من خلال جمع جميع المعلومات المتعلقة بالطلب في مكان واحد، الأمر الذي يقلل من الأخطاء ويوفر الوقت والجهد على المستخدم. ويمكن أيضًا ربطها بأنظمة الخصومات وكوبونات التخفيض وحساب تكاليف الشحن والضرائب بشكل تلقائي، مما يجعل تجربة الشراء أكثر سلاسة ووضوحًا.

في الختام، تُعتبر إضافة سلة المشتريات عنصرًا لا غنى عنه في أي قالب مخصص لبيع المنتجات، لأنها تُحسن تجربة المستخدم، وتُسهل إدارة الطلبات، وتُعزز ثقة العملاء، وتُسهم بشكل مباشر في زيادة المبيعات وتحقيق أهداف المتجر الإلكتروني بكفاءة واحترافية.

شرح تركيب سلة المشتريات لقالب بلوحر

الأكواد الخاصة بالأضافة

اولا - ندخل الى اكواد القالب و نبحث عن ~~/head~~ و نلصق الكود التالي أعلاه

<style>

#cart-toast{visibility:hidden;min-width:250px;background-color:#333;color:#fff;text-align:center;border-radius:8px;padding:12px;position:fixed;z-index:10000;left:20px;bottom:30px;font-size:14px;direction:rtl;box-shadow:0 4px 10px rgba(0,0,0,0.3);opacity:0;transition:opacity 0.3s,bottom 0.3s}
#cart-toast.show{visibility:visible;opacity:1;bottom:40px}
.header-cart{position:fixed;bottom:20px;left:20px;background:#e53935;color:#fff;padding:12px 15px;border-radius:50px;cursor:pointer;z-index:999;font-weight:bold;width:80px;justify-content:space-between;display:flex;align-items:center}
#cart-count{background:#fff;color:#e53935;padding:2px 8px;border-radius:50px;margin-right:5px}
.header-cart svg{width:24px;height:24px}
#overlay{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.6);z-index:9998}
#cart-modal{display:none;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);width:90%;max-width:420px;background:#fff;padding:20px;border-radius:12px;z-index:9999;direction:rtl}
.cart-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px}
.cart-total{margin:15px 0;font-size:18px;font-weight:bold}
.btn-whatsapp,.btn-paypal,.btn-visa{width:100%;padding:12px;border:none;border-radius:8px;margin-top:10px;cursor:pointer;color:#fff;font-weight:bold}
.btn-whatsapp{background:#25D366}
.btn-paypal{background:#0070BA}
.btn-visa{background:#1f2937}
</style>

ثانيا - نبحث الكود التالي ~~</body>~~ و نلصق الكود الخاص بالجافا سكربت اعلاه

<!-- سلة المشتريات -->

<div class='header-cart' onclick='toggleCart()'>
       <svg fill='none' height='800px' viewBox='-0.5 0 25 25' width='800px' xmlns='http://www.w3.org/2000/svg'>
  <path d='M18.5996 21.57C19.7042 21.57 20.5996 20.6746 20.5996 19.57C20.5996 18.4654 19.7042 17.57 18.5996 17.57C17.495 17.57 16.5996 18.4654 16.5996 19.57C16.5996 20.6746 17.495 21.57 18.5996 21.57Z' fill='none' stroke='#ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5'/>
  <path d='M8.59961 21.57C9.70418 21.57 10.5996 20.6746 10.5996 19.57C10.5996 18.4654 9.70418 17.57 8.59961 17.57C7.49504 17.57 6.59961 18.4654 6.59961 19.57C6.59961 20.6746 7.49504 21.57 8.59961 21.57Z' fill='none' stroke='#ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5'/>
  <path d='M2 3.55997C2 3.55997 6.64 3.49997 6 7.55997L5.31006 11.62C5.20774 12.1068 5.21778 12.6105 5.33954 13.0929C5.46129 13.5752 5.69152 14.0234 6.01263 14.4034C6.33375 14.7833 6.73733 15.0849 7.19263 15.2854C7.64793 15.4858 8.14294 15.5797 8.64001 15.56H16.64C17.7479 15.5271 18.8119 15.1196 19.6583 14.404C20.5046 13.6884 21.0834 12.7069 21.3 11.62L21.9901 7.50998C22.0993 7.0177 22.0939 6.50689 21.9744 6.017C21.8548 5.52712 21.6242 5.07126 21.3005 4.68467C20.9767 4.29807 20.5684 3.99107 20.1071 3.78739C19.6458 3.58371 19.1438 3.48881 18.64 3.50998H9.94' fill='none' stroke='#ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5'/>
</svg> <span id='cart-count'>0</span>
</div>

<div id='overlay' onclick='toggleCart()'></div>

<div id='cart-modal'>
    <div class='cart-header'>
        <h3>سلة المشتريات</h3>
        <span onclick='toggleCart()'>✖</span>
    </div>

    <div id='cart-items-list'></div>

    <div class='cart-total'>
        الإجمالي:
        <span id='total-price'>0</span> ج.م
    </div>

    <button class='btn-whatsapp' onclick="pay('whatsapp')">
        الطلب عبر واتساب
    </button>

    <button class='btn-paypal' onclick="pay('paypal')">
        الدفع عبر PayPal
    </button>

    <button class='btn-visa' onclick="pay('visa')">
        الدفع بفيزا / ماستر كارد
    </button>
</div>


<div id='cart-toast'>تمت إضافة المنتج للسلة بنجاح! 🛒</div>

<script type='text/javascript'>
//<![CDATA[
let cart = JSON.parse(localStorage.getItem("my_cart")) || [];

const paypalEmail = "YOUR_PAYPAL_EMAIL";
const whatsappNumber = "201234567890";

function saveCart(){
    localStorage.setItem("my_cart",JSON.stringify(cart));
}

function updateCartUI(){
    let list=document.getElementById("cart-items-list");
    let badge=document.getElementById("cart-count");
    let totalBox=document.getElementById("total-price");

    if(badge) badge.innerText=cart.length;

    if(cart.length===0){
        if(list) list.innerHTML="<p>السلة فارغة</p>";
        if(totalBox) totalBox.innerText="0";
        saveCart();
        return;
    }

    let total=0;
    let html="";

    cart.forEach((item,index)=>{
        total+=Number(item.price);
        html+=`
        <div style="display:flex;justify-content:space-between;margin-bottom:10px;">
        <span>${item.name}</span>
        <span>
        ${item.price} ج.م
        <button onclick="removeItem(${index})">❌</button>
        </span>
        </div>
        `;
    });

    if(list) list.innerHTML=html;
    if(totalBox) totalBox.innerText=total;

    saveCart();
}

function showToast() {
    let toast = document.getElementById("cart-toast");
    toast.className = "show";
    
    setTimeout(function(){ 
        toast.className = toast.className.replace("show", ""); 
    }, 3000);
}

function addToCart(name,price){
    cart.push({
        name:name,
        price:price
    });

    updateCartUI();
    showToast();
}

function removeItem(index){
    cart.splice(index,1);
    updateCartUI();
}

function toggleCart(){
    let modal=document.getElementById("cart-modal");
    let overlay=document.getElementById("overlay");

    if(modal.style.display==="block"){
        modal.style.display="none";
        overlay.style.display="none";
    }else{
        modal.style.display="block";
        overlay.style.display="block";
    }
}

function pay(method){
    if(cart.length===0){
        alert("السلة فارغة");
        return;
    }

    let total=0;
    cart.forEach(item=>{
        total+=Number(item.price);
    });

    if(method==="paypal"){
        let usd=(total/50).toFixed(2);
        window.open(`https://www.paypal.com/cgi-bin/webscr?cmd=_xclick&business=${paypalEmail}&amount=${usd}¤cy_code=USD`,"_blank");
    }

    if(method==="whatsapp"){
        let msg="طلب جديد:%0A";
        cart.forEach((item,i)=>{
            msg += (i+1)+"- "+item.name+" ("+item.price+" ج.م)%0A";
        });
        msg += "%0Aالإجمالي: "+total+" ج.م";
        window.open(`https://wa.me/${whatsappNumber}?text=${msg}`,"_blank");
    }

    if(method==="visa"){
        window.open("https://ضع_هنا_رابط_الدفع_بالبطاقة","_blank");
    }
}

updateCartUI();
//]]>
</script>

ثالثا - نقوم بالذهاب الى الموضوع و نضيف ~~زر السلة في مكان مناسب~~

<button onclick="addToCart('اسم الساعة الذكية', 1500)" style="display: flex; align-items: center; justify-content: center; gap: 10px; padding: 10px 20px; background: #ff0000; color: #fff; border: none; border-radius: 5px; cursor: pointer;width: 100%;margin-top: 30px;font-size: 20px; ">

<svg fill="none" height="28px" viewBox="-0.5 0 25 25" width="28px" xmlns="http://www.w3.org/2000/svg">
<path d="M18.5996 21.57C19.7042 21.57 20.5996 20.6746 20.5996 19.57C20.5996 18.4654 19.7042 17.57 18.5996 17.57C17.495 17.57 16.5996 18.4654 16.5996 19.57C16.5996 20.6746 17.495 21.57 18.5996 21.57Z" fill="none" stroke="#ffffff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"></path>
<path d="M8.59961 21.57C9.70418 21.57 10.5996 20.6746 10.5996 19.57C10.5996 18.4654 9.70418 17.57 8.59961 17.57C7.49504 17.57 6.59961 18.4654 6.59961 19.57C6.59961 20.6746 7.49504 21.57 8.59961 21.57Z" fill="none" stroke="#ffffff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"></path>
<path d="M2 3.55997C2 3.55997 6.64 3.49997 6 7.55997L5.31006 11.62C5.20774 12.1068 5.21778 12.6105 5.33954 13.0929C5.46129 13.5752 5.69152 14.0234 6.01263 14.4034C6.33375 14.7833 6.73733 15.0849 7.19263 15.2854C7.64793 15.4858 8.14294 15.5797 8.64001 15.56H16.64C17.7479 15.5271 18.8119 15.1196 19.6583 14.404C20.5046 13.6884 21.0834 12.7069 21.3 11.62L21.9901 7.50998C22.0993 7.0177 22.0939 6.50689 21.9744 6.017C21.8548 5.52712 21.6242 5.07126 21.3005 4.68467C20.9767 4.29807 20.5684 3.99107 20.1071 3.78739C19.6458 3.58371 19.1438 3.48881 18.64 3.50998H9.94" fill="none" stroke="#ffffff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
</svg>
<span>أضف للسلة - 1500 ج.م</span>
</button>

رابعا - نعود الى أكواد القالب الأساسية و نضيف زر السلة بداخل الـ ~~post~~ اللذي يظهر بواجهة القالب

<button expr:onclick='"addToCart(\"" + data:post.title + "\",1500)"' style='background: #e53935;width: 100%;margin-top: 14px;color: #fff;border: none;padding: 12px 20px;border-radius: 8px;cursor: pointer;display: flex;align-items: center;justify-content: center;'>
<svg fill='none' height='800px' viewBox='-0.5 0 25 25' width='800px' xmlns='http://www.w3.org/2000/svg'>
<path d='M18.5996 21.57C19.7042 21.57 20.5996 20.6746 20.5996 19.57C20.5996 18.4654 19.7042 17.57 18.5996 17.57C17.495 17.57 16.5996 18.4654 16.5996 19.57C16.5996 20.6746 17.495 21.57 18.5996 21.57Z' fill='none' stroke='#ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5'/>
<path d='M8.59961 21.57C9.70418 21.57 10.5996 20.6746 10.5996 19.57C10.5996 18.4654 9.70418 17.57 8.59961 17.57C7.49504 17.57 6.59961 18.4654 6.59961 19.57C6.59961 20.6746 7.49504 21.57 8.59961 21.57Z' fill='none' stroke='#ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5'/>
<path d='M2 3.55997C2 3.55997 6.64 3.49997 6 7.55997L5.31006 11.62C5.20774 12.1068 5.21778 12.6105 5.33954 13.0929C5.46129 13.5752 5.69152 14.0234 6.01263 14.4034C6.33375 14.7833 6.73733 15.0849 7.19263 15.2854C7.64793 15.4858 8.14294 15.5797 8.64001 15.56H16.64C17.7479 15.5271 18.8119 15.1196 19.6583 14.404C20.5046 13.6884 21.0834 12.7069 21.3 11.62L21.9901 7.50998C22.0993 7.0177 22.0939 6.50689 21.9744 6.017C21.8548 5.52712 21.6242 5.07126 21.3005 4.68467C20.9767 4.29807 20.5684 3.99107 20.1071 3.78739C19.6458 3.58371 19.1438 3.48881 18.64 3.50998H9.94' fill='none' stroke='#ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/>
</svg> أضف للسلة
</button>

التعديلات اللتي يجب عليك القيام بها

تغير رقم الواتس أب ستجد بكود الجافا سكربت

const paypalEmail = "YOUR_PAYPAL_EMAIL";
const whatsappNumber = "201234567890";

إذا كان رقمك مثلاً : +20 123 456 7890
اكتبه بدون + وبدون مسافات :
const whatsappNumber = "201234567890";

حساب PayPal

إذا كان بريد حساب PayPal هو: myshop@gmail.com
اكتب :
const paypalEmail = "myshop@gmail.com";

زر فيزا / ماستركارد

window.open(
"https://ضع_هنا_رابط_الدفع_بالبطاقة",
"_blank"
);

يجب استبداله برابط دفع حقيقي من بوابة دفع مثل:
PayPal Business
Stripe
مثال :
window.open(
"https://buy.stripe.com/xxxxxxxxxxxxx",
"_blank"
);

ملاحظة مهمة جدا

لا يمكنك وضع رقم بطاقة الفيزا الخاصة بك مباشرة داخل الكود مثل:

4111 1111 1111 1111

هذا غير آمن ولن يعمل كوسيلة دفع.
يجب أن يكون لديك حساب تاجر على:
PayPal Business
أو Stripe
أو أي بوابة دفع إلكتروني
ثم تأخذ رابط الدفع وتضعه في الكود.

ثم تقوم بالتعديلات المناسبة مثلا ~~النصوص~~ و ~~الأسعار~~ وغيرها و ثم تقوم بالحفظ

وفي الختام !

شكرًا لوقتكم واهتمامكم بقراءة موضوع أضافة زر سلة المشتريات الى قالب بلوجر . إذا صادفتكم أي مشكلة أثناء استخدام الكود أو كان لديكم أي استفسار، فلا تترددوا في طرحه ضمن التعليقات أو التواصل معنا عبر صفحة الاتصال بنا . ولا تنسوا الانضمام إلى متابعي مدونة هلا تك ليصلكم كل ما هو جديد.