I am developing a Magento extension and would like to run some jQuery script in the footer of the html template.
I have manually edited page.xml layout file to load my jQuery source and manually edited the footer.phtml template file to test my code, but I now want to package it up into an extension. The question is how to do this within my extension configuration, to tell magento to load the new jQuery source library in the header, and to append code somewhere in the footer (or anywhere) in the magento generated theme html.
Create a custom Magento Module
Use this module to add a customer Package Layout Update XML File
Use this Package Layout Update XML files to add a javascript src link to a (CDN?) jQuery, and add a custom block to the before_body_end block
Use this custom block to output your needed Javascript code
Use Magento Connect System->Magento Connect->Package Extensions to package up your customer Magento Module file, as well as any other files on the system you used (phtml template, jQuery files if not using a CDN, etc) into an Extension.
Wouldn't it be easier to use a static block? This way the client or yourself could update the jQuery right in the admin area without going into code. You could also add logic with multiple blocks if you needed. You can display a static block in a template like so:
<?php echo $this->getChildHtml('staticblockname') ?>
Otherwise you might want to read this tutorial on creating a module (which you call an extension): http://magento4u.wordpress.com/2009/06/08/create-new-module-helloworld-in-magento/
Related
I used ember generate to create a header component for a youtube video I am following. I have a few questions -
When I ran ember generate component header, the terminal responded with creating the header.hbs file in app>components, but then skips header.js in app/components. I manually created a header.js file in that directory and if I do an alert() in the js file it works.
I have the following code in my header.hbs file.
<h1>Hello There!</h1>
{{yield}}
In my application.hbs file :
<Header/>
{{outlet}}
thoughts, suggestions? Thank you for any help in advance!
Let me try to explain this a bit. Basically there are 4 kinds of components in ember.
without a .js file:
When you invoke a component ember will first look up the component class. When it does not find such a class the behavior depends on the optional feature template-only-glimmer-components. This is by default enabled for new octane apps.
If it is enabled ember will look up the component template based on some standard rules and use it, but there will be no backing class. That is pretty nice. This is also basically what you get in a octane app when you do ember g component my-component.
When template-only-glimmer-components is disabled then an implicit classic component class will automagically be created and used together with the correct template. You don't want this behavior. If you still have it you can migrate away from it by 1) creating a .js file for every component and then 2) enabling template-only-glimmer-components.
with a .js file
When a js file is found ember will get the default export of that module. Then it will look up the correct component manager. This actually depends on that export: setComponentManager should have been called on it. This is usually done in a base class as #ember/component or #glimmer/component.
But you can also write your own custom component manager.
Basically ember will then also look up the template based on that component. A public API for this is proposed in this RFC, but currently a private API is used for the so called template co-location where you place your .hbs file next to your .js file with the same name and just a different extension. This is the default in octant. Here a ember internal build-step in ember-cli basically adds your template to the .js file and uses that API. You can also see the result in a browser debugger. So when there is no default export then ember can not find your template.
I am currently in the process of designing and refining a landing page. Over the time, many things have been added and handling the amount of sections and modals is not as it easy as it used to be.
Coming straight to my question: Is there a simple solution to use templates in your normal web design flow to create static web sites. I do not need the advantages of a static site generator, like also compiling my sass or minifying my js files. Interpolation and a config file are also not needed nor wanted. Do you know any system that only allows me to split my html file into multiple components which will then be saved in different html files?
P.S. I am not looking for a Javascript template engine. The creation should happen once and produce a normal html file.
You can use a template engine like pug with client tool.
Example with pug:
Step 1: Install pug-cli
npm install -g pug-cli
Step 2: Code html using pug syntax (very easy to learn). Ex: Split home page file into multiple components (header, footer in folder template_parts):
<!DOCTYPE html>
html(lang="en")
head
meta(charset="UTF-8")
title Document
body
include template-parts/header.pug
h1 Home page
include template-parts/footer.pug
Step 3: Run pug-cli to auto convert html code
$ pug -w ./ -o ./html -P
Change ./ after -w by location of pug files, ./html after -o by location of html files after convert.
Without using PHP includes, I'm not sure if this can be accomplished without using some form of JS Templating engine as:
The majority of the web's content has a simple and declarative way to load itself. Not so for HTML
You should check out:
Metalsmith
An extremely simple, pluggable static site generator.
Handlebars
Handlebars provides the power necessary to let you build semantic templates effectively with no frustration.
If you're using GULP/GRUNT in your workflow anyway there are include plugins:
npmjs search for 'gulp include'
npmjs search for 'grunt include'
Best solution for that is to use server side rendering as the previous answare said.
But checkout this attaribute powered by w3schools it might help you.
I know this answare is to late. but it might help others.
Thanks.
I am using the font-awesome-rails gem within my app and all is working in development, however when deployed in production the fonts do not show. I have tried browsing /assets/fontawesome-webfont.eot on the production site and get a 404 not found error. Looking on the server I can see the fonts are pre-compiled with a different name - e.g. /assets/fontawesome-webfont-e732c0065276ad722bded99096afaa19.eot
I have the
*= require font-awesome
line in my application.css file and when looking at the compiled css file can see it included:
Font Awesome 4.2.0 by #davegandy - http://fontawesome.io - #fontawesome
* License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License)
*/#font-face{font-family:'FontAwesome';src:url("/assets/fontawesome-webfont.eot?v=4.2.0");src:url("/assets/fontawesome-webfont.eot?#iefix&v=4.2.0") format("embedded-opentype"),url("/assets/fontawesome-webfont.woff?v=4.2.0") format("woff"),url("/assets/fontawesome-webfont.ttf?v=4.2.0") format("truetype"),url("/assets/fontawesome-webfont.svg?v=4.2.0#fontawesomeregular") format("svg");
The problem seems to be the difference in filenames between the file in the assets folder and the css call
I don't know how to call these font files within the CSS as the file name changes every time they are pre-compiled.
What is happening is Rails is giving your assets (in this case, the font file) a unique name by adding an MD5 hash to the filename. When you update an asset, this will ensure the users' browsers do not cache the old file.
As you've observed, the CSS file is not using the unique name. This is because Rails doesn't know to update that reference.
There are several approaches you can use; I'll cover two here.
Use an Asset Helper
In order to do this, you will need to rename your static CSS file to a ERB file (i.e., rename stylesheet.css to stylesheet.css.erb). Then in the font reference:
#font-face{
font-family:'FontAwesome';
src:url("/assets/fontawesome-webfont.eot?v=4.2.0");
src:url("/assets/fontawesome-webfont.eot?#iefix&v=4.2.0") format("embedded-opentype"),
url("/assets/fontawesome-webfont.woff?v=4.2.0") format("woff"),
url("/assets/fontawesome-webfont.ttf?v=4.2.0") format("truetype"),
url("/assets/fontawesome-webfont.svg?v=4.2.0#fontawesomeregular") format("svg");
You will use the asset_path helper:
url(<%= asset_path 'fontawesome-webfont.woff' %>)
url(<%= asset_path 'fontawesome-webfont.ttf' %>)
url(<%= asset_path 'fontawesome-webfont.svg' %>)
During runtime, rails will handle the unique names and insert the correct value in the CSS.
Use a CDN
For some common assets, like some fonts, jQuery, etc, using a CDN might make sense. With your external reference, Rails will not rename the file and your users may gain the benefits of caching.
When I search "fontawesome cdn", I get a link to a CDN that hosts both the CSS and the font files.
In my meteor project I can separate the javascript files in the client and server directories. But I cannot find a solution for all the html templates I need to define.
The problem I have now is that I need to embed this svg image in a template too, which is a huge image. So now I have this html file which is now 2 times 'huge' :)
The reason I need to have this svg inline in my html/template is because I need to style it with css. Any suggestions ?
You can put the .html files anywhere! Besides the server directory, of course. The natural place to store them is the client folder, and a good practice is to keep each template in a separate file. The Javascript code related to that template (data helpers, events, callbacks) can then go to a file with the same name and with extension .js instead of .html. These are the basics if you want to keep your project tidy.
I'm a newbie. Here's my problem. I just found that all css and js files generated by rails under app/assets are included in every page. I was considering how I could separate them into local ones(just for this page), and global ones(for all pages).
For example, I would like to put jquery.js in all my pages. But for 3DHelper.js, I hope it only appear in specific pages.
Are there any good ways to do this?
Assets pipeline gives you a good improvements in performance when you avoid using separate css/js files in your APP. And it is strongly recommended to follow this way!
If you would like some js file is executed only on some pages you can do the following:
add controller/action names to data or class attribute to body (in layout)
<body data-controller="<%= controller.controller_name %>" data-action="<%= controller.action_name %>">
add if condition to your js file which should be executed only on specific page. Something like this
if (($('body').data('controller') == 'YourSpecificController') && ($('body').data('action') == 'YourSpecificAction'))