تصميم متجر منتجات احترافي لمدونات بلوجر

نظام عرض المنتج ⚙️

متجر المنتجات الذكي ✨

تعلم كيفية تصميم قالب بلوجر لعرض منتجك يتيح لك رفع الصور وكتابة التفاصيل والتواصل عبر واتساب.

مفهوم النظام

تصميم صفحة هبوط بلوجر لعرض منتجات

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

التحكم بالمنتجات من لوحة الإدارة

تصميم متجر بلوجر

سنقوم بتجهيز قالب برمجياً يقرأ البيانات من ادوات بلوجر، وسيتولى القالب تنسيقها تلقائياً لتظهر بشكل احترافي.

سيتم عرض المنتج المرفوع تلقائياً مع زر الطلب المباشر.

معاينة الواجهة

بطاقة المنتج العريضة (Split Design)

هذا هو الشكل الذي سيظهر لزوار مدونتك، تصميم عصري يركز على الصورة أولاً ثم التفاصيل.

آيفون 15 برو ماكس - 256 جيجا

أقوى معالج في هاتف ذكي على الإطلاق، مع كاميرا بدقة 48 ميجابكسل وتصميم مذهل من التيتانيوم القوي والخفيف.

4999

طلب عبر واتساب

مهم جداً قبل البدء

⚠️ إجراء أمان: قبل إجراء أي تعديل على أكواد القالب (HTML)، يرجى الذهاب إلى المظهر > تخصيص > الاحتفاظ بنسخة احتياطية. هذا يضمن لك استعادة مدونتك في ثوانٍ إذا حدث أي خطأ أثناء اللصق.

تعديل القالب

كيفية إضافة كود الهيكل (XML/HTML)

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

• ✅
  الدخول لمحرر الأكواد: توجه إلى لوحة تحكم بلوجر > المظهر > تعديل HTML.
• ✅
  تحديد المكان المناسب: ابحث عن الوسم </header> أو المكان الذي تريد عرض المنتج فيه (غالباً يكون فوق وسم <div class='main-wrapper'>).
• ✅
  لصق الكود: قم بنسخ الكود أدناه ولصقه في المكان المختار، ثم اضغط على زر حفظ.

HTMLPost Template

<!-- بداية منطقة المنتج الواحد - نظام التنسيق -->
<section class='lp-product-area' id='lp-product-area'>
  <b:section id='landing-product' maxwidgets='3' showaddelement='yes'>
    
    <!-- أداة الصورة: المسؤولة عن شكل المنتج ووصفه -->
    <b:widget id='Image500' locked='false' title='بيانات المنتج الرئيسية' type='Image'>
      <b:includable id='main'>
        <div class='single-product-display'>
          <div class='product-visual'>
             <img expr:src='data:sourceUrl' expr:alt='data:title'/>
          </div>
          <div class='product-details'>
             <h1><data:title/></h1>
             <p class='product-description'><data:caption/></p>
             <div class='price-tag'>0.00</div>
             <a class='whatsapp-btn' href='#'>اطلب الآن عبر واتساب</a>
          </div>
        </div>
      </b:includable>
    </b:widget>

    <!-- أداة النص: المسؤولة عن السعر -->
    <b:widget id='Text501' locked='false' title='سعر المنتج' type='Text'>
      <b:includable id='main'>
        <div class='raw-price-value' style='display:none'><data:content/></div>
      </b:includable>
    </b:widget>

    <!-- أداة النص: المسؤولة عن رقم الواتساب -->
    <b:widget id='Text502' locked='false' title='رقم الواتساب' type='Text'>
      <b:includable id='main'>
        <div class='raw-phone-value' style='display:none'><data:content/></div>
      </b:includable>
    </b:widget>

  </b:section>
</section>
<!-- نهاية منطقة المنتج الواحد -->

إضافة كود التنسيق (CSS)

قم بالبحث عن وسم </b:skin> في قالبك، وضع الكود التالي فوقه مباشرة لضمان ظهور البطاقة بشكل احترافي:

CSSProduct Card Styling

