Add CSS and Javascript in Plugin

Hello,

I am trying to add bootstrap to a Payment Plugin that I am developing and I do not know why it's not including the files in the PaymentInfo.cshtml file...

Code:

@model Nop.Plugin.Payments.PluginName.Domain.PluginModel

@{
    Layout = "";

    Html.AddScriptParts("~/Plugins/Payments.PluginName/Scripts/bootstrap.min.js");
    Html.AddCssFileParts("~/Plugins/Payments.PluginName/Content/bootstrap.min.css");
}
@using Nop.Web.Framework.UI

Tried this as well:

@model Nop.Plugin.Payments.PluginName.Domain.PluginModel

@{
    Layout = "";

    Html.AddScriptParts(ResourceLocation.Foot,"~/Plugins/Payments.PluginName/Scripts/bootstrap.min.js", true);
    Html.AddCssFileParts(ResourceLocation.Head, "~/Plugins/Payments.PluginName/Content/bootstrap.min.css");
}
@using Nop.Web.Framework.UI

Am I doing something wrong here ?

Thanks

legollas007 wrote:

Hi.
... try like this
Html.AppendCssFileParts("~/Plugins/Widgets.Ccalc/Content/css/custom.css");
....
Best Regards.

Thanks for your answer but that did not worked as well :(

I have a feeling that is something with this specific payment view. "PaymentoInfo.cshtml"

Does anyone tried before adding scripts to this view?

Thanks

legollas007 wrote:

If the error is 404 then it may happen that you did not make the file copy always/copy if newer. I do not check for the plugin you mentioned but I faced similar problem for my own plugin and by doing this change I fixed my issue.

I do not get any error.

The scripts are just not included in the html page.

I have setup both javascript and css bootstrap files to copy always.

legollas007 wrote:
If you make other changes to the view do you see them in the generated html?

You could try debugging the AddScriptParts and AddCssFileParts methods (Nop.Web.Framework\UI\LayoutExtensions).

Thanks for your suggestion.

I have done that and I can see that its adding the script to the _scriptParts and _cssParts dictionaries which is actually empty in the time I add the script?!?.

I think the problem is that I am calling this function when the page is already loaded.


I have tried to add the exact same scripts in the "OnePageCheckout.cshtml" page and it works perfect.


Why can't I add this scripts when the use is selecting the Payment method?

Thanks for all your help

I have been trying to debug and solve this problem but until now I was not able to solve it.




The code calls this functions and it's adding the file references to the _scriptsParts and _cssParts variables.

But at that moment those variables do not have any more scripts.

Also it never calls the GenerateCssFiles function which I think is the function that adds the scripts to the bundle because this is only called after the page (OnePageCheckout.cshtml) is loaded.

Am I right in this assumptions ? How can I add scripts dynamically to the PaymentInfo.cshtml page ?

Thanks

Knowing how to do this would be really useful to start doing proper Nop Commerce plugin development.

If a member of the team can answer this question It would be great.


Thanks

legollas007 wrote:
You mentioned that you are using the one page checkout, try switching it off and see if it loads the CSS on the paymentinfo page. I think the one page checkout loads the individual steps via AJAX so there's no page reload and it's too late to add new CSS files.

If that's the case you could implement the IWidgetPlugin interface on your plugin and load the extra CSS and JS from a view rendered in on the the one page checkout widget zones (like opc_content_before). You can still use the AddScriptParts and AddCssFileParts helpers to add the references to the document head if you do it that way. The GoogleAnalytics and Nivoslider plugins that ship with nop both contain sample implementations of IWidgetPlugin if you're not already familiar with it.