شرح اضافة حقول خاصة بطريقة جميلة + الايقونات اللازمة

[inj3ct0rj0]

كيف حال الجميع عساكم انتم والاهل بألف خير وصحة يارب؟

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

هذا مثال:



الحين نبدأ على بركة الله:

اول شي نتوجه الى لوحة التحكم ثم المستخديم ثم اضافة حقول المستخدمين المخصصة
والحين نضيف حقل جديد



الخيارات مثل اللي بالصورة بالضبط تأكد من كتابة المعرف بشكل صحيح بدون احرف كبيرة ومكان عرض الحقل وتأكد انها قائمة منسدلة وتأكد من كتابة اسماء المتصفحات في الخانة الاولى بدون احرف كبيرة والخانة الثانية عادي اكتبها على راحتك احرف كبيرة وصغيرة ما تفرق وتأكد انك مش عامل check في خانة عرض بالمشاركة في معلومات المستخدم لأنه احنا نريدها تحت البانر للمستخدم

ثم بعد ذلك تضيف userOS ونفس الخيارات يا غالي.

الحين بعد ما انتهينا

نتوجه الى قالب message_macros ونبحث عن هذا الكود : ​

<div class="message-userDetails">
            <h4 class="message-name"><xf:username user="$user" rich="true" defaultname="{$fallbackName}" itemprop="{{ $includeMicrodata ? 'name' : '' }}" /></h4>
            <xf:usertitle user="$user" tag="h5" class="message-userTitle" banner="true" itemprop="{{ $includeMicrodata ? 'jobTitle' : '' }}" />
            <xf:if is="$xf.visitor.user_id">
                <xf:macro name="eut_macros::eut_user_title_view" arg-user="{$user}" />
            </xf:if>
            <xf:userbanners user="$user" tag="div" class="message-userBanner" itemprop="{{ $includeMicrodata ? 'jobTitle' : '' }}" />
        </div>

زين الان تحته مباشرة تضيف هذا الكود :

<div class="user_custom_fileds_container">
                            
                                <xf:if is="$user.Profile.custom_fields.getDefinitionSet().userbrowser">
                                    <div class="user_browsers" title="متصفح المستخدم" data-xf-init="tooltip">
                                        <img src="{$xf.options.boardUrl}/styles/shqawe-sh3ll/{$user.Profile.custom_fields.userbrowser}.png"
                                             alt="{$user.Profile.custom_fields.userbrowser}"/>
                                    </div>
                                </xf:if>
                            

                           
                                <xf:if is="$user.Profile.custom_fields.getDefinitionSet().userOS">
                                    <div class="user_browsers user_os" title="نظام المستخدم" data-xf-init="tooltip">
                                        <img src="{$xf.options.boardUrl}/styles/shqawe-sh3ll/{$user.Profile.custom_fields.userOS}.png"
                                             alt="{$user.Profile.custom_fields.userOS}"/>
                                    </div>
                                </xf:if>
                            
                        </div>

ركز معي الحين بالكود عشان اشرحلك اياه

بالبداية عندي container يجمع الايقونات في سطر واحد
ثم بعد ذلك انا استدعيت $user.Profile.custom_fields.getDefinitionSet().userbrowser وضفت اسم المعرف مثل ما هو اللي ضفته بالحقول المخصصة ومن بعدها سوينا كلاس بالاسم user_broswe وسوينا tooltip عشان لما أأِر على الايقونة يطلعلي الكلام اللي اريده ومن بعد ذلك ضفت مكان تواجد الايقونة المراد اضافتها للمتصفح وهي على شكل متغير وتأكد انك وضعت الرابط الصحيح يعني انا وضعت الصور في مجلد shqawe-sh3ll الموجود بداخل مجلد styles

ومن بعد ذلك تروح لل extra.less وتضيف هذا الكود ​

.user_custom_fileds_container{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
}
.user_browsers {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.user_browsers img{
    max-width: 20px;
}
@media (max-width: 480px )
{
    .user_custom_fileds_container{
        display: none;
    }
}

وانا بالcss اعتمدت على ان الايقونات كلها تكون ضمن كلاس user_broswers

ومُبارك عليك اضافة اي حقل تريده انت وهذا كان مثال ليس اكثر
وهذه الايقونات اللي تلزمكم بإذن الله

هذا الشرح كان برعاية الحبيب الغالي تركي الودعاني - شقاوي
تحياتي للجميع
وأتمنى من الجميع اللي يعرف بحاجة لا يبخل علينا بالشروحات لنرتقي بمنتدى اخونا شقاوي​

 

[أبوفاطمة]

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