/* =========================================
تنسيق بطاقة المنتج
   ========================================= */
 section.lp-product-area {
            padding: 80px 20px;
            background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .single-product-display {
            display: grid;
            grid-template-columns: 1fr 1.1fr;
            background: #ffffff;
            border-radius: 32px;
            overflow: hidden;
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
            margin: 0 auto;
            max-width: 1050px;
            position: relative;
            transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
            border: 1px solid rgba(255, 255, 255, 0.8);
        }

        .single-product-display:hover {
            transform: translateY(-5px);
            box-shadow: 0 30px 50px rgba(0, 0, 0, 0.15);
        }

        .product-visual {
            position: relative;
            background: #fdfdfd;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 30px;
            background-image: radial-gradient(circle at center, #ffffff 0%, #f1f5f9 100%);
            overflow: hidden;
        }

        .product-visual::before {
            content: '';
            position: absolute;
            width: 150%;
            height: 150%;
            background: #3b82f6;
            opacity: 0.03;
            border-radius: 45%;
            top: -25%;
            left: -25%;
            animation: rotate 20s linear infinite;
        }

        @keyframes rotate {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }

        .product-visual img {
            max-width: 100%;
            width: 100%;
            height: auto;
            aspect-ratio: 1/1;
            object-fit: contain;
            filter: drop-shadow(0 20px 30px rgba(0, 0, 0, 0.12));
            transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
            border-radius: 20px;
            z-index: 2;
        }

        .single-product-display:hover .product-visual img {
            transform: scale(1.05) rotate(-2deg);
        }

        .product-details {
            padding: 50px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            position: relative;
            background: #ffffff;
        }

        .product-details h1 {
            font-size: 2.5rem;
            margin: 0 0 15px 0;
            color: #0f172a;
            line-height: 1.2;
            font-weight: 800;
            letter-spacing: -0.5px;
        }

        p.product-description {
            font-size: 1.15rem;
            color: #64748b;
            margin-bottom: 35px;
            line-height: 1.7;
            font-weight: 400;
        }

        .price-tag {
            font-size: 2.5rem;
            font-weight: 900;
            color: #3b82f6;
            margin-bottom: 35px;
            display: flex;
            align-items: baseline;
            gap: 8px;
        }

        .price-tag::after {
            content: 'ر.س';
            font-size: 1rem;
            font-weight: 600;
            color: #64748b;
        }

        .whatsapp-btn {
            background: #25d366;
            color: #fff;
            text-decoration: none;
            padding: 18px 30px;
            border-radius: 16px;
            font-weight: 700;
            text-align: center;
            font-size: 1.2rem;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 12px;
            transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
            box-shadow: 0 10px 20px rgba(37, 211, 102, 0.2);
            border: none;
            cursor: pointer;
        }

        .whatsapp-btn:hover {
            background: #1eb959;
            transform: scale(1.02);
            box-shadow: 0 15px 30px rgba(37, 211, 102, 0.3);
        }

        .whatsapp-btn svg {
            width: 24px;
            height: 24px;
            fill: currentColor;
        }

        /* شارة اختيارية (Badge) */
        .product-badge {
            position: absolute;
            top: 25px;
            right: 25px;
            background: #0f172a;
            color: white;
            padding: 6px 16px;
            border-radius: 50px;
            font-size: 0.85rem;
            font-weight: 700;
            z-index: 10;
        }

        /* التجاوب مع الشاشات الصغيرة */
        @media (max-width: 992px) {
            .single-product-display {
                grid-template-columns: 1fr;
                max-width: 500px;
                margin: 20px auto;
            }
            
            .product-details {
                padding: 30px;
                text-align: center;
            }

            .product-details h1 {
                font-size: 1.8rem;
            }

            .price-tag {
                justify-content: center;
            }

            .product-visual {
                padding: 40px;
            }
        }

        @media (max-width: 480px) {
            section.lp-product-area {
                padding: 40px 15px;
            }
            .product-details {
                padding: 25px 20px;
            }
        }

التحكم بالبيانات

كيفية ملء البيانات من لوحة "التنسيق"

بعد حفظ القالب، اذهب إلى صفحة التنسيق، ستجد قسماً جديداً باسم "product-area" يحتوي على 3 أدوات:

1

تعديل أداة الصورة

افتح الأداة، ارفع صورتك الاحترافية، اكتب "اسم المنتج" في العنوان، واكتب "الوصف التسويقي" في خانة الشرح (Caption).

2

تعديل أداة السعر

افتح أداة النص المسماة "سعر المنتج"، واكتب الرقم فقط (مثلاً: 2500) دون أي عملات.

3

تعديل أداة الواتساب

افتح أداة النص الثالثة، واكتب رقمك بالصيغة الدولية (مثلاً: 9665000000) ليعمل رابط الشراء التلقائي.

javascript

سكربت الربط البرمجي (اللمسة الأخيرة)

ضع هذا السكربت قبل وسم </body> لدمج البيانات تلقائياً في التصميم:

text javascriptjavascript

<script>
window.addEventListener('load', function() {
    // جلب القيم من الأدوات المخفية
    const priceVal = document.querySelector('.raw-price-value')?.innerText.trim();
    const phoneVal = document.querySelector('.raw-phone-value')?.innerText.trim();
    const prodTitle = document.querySelector('.product-details h1')?.innerText;

    // حقن السعر في مكانه الصحيح
    if(priceVal) document.querySelector('.price-tag').innerText = priceVal;
    
    // بناء رابط الواتساب التلقائي
    if(phoneVal) {
        const text = encodeURIComponent(`مرحباً، أود طلب المنتج: ${prodTitle}`);
        document.querySelector('.whatsapp-btn').href = `https://wa.me/${phoneVal}?text=${text}`;
    }
});
</script>

الخطوة التالية

قسم آراء العملاء (Testimonials)

إضافة شهادات العملاء لزيادة الموثوقية في قالبك.

قريبا

تم النسخ! لا تنسَ أخذ نسخة احتياطية من القالب أولاً.