ساخت بلوک شمارنده محتوا
سلام ، دوستان عزیز مرکز دروپال ایران ، در این آموزش کوتاه و ساده میخواهیم یک بلوک ایجاد کنیم که تعداد محتوایی که داریم رو برامون بصورت شمارنده با اسکرول صفحه نشون بده.یعنی زمانی که به به بلوک رسیدم شروع کنه به شمارش تعداد محتوا.
خوب در ابتدا یک ویوز با نام views counter درست میکنیم که تعداد محتوای هر content type رو نشون بده. ابتدا Use aggregation رو فعال می کنیم. از بخش فیلد دوتا فیلد content : type و content : nid رو فعال میکنیم.
نکته : در فیلد type مقدار Aggregation type رو بر روی Group results together قرار می دهیم. در فیلد nid هم مقدار رو بر روی Count قرار میدیم.خوب تا اینجا تونستیم تعداد محتواهای مربوط به هر نوع محتوا رو نمایش بدیم.
مرحله بعد ایجاد شمارنده در بلوک مورد نظر هستش که برای کار از کد زیر استفاده میکنیم :
<head>
<script>
jQuery(document).ready(function($) {
$('.counter').counterUp({
delay: 10,
time: 1000
});
});
</script>
</head>
<body>
<span class="counter">1,234,567</span>
<script src="//cdnjs.cloudflare.com/ajax/libs/waypoints/2.0.3/waypoints.min.js"></script>
<script src="jquery.counterup.min.js"></script>
</body>
حالا باید کدها رو در سایت دروپالی خودمون فراخوانی کنیم .کدی که داخل تگ <script> نوشته شده رو باید در فایل html.tpl.php فراخوانی کنیم.
فایل htm.tpl.php از مسیرmodules\system کپی و در مسیر اصلی قالب قرار میدیم.همون طور که در بالا میبینیم کد داخل تگ <head> قرار داره پس ما هم کد رو در فایل html.tpl.php بعد از تگ <head > قرار می دهیم.
مرحله بعد قراردادن دوتا فایل jquery.counterup.min.js و waypoints.min.js در پوشه js هستش. (دانلود فایل) درآموزش های قبلی مرکز دروپال نحوه فراخوانی فایل js در دروپال گفته شده ، فقط کافیه کد زیر رو در فایل .info کپی کنیم.
scripts[] = 'js/waypoints.min.js'
scripts[] = 'js/jquery.counterup.min.js'
نکته : بعد از هر تغییر در فایل info باید کش رو خالی کنیم.
خوب به پایان رسیدیم ، تنها نیاز به اضافه کردن یک خط کد در views برای فیلد content : nid داریم. بر روی فیلد کلیک و تیک گزینه Rewrite the output of this field رو میزنیم و کد زیر رو در باکس پایین وارد میکنیم :
<span class="counter"> [nid]</span>
نکته : علت اضافه کردن کد بالا در فیلد به این دلیل هست که در کد جی کوئری که اضافه کردیم ، شمارش ها برای کلاس .counter داره اعمال میشه ، پس ما هم این کلاس رو به فیلدی که شمارنده رو نشون میده اضافه کنیم.
امیدوارم از این آموزش هم استفاده کنید.خوشحال میشم آموزش های بعدی رو به پیشنهاد شما دوستان عزیز در سایت قرار بدم.
راه های ارتباط با ما
آدرس : دفتر شهریار : شهرک وائین ، بعثت 5 نبش سپیدار 10 پلاک 26
تلفن : 09370977406
ایمیل : drupalcenter.ir@gmail.com
ارتباط با مدیر سایت از طریق تلگرام