Widgets Css JavaScript and other resources

Hi All,

Have been developing a new Widget for 2.2 / 2.3, have solved most problems using posts in these forums but am struggling with one final step.

I have a JS file, CSS file and some images (referenced from the CSS).
I considered including the JS and CSS inline in the public view, but not entirly sure this is good practice.

Is there a way to get them included in the Head Section directly from the Widget, i.e. the_Root.cshtml page?
Is there another "right" way to include and reference these in the widget project?

I have seen the two references in _root.cshtml, but cant figure out if these are the right things to be looking at, and if so how I would use them!
@Html.NopScripts()
@Html.NopCssFiles()


Thanks for any advice.


Paul.

Sure, it's possible. Please have a look at the following plugin Nop.Plugin.ExternalAuth.OpenId. It has an example of how to add custom CSS and JS

Hi,

Thanks for the quick response.
I added the lines to my View, Html.AddCssFileParts(@Url.Content(".....") and the same for the JS file.

Didnt work, so had a look at the OpenId one in more detail.

There seems to be one difference in the way they run, but cant find out why.

OpenId plugin seems to call the Html.AddCSSFileParts in the plugin view  before the _root.cshtml file calls @Html.NopCssFiles(), thats makes perfect sensse.

With my Widget it does it round the other way! its doesnt call the Html.AddCSSFileParts until after the @Html.NopCssFiles() call, as such nothing to write.

I did add my widget to a new WidgetZone that in created in the _root view

I must be missing something somewhere, or not understanding something.


Thanks again.

There's an issue with widgets and adding a custom CSS or JS https://www.nopcommerce.com/boards/t/14306/javascript-and-css-files-issue-when-including-from-a-widget.aspx

Thanks so much for helping out with this.

Now I know where I am I can work around it for now.

Thanks for the above discussion. I have one question. I need to set a div's  background image from the css file. The image is on Content/images folder. But background: url("images/img.png") is not working. Event I wrote :background: url("Plugins/Plugin_Name/Content/images/img.png") , still not working .What is the correct image path? Can anyone help?

Have you set 'Built action' of your .png file to 'Content' (so it's copied to a plugin directory when build)? Try opening the appropriate location and your file manager (for example, windows explorer) and ensure that the file exist

Yes the build action was set to Content but "Copy to output directory" was set to do not copy.I have changed it to 'copy if newer'. Thanks a lot. The problem has solved:-)

Hi, I want to copy my views in plugin output directory. I have changed them from 'embeded resource' to 'content' and set them to 'copy always'. in the action mothod of my controlller the view is returning with this path:

 return View("Nop.Plugin.PluginName.Views.ControllerName.Index", model);

But this is not working. I think the path is wrong. Can anyone suggest anything? Please help.