Using Twig to access HTML content - twig

I am working with Twig in Opencart 3.
If i have an HTML element
<span id='mobileCheck' style='display: none;'>mobile</span>
Is there any way to access either the id, or the content within Twig in order to use that in an if statement later?
In javascript i'd write
var isMobile = document.getElementById("mobileCheck").innerText;
Can i do something similar in Twig?

Related

Access 'content' or 'node' variables inside View context

I have a view where there was a file type field. So I added it to the view and rewrote the result for it:
{{ title }}
The above line results in an a tag with the href for the PDF document and the node title as text for the tag.
Now I have replaced the field field_download with the field field_mdownload which is a reference to an entity of type Media document. I can't get the same result with this type of field.
I tried using Twig Twaek and Bamboo Twig for this purpose, and tried direct access to node and content too, but it doesn't seem to work in the context of the view.
I tried to use things like:
node.fileld_mdocument.entity.media_file_document.uri.value
node.field_mdocument | file_uri
field_mdocument | file_uri
file_url (field_mdocument)
<% set node = bamboo_load_entity ('node', nid)%> but here twig doesn't seem to be able to convert the nid to the entire value that represents the node. If I put <% set node = bamboo_load_entity ('node', 1)%> it works.
Does anyone have any idea how I can solve this?

Ckeditor - using twig code within FOSCKEditor wysiwyg

I wanted to know if it was possible to put twig code in ckeditor and that it interprets correctly the code in order to generate the HTML code.
I've already seen some configurations (using "protectedSource") that allow to put twig code within ckeditor but when I do that, the twig code is still interpreted as a string.
My goal here is to create some twig functions that I could use inside CKEditor.
Example :
Let's say that the "my_complex_table_function" function return a complex table, i would like to be able to put
{{ my_complex_table_function }}
in CKEditor and that it returns the table in the front page.
Is that possible ?
Thanks guys

How do I include a JS variable in an EJS file in a GET request?

I am trying to write an ejs file with a for-each loop that displays, as text, names of javascript variables line by line. I want each name to be hyperlinked to a route, such as /getinfo, that renders a page that displays more information about the variable that was clicked on.
I tried to use an "a href" tag as follows:
<a href="/getinfo?name=" <%= variable.name>> <%= variable.name %></a>
I expected variable.name to be included in the URL's query parameters, but it won't be appended properly. Considering how HTML does not support string concatenation, I am not sure how to properly include this data in an HTTP GET request.
What would be a correct way to achieve this? Thank you!
It's simple. Using template literal
<a href="<%= `/getinfo?name=${variable.name}${variable.name}` %>">
Regular ejs to output escaped html
<a href="/getinfo?name=<%= variable.name %><%= variable.name %>">

load external html files with handlebars

I would like to create external Handlebars files using the following -
1. header- Contains html codes
2. footer- Contains html codes
3. nav- Contains html codes
4. search - Contains html codes
etc.
Is there a way with handlebars to do this, so that I can include each template if and when needed in a specific page. Not sure how to go about it.
Thanks!
Absolutely! You can use Handlebar partials to do this. Simply register your header, nav, etc files as partials and then you can use this in your main template by doing something like this:
{{> header }}
{{> nav activePage=(activePage) }}
Have you considered using ASP.NET?
If you wanted to add content from other html files, I would highly recommend using
#RenderPage()If you use this, then you could set up a layout such as:
#RenderPage("header.html")
Some random description
#RenderPage("navigationbar.html")
#RenderPage("searchbar.html")
- Insert some content here -
#RenderPage("footer.html")
I'm certain that if you use this kind of layout, you'd get the appearance you would want. Obviously this is just an example, so you'd probably want to add some kind of CSS layout to suit your taste, but this is how I would go about it in ASP.NET.

Is it possible to add my custom JS file so page DOM could access it?

The problem now is that if I add some DOM elements I must put all JS inside tags creating huge mess in code for example:
<div onclick='//js monstrous oneliner with function declarations and so on..
//that must be repeated many times multipcating the whole mess..
'>
Here some pure html thing.
</div>
So can I add my custom JS file into rendered document in the same way as I'm able to add DOM elements ?
You can inject a JavaScript file from your extension into the page. Then, the onclick handler can refer to that directly.
Assume you have a script in your extension:
// myfile.js
function hello() {
alert('hello world');
}
In your content script, make the script tag:
var script = document.createElement('script');
script.src = chrome.extension.getURL('/myfile.js');
Now, you can write your HTML like this:
<div onclick="hello">…</div>
Note that because the content script doesn't run in the same JavaScript context as the page, doing this won't work from your content extension.
var div = document.createElement('div');
div.onclick = someFuncInMyExtension;
Yes, it's quite simple: see this document just to have an idea http://blog.jeffhaynie.us/cross-browser-way-to-dynamically-load-javascript.html

Resources