محمد عاطف17

وعليكم السلام ورحمة الله وبركاته.
هل الإستضافة Hosting خاصة بك أم بالعميل ؟
إذا كانت خاصة بك إذا يجب تسليمه الملفات ليقوم برفع موقعه بنفسه أو يعطيك هو بيانات الإستضافة الخاصة به وتقوم أنت برفع الملفات مع ربط الدومين الخاص به في الإستضافة.
أما إذا كانت الإستضافة خاصة بالعميل ولكنك قمت بربط الدومين الخاص بك فيمكنك تعديل الـDNS من لوحة التحكم cpanel أو لوحة التحكم الخاصة بالإستضافة وتقوم بكتابة بيانات ال DNS  الخاصة بالدومين الجديد في لوحة التحكم مثل إعدادات A Record و CNAME .
ويجب عليك مستقبلا الإتفاق مع العميل على كل شئ مسبقا مثل الإستضافة والدومين . و يمكنك فقط رفع المشروع على الإستضافة الخاصة بك لعرض المشروع على العميل وحتي يستطيع تجربته بنفسه حتي لا تقوم بتسليم الملفات قبل إرسال الأموال إليك . وبعد تجربة الموقع على الإستضافة الخاصة بك و التأكد من أن كل شئ يعمل يمكنك إستلام الأموال منه وتسليمه ملفات المشروع أو رفعه على الإستضافة الخاصة به.

يجب أولا أن يقوم مطور ال front-end  بتصميم وكتابة أكواد HTML وتنسيقات CSS ووضعها في الصفحة بالإضافة إلى ملفات Javascript إذا كان يوجد animation أو سلوك معين لل Breadcrumb.
وإذا كانت الروابط معقدة في ال Breadcrumbs  و تتطلب مسارا كبيرا أو عرضها بطريقة ديناميكية فهنا سيتوجب على مطور back-end أخذ الهيكل html من مطور  ال front-end وتضمين الروابط الخاصة بال Breadcrumb في كل صفحة والعمل على إظهارها بالطريقة الصحيحة.
 

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

وعليكم السلام ورحمة الله وبركاته.
المشكلة تكمن في السمة grid-rows-3 حيث هذه السمة تحوي الكود التالي :
.grid-rows-3 { grid-template-rows: repeat(3, minmax(0, 1fr)); } هذا الكود سينشئ شبكة بثلاثة صفوف تتوزع بالتساوي في الارتفاع ولهذا ستجد أن جميع الصفوف ستأخذ طول أكبر صف .
   لذلك يمكنك حذف تلك السمة grid-rows-3 وستجد أن عنصر سيأخذ الطول الخاص به . ولكن جميع العناصر في نفس الصف سيأخذون نفس الطول .

