I have inherited an old CMS website. I have enabled Google Maps API successfully, however the site is translating the ® part of the API call into a HTML Entity.
The integrated page editor offers a markup escape/ignore option: encase the relevant code within curly brackets. Unfortunately, it doesnt work - tha maps fails to load:
{{<script async defer src="https://maps.googleapis.com/maps/api/js?key=[myAPIkey]callback=initMap®ion=GB"type="text/javascript"></script>}}
I tried encasing only the ® characters in curly brackets, and it still fails.
I tried this also, and again the map fails to load. Editing the page, shows the ® being translated as a symbol:
<script async defer src={{"https://maps.googleapis.com/maps/api/js?key=AIzaSyDHhAPjTOvz9x0cMRid6LEUkfUePamRIxs&callback=initMap®ion=GB"}}
Is there an alternative way to set a location for searches?
I discovered this alternative to the ampersand symbol: [‘amp‘]
Using this, the script tag is translated correctly.
Related
Is there a way to add the following script, required by Google Programmable Search to Google Tag Manager? Just trying to minimize separate scripts included in my code.
<script async src="https://cse.google.com/cse.js?cx=e14513e5d62xxxxxx"></script>
NM, figured it out. In case someone cares, here's how you do it:
Keep the code part where you want to include your search in the page code.
The above script can be added to GTM via Custom HTML tag. Just drop it there and it's done.
Cheers
I spent some time today with Lit trying to make a simple WebComponent that makes a HTTP GET to a URI, which returns a fully formed HTML document, and I want to inject said HTML document into the WebComponent's shadow DOM; basically this WebComponent acts as a simple proxy for embedding an externally hosted (but trusted) web snippet on my web page. I ran into a few problems:
Lit considers all HTML unsafe, so i had to mark it with Lit's unsafeHTML directive.
Then, I noticed none of the script or link tags in the injected HTML were being followed, so I parsed the incoming HTML as a HtmlDocument, located all the script/link tags, and "re-created" them using document.createElement(...) and returned them in my render(). I'm now noticing that images arent showing up either.
I don't like scraping scripts/links and re-creating them and jamming them into my web component anyhow, but I'm curious - what's the right way to approach this syndicating/consuming syndicated HTML pages/fragments?
Is this a solved problem w/ oEmbed already?
Is this simpler to do with a different WebComponent library?
This seems way harder than it should be at this point.
I think that it has little to do with WebComponents but rather with the HTML5 specs. lit-html uses innerHTML to create elements.
Script elements inserted using innerHTML do not execute when they are inserted
There are still ways to execute JS but this has little to do with your question.
unsafeHTML(`<img src="triggerError" onerror="alert('BOOM')">`)
Regarding the images, it may be a path issue?
This should work:
unsafeHTML(`<img src='http://placehold.it/350x350'>`)
There are 2 ways to use a script with in a script manager
linking to a script by an URL
manually entering in the script.
The handle bar objects don't seem to work while linking to a script by an URL but works when manually entering it. An example script is very simple as below:
console.log("{{product.id}}");
I just wanted to find a solution or a workaround to make the handlebar objects work seamlessly when the script is hosted on a CDN.
Screenshot below:
Consider using 2 scripts. One is an inline script to instantiate certain JS variables your CDN script needs, and the other is your CDN script which checks for window.your_data when it evaluates.
So your first script might be:
<script>
window.currentProductName = "{{product.name}}";
</script>
And your CDN script will check for window.currentProductName when it evaluates.
As script order is not guaranteed within the same insertion target, it's best to put the inline script in the header and the CDN script in the footer (generally better for site speed as well).
I'm not sure if this is what you're looking for but you should be able to accomplish this with the inject & jsContext handlebars helpers. See both here, with a 'console.log' example.
https://developer.bigcommerce.com/stencil-docs/reference-docs/handlebars-helpers-reference#inject
When you reference a script via the URL option it is added to the page via a script tag. This means it gets loaded and run on the client side as the page loads. It would not have access to handlebars.
When you directly enter the script in the manager it is first processed server side and the result is directly placed on the pages. It does have access to handlebars.
You may want to do a combination. A manual script to gather and store the data you need, then a url script to load the main js that can access the data you stored.
You could merge them as one by having the manual script dynamically add the script tag for your external script.
i'm trying to improve speed of my website. i'm using PageSpeed Insights to check my site performance and it was telling me to remove render blocking java script and css. so i did it and know its causing problem in my website design. so what should i do to remove rendering blocking without causing problem in my website design.
Render Blocking CSS
Render blocking CSS will always show on Google Page Speed Insights if you are using external resources for your CSS.
What you need to do is to inline all of your 'above the fold' styles in <style></style> tags in the head of your web page.
I will warn you, this is NOT easy and plugins that claim to do this often do not work, it requires effort.
To explain what is happening:-
A user navigates to your site and the HTML starts downloading.
As the HTML downloads the browser is trying to work out how to render that HTML correctly and it expects styling on those elements.
Once the HTML has downloaded if it hasn't found styles for the elements that appear above the fold (the initial part of the visible page) then it cannot render anything yet.
The browser looks for your style sheets and once they have downloaded it can render the page.
Point 4. is the render blocking as those resources are stopping the page from rendering the initial view.
To achieve this you need to work out every element that displays without scrolling the page and then find all the styles associated with those elements and inline them.
Render Blocking JS
This one is simpler to fix.
If you are able to use the async attribute on your external JS then use that.
However be warned that in a lot of cases this will break your site if you have not designed for it in the first place.
This is because async will download and execute your JS files as fast as possible. If a script requires another script to function (i.e. you are using jQuery) then if it loads before the other script it will throw an error. (i.e. your main.js file uses jQuery but downloads before it. You call $('#element') and you get a $ is undefined error as jQuery is not downloaded yet.)
The better tag to use if you do not have the knowledge required to implement async without error is to use the defer attribute instead.
This will not start downloading the script until the HTML has finished parsing. However it will still download and execute scripts in the order specified in the HTML.
Add async in the script tag and put the css and js in the last of the page
I am using wp_enqueue_scripts() to set my JS files and I am putting them in the footer using the last parameter
But testing in gtmetrix, I still see that I need to defer parsing of Javascript.
How do I defer parsing of Javascript to execute after DOM loads in Wordpress? Is there a parameter perhaps to wp_enqueue_scripts() that can do this?
First if all, wp_enqueue_scripts() will only load scripts in the footer if you set the fifth parameter. Even if you do that, if the file contains content that will execute without user interaction then you should be wrapping that in a jQuery.ready() call.
The latter part has nothing to do with wordpress. That's a basic web development rule.