Adnane Kadri

كدالة مضمنة في جافاسكربت، يمكنك الإستعانة بالدالة typeof التي تقوم بتحديد نوع البيانات الممرر إليها مباشرة، تقوم بإعادة أحد النتائج: typeof {name:'Hsoub', type:'academy'} => Object typeof new Date() => Date typeof [1,2] => Array typeof "string" => String typeof 1.21 => Number typeof true => Boolean typeof null => null typeof x => undefined أما ولخدمة غرضك بالضبط فستحتاجين بعض التخصيص. يمكنك عمل ذلك وفق المنطق التالي : نقوم بعمل دالة تقوم بـ: تحويل أي سلسلة نصية تمرر إليها إلى رقم Number. في كل ما هو ليس رقم أو معبر به عن رقم يتم إرجاع NaN. في حالة المعامل الممرر رقم : يتم التحقق ما ان كان هذا الرقم double أو integer. في حالة لم يكن المعامل الممرر رقم : يتم التحقق من نوعه عن طريق typeof. مثال عملي: function getType(data){ var n = Number(data); if(! Number.isNaN(n)){ if(n === +n && n !== (n|0)) return 'double'; if(n === +n && n === (n|0)) return 'integer'; } else{ return typeof data; } } getType(1); // integer getType("1"); // integer getType(1.5); // double getType("1.5"); // double getType("sara"); // string getType([2,4,42]); // array كتابة أكثر اختصارا: function getType(data){ var n = Number(data); return (n === +n && n !== (n|0)) ? 'double' : (n === +n && n === (n|0)) ? 'integer' : typeof data; } تعرف أكثر عن الأعداد (numbers) في جافاسكربت.