هل قمت بحفظ المقالة بعد إستبدال الكلمات بالروابط أم تم حفظها هكذا دون إستبدال ؟
إذا لم يتم حفظها بعد الإستبدال إذا يجب إستخدام الدالة replaceText بالإستبدال :
const replaceText = (text) => { const regex = /phoenix/gi; // البحث عن اسم المدونة const replaced_text = text.split(regex).join( `<a href="/" style="color: blue; font-weight: bold;">phoenix</a>` ); return replaced_text; }; return ( <div dangerouslySetInnerHTML={{ __html: replaceText(content) }} /> ); حيث content هو المتغير الذي يحتوي على المقالة .
أما إذا تم حفظها بعد الإستبدال ففقط يجب إستخدام  dangerouslySetInnerHTML وهي خاصية  لعرض النص كHTML المعدل :
return ( <div dangerouslySetInnerHTML={{ __html: =content }} /> );  

وعليكم السلام ورحمة الله وبركاته.
أولا يجب عليك إغلاق برنامج pgAdmin تماما وإغلاق رسالة الخطأ التي تظهر لك .
بعد ذلك يرجى حذف مجلد  pgAdmin  في المسار التالي :
C:\Users\%USERNAME%\AppData\Roaming مع إستبدال %USERNAME% بإسم المستخدم الخاص بك على ويندوز.
بعد ذلك قم بفتح برنامج pgAdmin كمسؤل run as adminstrator ويجب على ذلك أن يحل المشكلة إن شاء الله.

مرحبا عزيزى محمود .
الخطأ لديك في templates\store\product-details.html سطر رقم 85 و 86 حيث أنك تضع ال id الخاص بالعنصر input ك 
id="item-{{ item.sku }}" وهنا معظم ال item لها نفس ال sku فهنا ستجد أن العديد من العناصر لها نفس ال id ولذلك عند الضغط على label فإنه يبحث عن أول عنصر له ال id الخاص به ولذلك فإنه يختار العناصر في المقاس الإفتراضي . ولحل تلك المشكلة نقوم بتحديد متغير أخر له رمز فريد وهو {{ size.id }} وهو لن يتكرر مع ال item.sku لذلك يرجى تغير سطر 85 و 86 بالتالي :
<input type="radio" name="item" id="item-{{ size.id }}-{{ item.sku }}" value="{{ item.sku }}" class="item-option" {% if forloop.first %}checked{% endif %}> <label for="item-{{ size.id }}-{{ item.sku }}"> <img src="{{ item.image.url }}" alt="{{ item.color }}"> </label> ولقد أرسلت لك الملف بعد التعديل .
product-details.html

وعليكم السلام ورحمة الله وبركاته .
إذا ذهبت إلى صفحة product-details.html  و قمت بفتح ال console في المتصفح ستجد أخطاء ظهرت في ملف main.js وستجد خطأ يظهر في سطر 412 والكود الخاص بال swipper الذي يقوم بإنشاءه في سطر رقم 482 ولهذا يتوقف الكود عند سطر 412 ولا يستمر إلى 482 لهذا لا يعمل معك .
من المفترض تقسيم ملف main.js إلى عدة ملفات كل ملف خاص بصفحة معينة وملف يحوى جميع الأكواد المشتركة في جميع الصفحات .
حيث أنك تقوم بالبحث عن عناصر في الصفحة وتضع حدث عليها أو تقوم بتعديل التنسيق الخاص بها وإذا لم توجد تلك العناصر يحدث خطأ لديك ويمنع تنفيذ باقي الأكواد .
يمكنك قبل العمل على أي عنصر التحقق من وجوده أم لا إذا لم ترد فصل الكود إلى عدة ملفات .
وحاليا لحل مشكلتك يرجى نقل كود ال swipper في سطر 482 إلى ما قبل سطر 12 ويفضل نقل جميع ال swipper إلى دالة منفصلة و تنفيذها حتي لا تحدث مشاكل .
ولقد قمت بإرفاق ملف main.js بعد تعديله .
 
main.js

وعليكم السلام ورحمة الله وبركاته .
نعم بالفعل قديما يتم تخزين بيانات المستخدم في ال session كما كان يحدث في php ولكن لنشرح معا الفرق بين session وبين ال token .
تعتمد فكرة الـ Sessions على تخزين حالة المستخدم (User State) على السيرفر. عندما يقوم المستخدم بتسجيل الدخول أو زيارة الموقع لأول مرة يتم إنشاء Session له تلقائيا في السيرفر، ويتم تعيين مُعرف (ID) فريد لهذه الـ Session في الخادم ويتم حفظ ال id في المتصفح في ال session ويتم إرسال ال id مع كل طلب . هذا المُعرف يتم استخدامه للتعرف على المستخدم في كل طلب يرسله إلى السيرفر، وبذلك يكون السيرفر قادراً على معرفة هوية المستخدم والتأكد من صلاحيته.
على العكس تماما الـ Tokens هي عبارة عن عناصر صغيرة من المعلومات (مثل سلسلة نصية) يتم توليدها وتشفيرها من خلال السيرفر بعد عملية تسجيل الدخول بنجاح. يتم تضمين هذا الـ Token في كل طلب يقدمه المستخدم إلى السيرفر. السيرفر يقوم بفحص الـ Token للتحقق من هوية المستخدم وصلاحيته ويتأكد هل ال Token تم التلاعب به أم لا. الـ Token يحمل معلومات مثل هوية المستخدم وأي صلاحيات أو صلاحيات الوصول (Access Permissions) التي لديه.
المزايا الرئيسية للاستخدام الـ Token-based:
أمان : الـ Tokens يكون مشفرا لهذا من الصعب التلاعب به أو تزويره. قابلية التوزيع: يمكن توزيع الـ Tokens عبر عدة سيرفرات أو خدمات بسهولة دون الحاجة إلى مشاركة حالة الجلسة بينهم فمن الممكن أن يكون المشروع لديك على عدة سيرفرات أو خدمات لهذا ال Sessions لن تنفع. عديم الحالة (Stateless): الـ Tokens تسمح بإنشاء تطبيقات عديمة الحالة (Stateless Applications)، حيث لا يتم تخزين حالة المستخدم على السيرفر فمن الممكن أن يكون الطلب يتم إرساله من تطبيق هاتف أو حتي تطبيق سطح مكتب أو ويب. لذلك ال Token-based أفضل حاليا من حيث القدرة على توزيع المشروع على عدة سيرفرات و عدم الإعتماد على حالة سيرفر واحد وال session الخاص به.

نعم التحديث الجديد جيد هو لم يتم التغير كثيرا هو فقط تم تغير أماكن العناصر ولكن هذا الترتيب حيث يعطيك تفاصيل اليوم كاملة أولا وواضحه وهو ما يريده المستخدم وأصبح متجاوب أكثر للشاشات المختلفة .
ولكن توجد مشكلة في الحواسيب ستجد scroll bar في أسفل الصفحة لذلك أنصحك بوضع التنسيق التالي لحذفه :
body { overflow-x: hidden; } وأيضا جزء الطقس ل يوما ليس أفضل شئ في الهواتف والشاشات الصغيرة حيث النصوص تكون بجوار بعض متداخلة وصغيرة ويفضل تغير تصميمها وإليك الكود التالي :
.weather-slider { display: flex; flex-direction: column; } .weather-day { flex-direction: column; align-items: center; overflow: hidden; } .weather-day img { max-width: 25%; } ويمكنك وضعك الأكواد السابقة داخل media حتي يتم تطبيقها فقط على الشاشات الصغيرة لتصبح شكلها كالتالي :

ويمكنك تنسيقها كما تشاء .

وعليكم السلام ورحمة الله وبركاته .
أعتقد أن الخطأ هو في عملية ال chach حيث يقوم nextjs بعمل caching عند إستدعاء ال api بإستخدام fetch .
ولحل تلك المشكلة نضيف revalidate هكذا :
async function fetchProperties() { try { const res = await fetch(`${process.env.NEXT_PUBLIC_API_DOMAIN}/properties`,{ next: { revalidate: 10 } }) if (!res.ok) { throw new Error('Failed to fetch data') } return res.json() } catch (error) { console.log(error) } } وهكذا نقوم بجعل next بحذف ال chache بعد 10 ثواني .
ومن المفترض أن هذا يحل تلك المشكلة .

وعليكم السلام ورحمة الله وبركاته 
في نظام تشغيل Windows مع XAMPP، لا يمكنك تعيين صلاحيات الملفات بنفس الطريقة التي تفعلها في أنظمة Linux أو Unix. في Windows، الصلاحيات تتحكم بشكل أساسي من خلال خصائص الملفات والأذونات التي تسمح أو تمنع الوصول إلى الملفات و حيث تستخدم أنظمة Linux خصائص (attributes) مختلفة عن التي يستخدمها windows.
وإذا كنت ترغب في جعل ملف PHP يشابه الصلاحيات التي تجدها في بيئات الاستضافة المدفوعة (مثل 555)، يمكنك القيام بالتالي:
1-فتح خصائص الملف:
انقر بزر الماوس الأيمن على ملف PHP الذي ترغب في تعديل صلاحياته.
اختر properties "الخصائص" من القائمة المنسدلة.

2-تعديل الأذونات:
انتقل إلى علامة التبويب security "الأمان".
انقر على زر  Edit "تعديل" لتعديل الأذونات.

3-تعيين الأذونات:
سترى نافذة "الأذونات للملف"، حيث يمكنك تعيين الصلاحيات المناسبة. في حالة 555، يمكنك تحديد خيارات "قراءة" (Read) للجميع (Everyone) وعدم تحديد خيارات الكتابة (Write) أو التنفيذ (Execute).

بعد تعيين الصلاحيات المناسبة، انقر على "تطبيق" ثم "موافق".
هذه الخطوات ستسمح لك بتعيين الصلاحيات على ملف PHP بطريقة تقليدية في نظام Windows. يرجى ملاحظة أن XAMPP نفسه يعمل عادة باستخدام حساب مستخدم محلي لنظام Windows، وليس باستخدام حسابات مستخدم قابلة للتخصيص مثلما هو الحال في الخوادم التي تعتمد على Linux أو Unix، لذا تعديل الأذونات في XAMPP يختلف قليلاً عن التعامل معه في بيئات الخوادم.

إن أيقونة الإعدادات تشير إلى ملف يحتوى على إعدادات للمشروع .

وبما أنك لم تق بتعديل إسم الملف وهو يحتوى على نقطة إذا فيبدو أنك قد قمت بحذف الإضافة الخاصة ب vs code التى تسمى Material Icon Theme .
لذلك من فضلك تأكد هل الإضافة مثبته لديك ومفعلة أم لا .
ثم قم بالضغط على set file icon theme و قم بإختيار الإضافة Material Icon Theme من الاختيارات التى سوف تظهر لك .
.
وقم بإعادة تشغيل vs code ستجد أن الأيقونات قد عادت كما هى .

يوجد لديك عدة أخطاء .
اولا في ملف web.php فى السطر الذى تقزم بتحديده هذا السطر زائد ولا يجب كتابته حيث انك قمت بتعريف resource لل blog ولهذا فإن هذا السطر لا يجب كتابته .
اما الخطأ الذى يظهر لديك هو انه يستقبل en وليس ١ لانك قمت بكتابة prefix ووضعت local parameter لهذا يجب على الدالة show ان تستقبل معاملين الاول هو اللغه local والثانى هو id لذلك قم بإضافة معامل قبل ال id يسمى lang .

يمكنك إستخدام الكود التالى :
فى ملف ال html 
<p id="text-p">This is a paragraph Test Test Test.</p> هنا قمنا بإنشاء عنصر وقد أعطينا له id مخصص يساوى text-p .
والآن فى كود js 
let p = document.getElementById('text-p'); let text = p.innerText; const textShort = `${text.substr(0,7)} ...` p.innerText = textShort; هنا فى أول سطر قمنا بإحضار العنصر الذى يحوى النص , ثم بعد ذلك إستخرجنا النص عن طريق الخاصية innerText .
والآن أنشئنا متغير جديد يحوى النص المختصر وأعطينا قيمته `${text.substr(0,7)} ...`  حيث هنا إستخدمنا الدالة substr وهى تقوم بأخذ جزء معين من النص وقمنا بتحديد 0 و 7 أى أننا نريد أن نأخذ من النص من أول حرف إلى الحرف رقم 7 مع إحتساب المسافات من ضمن النص ومن ثم وضع ثلاثة نقاط بعد النص أو أى شئ تريده .
لذلك إذا أردت عدد أحرف معين قم فقط بتغير رقم 7 إلى الرقم الذى تريده .
وأخيرنا قمنا بإسناد تلك القيمة إلى الخاصية innerText وبذلك سيتم إستبدال النص الحالى بالنص الجديد الذى هو جزء من النص الأساسي

اذا كنت تريد انشاء واحد او اكثر من عداد واحد فيجب استبدال ال id بال class حتى نستطيع التعامل مع جميع العدادات.
ووضع وقت العداد الذى يتم اعادته من قاعدة البيانات فى العنصر عن طريق خاصية ال data .
الان هذا كود show.blade.php
<tbody> @foreach ($homeworks as $homework) <tr> <td>{{ $homework->id }}</td> <td>{{ $homework->title }}</td> <td> <div class="counter wow animate__animated animate__fadeInDown"> <div class="defaultCountdown" data-date="{{$homework->deadline}}"> </div> </div> </td> </tr> @endforeach </tbody> فى الكود السابق قمنا خاصية data-date للعنصر وهى الآن تحتوى على ال deadline الذى يأتى من قاعدة البيانات .
والآن هذا هو كود الجافاسكريبت .
<script src="assest/JavaScript/jquery-3.1.1.min.js"></script> <script src="assest/bootstrap/js/bootstrap.min.js"></script> <script src="assest/jquery.countdown/js/jquery.plugin.min.js"></script> <script src="assest/jquery.countdown/js/jquery.countdown.min.js"></script> <script src="assest/jquery.countdown/js/jquery.countdown-ar.js"></script> <script> $(function () { $('.defaultCountdown').each(function (i) { const time = new Date($(this).data('date')); $(this).countdown({ until: time, format: 'odHMS' }); }) }); </script> هنا قمنا بعمل حلقة تكرار على العناصر التى تحتوى على السمة defaultCountdown ثم انشاء التاريخ عن طريق استرجاع القيمة من خاصية ال data-date و من ثم إنشاء العداد .
والآن سيتم انشاء اى عدد من العدادات على حسب ما يتم استرجاعه من قاعدة البيانات 

اعتقد ان المشكلة لديكى فى جزء الحفظ فى قاعدة البيانات فلقد قمتى بالخطأ فى ترتيب ادخال البيانات .
cur.execute("INSERT INTO products (ProductName, ExpiryDate, Ingredient) VALUES (%s, %s, %s)", (product_name, ingredient, date_value)) لاحظى انكى يجب ادخال اسم المنتج ثم تاريخ الانتهاء ثم المكونات . ولكنى قد قمتى بالتبديل بين التاريخ والمكونات.
لذلك استبدلى السطر لديكى بهذا السطر .
cur.execute("INSERT INTO products (ProductName, ExpiryDate, Ingredient) VALUES (%s, %s, %s)", (product_name,date_value ,ingredient)) واذا لم يحل المشكلة فاعقتد ان المشكلة لديكى فى قاعدة البيانات وللتاكد اكثر يجب ارسال رسالة الخطأ التى تظهر فى منفذ الاوامر لديكى 

نعم توجد عدة طرق لحل تلك المشكلة و يجب حلها حتى تساعد فى جعل موقعك اسرع و يكون متوافق مع محركات البحث SEO .
يمكنك حل تلك المشكلة عن طريق عدم تحميل ال options فى بداية الصفحة ولكن عند الضغط على select نقوم بارسال طلب AJAX للسيرفر نقوم منه بجلب بيانات ال options عن طريق الجافا سكريب وبعد تحميل الطلب نقوم بانشاء تلك ال options وهذا كود مثال للحل .
<!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script> </head> <body> <select id="select_id"> <option selected>Select</option> </select> <script> $(document).ready(function () { $("#select_id").one('click', function () { $.ajax({ url: "https://jsonplaceholder.typicode.com/users", type: 'GET', success: function (response) { var select = $('#select_id'); $.each(response, function (key, data) { select.append('<option value=' + data.id + '>' + data.email + '</option>'); }); } }); }) }); </script> </body> </html> هنا قمنا باستخدام مكتبة jquery لارسال الطلبات و انشاء ال options بعد رجوع الطلب .
اولا يجب عليك انشاء عنوان لارجاع البيانات الخاصة بال select على السيرفر .
واستخدام الكود السابق فى الواجهة الامامية مع استبدال العنوان الذى يتم ارسال الطلب له بالعنوان لديك وايضا طريقة انشاء ال option قم فقط باستبدال البيانات التى تريد وضعها والان عند الضغط على عنصر select سيتم ارسال الطلب وانشاء ال options تلقائيا.
 
او يمكنك استخدام مكتبة select2 وهى جيدة لمثل هذه الحالات وتوجد بها خصائص جيدة مثل البحث و ايضا اظهار علامة التحميل بينما يتم ارسال الطلب للسيرفر.

هذا ليس المكان الخاص بال php.ini 
من فضلك قم بالذهاب للمسار التالى 
C:\Users\{user}\.config\herd\bin مع استبدال {user} باسم المستخدم لديك على الجهاز.

ثم اذهب الى المجلد php على حسب الاصدار لديك . او فقط قم بتنفيذ هذا الامر وسيشير الى مكان ملف ال php.ini
php --ini
 
ثم قم بفتح php.ini وابحث عن variables_order وقم بتغيرها الى GPCS هكذا .
variables_order = "GPCS" وذلك سيحل المشكلة ان شاء الله

وعليكم السلام ورحمة الله وبركاته .
ان لغه php واطار عمل لارافيل هو فى الاساس لبناء تطبيقات الويب ولكن توجد مكتبات لتحويل تطبيق الويب هذا الى desktop application ولكنه فى الاساس يعتبر تطبيق ويب .
وهو شئ ليس سيئا ولكنه يعتمد على ما تريده انت فافضل لغه لبرمجة ال desktop application هى C# ASP.NET .
ويمكنك سؤال المبرمج هل سيقوم بانشاء تطبيق ويب وتشغيله لديك على متصفح ؟ ام سيقوم بتحويل التطبيق الى ملف يمكن تثبيته ليعمل لديك على الجهاز .
واذا كان التطبيق ستستعمله على جهاز واحد فالافضل هو تطبيق الويب من وجهة نظرى .

الخطأ لديك فى هذا الملف  src\hook\cart\add-to-cart-hook.js فى مشروع الواجهة الامامية . فى سطر رقم 25 .
if (item.availableColors.length >= 1) هنا انت تقوم بالتحقق من طول ال availableColors و هى ليست موجودة فى المتغير item لذلك يحدت الخطأ حيث لا يمكن استدعاء الخاصية length على undifined .
والحل هو التحقق اولا من وجود ال availableColors هكذا .
if (item.availableColors?.length >= 1) حيث ان علامة ال ? تتحقق اولا من ان القيمة ليست null او undefined قبل تنفيذ ما بعدها وهكذا تكون قد حلت المشكلة .
و قد لاحظت ان معظم الاخطاء من هذا النوع حيث لا يقوم السيرفر الخلفى بارجاع البيانات التى تستخدمها فى الواجهة الامامية لذلك يجب عليك اولا التحقق من البيانات التى تعود لك من السيرفر قبل العمل عليها.

الامر بسيط ويوجد عدة طرق ولكن الافضل هو .
اولا انشاء متغير يحمل المنشورات التى تم تحميلها الى الان حيث لا نريد فى كل مرة يصل المستخدم الى اخر الصفحة وناتى بالمنشروات من جديد , ونعطى قيمة افتراضية لهذا المتغير بمصفوفة فارغة .
public $postCotainer = []; وايضا نقوم بانشاء متغيرين اخرين احدهما يحمل القيمة الافتراضية لعدد المنشورات التى سيتم تحميلها فى بداية الصفحة او حتى عند التمرير لاسفل الصفحة . والاخر يحمل عدد المنشورات الذى تم عرضها الى الان .
public $take = 5; public $skip = 0; والان نقوم بانشاء استماع الى حدث التمرير جديد وفى الدالة نقوم بزيادة عدد المنشورات التى عرضها .
protected $listeners = ['scrollPosts'=>'getMorePosts']; public function getMorePosts() { $this->skip += $this->take; } هكذا كل مرة يتم التمرير لاسفل الصفحة نقوم بزيادة العدد الذى تم عرضه .
والان فى الدالة getPostsProperty نضع هذا الكود.
public function getPostsProperty() { $ids = auth()->user()->following()->wherePivot('confirmed', true)->get()->pluck('id'); $this->postCotainer = array_merge($this->postCotainer,Post::whereIn('user_id', $ids)->latest()->skip($this->skip)->take($this->take)->get()->all()); return $this->postCotainer; } لاحظ هنا اننا اولا استخدمنا دالة array_merge وذلك لدمج المنشورات التى تم تحميلها سابقا الى المنشورات الجديدة الذى سوف يتم تحميلها .
ولاحظ اننا فى الاستعلام الخاص بال sql اضفنا داليتن الاولى هى skip اى اننا لا نريد ان ناتى بعدد معين بالمنشورات وهى المنشورات التى تم تحميلها بالفعل ولذلك نمرر لها المتغير skip الذى يحمل عدد المنشروات الذى تم تحميلها الى الان. 
والدالة take التى تسمح لنا باحضار عدد معين فقط من المنشورات ولذلك ارسلنا لها المتغير take الذى يحمل عدد المنشورات التى نريد عرضها .
وبهذا نكون قد انتهينا من الكود الخلفى . ولكن ستجد مشكلة سوف تحدث فى الحدث الذى لديك toggleFollow فمثلا اذا قام المستخدم بالغاء متابعه او متابعه مستخدم جديد فان منشوراته التى تم تحميلها سابقا نريد ان نحذفها او عرضها . لذلك سنجعل عند استماع الى الحدث toggleFollow هو حذف جميع المنشورات التى تم تحميلها سابقا واعادة التحميل من جديد حتى لا تحدث تلك المشكلة.وهذا هو كود المكون كاملا بعد التعديل.
<?php namespace App\Livewire; use Livewire\Component; use App\Models\Post; class PostsList extends Component { protected $listeners = ['toggleFollow' => 'resetPosts','scrollPosts'=>'getMorePosts']; public $take = 5; public $skip = 0; public $postCotainer = []; public function resetPosts() { $this->postCotainer = []; $this->take = 5; $this->skip = 0; } public function getPostsProperty() { $ids = auth()->user()->following()->wherePivot('confirmed', true)->get()->pluck('id'); $this->postCotainer = array_merge($this->postCotainer,Post::whereIn('user_id', $ids)->latest()->skip($this->skip)->take($this->take)->get()->all()); return $this->postCotainer; } public function getMorePosts() { $this->skip += $this->take; } public function render() { return view('livewire.posts-list'); } } اما فى الواجهة الامامية فسوف نضيف استماع الى حدث التمرير و التحقق من ان المستخدم قد قام بالتمرير الى اخر الصفحة . واذا كان قام بالتمرير الى اخر الصفحة نقوم بارسال الحدث scrollPosts الذى سوف يقوم باحضار المزيد من المنشورات وبذلك كلما قام بالتمرير ياتى بالمنشورات الجديد .
<div class="w-[30rem] mx-auto lg:w-[95rem]"> @forelse($this->posts as $post) <livewire:post :post="$post" :wire:key="'post_'.$post->id" /> @empty <div class="max-w-2xl gap-8 mx-auto dark:text-gray-100"> {{ __('Start Following Your Friends and Enjoy.') }} </div> @endforelse </div> @script <script> window.onscroll = function(ev) { if ((window.innerHeight + Math.round(window.scrollY)) >= document.body.offsetHeight) { $wire.dispatch('scrollPosts'); } }; </script> @endscript وهكذا قد انتهينا من جميع الاكود ويمكنك استعمالها وستعمل معك . ويمكنك تغير القيمة الافتراضية للمتغير take على حسب عدد المنشورات التى تريدها حيث انا اعطيته قيمة ابتدائية ب 5

كما توقعت . بالفعل هذه مشكلة فى jqeury حيث ان jquery فى اول مرة يتم استدعاء الدالة data للعنصر فانه يقوم بحفظها لديه و اذا تم التعديل عليها فان jquery لا يشعر بهذا التعديل اذا كان تم التعديل عليها بدونه . لذلك فانه عندما يقوم livewire باعادة بناء العنصر فان jquery لا يلاحظ انه تم تغير ال data-image_url لذلك الحل هو ان تقوم باستبدال السطر لديك بهذا السطر.
$("#image_src").attr("src", $(this).attr('data-image_url'));  
او يمكنك اضافة هذا السطر فى بداية الدالة حيث يجعل jquery يقوم بحذف ال data التى قام بحفظها مسبقا . وبذلك يقوم بانشائها مجددا عن اول مرة اخرى يتم استخدامها.
$(document).on("click", ".show-image-modal", function () { $(this).removeData(); if ($(this).data('type_media') === "video") { $("#video_src").attr("src", $(this).data('video_url')); $("#image_src").hide(); $("#view_media_card_footer").show(); } else { $("#view_media_card_footer").hide(); $("#image_src").show(); $("#image_src").attr("src", $(this).data('image_url')); } $("#image_modal").modal("show"); });  

هلا اخى .
كما اخبرتك سابقا يمكنك تعديل اى صفحة كما تشاء فقط قم بتغير القاعدة الخاصة فى ملف htaccess . وقد قمت بتعديل الملف ليتناسب مع هذه الروابط.
.htaccess

وعليكم السلام ورحمة الله وبركاته .
بالفعل التحديث الجديد هذه الخاصية مزعجة بالفعل ويمكنك الغائها بطريقتين : 
اولا قم بالضغط بالزر الايمن للفأرة على الكود الذى يقسم الصفحة وقم بالغاء sticky scroll .
 ثانيا من قائمة view اختر appearance ثم قم بالغاء sticky scroll .