I’ve made a little stock ticker tool that shows a company’s stock price, market share, price change, etc. I have a simple html snippet that displays the information, a CSS file to style it, and two js files to handle the stock market information. It also uses jquery. However, I’m having trouble impending it into grav. I’ve attempted to make it into a plugin, its own page and as a sidebar element for the blog. Nothing seems to work. Either the css doesn’t load, or the js doesn’t load, or both. Preferably I would like the html snippet to appear in the blog sidebar as a widget. What is the best way to implement this? I can’t seem to figure out how to add custom css/js. It never seems to load. I put the files in theme/css, it didn’t seem to see it. I also tried making it into its own plugin, but I didn’t know what to add into the php file. Also, the {% do assets.addCss(‘theme://css/custom.css’,100) %} doesn’t seem to be working for me. The html/css/js runs on its own just fine though. Can someone point me in the right direction?
Hi,
Make sure you also add {{ assets.css() }} where you want your code to be processed. Example:
{% do assets.add('theme://css/custom.css', 110) %}
{% do assets.add('theme://css/color.css', 109) %}
{{ assets.css() }}I’m sorry, I don’t quite understand. Where does {{ assets.css() }} go? At the end of the file? All of the js and css it called in the html, as per usual. Also, what do the numbers 110 and 109 signify? I’m still getting used to this new system.
One of the use cases you mention above is to include your widget in a page. I’ve had quite good experiences using the Grav assets plugin. This plugin allows the insertion of .css and .js files to be run in the page (markdown file) where they are called. Your HTML chunk can be pasted right into the .md page.
Note: you may have to have markdown extended enabled on the page in order to use raw HTML. This used to be the case – not sure anymore. I just keep markdown-extended enabled in system.yml and forget about it.
The ‘asset’ files are referenced at the top of the page (just under the yaml front-matter):
{assets:css order:5}myStylesheet.css{/assets}
{assets:js order:10}myScript.js{/assets}
The 'order" numbers are default values and are not necessary.
This method works well with markdown pages but you may need to experiment with @paulmassendari suggestion for use in a .twig file when building a plugin. I don’t have any experience with this but it seems that it would work.
One last bit of experience that I’d like to share… the assets plugin works great when calling files stored in the article folder. I’ve found that using the code inline does work but writes the code to the head of every page – very ugly.
One further thing to note: enclosing your script in an “iife” wrapper definitely seems to be needed for the script to run.
@rbtlfinance
'm sorry, I don’t quite understand. Where does {{ assets.css() }} go? At the end of the file? All of the js and css it called in the html, as per usual. Also, what do the numbers 110 and 109 signify? I’m still getting used to this new system.
{{ assets.css() }} is the code that tells grav to create the link for all the css files added in your file,
it converts {% do assets.add('theme://css/custom.css', 110) %} into <link href="/assets/custom.css" type="text/css" rel="stylesheet" />
You must add this piece of code somewhere in your file otherwise the stylesheets or javascripts won’t be added.
The number at the end is the priority (biggest number = higher priority). So if you write something like that (note the number at the end)
{% do assets.add('theme://css/custom.css', 106) %}
{% do assets.add('theme://css/color.css', 110) %}
{% do assets.add('theme://css/anotherone.css', 108) %}
{% do assets.add('theme://css/style.css', 104) %}
{{ assets.css() }}
it will actually render in this order (higher number to lower) :
<link href="/asset s/color.css" type="text/css" rel="stylesheet" />
<link href="/assets/anotherone.css" type="text/css" rel="stylesheet" />
<link href="/assets/custom.css" type="text/css" rel="stylesheet" />
<link href="/assets/style.css" type="text/css" rel="stylesheet" />
Note that assets.add does not need necesseraly a priority number to work.
Hope it helps!
Thank you so much for your help. I’m sorry for the late reply, I got caught up with my day job. I’ve followed your instructions. I’m able to display my html in a page. The assets plugin works well and it loads my css files just fine. Everything is formatting and showing up correctly. However, my little widget doesn’t work. My JS looks up the stock ticker’s price, market cap and price change through yahoo’s API. It work’s as a standalone, but not in a grav page. It’s formatted correctly, so I know the css is working. But the price, market cap and price change don’t load. I also did some debugging in safari and found that all of my JS and CSS files are in fact being loaded. And there are no errors. I can’t seem to figure out why the widget’s JS is not functioning properly.
Nevermind! I got it working. I loaded {{ assets.css() }} and {{ assets.js() }} in the wrong location 
You’ve all been a great help to me, thank you!