How to add code to every page from module - frontend

I am developing a plugin, that inserts some JS code into every page of OpenCart. This code needs some variables, that are set in admin part of module (this part is already finished). But now I need to modify template, that on every page there would be a HTML snippet with my code inserted.
I have gone through many tutorials (most of them were for OpenCart 1.X) and did not find anything about how to do this.
Also I would prefer not to change OpenCart's core code, like some modules do, if possible.

Related

Grav - Parse URL

I want to define a new template called "product".
This template calls an external service and retrieves the information about that specific product. That is easily done with a custom plugin that access the product information. Information on how to do that has been found here.
However, I would like that the URL of the page would be something like:
/product/<id>/<seo-friendly-description>
So I can retrieve in the Twig template both <id> and <seo-friendly-description> which will be used later to retrieve the specific product information.
I have tried to find something that could help in the documentation, without success. Could someone either point me to the right doc section or highlight the basic steps that shall be achieved so I can start solving this issue?
Just in case it helps, I am trying to find something similar to how bottle or other web frameworks work:
#route('/hello/<name>')
def greet(name):
return 'Hello ' + name
I've been building a family recipebook into my own website and I've been working through a similar problem. I haven't quite worked out all the kinks, but my solution is mostly working if you want to checkout my github repo.
In short, you need the plugin to watch what the active route is. If the route matches, you then create the page and populate it using your plugin data.
I haven't quite figured out how to get the active page to highlight in the navigation menu for generated pages, but you might still find this solution helpful.

How to load CSS from library when using 'require'

I’m building an electron app. In it, I have a webview with a preload script. Inside said script, I’d like to use sweetalert.
I installed sweetalert with npm install --save sweetalert. Inside my script I load it with require('sweetalert') and call it with swal("Hello world!");. I now notice it doesn’t look right, as the alert is missing its required CSS file. But I’m loading it with require('sweetalert'), which is great since sweetalert can just remain in its directory inside node_modules and I don’t have to care for it, but its CSS is an integral part of it, and is not getting pulled the same way.
Now, what is the recommended way of solving this? Keep in mind I’m inside a javascript file and would like to remain that way. Do I really have to go get the CSS file and inject it in some way? And how would I do it correctly, since it is inside node_modules? After testing it, it seems like it can’t be done in this particular case due to Content Security Policy.
Either way, that seems so clunky in comparison to the require statement, it’d seem weird for a simpler solution to not be available.
You'll have to include it like you would normally do in a browser, for example in index.html. Copy it out of the module folder into your css folder if you have one and link it with the link tag. It depends on if you're using plain electron or some other boilerplate template with there is a gulp/grunt workflow on where to stick it but that's it really, electron is just a browser that's running your JS/html so it's really the exact same process. require only loads the JS module but not the styles.
if you wanted to include it dynamically you could use the same techniques as a regular browser for example (ex. document.write/create element).
I'm not familiar with sweetalert, but hopefully this helps.
Your syntax for require should be something similar to this.
var sweetalert = require('sweetalert')
You should then be able to access methods on the sweetalert object using the following syntax.
sweetalert.someMethod()
Remember requiring just returns a javascript object. Those objects usually have methods that will allow certain functionality. If you want to add sweetalert to your page, you will either need to inject it within the html, or the javascript within the sweetalert module will need to dynamically create html where the css is included. I hope that clarifies some things and helps you get a better sense of some of the inner workings.

Formly does not show up in ng-dialog

I use the Mean-Stack SPA start from scotch.io.
For dialogs I use ng-dialog.
For forms I want to use angular-formly.
I call in the MainCtrl ng-dialog.open to own searchdialog.html.
In the searchdialog.html I want replace a form with angular-formly.
A normal form shows up in the dialog, the formly-coded part does not show up, only the submit-button.
The code is here JS BIN link
Why the formly-form does not show up, but normal forms show up?
EDIT: I added my complete testcode here
GithubCode
The problem you're having is that you're not including the angular-formly library (or even angular) on the page. You'll need to do that first. Also, you're not depending on the angular-formly module 'formly' in your module definition.
If you're not already familiar with how to depend on third-party modules in your angular code, I recommend you read the documentation on Angular modules. Then, follow the getting started instructions on the angular-formly docs. Then take a look at the examples from the angular-formly website. You'll notice that they all include the angular-formly library as script tags. If you'll be using normal script tags, you'll want to download those dependencies and add them to your project.
Good luck!

