I want to add a snippet i get from booking.com in my nuxt page, the script looks like that :
<ins class="bookingaff" data-aid="" data-target_aid="" data-prod="map" data-width="100%" data-height="590" data-lang="ualng" data-dest_id="0" data-dest_type="landmark" data-latitude="{{ data.lat }}" data-longitude="{{ data.lng}}" data-mwhsb="0">
<!-- Anything inside will go away once widget is loaded. -->
Booking.com
</ins>
<script type="text/javascript">
(function(d, sc, u) {
var s = d.createElement(sc), p = d.getElementsByTagName(sc)[0];
s.type = 'text/javascript';
s.async = true;
s.src = u + '?v=' + (+new Date());
p.parentNode.insertBefore(s,p);
})(document, 'script', '//aff.bstatic.com/static/affiliate_base/js/flexiproduct.js');
</script>
So there is this tag where i have to pass the latitude and the longitude of my point to get the hotels near from. Does anyone knows how to insert this kind of external snippet in nuxt ?
Third party code can be included using a custom Nuxt plugin. The plugins are included in your app before instantiating the root Vue app. See the documentation here: https://nuxtjs.org/guide/plugins/
Related
I have issue for adding specific facebook pixel for SPA Aplication in vue
<script>
!(function(f, b, e, v, n, t, s) {
if (f.fbq) return;
n = f.fbq = function() {
n.callMethod
? n.callMethod.apply(n, arguments)
: n.queue.push(arguments);
};
if (!f._fbq) f._fbq = n;
n.push = n;
n.loaded = !0;
n.version = '2.0';
n.queue = [];
t = b.createElement(e);
t.async = !0;
t.src = v;
s = b.getElementsByTagName(e)[0];
s.parentNode.insertBefore(t, s);
})(
window,
document,
'script',
'https://connect.facebook.net/en_US/fbevents.js'
);
fbq('init', 'test');
fbq('track', 'PageView');
fbq('track', 'CompleteRegistration');
</script>
<noscript>
<img
height="1"
width="1"
src="https://www.facebook.com/tr?id=1234456789&ev=PageView
&noscript=1"
/>
</noscript>
<!-- End Facebook Pixel Code -->
i want to add this to my page domainname/register
how to add script head and no script head for specific page in Single Page Application VUE
Step 1: Add facebook pixel code in your public/index.html inside <head> tag
<!-- Facebook Pixel Code -->
<script>
!function(f,b,e,v,n,t,s)
{if(f.fbq)return;n=f.fbq=function(){n.callMethod?
n.callMethod.apply(n,arguments):n.queue.push(arguments)};
if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
n.queue=[];t=b.createElement(e);t.async=!0;
t.src=v;s=b.getElementsByTagName(e)[0];
s.parentNode.insertBefore(t,s)}(window, document,'script',
'https://connect.facebook.net/en_US/fbevents.js');
fbq('init', '266xxxxxxxx1');
fbq('track', 'PageView');
</script>
<noscript><img height="1" width="1" style="display:none"
src="https://www.facebook.com/tr?id=266xxxxxxxx1&ev=PageView&noscript=1"/>
</noscript>
<!-- End Facebook Pixel Code -->
Step 2: Inside your component computed, methods, created you can do,
Inside methods you can do,
methods: {
addtoCart() {
window.fbq('track', 'Add to your shopping cart')
}
}
Inside computed you can do like
computed: {
formattedRating () {
window.fbq('track', 'Format your rating')
return this.fixedPoints === null
? this.currentRating
: this.currentRating.toFixed(this.fixedPoints)
},
}
Inside created you can do like,
created() {
this.loadPressRelease()
window.fbq('track', 'Load press release')
},
You can call the facebook pixel event faq function using window.faq in any components
You can render this script based on the current route name.
First this has to be inside the mounted Vue app (Within <router-view/>) ex: inside a layout component if you have it.
Important, adding the script directly inside the Vue app could cause problems.
Therefore, better to move your script to a js file in your assets folder ex:
/js/fbq.js.
After that check the current route to render it like this:
<!-- Render based on route -->
<component v-if="$route.name == 'register'" :is="`script`" src="/js/fbq.js" async></component>
WinJS or MobileFirst is injecting this piece of code on my index.html, the problem is ui-light.css is messing up with my .css even though it is the very first <link> on the <head>
Is there a way to remove this .css injection? I'd rather avoid doing javascript to remove a code that was just injected by javascript.
<script>
var head = document.getElementsByTagName('head')[0];
if (window.clientInformation.userAgent.indexOf("Windows Phone 8.1") > -1) {
var fileref1 = document.createElement("script");
var fileref2 = document.createElement("script");
var link = document.createElement('link');
fileref1.setAttribute("type", "text/javascript");
fileref1.setAttribute("src", "//Microsoft.Phone.WinJS.2.1/js/base.js");
fileref2.setAttribute("type", "text/javascript");
fileref2.setAttribute("src", "//Microsoft.Phone.WinJS.2.1/js/ui.js");
link.setAttribute("rel", "stylesheet");
link.setAttribute("href", "//Microsoft.Phone.WinJS.2.1/css/ui-light.css");
head.appendChild(fileref1);
head.appendChild(fileref2);
head.appendChild(link);
} else {
var fileref1 = document.createElement("script");
var fileref2 = document.createElement("script");
var link = document.createElement("link");
fileref1.setAttribute("type", "text/javascript");
fileref1.setAttribute("src", "//Microsoft.WinJS.2.0/js/base.js ");
fileref2.setAttribute("type", "text/javascript");
fileref2.setAttribute("src", "//Microsoft.WinJS.2.0/js/ui.js");
link.setAttribute("rel", "stylesheet");
link.setAttribute("href", "//Microsoft.WinJS.2.0/css/ui-light.css");
head.appendChild(fileref1);
head.appendChild(fileref2);
head.appendChild(link);
}
</script>
The latest version of winJS was 4.4. The ui-light/dark.css file was included in the WinJS library as a standalone css file. You can choose not to add it if it was messed up with your css. So, please try to update to winJS 4.4.
I was recently asked to change a script that is on this shopify website but I am unable to find it in either the backend settings or the actual code for the template. Could someone please point me in the right direction on how to change the code for this script? The pixel values are wrong here and it's causing SEO issues:
<script>
//<![CDATA[
(function() {
function asyncLoad() {
var urls = ["\/\/productreviews.shopifycdn.com\/assets\/v4\/spr.js?shop=myshop.myshopify.com","\/\/www.beetailer.com\/javascripts\/beecart.js?shop=myshop.myshopify.com","https:\/\/media.conversio.com\/scripts\/shopify.js?shop=myshop.myshopify.com","https:\/\/s3.amazonaws.com\/lastsecondcoupon\/js\/freeshippingbar.js?shop=myshop.myshopify.com","\/\/facebook.shopifycdn.com\/tracking_pixels\/123.js?shop=myshop.myshopify.com","\/\/facebook.shopifycdn.com\/conversion_pixels\/123.js?shop=myshop.myshopify.com","\/\/notifyapp.io\/js\/1463319629\/loader.js?shop=myshop.myshopify.com","https:\/\/embed.tawk.to\/widget-script\/58065fec304e8e75855e4cce\/default.js?shop=myshop.myshopify.com","https:\/\/www.affiliatly.com\/shopify\/shopify.js?affiliatly_code=AF-10200\u0026shop=myshop.myshopify.com"];
for (var i = 0; i < urls.length; i++) {
var s = document.createElement('script');
s.type = 'text/javascript';
s.async = true;
s.src = urls[i];
var x = document.getElementsByTagName('script')[0];
x.parentNode.insertBefore(s, x);
}
}
window.attachEvent ? window.attachEvent('onload', asyncLoad) : window.addEventListener('load', asyncLoad, false);
})();
//]]>
</script>
This code is included by Shopify as a part of the {{ content_for_header }} Liquid variable in the layout files (e.g. theme.liquid.)
The JavaScript files would be ScriptTag scripts that have been added to the store by Shopify apps that you have installed. For example https://productreviews.shopifycdn.com/assets/v4/spr.js belongs to the Product Reviews app.
These scripts are hosted by the app developers so you won't be able to edit them directly. You can remove a ScriptTag script by uninstalling the Shopify app that placed it there.
It looks like the function above is loading the java script (.js files) dynamically in the code and adding the script to the domain:
var urls = ["\/\/productreviews.shopifycdn.com\/asse....
You would need to download the .js files (url are listed in the code), modify them, and change the path so that the above function can load them from a local path.
Following array is URL to all the JS scripts... Each of the item in this array is loaded after page loads.
var urls = ["\/\/productreviews.shopifycdn.com\/assets\/v4\/spr.js?shop=myshop.myshopify.com","\/\/www.beetailer.com\/javascripts\/beecart.js?shop=myshop.myshopify.com","https:\/\/media.conversio.com\/scripts\/shopify.js?shop=myshop.myshopify.com","https:\/\/s3.amazonaws.com\/lastsecondcoupon\/js\/freeshippingbar.js?shop=myshop.myshopify.com","\/\/facebook.shopifycdn.com\/tracking_pixels\/123.js?shop=myshop.myshopify.com","\/\/facebook.shopifycdn.com\/conversion_pixels\/123.js?shop=myshop.myshopify.com","\/\/notifyapp.io\/js\/1463319629\/loader.js?shop=myshop.myshopify.com","https:\/\/embed.tawk.to\/widget-script\/58065fec304e8e75855e4cce\/default.js?shop=myshop.myshopify.com","https:\/\/www.affiliatly.com\/shopify\/shopify.js?affiliatly_code=AF-10200\u0026shop=myshop.myshopify.com"];
I'm using the client side javascript SDK to connect to soundcloud.
now i want to block all latest tracks in a widget.
if i'm using SC.Widget('frameid') i'll get an error: Widget is not a function
so i have to implement the second script (widget api)
Whether I load the script directly from soundcloud or download it
I get the error: e is null
I tried to load the sdk before the widget api
and I also tried to load the api in document.ready but I still get the same error.
For selecting the iframe I tried to get it via ID and document.getElementbyId(..)
but that still did not work
Can someone tell me the solution?
what i'm doing wrong?
Looks like you dont reference the scripts in a proper way.
I hope this sketch points you in the right direction:
JS
(function() {
var iframe2 = document.querySelector('#widget2');
var widget2 = SC.Widget(iframe2);
var newurl = 'http://soundcloud.com/bnzlovesyou';
widget2.bind(SC.Widget.Events.READY, function() {
alert('ready');
widget2.bind(SC.Widget.Events.PLAY, function(eventData) {
alert('Playing..');
});
widget2.bind(SC.Widget.Events.PAUSE, function(eventData) {
alert('PAUSE..');
});
});
$( "#changetrack" ).click(function() {
widget2.load(newurl);
});
}());
HTML
<iframe id="widget2" width="100%" src = 'http://w.soundcloud.com/player/?url=http://soundcloud.com/barehouse_1'>
</iframe>
<div id="changetrack">Change Track / URL to my account ;)</div>
http://jsfiddle.net/iambnz/wpe2zmLh/
What is the best way to show the resulting css from files compiled with less.js in the client.
In other words, how can i fill a div with the resulting css?
I need to display the result on the page, any way to do this?
THanks!
update
As already pointed out in the comments by #ertrzyiks you should replace less.parse with less.render for Less v 2.x:
var lessCode = '';
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function(){
if(xmlhttp.status == 200 && xmlhttp.readyState == 4){
var options = {}
lessCode = xmlhttp.responseText;
less.render(lessCode, options, function (error, output) {
if(!error) {
document.getElementById('lesscode').innerHTML = output.css;
}
else document.getElementById('lesscode').innerHTML = '<span style="color:red">' + error + '</span>';
});
}
};
xmlhttp.open("GET","important.less",true);
xmlhttp.send();
see also: How to detect and print changing variables LESS
But since Less v2:
In the browser, less.pageLoadFinished will be a promise, resolved when
less has finished its initial processing. less.refresh and
less.modifyVars also return promises.
When you compile filename.less the compiled CSS code has been inject in a style tag with id less:filename, so to get the compilled CSS code you can also use:
less.pageLoadFinished.then(
function() {
console.log(document.getElementById('less:filename').innerHTML);
}
);
Notice that the last example also applies the compiled CSS code on the page.
--end update
I expected that running something such as the following was possible:
<link rel="stylesheet/less" type="text/css" href="important.less">
<script src="less-1.7.3.js" type="text/javascript"></script>
<script>
css = less.tree.toCSS();
console.log(css);
</script>
unfortunately this does not work, but you can use the following code to get what you want:
<script src="less-1.7.3.js" type="text/javascript"></script>
<script>
var lessCode = '';
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function(){
if(xmlhttp.status == 200 && xmlhttp.readyState == 4){
lessCode = xmlhttp.responseText;
new(less.Parser)().parse(lessCode, function (e, tree) {
document.getElementById('lesscode').innerHTML = tree.toCSS().replace(/\n/g,"<br>");
});
}
};
xmlhttp.open("GET","important.less",true);
xmlhttp.send();
</script>
With in the body section of your HTML:
<div id="lesscode"></div>
See also: Combining two .less files in one and How to open a local disk file with Javascript?
I just use Chrome's Inspect Element.
Right click on the element CSS you are looking for, Right click and choose Inspect element. On the right you will find the compiled CSS in Styles. Hope it helps
You have two options to do this, Internet Explorer or Firefox.
Let's start with Firefox. If you install the web developer toolbar, you get a menu option that's labelled CSS. Clicking on this gives you a few options and if you choose View CSS, you are taken to a new tab that shows you all of the styles for the page, grouped by their location and you should see a section with the CSS that has been generated by LESS and dynamically applied to the elements.
IE also has a Web Developer option and if you use the toolbar to inspect an element, you can then use the short cut 'Ctrl + T' which will bring up the page source with the computed styles.
The Firefox solution is better, as you can see exactly which styles have been provided by LESS whereas IE just lumps it all together.
There is a third option, and that is to compile the CSS server side!