روش افزودن فایل های CSS و JS به View پلاگین های ناپ کامرس

روش افزودن فایلهای CSS و JS به View پلاگین های ناپ کامرس چیست ؟

اگر شما توسعه دهنده ناپ کامرس هستید ، حتما با این مساله برخورد کرده اید که چگونه فایلهای CSS و JS را به فایلهای View ناپ کامرس اضافه کنید.

برای اکثر توسعه دهندگانی که برای اولین باری است که با ناپ کامرس کار می کنند، ساده ترین راه برای افزودن چنین فایلهایی ، افزودن ارجاعات مستقیم در فایلهای view پلاگین است ، اگر چه این روش اصلا توصیه نمی شود. اگر پلاگین ناپ کامرس شما به درستی کار نمی کند ، باید مطئن شوید که برای افزودن منابع از روش استاندارد استفاده می کنید.

اگر شما پیش از این می دانید که ناپ کامرس برای بهبود عملکردش فایلهای CSS و JS را بسته بندی (bundling) می کند. اگر شما از لینک مستقیم به فایلهای منابع استفاده می کنید ، آن شامیل فایلهای CSS و JS در طی بسته بندی نخواهد بود. علاوه بر این ممکن است مسائل دیگری نیز وجود داشته بیاید.

بنابراین اینجا مراحل ساده برای شما برای افزودن فایلهای منابع دلخواه خود در فایلهای view پلاگین ناپ کامرس شرح داده شده است.

قبل از شروع ، شما باید ساختار پوشه پلاگین را بخوبی سازماندهی کرده باشید. برای CSS می توانید از پوشه Content استفاده کنید ، براای قرار دادن فایلهای JS ممکن است از پوشه Script استفاده کرده باشید. در اینجا تصویری زیر یک پلاگین ناپ کامرس نمایش داده شده است.


تصویر پوشه پلاگین ناپ کامرس – نمایش نحوه سازماندهی فایلهای CSS و JS

فایلهای JS و CSS را به پوشه مناسب منتقل کنید. پیروی کردن از این ساختار پوشه اجباری نیست، اما اگر از ساختار استاندارد استفاده می کنید ، کار بر روی آن در آینده برای شما ساده تر خواهد بود و شما نیاز ندارید تا بخاطر بیاورید که آنها را در کجا ذخیره کرده اید.

حال برای بارگزاری صحیح فایلهای منابع ، نیاز دارید تا ارجاعات آنها را در فایلهای view پلاگین خود اضافه کنید.

شما می توانید از متدهای herlper Html.AddScriptParts() یا Html.AddCssFileParts() استفاده کنید.
•  متد Html.AddCssFileParts() دو پارمتر دارد که اولی اختیاری و دومی اجباری است.
•  متد Html.AddScriptParts() سه پارمتر دارد که اولی و سومی اختیاری و دومی اجباری است.
  
شما می توانید برای جزئیات بیشتر در مورد این متدها به بخش تعریف آنها در پروژه ناپ کامرس تان بروید.

اینجا محلی است که شما می توانید منابع خود را به فایلهای view پلاگین خود اضافه کنید.

@{
     //Loading CSS file
     Html.AddCssFileParts(ResourceLocation.Head, "~/Plugins/{PluginName}/Content/{CSSFileName.Css}");
 
     //Loading js file
     //Third parameter value indicating whether to exclude this script from bundling
     Html.AddScriptParts(ResourceLocation.Foot, "~/Plugins/{PluginName}/Scripts/{JSFileName.js}", true);
}

اگر شما می خواهید لینک منبع را به هدر اضافه کنید، می توانید از ResourceLocation.Head استفاده کنید و برای فوتر می توانید از ResourceLocation.Foot استفاده کنید. توجه کنید که شما باید نام پلاگین و فایل منبع را در بالا صحیح بدهید ، آنگاه آن درست کار خواهد کرد.