I have a js block in my template that collects all javascripts on the bottom of the page. I usually extend base template and append JSs using parent() Twig function to keep child scripts below parent ones. It works well but now I would like to include a partial that would also append scripts to the js block. Something like this:
http://twigfiddle.com/3w8g0o
I want following order:
main content 1
partial content
main content 2
base js
main js
partial js
If I use use instead of include, then parent() returns js block from partial.twig instead of base.twig.
The only solution I found would be to
Add use of the partial above the main content block
Replace include with block('partial_content')
Append js from main.twig with block('partial_js')
http://twigfiddle.com/3w8g0o/2
which means there are 3 things to remember when including new partial instead of 1 which will probably lead to forgetting something some day. Is there an easier (one line from main.twig preferably, partial.twig can be more complex) way to achieve my desired order?
Related
Has anyone else encountered this problem?
I cannot modify files of this type:
{% include 'mobshop/template/common/icons/wishlist.twig' %}
The file "wishlist.twig" is modified in the log but the changes do not appear live.
Do you have any suggestions?
Short answer: you can't modify with OCMod twig files that are added via include method inside the twig template.
How twig include works?
include is twig method that allows you to add partials into your theme which is a cool feature. when twig engin runs, it compiles the template by following the link and adding the html part into the final html output string.
How OCMod works?
OCmod is basically a function that takes in the path of the file (in our case the twig template file path) and after parsing the string modifies it and saves to the OCMod cache.
Then, when OpenCart asks for that file, the OCMod engine tries to first return the cached file, and if that is not available, then the original file.
so all files that are wrapped in modification('') method have this support.
The reason why twig include is not supported by OCMod
From the logic above we can see that the OCMod modification method simply never sees the twig partial file path from the Include method. It is jsut beyond its scope.
The modification method sees only a string {% include 'path-to-partial-file' %} and that is it. it never dives into that path and never tries to create a OCMod cache off of that file.
Conclusion.
You should not use "include" in your themes at all. Its just bad practice in OpenCart themes. Although personally I love this feature of Twig, I am also forced to avoid it.
The only way you should add partials in OpenCart is via the Controller ($this->load->controller('...')) attaching it to the $data field and then displaying it in the template.
And if you still MUST have this feature
PHP Twig engine is a powerful tool and you can extend it to your needs. You can still add an extension that can make the include method to work with OCmod, although I have never added that feature.
Here is a twig extension https://github.com/Dreamvention/2_d_twig_manager/blob/master/system/library/template/Twig/Extension/DTwigManager.php that you can use as an example and modify to your needs.
Enjoy!
I installed the pug-bootstrap module in a nodejs project. I am trying to create a menu from a navbar.
I have done those files:
layout.pug:
include /node_modules/pug-bootstrap/_bootstrap.pug
index.pug:
extends layout
block head
+navbar("menu")
+nav_item("#", undefined, true)
string test
block body
h1= title
p Welcome to #{title}
the _bootstrap.pug contains the bootstrap css file : https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css. But it is not loaded on the webpage.
Someone know why? And how to fix that?
Any help would be appreciate.
When you extend a part of a template with block, you're replacing any code that was already in that block, before. In this case, I assume that the head included a reference to that CSS file, which you're overwriting.
Generally speaking, use append instead of block for the head section (see this page from their docs). That way, previous content of parent templates is not overwritten.
In your usecase, I am doubtful whether you should be placing anything at all in that head block, since it is reserved for meta-tags, not for actual visible content. In other words: You'll need to move the code you have there to the body anyway, since visible document objects belong in the body, not in the head.
I am using Slim Framework and Twig.
I want to apply the DRY by using partials. I have a form that is reused in several views with different variables such as titles and route (url) names.
I am struggling on how to make it work on url names.
For example, there is this link using the ´urlFor´ helper with parameter as follows inside a view:
The link
So that is the link I want to pass to the partial template since, it is different in each view, I want to use the partial form. I have tried several approaches but it does not work. I don't know how to pass this string containing ' inside.
For example, I have tried this partial call inside the parent view like this:
{% include 'partials/partial.php' with {'theUrl': "urlFor('route.name', {parameter: value})"} %}
And inside the partial like this:
Show more
It does not work because in the browser's url I see the following:
http://myproject.dev/pages/urlFor('route.name',%20%7Bparameter:%201%7D)
It looks like it is not being escaped properly. Any ideas how to fix this when passing route names with urlFor()?
Without the greatest possibility for testing i think i found the problem. You are simply adding the function inside a string and that does not give the parser an oportunity to resolve the method, because it's basicly just a string.
{% include 'partials/partial.php' with {'theUrl': "urlFor('route.name',{parameter: value})"} %}
Should be
{% include 'partials/partial.php' with {'theUrl': urlFor('route.name',{parameter: value})} %}
I am using gulp to compile Jade for a static website. There is a single gulp task that compiles all the jade files into HTML files.
I am creating a 10 step process, each a single page of HTML with "previous" and "next" buttons
I want to create a partial like below
a(href="#{prev}") Back
a(href="#{next}") Continue
For each page, the prev and next values change. Is there a way to call the partial from within each page's jade with custom prev and next values?
I am assuming, like how you bind data in handlebars template and compile, I can have a different locals object for each page and render the same partial with different data.
Am I approaching this wrong or is this something possible with jade? All answers I can see are related to using express with Jade. I'm only creating a static website, just the HTML alone infact.
If you're including the partial within larger Jade templates via include then it's simply a matter of changing the locals for the larger template you're rendering.
gulp.src('./templates/template-that-includes-a-partial.jade')
.pipe(gulpJade({
locals: {
prev: 'some value',
next: 'some other value'
}
})
.dest('./build/templates/');
Something like that should work. The partial view should have access to the same locals as the parent view that includes it.
I found out that you can define Jade variables using - in the parent template and call the partial with this data
- var prev = "a.html"
- var next = "b.html"
include partials/_var
And then use interpolation in the partial to use corresponding values
a(href="#{prev}") Prev
a(href="#{next}") Next
This way, I can call the same partial in different parent templates but pass in varying values for each page.
I am starting developing with Sailsjs and I would like to know how to divide a webpage into differents blocks.
for example :
in layout.jade i have
doctype html
html(lang="fr")
head
body
div(class='container')
div(class='row')
div(class='col-md-12')
block header
h1 header
div(class='row')
div(class='col-md-8')
block content
div(class='col-md-4')
block right
block footer
then in my controller1/index.jade i have
extends layout
append content
p
some content
So when I type http://myserver.com/controller1/index in the browser, it works.
How to append some code in the block right form the result of another controller ? (I don't want to append some code to the block right directly in the controller1/index.jade file, to make the file as shorter as possible).
So I guess we can call another method of the controller inside the jade file ?
For example i would like to put a code like :
append right
=call('controller2/action1')
at the end of the controller1/index.jade file.
The purpose of my question is to figure out how divide the html parts of a webpage like we can do it with php using include method (for example).
Thank you
Benjamin