I am building a shopware 6 app and I wonder how to properly use JavaScript code inside the app. Currently I am just adding an inline script tag inside the base.html.twig like so:
{% sw_extends '#Storefront/storefront/base.html.twig' %}
{% block base_body %}
{{ parent() }}
<script type="module">
(async function() {
// my main app code goes here
})();
</script>
{% endblock %}
This is horrible in many ways: there's no minification, obfuscatio or possibility to use TypeScript later on.
What am I missing? The older style plugin development is actually capable to use JavaScript code in their own files if they are located inside the 'Resoruces/app/' directory. But this is not documentated for the app development and didn't work anyways.
I hope for your advives. Thanks.
For pure storefront modifications (twig template and js/css changes) there are no real differences between the app and the plugin system, it works in the same way for both extension systems.
So there is no explicit documentation on how to make storefront changes, as the documentation targeted for plugins applies for apps as well.
The only difference is that in the app system you can not configure the path to your storefront files, so you have to put them into the /Resources folder in your app, as described in this documentation. Note: That is also the default location for plugin storefront files, but the plugin system allows to configure a custom location.
So in short it is totally possible to use minified js or type script in the app system.
Related
I am transitioning from a Flask backend without a front end framework to Vue.js (no backend chosen yet).
Previously I would create a base.html file that would contain all the boilerplate html code and dependencies (like links to stylesheets), javascript dependencies (like the j-query library) as well as html components of my website that should be included on every page (like the nav bar, background image e.t.c). Then, using the jinja2 templating language I would extend base.html in every subsequent page.
I would like to do something similar with Vue but am not sure where to implement this 'base.html' sort of code. Here is the file structure of my vue js project, I used the vue cli to create this project:
I was thinking I could either put the html contents of what was previously 'base.html' in the index.html file (all the way at the bottom of the picture) or in the template of the src/App.vue file.. or perhaps there just a better way of doing it?
If your background on backend is Flask I'd suggest you to keep on using it and use Vue for your frontend.
Said that I think that there are countless good examples about how to integrate Flask with Vue, here's an interesting one from GitHub: flask-vuejs-template.
I recently got into RequireJS and am integrating it into my backbone applications.
I noticed when looking at the source code that all individual javascripts are replaced by the bootstrap file, the line that reads:
<script data-main="js/main" src="js/require.js"></script>
And this line prevents me from viewing the attached files.
Does this mean that users are unable to hack their way into my external source code files if I load all scripts through the bootstrap file?
I am mostly concerned because I use a restful api route in my Backbone collections, and want to keep user data safe.
Thanks.
No, it doesn't mean that. It just means that scripts are loaded dynamically. Anybody can still download your JS files or look at them with any web debugging tool
I'm trying to integrate django-compressor into an existing django project for performance reasons.
I've added {% compress css %} and {% compress js %} tags around the blocks in my root template where all JS and CSS scripts are included by child templates (ie. all other pages on the site extend those blocks in the root template to put their page-specific files). This works perfectly most of the time, but one page has an embedded Google Map with a JS header:
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=weather&key={% include "google_maps_api_key" %}&sensor=false">
This triggers an exception when rendering the page:
Caught UncompressableFileError while rendering: 'http://maps.googleapis.com/maps/api/js?libraries=weather&key=MYAPIKEY&sensor=false' isn't accessible via COMPRESS_URL ('/media/') and can't be compressed
Is there any way to tell django-compressor to skip this script? Is there some way to have it access and compress the remote script?
No, AFAIK this is not possible (without modifying django-compressor quite heavily). The best solution, based on your description, would be to have separate blocks for local, compressable scripts and remote scripts, and have your child templates use those appropriately.
Is it technically possible? Yes... You could download the map to your assets folder and then compress from there.
However, this is against Google's Terms of Use and may create some weird edge cases. Better bet is to move the tag for maps outside of {% compress %} call. Since google maps is already precompressed, and hosted on Google's fast CDN, your webpage will load faster anyway than if you tried to server yourself.
I'm pretty new to MVC and I can't decide on the best way to store cshtml files and their respective javascript code. Some JS code in my project needs to run globally, but most of it is entirely tied to specic views or partial views.
If I put the javascript in the views, I get a mess of inline uncacheable javascript, if I put it in one central file, I lose modularity.
I heard that in MVC4 there are going to be minification features, is there something I can do with MVC3 that will allow me to choose in the Views which javascripts to include and then group them and minify them automatically? (maybe even in groups?)
Cassette it's essentially the same thing as the upcoming MVC4 bundles.
In your view page, you can reference scripts and stylesheets using Cassette's Bundles helper class.
#{
Bundles.Reference("Scripts/jquery.js");
Bundles.Reference("Scripts/page.js");
Bundles.Reference("Styles/page.css");
}
<!DOCTYPE html>
<html>
...
In addition, Cassette has native support for Less and CoffeScript. It has also support for HTML Templates, if you are interested in client side MVC frameworks like Knockout.js or Backbone.js.
Still you have to choose how to group your content. As the official documentation is suggesting, probably the best choice is to treat bundles as units of deployment.
Keep in mind that a bundle is a unit of deployment. If any asset in a bundle changes, then the entire bundle has to be downloaded again by web browsers. So perhaps group shared code into a bundle and put page scripts into their own bundles.
You can put the javascript in separate files, for each view. Then in the _Layout.cshtml enter a #RenderSectionto the head:
<head>
<script src="#Url.Content("~/Scripts/jquery-1.7.1.js")" type="text/javascript"></script>
#RenderSection("head",false)
</head>
Then in each view, you can put a section that will be rendered into the header:
#section head{
<script src="#Url.Content("~/ViewScripts/Order/New.js")" type="text/javascript"></script>
}
You'll want to use a method like this:
http://www.viget.com/inspire/extending-paul-irishs-comprehensive-dom-ready-execution/
See this post:
Using Rails 3.1, where do you put your "page specific" javascript code?
It is not a best practice to use script in partials (in my point of view)
is suggest you to write partial specific script to separate js and bind events on page load or if partial was loaded via ajax then on success event.
then you can be sure that events are not bound multiple times and view is just a view
#Anders approach is good if you require the scripts to be in the head tag. But I find that most times it is not required if it is page specific JavaScript. You can put your script tags that reference your script files wherever they are required in the View. Automatically bundling and minification will be supported in ASP.NET 4.5. Until that time you can integrate yuicompressor into Visual Studio.
Many third-party website tracking tools and widgets (e.g. Google Analytics, Piwik) require you to copy-and-paste Javascript code into the bottom of your site, right before the closing body tag.
If your website is Django based, what's the standard way of adding this type of code to to the site?
Do you:
paste it directly into base.html
create a {% block extra_js %}{% endblock %} right before the closing body tag in base.html and stick it in there and/or another template
create a new Django app (assuming there's no existing one yet or none that meets your needs)
or do something else?
And if you're a consultant dealing with inexperienced clients and you do option 3, do you advise your clients to take the same approach when they're adding to the project code themselves?
Directly into base.html if the code is the same for all.
If necessary, wrap it in a block tag so that you can override (to remove or replace) in templates that inherit the base.html.
Recommended to use EXISTING APPS or CREATE a new APP.
say for google analytics i will use http://code.google.com/p/django-google-analytics/
This way is easy for Maintaining the App.
A separate app is a another overhead.
If you want to use it on all pages, follow your point 1.
If you don't want that in all pages, put that in in a block and inherit wherever necessary.