[شــرح] عداد التفاعل في لوحة الزوار

[WIKIBA]

الكود هو عبارة عن قالب (Template) مخصص في XenForo يعرض "بطاقة الزائر" (Visitor Card)
في الشريط الجانبي، وهي عبارة عن واجهة تظهر معلومات مختصرة عن العضو الحالي (المتصل).​

<xf:css src="visitor_card.less" />


<xf:if is="$xf.visitor.user_id">

<div class="block">

<div class="block-container">

<div class="visitor-card">

<div class="visitor-card-main">

<div class="visitor-card-content">

<div class="visitor-card-img">

<xf:avatar user="{$xf.visitor}" size="s" href="" notooltip="true" update="{{ link('account/avatar', $xf.visitor) }}" />

</div>

<h3 class="contentRow-header"><xf:username user="$xf.visitor" rich="true" notooltip="true" /></h3>

<div class="contentRow-lesser">

<xf:usertitle user="$xf.visitor" />

</div>

</div>

</div>

<div class="visitor-card-icons">


<div class="reaction-stats">

<div class="reaction-stat">

<i class="fad fa-thumbs-up" data-xf-init="tooltip" title="{{ phrase('reaction_score') }}"></i>

<div class="reaction-stat-count">

<a href="{{ link('account/reactions') }}" class="fauxBlockLink-linkRow u-concealed">

{$xf.visitor.reaction_score|number}

</a>

</div>

</div>

</div>

<div class="reaction-stats">

<div class="reaction-stat">

<i class="fad fa-trophy" data-xf-init="tooltip" data-original-title="trophy" aria-label="trophy" id="js-XFUniqueId38"></i>

<div class="reaction-stat-count">

<a href="{{ link('members/trophies', $xf.visitor) }}" data-xf-click="overlay" class="fauxBlockLink-linkRow u-concealed">

{$xf.visitor.trophy_points|number}

</a>

</div>

</div>

</div>

<div class="reaction-stats">

<div class="reaction-stat">

<i class="fad fa-comment-alt-lines" data-xf-init="tooltip" data-original-title="comment" aria-label="comment" id="js-XFUniqueId38"></i>

<div class="reaction-stat-count">

<a href="{{ link('search/member', null, {'user_id': $xf.visitor.user_id}) }}" class="fauxBlockLink-linkRow u-concealed">

{$xf.visitor.message_count|number}

</a>

</div>

</div>

</div>

<xf:if is="is_addon_active('DBTech/Credits')">

<div class="reaction-stats">

<div class="reaction-stat">

<i class="{$xf.options.xentr_dbtech_credits_icon}" data-xf-init="tooltip" title="{{ phrase('dbtech_credits_credits') }}"></i>

<div class="reaction-stat-count">

<xf:include template="dbtech_credits_postbit" />

</div>

</div>

</div>

</xf:if>

</div>

<xf:include template="xentr_sidebar_user_reaction" />

</div>

</div>

</div>

</xf:if>

<xf:set var="$visitorReactions" value="{{ $xf.app.em.getRepository('XF:Reaction').getUserReactionsTabSummary($xf.visitor) }}" />

<xf:css src="xentr_sidebar_user_reaction.less" />

<xf:css src="carousel.less" />

<xf:css src="lightslider.less" />


<xf:js prod="xf/carousel-compiled.js" dev="vendor/lightslider/lightslider.min.js, xf/carousel.js" />


<div class="visitor-card-icons">

<div class="reaction-stats">

<div class="reaction-stat reaction reaction--medium reaction--1" id="reaction-1">

<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" class="reaction-sprite js-reaction" data-xf-init="tooltip" title="Вподобайка">

<div class="reaction-stat-count">

<a href="#" class="fauxBlockLink-linkRow " data-reaction-id="1">

{{ $xf.visitor.reaction_score.reaction_id.1|number|parens }}

</a>

</div>

</div>

</div>

<div class="reaction-stats">

<div class="reaction-stat reaction reaction--medium reaction--2">

<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" class="reaction-sprite js-reaction" data-xf-init="tooltip" title="Pass"></i>

<div class="reaction-stat-count">

<a href="#" class="fauxBlockLink-linkRow">

{$total|number|parens}

</a>

</div>

</div>

</div>

</div>

 

[النوميدي]

هلا بالطيب..،
قمت بالتعديل على الكود الذي طرحت مع أضافة كود CSS و كانت النتيجة هكذا

​

 

[Qulun]

أحسنت وبارك الله فيك​

 

[REushAiR]

بارك الله فيك و نفع بك​

 

[Riyadh]

مشكور
جزاكم الله خيراً​

 

[Alotaibi]

بارك الله فيك

شكرا لك على المشاركة​