Client id of elements changes in sharepoint page? Why? When?

Client id of every element from the sharepoint page changes sometimes.
Can anybody please tell me why and on which instance it changes???
jQuery is fantastic! It makes client-side development faster and
countless plug-ins are available for just about every need. Using
jQuery with Asp.NET Web-Forms gets aggravating when dealing with
nested server controls. ClientID’s get appended when using ASP.NET
Master Pages. Objects in JavaScript tend to look like this:
ctl00_m_g_aaf13d41_fc78_40be_81d5_2f40e534844f_txtName
The difficulty of the issue above is that, in order to get the element txtName, It’s necessary to know the full “path”. It’s quite
aggravating to refer to get the object using the method below:
document.getElementByID('ctl00_m_g_aaf13d41_fc78_40be_81d5_2f40e534844f_txtName');
This becomes a big problem when developing server controls or web parts that may be used in a typical ASP.NET application or SharePoint.
You cannot hard-code the path above if you don’t know the full path of
the control.
Fortunately, there are a few ways to get around this. There are three, in particular, I will mention. The first is the jQuery
equivalent to the standard JavaScript method:
document.getElementById("<%=txtName.ClinetID%>");");
This can be done in jQuery by using:
$("#'<%=txtName.ClinetID%>");");
The second jQuery method does not require server tags. This method searches through all tags and looks for an element ending with the
specified text. The jQuery code for this method is shown below:
$("[id$='_txtName']");
There are, of course, drawbacks to both methods above. The first is fast, but requires server tags. It’s fast, but it just looks messy.
Also, it will not work with external script files. The second
alternative is clean, but it can be slow. As I said earlier, there are
several other alternatives, but these two are the ones I find myself
using the most.
The third registering Javascript in C# code behind.
Page.ClientScript.RegisterStartupScript(GetType(), "saveScript",
String.Format("function EnableSave( isDisabled )"+
"{{ var saveButton = document.getElementById(\"{0}\");"+
"saveButton.disabled=isDisabled;}}", btnSave.ClientID), true);
Do not forget to call this script after controls have been loaded, I mean after Controls.Add(); in CreateChildControls method while
developing webparts.
$('input[title="Name"]')
Look at the page source and get the value of the title property - works every time.
ListBox1.Attributes.Add("onmouseup",
"document.getElementById('" + base.ClientID + "_" + lbnFilter.ClientID + "').style.display='block';");

Can't find a complete list of default pages for MOSS 2007

I've made a change to what I thought was the main default template page in a hosted version of Sharepoint 2007, but the search page hasn't picked up the change.
Can someone please either give me a list of all the default page files, or tell me how to identify them? It's really important that I add a JS script call across all pages everywhere on the site.
Thanks!
Point of clarification: for now, I'm just trying to include a jQuery reference. I really don't think I'm trying to do anything complicated or unusual - I just want this include to be be global across all pages by default. I've modified /_catalogs/masterpage/default.master with:
<HEAD runat="server">
<script src="/Global%20Site%20Files/jq1.4.2.js" type="text/javascript"></script>
EDIT
I just did a search of the source code for a statically defined meta-tag and found that the default.master I altered is in fact the only file in the search results!!! This means, as far as I understand, that my jQuery include should have worked! I'm more confused than ever...
Hi What i can see is the way you are refrencing is wrong you should use full Qualified URL for
src attribute in script tag currently you are using relative path that might be a cause of error
Turns out that the issue is not a question of multiple page templates or master files. The search results page (which is the primary page in question) does not use the default.master file. Moreover, even as an administrator, I don't have the ability to edit the search results page.
In the end, it looks as though I was looking for what I thought was a solution, but was really just a red herring. I'm going to repost a more specific question to my problem.

Resources