في هيروكو، أي متغيرات تخص البيئة يجب إضافتها إلى قسم إعداد المتغيرات ليتم العمل بها لأن ملف البيئة env. متجاهل افتراضا من عليها. للإجابة على سؤالك الثاني بشأن تجاهل ملف التهجير يجب أولا فهم طريقة لارافيل والمنطق وراء تعقب ملفات التهجير وتطبيقات الشيفرات داخلها حتى يمكن تحديد المشكل بالضبط. تحمل ملفات التهجير في لارافيل الأسماء على النحو التالي: 2021_12_03_100000_create_users_table يتم تقطيع سلسلة الاسم النصية إلى 7 أجزاء كالتالي: 2021 12 03 100000 create users table يتم اقتطاع الأربع أجزاء الأولى الممثلة بتاريخ إنشاء ملف التهجير ليتبقى: create users table يتم إعادة تشكيل السلسة النصية و كتابة الأحرف الأولى كأحرف كبيرة كالتالي: CreateUsersTable يكون هذا هو اسم الصنف الموجود داخل ملف التهجير، ولارافيل تقوم بكل هذا عند إنشاء ملف تهجير عن طريق الأمر: php artisan make:migration create_users_table أو عند إنشاء ملف نموذج: php artisan make:model -m تحدث أحيانا مشكلة تجاهل ملف التهجير هاته عند إنشاء الملفات يدويا أو تعديل أسماءها لاحقا، ويكون ذلك عن الإخلال بترتيب أو خطأ بخصوص توافق اسم ملف التهجير مع الصنف المحتو فيه مثل: وضع تاريخ الإنشاء آخرا، وهذا في الأرجح ما حصل معك. وبالتالي يجب دوما عند إنشاء ملفات التهجير يدويا مراعاة القواعد التي يستعملها لارافيل في استخراج الأصناف المستهدفة من الملفات. [year]_[month]_[day]_[HHMMSS]_[action]_[tableName] حل آخر يقدمه لارافيل، هو في إنشاء ملفات التهجير المجهولة التي لا يتطلب اسم ملفها مراعاة لقواعد التسمية في لارافيل. إذ يمكنك تسمية هذا الملف وفق ما تشاء بشرط أن يحتوي التعريف التالي داخله: <?php use Illuminate\Database\Migrations\Migration; return new class extends Migration { // }; تعرف أكثر عن تهجير قواعد البيانات (migrations) على Laravel.

لا يجب عليك النظر إلى ملفات المكتبة إلا كملفات css أو جافاسكربت عادية، وبالتالي فإنه يمكنك الإعتماد على الأنترنت في تحميل ملفات أي المكتبة أولا ومن ثم سيمكن تضمينها كأي ملف css أو جافاسكربت آخر. على سببيل المثال: قم بتحميل ملف bootstrap.min.css. قم بإنشاء مجلد ملفات داخل public وليكن libs وضع به ملفات المكتبة. يمكنك الآن بأي ملف عرض تضمينه كالتالي: <link rel="stylesheet" href="{{ asset('libs/bootstrap.min.css') }}" وبمثل الطريقة تضمين ملف الجافاسكربت وهكذا .. في حالة توفر المكتبة لمدير الحزم npm يفضل تثبيتها وفقه مثلما أشار المدرب صلاح الدين.

بحسب ما يظهر من الشيفرة، يحتمل أن يكون التطبيق مبني على الـ Vue أو الـ React أو الـ Angular فالمطور هنا يقوم بعمل Rendering لمكون بعد تحميل موارد الصفحة، هذا المكون هو العنصر app-root . حيث أن ملف الجافاسكربت المرفق يقوم بضبط الصفحة بناءا عليه بعد تحميل مواردها، وفي حالة طلب تفحص لمصدر الصفحة لن يتم إظهار إلا وسم المكون مرفقا بملف الجافاسكربت، فيظهر وكأن التطبيق قد تم إخفاء مصدره. لأن عملية إخفاء مصدر صفحة عن المتصفح مستحيلة عمليا ولن يمكن ذلك بشتى الطرق، ففكرة الويب المفتوح هي في مشاركة البيانات، ومادام المتصفح يقوم بعرض الصفحة بشكل طبيعي فهذا يعني أن له وصولا عليها. أي باختصار: مصدر الصفحة ليس مخفيا، وإنما يتم تحميل مكونات الصفحة وعناصرها بعد تحميل موارد هاته الصفحة. وعلى نحو خاص جدا، هاته الفكرة شائعة في تطبيقات الويب التقدمية وتطبيقات الصفحة الواحدة SPA's ولا تقتصر على الـ Vue أو React أو Angluar. بل يمكن حتى مماثلة نفس الفكرة عن طريق الجافاسكربت أو الجيكويري بشكل بسيط. مثال عن تطبيق Vue. مثال عن تطبيق React. مثال 2 عن تطبيق React. مثال عن تطبيق Angular. التطبيق لا يفتح معي أيضا، ولكن يمكن التخمين أن هذا التطبيق تطبيق Angular، ﻷن مطوري هذا الأخير يستعملون عادة اسم أو مصطلح app-root كإسم المكون الجذر الذي يتم فيه عمل Rendering لكامل المكونات الفرعية الأخرى لتطبيق الـ angular. (قد تجد البعض الآخر يسمونه wt-root أيضا). وبالتالي فإن ذات الفكرة تنطبق عليه أيضا, فهو ليس إخفاءا وإنما تحميل لمكونات الصفحة بعد مواردها، وطلب تفحص مصدر صفحة ما ليس إلا تفحصًا لمصدرها قبل تحميل أي مورد.

يمكنك مراجعة هاته الإجابة للإستفادة من ذلك:

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

الأمر يلخص في ثلاث خطوات بسيطة: يفضل المحاولة أولا، ولا بأس بمشاركة الملفات لاحقا.

تخبر التعليمات أنه بعد وضع ملف جافاسكربت البرنامج: <script type="text/javascript"> var CPABUILDSETTINGS={"it":2022192,"key":"a7a89"}; </script> <script src="https://d13nu0oomnx5ti.cloudfront.net/4911dc0.js"></script> يجب عليك إستدعاء أحد الدوال المتضمنة في الملفات، حيث تم إرفاق بعض الأمثلة الشائعة للإستعمال والإستدعاء: <button onclick="CPABuildLock()">Click me!</button> الآن وبعد تضمينها على نحو صحيح، سيمكنك فتح نافذة منبثقة تحتوي على رابط الأفلييت الخاص بك. لخدمة هذا الغرض، وإستبدال الروابط المخزنة في هاته الأزرار : يقترح عمل الفكرة التالية: بملف config.php قومي بإضافة المتغيرين التاليين قبل علامة الإغلاق <? : $cpa_script = '<script type="text/javascript"> var CPABUILDSETTINGS={"it":2022192,"key":"a7a89"}; </script> <script src="https://d13nu0oomnx5ti.cloudfront.net/4911dc0.js"></script>'; $event_launcher = 'onclick="CPABuildLock()"'; ?> ثم بملف movie.php قومي بإستبدال هذا الجزء من كل سطر من التالي: <a href="<?php echo $cpa_link ?>" target="_blank" class="btn btndown btn-lg btn-block mb-3 mt-3"> ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ بـ : role="button" <?php echo $event_launcher; ?> لتصبح كامل العناصر المشابهة كالتالي: <a role="button" <?php echo $event_launcher; ?> target="_blank" class="btn btndown btn-lg btn-block mb-3 mt-3"><i class="fas fa-download"></i> SD Quality <b class="langflag"> - EN </b></a> تأكدي من تعميم هذا على باقي العناصر. الآن وكخطوة أخيرة، قومي بفتح ملف header.php الكائن داخل مجلد inc ، وقومي بإضافة هذا السطر قبل وسم إغلاق head كالتالي: <link href="css/main.css" rel="stylesheet"> <?php echo $cpa_script; ?> </head> تأكدي من حفظ كامل هاته الملفات، ثم قومي بتحديث الصفحة على المتصفح وجربي الضغط على أاي من الأزرار الستة و ستلاحظين تطبيق الفكرة. ففي الحقيقة، لا توفر كامل برامج التسويق بالعمولة روابط جاهزة لوضعها والإستفادة منها مباشرة، فقد تحتاج بعضها تهيئة أو تخصيصا على أزرار معينة.

هل هذا مثال عن النافذة المنبثة التي تودين إظهارها؟ حيث يتضمن العنصر "أرسل رسالة الآن لتحميل لعبة غير محدودة" رابط أفلييت بالفعل! إذ ان هذا نتيجة تطبيق التعليمات الموضحة.

ليس تماما، هل تم إعطاءك أي تعليمات مع كود الجافاسكربت؟

العملية غير ممكنة أصلا، فمطور السكربت قام بتخصيص المتغير cpa_link لتخزين رابط الأفلييت وليس لتخزين سكربت. ﻷنه يقوم بطباعته لاحقا في خاصية href لرابط تشعبي a ، وهو مكان لا يصلح لطباعة وسمي سكربت. قد كنت افترضت أن السكربت الذي تحاولين لصقه مقدم من برنامج تسويق بعمولة ومرفق بتعليمات عن كيفية وضع هذا السكربت، وعن ما هي الأصناف التي يقوم بوضع روابط الأفلييت عليها و غيرها من التفاصيل المهمة للإشتراك في أي برنامج تسويق بالعمولة.

مبدئيا، لا يمكنك وضع سكربت بدل الرابط هكذا وفقط. ومثلما تم الإشارة سابقا : هل تم إعطاءك رابط cpa أم سكربت فقط؟ أرجوا أيضا إرفاق توثيق برنامج التسويق أو يكفي إرفاق رابط الموقع، لأن طريقة عمل السكربت غير واضحة أصلا. يبدوا أنه يحتاج إعدادا ولا يكفيه لصق السكربت

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

لا مشكلة إن كانت هاته الصفحة مستدعاة في كامل صفحات موقعك، يمكنك أيضا إضافة هذا السطر في ملف config.php : <?php // ================================================================= // // ================================================================= // // =============== By Mohammed Cha : Re-skinning GRP =============== // // ================================================================= // // ================================================================= // $uri = 'https://www.sitedialek.com'; $wname = 'smia dial site dialek'; $descrip = 'description dial site dialek'; $cpa_link = '<script type="text/javascript"> var CPABUILDSETTINGS={"it":2022192,"key":"a7a89"}; </script> <script src="https://d13nu0oomnx5ti.cloudfront.net/4911dc0.js"></script>'; $ImdbApi = 'a913ee104db6b795d20852a9ed989036'; $comingsoon = '1'; // 1 to display coming soon or 0 to hide $related = '1'; // 1 to display related movies or 0 to hide /////////////// إضافة السكربت $cpa_script = '<script type="text/javascript">var CPABUILDSETTINGS={"it":2022192,"key":"a7a89"};</script><script src="https://d13nu0oomnx5ti.cloudfront.net/4911dc0.js"></script>'; echo $cpa_script; ?> قومي بهذا وأخبريني بالنتيجة

أظن أن الفكرة هي في مجرد إرفاق شيفرة الجافاسكربت في عنصر head لكل صفحات موقعك فالسكريبت المقدم من البرنامج سيتولى كل هاته الأمور، هل حاولت طباعتها كالتالي: <?php $cpa_script = '<script type="text/javascript">var CPABUILDSETTINGS={"it":2022192,"key":"a7a89"};</script><script src="https://d13nu0oomnx5ti.cloudfront.net/4911dc0.js"></script>'; echo $cpa_script; ?> وذلك بين وسمي head في صفحة ما من موقعك: <head> <?php $cpa_script = '<script type="text/javascript">var CPABUILDSETTINGS={"it":2022192,"key":"a7a89"};</script><script src="https://d13nu0oomnx5ti.cloudfront.net/4911dc0.js"></script>'; echo $cpa_script; ?>

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

لا توجد أي مشكلة بالإستبدال حرفيا، لاحظي: <?php // ================================================================= // // ================================================================= // // =============== By Mohammed Cha : Re-skinning GRP =============== // // ================================================================= // // ================================================================= // $uri = 'https://www.sitedialek.com'; $wname = 'smia dial site dialek'; $descrip = 'description dial site dialek'; $cpa_link = '<script type="text/javascript"> var CPABUILDSETTINGS={"it":2022192,"key":"a7a89"}; </script> <script src="https://d13nu0oomnx5ti.cloudfront.net/4911dc0.js"></script>'; $ImdbApi = 'a913ee104db6b795d20852a9ed989036'; $comingsoon = '1'; // 1 to display coming soon or 0 to hide $related = '1'; // 1 to display related movies or 0 to hide ولو قمت بطباعة قيمة المتغير cpa_link عن طريق echo فسيتم طباعته بشكل عادي، ولن يتم إظهار أية أخطاء. ولكن أفهم من الشيفرة، أنك تحاولين إرفاق الرابط الخاص بك في برنامج تسويق بالعمولة في شيفرة PHP. وتحاولين في ذلك وضع سكريبت الجافاسكربت الذي تم إعطاءه لك مكان الرابط المرفقة بالشيفرة المثال ، ثم ستقومين بلصق هاته الشيفرة في صفحات موقع معينة. إن كان هذا هو غرضك من وضع شيفرة الجافاسكربت بداخل متغير PHP فلا أظن أن هذا هو الطريق الصحيح لإستعمال ذلك. قد حاولت البحث عن أية توثيقات لبرامج تسويق بالعمولة في الموقع المرفق: https://sitedialek.com/ ، ولكن لا أجد أيا مما يتعلق بذلك. هل لم أفهم ما تحاولين القيام به جيدا؟

يمكنك إستعمال أي تخطيط جدول في HTML لعمل الفكرة، على سبيل المثال: <table> <thead> <td>خلية ترويسة للجدول </td> <td>خلية ترويسة للجدول </td> <td>خلية ترويسة للجدول </td> <td>خلية ترويسة للجدول </td> </thead> <tbody> <tr> <td>خلية جسم للصف الأول للجدول </td> <td>خلية جسم للصف الأول للجدول </td> <td>خلية جسم للصف الأول للجدول </td> <td>خلية جسم للصف الأول للجدول </td> </tr> <tr> <td>خلية جسم للصف الثاني للجدول </td> <td>خلية جسم للصف الثاني للجدول </td> <td>خلية جسم للصف الثاني للجدول </td> <td>خلية جسم للصف الثاني للجدول </td> </tr> </tbody> </table> النتيجة : وهذا كمثال يسهل من عليه تطبيق نفس الفكرة على برنامج توزيع المياه. خطوات عملية: الجدول يحوي ترويسة تمتلك الخليتين : المنطقة ، الأحياء. الجدول يحوي جسم به 11 صف، حيث أن الخلية الأولى من كل صف تحوي اسم المنطقة، والخلية الثانية مجموع الأحياء والمناطق المرافقة. النتيجة المطلوبة: على أن هذا ليس إلزاما، فلغة HTML ليست إلا لغة تخطيطية يمكنك عن طريق بضعة وسوم أو عناصر هيكلة الصفحة التي تريدينها على أي نحو تميزينه. قد تحتاجين أيضا التعرف على الجداول في HTML.

أظن أنك الأدرى بما ستحتاج الإستغناء عليه أو لا، ولكن بشكل عام لا أظن أنه هنالك حاجة من أسطر التحقق: if (filter_var($ip, FILTER_VALIDATE_IP) && in_array($purpose, $support)) { فالواجهة تقوم بعمل ذلك بدلا عنك، وفي حالة عدم صلاحية هذا العنوان فلن يتم إعادة أي رد. خصوصا وأنك لا تقوم بخزن هذا العنوان إلا بعد إستلام الرد. ولا من هذا الشرط أيضا: if (@strlen(trim($ipdat->geoplugin_countryCode)) == 2) { فكامل الcountry codes مميزة بمحرفين ولا حاجة للتحقق من ذلك. أما باقي الشيفرة فجيدة.

لا يفترض بتطبيق اللارافيل أن يقوم بالسماح لك بتصفح محتويات المجلد public بمجرد إستعمالك لمسار نسبي كالتالي: http://domain.dm/public حيث يوفر لارافيل نظاما كاملا للتوجيه Routing، أين يقوم التطبيق بإلتقاط المسار الذي تقوم بطلبه وإعادة المطلوب كأن يقوم بإستهداف متحكم controller أو ملف عرض view. سيمكن كل هذا بتعريف هذا المسار في ملف web.php الذي يضم كامل مسارات الويب لموقعك. وفي حالة غياب تعريف كالتالي: Route::get('/public' ,function(){ echo '!يتم إلتقاط مسارك بنجاح'; }); سيتم ببساطة توجيهك إلى صفحة Not found وعرض كود الخطأ 404 ، وهذا في الغالب ما حدث معك. قد تحتاج التعرف أكثر عن لارافيل ، أو التوجيه في لارافيل.

يمكنك الإستعانة بالواجهات البرمجية التي تقوم بتحليل عنوان IP وإستنتاج دولة الزائر المرافقة لهذا الـIP. واحدة من الواجهات السهل التعامل معها هي واجهة ip-api، أين يمكنك إرسال طلبية HTTP من النوع GET مرفقة بعنوان IP الزائر لجلب كامل المعلومات الخاصة بهذا العنوان. يتم إرسال الطلبيات إلى نقطة الوصول التالية: http://ip-api.com/json/{ip-address} مثال عن الردود التي تقدمها الواجهة: { status: "success", country: "Algeria", countryCode: "DZ", region: "25", regionName: "Constantine", city: "Constantine", zip: "25010", lat: 36.368, lon: 6.6172, timezone: "Africa/Algiers", isp: "new", org: "", as: "AS36947 Telecom Algeria", query: "244.244.244.244" } سيمكنك بعد ذلك قراءة أي خاصية من هذا الرد. مثل خاصية country أو countryCode لتوظيفها في خدمة غرضك. خطوات لتوظيف الفكرة في مثالك: لنقل أن الدالة getUsersCountries تقوم بجلب الدول التي يأتي منها زوارك. تقوم هاته الدالة بإستعلام قراءة من قواعد البيانات لقراءة جميع عناوين الـ IP الخاصة بزوارك. تقوم الدالة بإرسال طلبيات GET إلى نقطة الوصول المذكورة سابقا لإستنتاج الدول التي يأتي منها زوارك (يمكنك إستعمال الدالة file_get_contents). يتم تخزين هاته الدول في مصفوفة. يتم فلترة عناصر هاته المصفوفة وجلب العناصر الغير مكررة (يمكنك إستعمال الدالة array_unique). => النتيجة: مصفوفة تحمل كامل بلدان الزوار. تعديل : لتجنب حظرك عن طريق هاته الواجهة، لا يفضل إرسال العديد من الطلبيات مرة واحدة مثل المنطق الذي ستقوم الدالة المرفقة كمثال بإتباعه، عوضا عن ذلك قم بتخزين اسم الدولة مباشرة بدل عنوان IP أو بجانبه في إستعلام INSERT الذي تقوم به في جدول totalview.

لاحظ أنك على مستوى الجافاسكربت لا تقوم بالتفريق أصلا بين محتويات المنتج الأول ومحتويات المنتج الثاني ، فكامل الصور ذات الصنف demo تشير إلى صور المنتج الأول ولا يتم أبدا اعتبار المنتج الثاني. لماذا يحدث هذا؟ لأنك تقوم بعرض المنتج بناء على ترتيبه في شجرة العناصر الحاوية للصنف Slides في الدالة showSlides: var slides = document.getElementsByClassName("Slides"); ولو قمت بتتبع فهرس الشريحة النشطة slideIndex عن طريق طباعته في الـ console فستجد أنه دوما يأخذ القيم 1,2,3 . وبالتالي فإن عناصر الصور الكبيرة التي سيتم تحديدها هي دوما العناصر الثلاث الأولى التي تحمل الصنف Slides . ولن يتم اعتبار ما إن كانت من الصف الأول أو الثاني ، أو إن كانت تخص المنتج الأول أو الثاني. ما الحل؟ أظن أن الحل بتعديلات بسيطة هو في تــمــييــز الصور المصغرة للمنتج الأول عن الصور المصغرة للمنتج الثاني وبالتالي فإن عرض صورة كبيرة عن طريق صورة صغيرة في المنتج الأول لن تتداخل مع الصورة الكبيرة للمنتج الثاني وهكذا. إذا كيف نخبر الجافاسكربت أننا في الصف الأول أو الثاني؟ لعمل ذلك قمت بالتصفح في شجرة الوثيقة والبحث عن الأب component-content لأن الذي يميز المنتج الأول والثاني هو أن كل واحد منهما في حاوٍ مختلف : <!-- ////////////////////// first product --> <div class="component-content"> العناصر التي يتم ضغطها من هذا الحاوي تشير إلى الحاوي الأب هذا </div> <!-- ////////////////////// second product --> <div class="component-content"> العناصر التي يتم ضغطها من هذا الحاوي تشير إلى الحاوي الأب هذا </div> وذلك عن طريق التصفح في شجرة الاباء إنطلاقا من العنصر الذي تم الضغط عليه: function currentSlide(n ,activeImg) { var parentContainer = activeImg.parentNode .parentNode .parentNode .parentNode; /* <div class="component-content"> الأب الرابع <div class="component-container-img"> الأب الثالث <div class="slider-component"> الأب الثاني <div class="Slides"> الأب الأول <img src="./img/1.png" onclick="openModal();currentSlide(1 ,this)" alt="img-1"> */ showSlides(slideIndex = n ,parentContainer); حيث أن عند الضغط على صورة مصغرة : يتم إلتقاط الصورة المضغوطة عن طريق الدالة currentSlide . تخزين الأب الحاوي لها في متغير . لاحظ أيضا أني قمت بتمرير هذا المتغير إلى الدالة showSlides التي ستستعمله في عدم الخلط بين المنتج الأول والثاني: function showSlides(n ,parentContainer) { var i; /* المنتمية للحاوي الذي نقوم بتحديده لها فقط Slides تحديد العناصر ذات الصنف */ /* وكأننا نخبر الجافاسكربت ألا تخلط بين الحاويين */ var slides = parentContainer.getElementsByClassName("Slides"); سيكون هذا كافيا لعمل عرض الشرائح عند التحريك، ولكن ستبقى هنالك خطوة أخرى، هي في تحديد الشريحة النشطة افتراضية، فإستدعاءنا للدالة showSlides هنا غير كافٍ: var slideIndex = 1; showSlides(slideIndex); كونها لا تقوم بتحديد حاو المنتج الذي نقوم بعرض شريحته النشطة، ولذلك لنقم بشكل إفتراضي بعرض : الشريحة الأولى من الحاوي الأول . الشريحة الثانية من الحاوي الثاني . كالتالي: var slideIndex = 1; /*تحديد كامل الحاويات*/ var containers = document.querySelectorAll('.component-content'); /* عرض الشريحة الأولى من الحاو الأول */ showSlides(slideIndex ,containers[0]); /* عرض الشريحة الأولى من الحاو الثاني */ showSlides(slideIndex ,containers[1]); فتكون الشيفرة كاملة: /** * عرض الشريحة الحالية * إزالة الصنف النشط من الصور المصغرة الغير نشطة * */ function currentSlide(n ,activeImg) { // الذي تم من داخله استدعاء الدالة component-content تحديد الأب الرابع : أي العنصر ذي الصنف var parentContainer = activeImg.parentNode.parentNode.parentNode.parentNode; showSlides(slideIndex = n ,parentContainer); // الصور المصغرة الخاصة بهذا الحاوي فقط var imgs = parentContainer.querySelectorAll(".demo"); for(i=0; i < imgs.length ;i++){ imgs[i].classList.remove('active'); } activeImg.classList.add('active'); } var containers = document.querySelectorAll('.component-content'); showSlides(slideIndex ,containers[0]); showSlides(slideIndex ,containers[1]); function showSlides(n ,parentContainer) { var i; // نحتاج تحديد الصور الكبيرة الخاصة بهذا المنتج فقط var slides = parentContainer.getElementsByClassName("Slides"); ... إلى اخر الشيفرة سيكون هذا كفيلا بحل المشكلتين معا لديك، تأكد فقط من تعميم هذا التعديل بإضافة this على كامل العناصر المشابهة: <div class="Slides"> <img src="./img/1.png" onclick="openModal();currentSlide(1 ,this)" alt="img-1"> </div>

هل تقصد أن لديك صفين من المنتجات؟ الصف الأول الحاوي للمنتج الأول وثلاث صور مصغرة يتم التحكم عن طريقها في الصورة المعروضة من الصف الأول ، ثم الصف الثاني الحاوي للمنتج الثاني وثلاث صور مصغرة أخى يتم التحكم عن طريقها في الصورة المعروضة من الصف الثاني ؟

لحل هذا المشكل قمت بدل البحث عن الصورة التي تم الضغط عليها عن طريق الشريحة النشطة بتمرير كائن الصورة التي تم الضغط عليها في الدالة currentSlide كمعامل ثانٍ: <div class="Slides"> <img src="./img/1.png" onclick="openModal();currentSlide(1 ,this)" alt="img-1"> </div> حيث يشير this إلى الصورة التي هي العنصر نفسه (يجب تعميم هذا في كامل العناصر). ستقوم الدالة currentSlide بإلتقاط هاته الصورة، ثم حذف الصنف active عن كامل الصور وتطبيقها على هذا العنصر: function currentSlide(n ,activeImg) { showSlides(slideIndex = n); var imgs = document.getElementsByClassName("demo"); for(i=0; i < imgs.length ;i++){ imgs[i].classList.remove('active'); } activeImg.classList.add('active'); } سيمكن بهذا التخلص من هاته الأسطر: function showSlides(n) { var i; var slides = document.getElementsByClassName("Slides"); //var dots = document.getElementsByClassName("demo"); هذا if (n > slides.length) {slideIndex = 1} if (n < 1) { slideIndex = slides.length } for (i = 0; i < slides.length; i++) { slides[i].style.display = "none"; } /* for (i = 0; i < dots.length; i++) { dots[i].className = dots[i].className.replace(" active", ""); } هذا */ slides[slideIndex-1].style.display = "block"; // dots[slideIndex-1].className += " active"; هذا } سيجعلك هذا تتجاوز المشكلة الثانية وستحتاج فقط إعطاء الصنف active للصورة النشطة يدويا كإعداد إفتراضي. لم أستطع إلتماس هاته المشكلة، هل يمكنك توضيحها أكثر؟

يتم كل ذلك عن طريق قراءة محركات البحث لمخططات البيانات أو البيانات المُهَيكَلة الخاصة بصفحة ما، تعرف هاته المخططات بـStructured Data . تستخدم العديد من التطبيقات من Google و Microsoft و Pinterest وغيرها هاته البيانات لتوفير تجربة مستخدم أفضل. حسب تعريف Google فإن: تستخدم Google البيانات المنظمة التي تجدها على صفحة الويب الخاصة بك، وتقوم بتضمينها في نتائج البحث، حيث يكون ذلك تلقائيا بمجرد هيكلتك للبيانات. ولكن كيف يتم هيكلة البيانات؟ واحدة من الصيغ التي يتم بها كتابة هاته الهياكل هي الصيغة JSON-LD (اختصارا لـ Json For Linked Data أو جيسون للبيانات المربوطة)، تكون كالتالي: { "@context": "https://schema.org/", "@type": "Recipe", "name": "وصفة كعكة قهوة", "author": { "@type": "Person", "name": "اسم شخص ما" }, "datePublished": "2018-03-10", "description": "هاته الكعكة رائعة،يعبر هذا عن وصف سيظهر في قسم الوصف لأي محرك يقوم بقراءة هاته الهيكلة", "prepTime": "PT20M" } يتم تعريف هاته الخواص في قسم head من الصفحة بين وسمي فتح وإغلاق script: <html> <head> <title>وصفة كعكة قهوة</title> <script type="application/ld+json"> { "@context": "https://schema.org/", "@type": "Recipe", "name": "وصفة كعكة قهوة", "author": { "@type": "Person", "name": "اسم شخص ما" }, "datePublished": "2018-03-10", "description": "هاته الكعكة رائعة،يعبر هذا عن وصف سيظهر في قسم الوصف لأي محرك يقوم بقراءة هاته الهيكلة", "prepTime": "PT20M" } </script> </head> يمكنك التعرف على كامل الخواص في الموقع الرسمي لـ Schema.org. أين يمكنك هيكلة بيانات صفحتك وفق الخواص المتوفرة، يتوفر من بينها خاصية النجوم أو غلاف فيديو للصفحة أو غيرها. يمكن هيكلة البيانات أيضا وفق صيغ microdata مثل الصيغة التي تتبعها أكاديمية حسوب أو صيغ RDFa. وبما أن Google تقوم بإستخدام هاته البيانات المهيكلة في تحسين عملية الفهرسة والبحث، فإنها تقوم بعرضها وفق أنساق معينة. تعرف أكثر عن البيانات الوصفية (microdata) في HTML5 (تتفرع عن هاته المقالة سلسلة مقالات تخص نفس الموضوع من مثل كيف توصيف وهيكلة الأشخاص والمنظمات عن طريق microdata، توصيف وهيكلة الأحداث والمراجعات ..الخ).