On developing a stencil theme locally, I noticed that {{{ footer.scripts }}} do not load any scripts that are located in the Footer Scripts section under Storefront. Is there any way for the footer scripts to be loaded when working locally?
Related
I have a web application developed using Vuejs/Nuxtjs. The web application has a Vue Component page named Design.vue under pages/Design.vue. This Vue component uses the styles from the assets/css/drawflow.css. Everything works perfectly fine when I run the application locally using the command npm run dev and access the application using http://localhost:5000/. I checked the sources by inspecting on Google Chrome and I see the styles page listed there.
Now, If I try to deploy the same application using the Docker, I see that my Design.vue page is not getting the styles from the assets/css/drawflow.css. I tried to inspect in Google Chrome for that page and when I see the sources, I do not see the required style sheet.
Not sure what's happening and why the styles under the assets folder are not accessible via Docker. Can someone please let me know what needs to be changed here?
Following is the way I am accessing the styles in pages/Design.vue:
<style>
#import "https://cdn.jsdelivr.net/gh/jerosoler/Drawflow#0.0.48/dist/drawflow.min.css";
#import "~/assets/css/drawflow.css";
<!-- #import "#/assets/css/drawflow.css"; -->
</style>
I was able to find the solution. The issue was happening because of the styles provided in the CDN link: https://cdn.jsdelivr.net/gh/jerosoler/Drawflow#0.0.48/dist/drawflow.min.css.
For some reason, docker was not making requests to this file due to which styles from this file were ignored. I added those styles within my drawflow.css file and added a single style. This worked perfectly fine.
<style>
#import "~/assets/css/drawflow.css";
</style>
I have an SVG file that I use for the logo of an Angular CLI application. I just put an <img> into the app.component.html in my <header> and it handles it just fine.
I'm doing a lunch and learn on Rails in about a week and I tried using the same logo for that, but I get the classic Chrome broken image icon instead of my svg displaying.
Rails.application.assets.find_asset '<svg_name>.svg' works and indicates that that svg is loaded into the asset pipeline just fine.
It's the same file, so the contents of the file shouldn't have to change. I don't understand why one web application would be able to serve up the svg file and the other one can't.
So I have a .NET Core app using razor views and certain components within my razor pages are rendered using react. I'm trying to automate my build process using cake. So step 1 is using cake to run the create-react-app npm build and generate the react bundle.js and bundle.css.
Because these generated scripts and stylesheets have random hashes attached to them I need a way to automate injecting the generated bundle.js and bundle.css in my index.cshtml script section and style section respectively.
So something like this:
<environment names="Staging,Production">
<script src="~/static/js/main.xxxxxxxxx.js"></script>
</environment>
where x is the randomly generated hash
Edit: Cake is just basically a way to write automation scripts using c# so knowledge of cake is not required. I'm just looking for a way to do this using .NET and razor pages
I have a ruby on rails application in which in 80% of the pages I am using google maps. So in many of my seperate JS files (in assets/javascripts) I have included many variables from google like
google.maps.DirectionsStatus
new google.maps.LatLng(a,b)
new google.maps.Marker
google.maps.event.addListener
And I have included the below script in my application.html.erb in head section
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&key=<%= ENV["GOOGLE_MAP"]%>&sensor=false&libraries=places">
</script>
In production in pages in which I am not using google maps an error is displayed on console
TypeError: a is null
...(null,_.ia)},p$=function(a,b){this.j=a;this.ma=a.value;this.Vd(this.ma);this.V=b...
This stops other javascript functions in the pages with no google maps from running.Everything in the localhost works fine btw its only in production (Aws-ec2 server with ubuntu. Server nginx and app server puma) that it is not working. Have I gone wrong with google maps integration? Is there a workaround for this problem?
Note: I am not using turbolinks for the application.
Update: Upon further testing only document.ready functions are not working on such pages. Other js functions on such pages are working fine in production.
Isolate the Google Map API
Remove the Google script include from application.html.erb. If you don't need it on every page, don't load it on every page.
Create a partial _map_handler.html.erb (or whatever). At the top, include your Google Map js:
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&key=<%= ENV["GOOGLE_MAP"]%>&sensor=false&libraries=places">
</script>
This partial (or a any number of partials) is where you put all of the map (view) actions. It may not need to be said but all of the google calls have to be only in the partial.
google.maps.DirectionsStatus
new google.maps.LatLng(a,b)
new google.maps.Marker
google.maps.event.addListener
There are 2 benefits:
The Google script is not loaded on pages where it isn't needed
If you switch to another maps api, you'll need to change the partial(s), but you will avoid having Google maps code dependencies strewn throughout your views.
If you have JavaScript map handlers of your own, you must isolate your map js into its own compiled asset.
Three steps
application.js
Remove //= require_tree .
Implications: You will now have to now manually include each of the js files you need in main asset glob as include lines. This may break your assets but to isolate the maps js, you have to go through this.
Important: Make sure you don't include your my_map_handlers.js in application.js
assets.rb
Add a line to compile your my_map_handlers.js into a separate asset file
Rails.application.config.assets.precompile += %w( my_map_handlers.js)
_map_handler.html.erb
Include your my_map_handlers js (will be compiled standalone by the above steps) in the partial after the Google map API and before any references
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&key=<%= ENV["GOOGLE_MAP"]%>&sensor=false&libraries=places">
</script>
<%= javascript_include_tag 'my_map_handlers' %>
Official docs for compiling / referencing a single asset is here.
I have a MVC 4 application in .NET 4.0. My web hosting provider (network solutions) has virtual directories setup so I can't use the default bundling behavior (I think).
In my _Layout view I have this line:
#Scripts.Render("~/bundles/dd-d2")
In BundleConfig.cs I have
bundles.Add(new ScriptBundle("~/bundles/dd-d2").Include(
"~/Scripts/dd-d2.js"));
And everything works fine when I run in visual studio. But when i upload to my web hosting, The file is not found because it appends the virtual folder in front of the bundle path.
instead of /bundles/dd-d2?v=BlahBlah, I get /ROOT_FOLDER/bundles/dd-d2?v=BlahBlah
I fixed this issue by adding this to my line in the _Layout file
#Scripts.Render(Url.Content("~/bundles/dd-d2"))
The Url.Content helper converts the virtual path into an app absolute path and it finds my bundled script files.
Now, the problem I am having with that approach is, if I make a change to the javascript file, it is NOT reflected in the outputted bundled script file. It always has the old information in it even when I upload it to my web hosting. Is this file cached somewhere? Is there a better way of doing this? I would like to take advantage of the minification of my script files by using bundling.
if I do it this way, it does work
<script src="#Url.Content("~/Scripts/dd-d2.js")" type="text/javascript"></script>
But then my script is not minified.