I'm trying to embed a booking system widget to my bolt homepage (the one and only homepage, using base-2018 theme). I paste it into the Content window, selecting Source first. Bolt seems to interpret what is going on, as various tags and IDs are highlighted in the code.
The widget code is roughly so:
<div id="bokun [blabla]">Loading...</div>
<p><script type="text/javascript"><br />
var w15;<br />
(function(d, t) {<br />
var host = 'widgets.bokun.io';<br />
var frameUrl = 'https://' + host + '/widgets/15';<br />
var s = d.createElement(t), options = {'host': host, 'frameUrl': frameUrl, 'widgetHash':'w15', 'autoResize':true,'height':'','width':'100%', 'minHeight': 0,'async':true, 'ssl':true, 'affiliateTrackingCode': '', 'transientSession': true, 'cookieLifetime': 43200 };<br />
s.src = 'https://' + host + '/assets/javascripts/widgets/embedder.js';<br />
s.onload = s.onreadystatechange = function() {<br />
var rs = this.readyState; if (rs) if (rs != 'complete') if (rs != 'loaded') return;<br />
try {<br />
w15 = new BokunWidgetEmbedder(); w15.initialize(options); w15.display();<br />
} catch (e) {}<br />
};<br />
var scr = d.getElementsByTagName(t)[0], par = scr.parentNode; par.insertBefore(s, scr);<br />
})(document, 'script');<br />
</script></p>
I have only edited out the unique ID this widget has. Otherwise, this is copied from the provider and works on my current Wordpress site...ALTHOUGH when I paste it into Wordpress, the editor notifies me that "there's something wrong" and offers me to correct it.
How do I insert this? Do I need to create a .js file and reference it in compliance with Twig standards and if so, how do I? I should also note that the widget will redirect to a different page within the same site once you press something within it. Thank you.
Bolt version: 3.6.5
You need to add every tag and attribute that you need into the `config.yml.
Related
first I'd like to thank you for your time trying to help. I am a designer and I suck at developing stuff, so I have no other option than to scream for help.
So this is the situation:
I was asked to add an image (country flag) that's gonna be dynamic, in an element that fetches info from a JSON file with, among others, Resorts (one of the elements being its country's long name, i.e. Australia) and Countries (by long name and shortcode, i.e. Australia, au).
I need to get the country shortcode printed in the img src, but the resort array is only containing its long name.
The code:
This is the way the JSON file presents the information:
{
"Countries":[
{"name":"Australia",
"code":"au",
"continent_code":"oc",
"slug":"australia"}],
"Continents":[
{"name":"Oceania",
"code":"oc",
"slug":"oceania"}],
"Resorts":[{
"id":"1",
"resort_name":"Resort Name",
"encoded_name":"resort-name",
...
"country":"Australia",
...}]
}
And this is my file bit:
const DesktopResort = ({resort}) => (
<Link href="/resort/[resort]" as={`/resort/${resort.encoded_name}`}>
<a target='_blank' className='resort-item'>
<div className="resort">
<div className="top">
<div className="title">{resort.resort_name}</div>
<img className="logo" src="/assets/img/resort-logo-sample.png" />
<span className="info">{`${resort.ski_network} - ${resort.region}`}</span>
// Down below is the "dynamic" file call
<img className="flag-icon" src={`/assets/img/flags/${resort.country}.svg`} />
</div>
<div className="arrow"><img src="/assets/img/arrow-link.png" /></div>
</div>
</a>
</Link>
)
I know its badly done right now, for this australian resort my image src is /assets/img/flags/Australia.svg and what I would need to print is of course /assets/img/flags/au.svg
How would you do it?
Thanks again!
I'd write a little helper function to look up a country code based on the country name.
Note: you'll need to handle what should happen if the country is not found, or the code is not there. I'm just defaulting to an empty string here.
const countryCode = name => {
const country = yourData.Countries.find(country => country.name === name);
return country && country.code || '';
};
Then use this when you're passing the src to your img.
<img
className="flag-icon"
src={`/assets/img/flags/${countryCode(resort.country)}.svg`}
/>
This Meteor server code tries to extract the innerHTML from a html string using cheerio package but the error says that the elements has no method 'size'
What am I doing wrong and how to fix it? Thanks
here is the html;
<span class='errorMsg'>some text </span>
message: (html, typeMsg) => {
let $ = cheerio.load(html);
const selection = 'span.' + typeMsg;
const elements = $(selection);
return elements.size() > 0 ? elements.get(0).innerHTML.trim() : '';
}
After few trials and errors and trying to understand the docs, which cloud benefit from some more explanations.
Option 1
const element = $(selection).eq(0);
return element ? element.text().trim() : '';
Option 2
const element = $(selection).get([0]);
return element ? element.children[0].data.trim() : '';
I used option 1 in this case.
var cheerio = require('cheerio');
var $ = cheerio.load('<b>hello</b> world');
// innerHTML
$('body').html()
// <b>hello</b> world
// outerHTML
$.html($('body'))
// <body><b>hello</b> world</body>
// innerText
$('body').text()
// hello world
docs: https://api.jquery.com/html/#html1
My HTML looked like this:
<div class="col-xs-8">
<b>John Smith</b><br />
<i>Head of Widgets</i><br />
Google<br />
Maitland, FL<br />
123-456-7890<br />
<a
href="mailto:example#example.com"
>example#example.com</a
>
</div>
I wanted to extract the inner html of the div in the context of an "each" loop, so I used this code:
$(this).html()
Which returned
<b>John Smith</b><br />
<i>Head of Widgets</i><br />
Google<br />
Maitland, FL<br />
123-456-7890<br />
<a
href="mailto:example#example.com"
>example#example.com</a
>
I am iterating a json whose format is like this
request("js/my/data/sample.json", {
handleAs: "json"
}).then(function (jsonResults) {
arrayUtil.forEach(jsonResults.LinksMap, function (List) {
arrayUtil.forEach(List.LinksMap.entry, function (Ientry) {
var widget = new support(Ientry.Link).placeAt(authorContainer);
});
});
});
The Widget HTML template looks like
<div><span title="${title}">${title}</span></div> <br />
<div><span title="${description}">${description}</span></div> <br />
<a class="info" title="${title}" href="${url}">${title}</a><br />
I would like to use the object linkType provided in json to use a different class in the html template of the widget so if it linkType is "information" then use
<a class="info" title="${title}" href="${url}">${title}</a><br />
If it is news then use
<a class="news" title="${title}" href="${url}">${title}</a><br />
A combination of this modified template:
<div><span title="${Link.title}">${Link.title}</span></div> <br />
<div><span title="${Link.description}">${Link.description}</span></div> <br />
<a class="${className}" title="${Link.title}" href="${Link.url}">${Link.title}</a><br />
and this modified code should do the trick:
request("js/my/data/sample.json", {
handleAs: "json"}).then(function(jsonResults){ arrayUtil.forEach(jsonResults.LinksMap, function(List){arrayUtil.forEach(List.LinksMap.entry, function(Ientry){
if('information' === Ientry.linkType) Ientry.className = 'info';
else if('news link' === Ientry.linkType) Ientry.className = 'news';
var widget = new support(Ientry).placeAt(authorContainer);
});});});
But a much better idea would be implementing a postCreate method in your widget that would be able to modify widget in any way you like, after it gets constructed and just before it gets displayed.
Please refer to this guide and search for postCreate there.
I am getting a div/list in my jsp using javascript; so i can pass it into a mailTo HTML function(opens email template in your defualt email client); grabbing these values works in chrome but not in firefox!(it prints out "undefined" into the email instead) any help would be great!
var order = document.getElementsByClassName("order");
var elementorder = order[0].innerText;
<div class ="order">
<logic:presentname="serviceDeskForm" property="handsetData">
<logic:iterate id="element6a" name="serviceDeskForm" property="handsetData">
<bean:write name="element6a" property="handsetManufacturer"/><bean:write name="element6b" property="handsetModel" />
<bean:write name="element6c" property="handsetQty" />
<bean:write name="element6c" property="powerSupplyQty" />
<br></logic:iterate>
</logic:present>
</div>
Why don't you assign an ID to the email to the node you want. Then you just do
document.getElementById("my-id").property; //or whatever your property name is.
Hey most of my issue has been solved but i have little problem
This is Html
<tr>
<td class="ttl">
</td>
<td class="nfo">- MP4/H.263/H.264/WMV player<br />
- MP3/WAV/еAAC+/WMA player<br />
- Photo editor<br />
- Organizer<br />
- Voice command/dial<br />
- Flash Lite 3.0<br />
- T9</td>
</tr>
Currently i am using this code provided by Stackoverflow User
var text1 = htmlDoc.DocumentNode.SelectNodes("//td[#class='nfo']")[1].InnerHtml;
textBox1.Text = text1;
know problem its is getting all text
with <br>
how i can remove <br> from it and put , between them
its should look like this
MP4/H.263/H.264/WMV player,- MP3/WAV/еAAC+/WMA player,- Photo editor,- Organizer,- Voice command/dial,- Flash Lite 3.0,- T9
Also how to get this
<div id="ttl" class="brand">
<h1>Nokia C5-03</h1>
<p><img src="http://img.gsmarena.com/vv/logos/lg_nokia.gif" alt="Nokia" /></p>
</div>
i am trying this
var text41 =
htmlDoc.DocumentNode.SelectNodes("//div
id[#class='brand']")[0].InnerText;
i get invalid token error
i only want C5-03 without nokia text
You can simply use a string.Replace("<br />", ""); to remove the <br /> tags.
Better yet, use the InnerText instead of InnerHtml, so no HTML comes through:
var text1 = htmlDoc.DocumentNode.SelectNodes("//td[#class='nfo']")[1].InnerText;
If you really want to replace all <br /> tags with a , you will indeed need to use Replace:
text1.Replace("<br />", ",");
To select the value in the <H1> tag, you could use:
var text42 = htmlDoc.DocumentNode.SelectNodes("//div[id='ttl']"/h1)[0].InnerText;