تركيب جدول عرض المنتجات بداخل المواضيع الجزء الأول
يُعد تركيب جدول عرض المنتجات داخل المواضيع من أهم الخطوات التي تساعد على تحويل القالب التقليدي إلى متجر إلكتروني احترافي قادر على عرض المنتجات بطريقة منظمة وجذابة. فوجود جدول مخصص للمنتجات يمنح الزائر تجربة تصفح سهلة وسريعة، حيث يمكنه مشاهدة صورة المنتج، الاسم، السعر، التقييم، وحالة التوفر في مكان واحد دون الحاجة إلى التنقل بين الصفحات. هذا الأمر يساهم بشكل مباشر في تحسين تجربة المستخدم وزيادة مدة بقائه داخل الموقع.
كما أن جدول عرض المنتجات يساعد على إبراز التفاصيل المهمة بشكل احترافي، مما يجعل عملية المقارنة بين المنتجات أكثر سهولة بالنسبة للعملاء. وعند تحويل القالب إلى منصة لبيع المنتجات، يصبح من الضروري توفير تصميم مرن ومتجاوب يعمل بكفاءة على الهواتف والأجهزة اللوحية وأجهزة الكمبيوتر، لأن أغلب المستخدمين يعتمدون حالياً على التصفح عبر الهاتف المحمول.
إضافة إلى ذلك، فإن تنظيم المنتجات داخل جدول احترافي يساهم في رفع معدل التحويل والمبيعات، حيث يشعر الزائر بالثقة والوضوح أثناء التصفح والشراء. ويمكن أيضاً دعم الجدول بإضافات متقدمة مثل أزرار الشراء السريع، وإضافة المنتج إلى السلة، وعرض الخصومات والعروض الخاصة بطريقة جذابة تساعد على زيادة التفاعل مع المنتجات.
ومن الفوائد المهمة أيضاً أن جدول عرض المنتجات يساعد في تحسين أرشفة الموقع داخل محركات البحث، خاصة عند استخدام بيانات منظمة ووصف واضح للمنتجات والأسعار والتقييمات. وهذا يساهم في ظهور المنتجات بشكل أفضل في نتائج البحث وجذب عدد أكبر من الزوار المهتمين بالشراء.
في النهاية، فإن تركيب جدول عرض المنتجات ليس مجرد إضافة شكلية داخل القالب، بل هو عنصر أساسي لتحويل الموقع إلى متجر إلكتروني متكامل يوفر تجربة استخدام احترافية ويساعد على تحقيق مبيعات أعلى وبناء ثقة قوية مع العملاء. الجزء الاول
معاينة الأضافة
الأكواد الخاصة بالاضافة
اولا - ندخل الى اكواد القالب و نبحث عن /head و نلصق الكود التالي أعلاه
<style>:root{--primary-color:#2c3e50;--accent-color:#e67e22;--bg-light:#f9f9f9;--border-color:#eee;--text-dark:#333}.tr-caption-container{width:100%;margin-bottom:20px;border-collapse:collapse}.tr-caption-container img{width:100%;height:auto;border-radius:12px;box-shadow:0 4px 15px rgba(0,0,0,0.1)}.tr-caption::before{content:attr(data-text);display:block;font-size:1.5rem;font-weight:bold;color:var(--primary-color);margin-top:15px;text-align:center}.pPric{font-size:3rem;font-weight:800;color:#007bff;margin:20px 0;padding:10px;border-bottom:2px solid var(--border-color)}.pPric::before{content:attr(data-text) ":";font-size:1rem;margin-left: 4px;color:#777}.pInfo{display:flex;flex-wrap:wrap;padding:12px 0;border-bottom:1px solid var(--border-color)}table.tr-caption-container td.tr-caption{font-size:12px;color:var(--meta-color);font-style:normal;padding:6px 0 0}.pInfo .L,.pInfo .R{flex:1;padding-right:9px;border-right:4px solid #007bff;min-width:250px;margin:5px 0}.pInfo small{display:block;text-transform:uppercase;font-size:0.9rem;color:#000000;font-weight:600;letter-spacing:0.5px;margin-bottom:2px}.pInfo small1{display:block;text-transform:uppercase;font-size:1.5rem;color:#0070ff;letter-spacing:0.5px;margin-bottom:2px;font-weight:700}.pInfo span{font-weight:700;color:var(--text-dark);font-size:1.4rem}.tabs{margin-top:30px;position:relative}.tabs input{display:none}.tabs label{display:inline-block;padding:12px 20px;background:#eee;cursor:pointer;border-radius:8px 8px 0 0;margin-right:5px;font-weight:bold;transition:0.3s}.tabs label::before{content:attr(data-text)}.tabC-1,.tabC-2,.tabC-3,.tabC-4{display:none;padding:20px;border:1px solid var(--border-color);background:#fff;border-radius:0 8px 8px 8px;line-height:1.6}#tabT-1:checked ~ div label[for='tabT-1'],#tabT-2:checked ~ div label[for='tabT-2'],#tabT-3:checked ~ div label[for='tabT-3'],#tabT-4:checked ~ div label[for='tabT-4']{background:var(--primary-color);color:#fff}#tabT-1:checked ~ .tabC-1,#tabT-2:checked ~ .tabC-2,#tabT-3:checked ~ .tabC-3,#tabT-4:checked ~ .tabC-4{display:block}.pMart{background:var(--bg-light);padding:20px;border-radius:10px;margin:20px 0;font-size:23px;align-items:center;display:flex}.pMart img{width:35px;height:35px;margin:10px 10px 0 0;border-radius:5px;transition:transform 0.2s}.pMart img:hover{transform:scale(1.1)}.hidden{display:none}</style>
ثانيا - ندخل الى الموضوع المراد نشره والدخول الى عرض HTML و لصق الكود التالي بداخلها
<table class='tr-caption-container'><tbody><tr><td><img alt='HP Pavilion Laptop 15-eh1101AU' width='1280' height='720' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhlmxjjEVsUtVQBywwPr71Kaub2SWDF9S_vm5vBJzh5q3u-Whz_rIg6jABe2mP9wGkMTxUxvFMHORB_7K9MSpif8ogjaGRxjf3_gMJnwaO9-FdX_M-adxvFadG10QKbHMvlSUVi2V9pyKQIiMCaErp5USIN1v4L16MdrIUji8B9YBHcxVLwm19pU8IMQ/s1280/HP_Pavilion.webp'/></td></tr><tr><td class='tr-caption' data-text='HP Pavilion Laptop 15-eh1101AU'></td></tr></tbody></table><!--[ Price to show in homepage ]--><div class='pPric pPad' data-text=' سعر القطعة '>$800</div><!--more--><!--[ Post snippet ]--><div class='hidden'>Specifications, Design, Performance, Battery</div><div class='pInfo pPad'><div class='L'><small>Series</small><span>HP Pavilion Laptop 15-eh1101AU</span></div><div class='R'><small>Brand</small><span>HP</span></div></div><div class='pInfo pPad'><div class='L'><small>Specific Uses For Product</small><span>Multimedia</span></div><div class='R'><small>Screen Size</small><span>15.6 Inches</span></div></div><div class='pInfo pPad'><div class='L'><small>Operating System</small><span>Windows 10 Home</span></div><div class='R'><small>Human Interface Input</small><span>Touchscreen</span></div></div><div class='pInfo pPad'><div class='L'><small>CPU Manufacturer</small><span>AMD</span></div><div class='R'><small>Graphics Card Description</small><span>Integrated</span></div></div><div class='pInfo pPad'><div class='L'><small>Processor</small><span>AMD Ryzen 5 5500U</span></div><div class='R'><small>Storage</small><span>512 GB SSD</span></div></div><div class='pInfo pPad'><div class='L'><small>Memory</small><span>8 GB DDR4-3200 MHz</span></div><div class='L'><small>Special Feature</small><span>Micro-Edge Display, Thin</span></div></div><div class='pInfo pPad'><div class='R'><small>Colour</small><span>Silver</span></div></div><div class='pInfo pPad o'><small1> ماذا يوجد في العلبة : </small1><span> كمبيوتر محمول من HP، محول طاقة ذكي بقدرة 65 واط، كتيبات المستخدم </span></div><div class='pMart'><small>أو يمكنك التسوق من خلال هذه الروابط '<b>Market Place</b>' :</small><!--[ Change attribute href='#' to add url ]--><a title='Market 1' href='#' target='_blank' rel='noopener'><img alt='Market 1' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisldTSPR5qQSsrqZDyfYV81HFSq4Pko5u8xpbzKJ7V05CZAaCkfxG550uqbp2xlCxukxcVL4i2so2XxNri-wqqUO0yuVLLznfFes1rdmg7Ywq8pWE8FXwWQfcyrNiAPlyI3_ngX12x7-KGzAVPfjiTWPMP3HdwelG4pn729xMfH05-hdWVbQyaIsgMkQg/s100/favicon.png'/></a><a title='Market 2' href='#' target='_blank' rel='noopener'><img alt='Market 2' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisldTSPR5qQSsrqZDyfYV81HFSq4Pko5u8xpbzKJ7V05CZAaCkfxG550uqbp2xlCxukxcVL4i2so2XxNri-wqqUO0yuVLLznfFes1rdmg7Ywq8pWE8FXwWQfcyrNiAPlyI3_ngX12x7-KGzAVPfjiTWPMP3HdwelG4pn729xMfH05-hdWVbQyaIsgMkQg/s100/favicon.png'/></a></div><div class='tabs stick'><!--[ Active function ]--><input id='tabT-1' type='radio' name='postProduct' checked=''><input id='tabT-2' type='radio' name='postProduct'><input id='tabT-3' type='radio' name='postProduct'><input id='tabT-4' type='radio' name='postProduct'><!--[ Tabs header/title ]--><div><!--[ Change atribute data-text='...' to replace tabs title ]--><label for='tabT-1' data-text='Processor'></label><label for='tabT-2' data-text='Display'></label><label for='tabT-3' data-text='Audio'></label><label for='tabT-4' data-text='Battery'></label></div><!--[ Tabs content ]--><div class='tabC-1'><p>AMD Ryzen 5 5500U (حتى سرعة تعزيز قصوى 4.0 جيجاهرتز، ذاكرة تخزين مؤقت L3 بسعة 8 ميجابايت، 6 أنوية، 12 خيط)</p><p>عش حياتك بلا حدود مع لابتوب ينجز الأمور. كن أكثر إنتاجية وأثبت جدارتك عندما تمتلك أحدث معالجات AMD Ryzen، وذاكرة تصل إلى 16GB Dual Channel 3200 DDR4، ورسومات AMD Raedon لتناسب تنقلاتك بين الألعاب والترفيه والعمل الإبداعي بسلاسة. استمتع بأداء قوي وحوسبة سلسة لمهامك اليومية. يشمل ذلك تحسين الإنتاجية، والبث السلس، وترفيه Full HD الرائع مع شاشة غامرة مضادة للوهج. أيضا، احصل على ميزة أداء كبيرة مع أقراص SSD — فهي أسرع في التشغيل، أسرع في الإغلاق، وأسرع في نقل البيانات.</p></div><!--[ Tabs content ]--><div class='tabC-2'><p>39.6 cm (15.6') diagonal, FHD (1920 x 1080), IPS, micro-edge, BrightView, 250 nits, 45% NTSC</p><p> بفضل قدراته المتميزة في تحديد الألوان، يضمن هذا اللابتوب عرضا مذهلا للألوان على شاشة FHD IPS. سهولة الوصول والتصميم المريح تماما يسمحان لك بتعظيم إمكانيات جهازك. لابتوب صغير يضفي الحياة على التجربة البصرية مع FHD وإطار Micro Edge. لابتوب بنسبة شاشة إلى جسم أكبر، وحواف ميكرو إيدج تعظم رؤيتك وتضمن أن لديك رسومات واضحة وشاشة أكبر للاستمتاع بفيديوهاتك المفضلة.</p></div><!--[ Tabs content ]--><div class='tabC-3'><p> تجربة صوتية غنية وأصيلة من خلال مسرحية بانغ & أولوفسن. كل صوت يغمر فيك نغمة في صوت يأخذك بعيدا. دمجه مع سماعات HP المزدوجة وHP Audio Boost، يحيي كل نغمة وصوت، سواء أثناء الاستماع إلى الموسيقى أو مشاهدة فيلم.</p></div><!--[ Tabs content ]--><div class='tabC-4'><p>هل أنت قلق من انقطاع طاقتك أثناء السفر لساعات طويلة؟ ضع مخاوفك جانبا واحصل على لابتوب HP Pavilion الذي يأتي بشحن بطارية فائق السرعة. استمتع بتجربة حوسبة أسرع وأكثر سلاسة واستجابة مذهلة تتيح لك أداء جميع مهامك أثناء التنقل دون أي قلق. تم بناؤه ببطارية تتكيف بذكاء مع متطلبات النظام، ومن المؤكد أنك ستحصل على أفضل أداء ممكن. شحن HP Adaptive Battery Fast Charge في وقت أقل مع محول 43WH - 50٪ في 30 دقيقة سيسمح لك باستعادة ساعات أكثر في وقت أقل.</p></div></div>
ثالثا- قم بالتعديل على اللازم مثلا الصورة و السعر و النصوص و غيرها
ثم بالحفظ
شكرًا لوقتكم واهتمامكم بقراءة موضوع تركيب جدول عرض المنتجات و أسعارها بداخل المواضيع . إذا صادفتكم أي مشكلة أثناء استخدام الكود أو كان لديكم أي استفسار، فلا تترددوا في طرحه ضمن التعليقات أو التواصل معنا عبر صفحة الاتصال بنا . ولا تنسوا الانضمام إلى متابعي مدونة هلا تك ليصلكم كل ما هو جديد.
