در این مقاله می‌خواهیم راه های ممکن برای اصلاح و تغییر، در قالب خود را بررسی کنیم. در این بررسی به مزایا و معایب هر روش خواهیم پرداخت.

روش هد سفارشی (custom head styles)

هر قالبی دارای تنظیماتی است که در بخش مدیریت در منوی پلاگین ها امکان دسترسی به آن موجود است. (شکل 1)

شکل ۱

شکل 1- تنظیمات قالب

یکی از این تنظیمات روش هد سفارشی (custom head styles) می باشد.

هدف اصلی این تنظیمات که به راحتی قابل دسترسی هستند این است که، بتوانید کدهای css خود را به سادگی در مرورگر بنویسید و نیازی به فایل ها، ویرایشگر ها و ... نداشته باشید. همه ی کدهایی که در این بخش نوشته می شود(شکل 2) در آخرین مرحله اعمال می شود و درنتیجه همه کدهایی را که در فایل ها نوشته شده اند، نادیده می گیرد( البته کدهایی که انتخابگر یکسانی دارند). این کدهای css ای در دیتابیس ذخیره می شوند و هیچ نگرانی بابت حذف آنها بعد از ارتقا نخواهید داشت.

شکل ۲

شکل 2- custom head style

گزینه های دیگر

شاید شما بخواهید کدهای css خود را در فایل های جداگانه بنویسید و یا برای نوشتن این کدها از ویرایشگرهای مورد علاقه خود مثل ویژوال استدیو، دریم ویور و... استفاده کنید در این صورت باید چه کاری انجام داد:

به مسیر /Themes/{YourTheme}/Content/css بروید و یک فایل با پسوند css. ایجاد کنید. به عنوان مثال، می توانید نام آن را «custom-user-styles.css» قرار دهید.

تذکر: نام قالب خود را با {YourTheme} عوض کنید

حال فایل /Themes/Playground/Views/Shared/Head.cshtml باز کنید و درون آن کد-1 را الصاق کنید:

;("Html.AppendCssFileParts("~/Themes/{YourTheme}/Content/CSS/custom-user-styles.cssکد-1

در نتیجه شما فایل خودتان را دارید، که می‌توانید آن را در ویرایشگر موردنظرتان ویرایش کنید. اما نوشتن در فایل دیگر چه مزیتی نسبت به نوشتن کد به صورت مستقیم در فایل قالب دارد:

دلیل اصلی آن را می توان امکان ارتقا و بهبود بخشی در آینده دانست. ما روزانه کدهای خود را توسعه می دهیم، بنابراین وقتی شما آخرین نسخه محصول را دانلود می کنید فایل های css شما تاریخ گذشته می‌شوند و هر تغییری که ایجاد کرده اید، از دست می‌رود.

داشتن فایل های جدا این اطمینان را می دهد، که همه ی تغییرات شما باقی خواهند ماند. تنها کاری که شما باید انجام دهید، این است که به فایل های خود در ویو مدنظر ارجاع دهید که روش انجام در قسمت قبل با استفاده از کد-1 شرح داده شد.

ایجاد تنوع در قالب ها

اگر درصدد آن هستید که شکل دیگری از قالب خود ایجاد کنید و در صورت نیاز بین آن ها جابه‌جا شوید پس بخش بعدی را مطالعه فرمایید.

هر قالبی یک پوشه در پوشه /Themes دارد. راحت ترین راه ممکن ایجاد قالب جدید این است که، یک کپی از قالب موجود بگیرید و فقط نام آن را عوض کنید. اما باید نام کدام فایل ها را عوض کنیم؟ بیاید به عنوان مثال قالب default را انتخاب کنیم و آن را در همان پوشه کپی و الصاق کنیم که باعث می شود پوشه با نام default-copy ایجاد خواهد شد. فرض کنیم قالبی که می‌خواهیم ایجاد کنیم در زمینه فوتبال باشد پس نام قالب جدید خود را با نام «football» جایگزین کنید. حال این پوشه را باز کنید و در داخل آن به دنبال فایل theme.config باشید که محتوای آن شبیه به کد-2 می‌باشد:

 کد-2

<? "xml version="1.0" encoding="utf-8 ?>

"Theme title="Default>

"supportRTL="true

"mobileTheme="false

"previewImageUrl="~/Themes/ Default /preview.jpg

<".previewText="This is the 'Default' theme from www.nop-templates.com

<Theme/>

حال در هر جایی از این فایل که default نوشته شده است آن را با football عوض کنید.

سپس، در همان پوشه، فایل views > shared > Head.cshtml را باز کنید. در داخل این فایل می توانید ببینید که در کدهای css به نام default وابستگی وجود دارد و از این نام استفاده شده است. دوباره مثل قسمت قبل تمامی این نام ها را با football عوض کنید، در نهایت فایل را ذخیره کنید و آن را ببندید. حال ما یک قالب کاملا جدید داریم که می توانیم ویو ها، استایل ها، jquery و ... آن را مطابق با نیاز خود تغییر دهیم. علاوه بر این می‌توانیم برای این که پلاگین های خود را نیز همانند قالب جدید خود همانند کنیم باید به پلاگین موردنظر رفته و در پوشه پلاگین کارهایی که انجام دادیم را دوباره تکرار کنیم.

توجه: در صورتی که برای پلاگین ها این کارها را انجام ندهیم، به صورت پیش فرض پلاگین از ویوها، استایل ها و... مربوط به default استفاده خواهد کرد.

مواردی که باید به یاد داشته باشیم

آیا می‌توانیم از بخش مدیریت قالب خود را پیکربندی کنیم؟

متاسفانه، خیر. دلیل اصلی این جواب به خاطر این است که، تنظیمات که در مدیریت ناپ‌کامرس وجود دارد بین تمامی قالب ها مشترک و یکسان است. این بدین معنی است که، اگر مثلا ما تغییری در اندازه تصویر در بخش مدیریت انجام دهیم، این تغییر در تمامی قالب ها اثر خواهد گذاشت. به همین دلیل می توان گفت که داشتن چندین قالب در یک فروشگاه و یا فعال کردن گزینه تغییر قالب فروشگاه بوسیله مشتری کار خوبی نیست.

همچنین موارد بالا در مورد پلاگین ها نیز صحیح است یعنی تغییری که در مدیریت برای یک پلاگین ایجاد می شود بر روی تمامی قالب های موجود اثرگذار است به عنوان مثال در شکل 3 وقتی در پلاگین گزینه «Follow Us Pinterest Url» را فعال کنیم این تغییر علاوه براین که در قالب default اثر می گذارد در قالب جدیدمان football هم اثرگذار خواهد بود.

شکل ۳

شکل 3- اثرگذاری پلاگین

منبع: مستندات ناپ کامرس