I would like to fire a FB pixel AddToCart Event after a user clicked a Woocommerce button. I could use a plugin that works perfectly fine. But I would rather not use a plugin for such a "simple" task. The standard tracking code is implemented and working.
I then used the recommended FB code snippet from the helper tool, but it does not fire:
<script type="text/javascript">
document.getElementById('ToCartButton').addEventListener('click', function() {
fbq('track', 'AddToCart', {
value: 12,
currency: 'EUR',
content_type: 'Produkt',
});
}, false);
<button id="ToCartButton"...
Using onclick, on the other hand, works:
<script>
function myFunction() {
fbq('track', 'AddToCart', {
value: 12,
currency: 'EUR',
content_type: 'Produkt',
});
}
</script>
<button onclick="myFunction()"...
Any ideas? Thanks!
Related
Hello I would like to disable the woocommmerce register page button after one click to avoid multiple clicks.
I have searched the forums and found a bunch of solutions for custom forms and I've tried the following JS code but had no luck. I have a feeling I am setting the wrong selector because I cannot for the life of me figure out what the correct selector for the default register button is.
<script>
function disableButton() {
var btn = document.getElementById('woocommerce-register-nonce');
btn.disabled = true;
btn.innerText = 'Posting...'
}
</script>
I've also tried :
<script>
jQuery('woocommerce-Button.woocommerce-button.button.woocommerce-form-register__submit').live('click', function (e) {
var self = this;
$(this).attr("disabled", "disabled");
do_something();
setTimeout(function () {
$(self).removeAttr('disabled');
}, 10000);
});
</script>
Some guidance would be very much appreciated.
Update!
Based on Onboardmass's suggestion I have corrected the selector and got it partially working using jquery.
<script>
jQuery('.woocommerce-Button.woocommerce-button.button.woocommerce-form-register__submit').click(function(){
jQuery(this).attr("disabled", "disabled");
});
</script>
The button now gets disabled on click however the issue I'm facing now is that the form does not get submitted.
The issue you're facing is because the selector is incorrect. It should be .woocommerce-Button.woocommerce-button.button.woocommerce-form-register__submit.
For anyone else who may need this I was able to figure this one out by reading through the suggestions and other threads I found. Thank you Onboardmass & Martin for the guidance!
The time out function is required for the click to register.
<script>
$(document).ready(function () {
$(".woocommerce-Button.woocommerce-button.button.woocommerce-form-register__submit").click(function () {
setTimeout(function () { disableButton(); }, 0);
});
function disableButton() {
$(".woocommerce-Button.woocommerce-button.button.woocommerce-form-register__submit").prop('disabled', true);
}
});
</script>
I can't find any documented way to reload the new "Sign in With Google" button in JavaScript.
I have to remove the script tag and the "button" div then re-add them both.
Does anyone know of a better way to do this?
Have you looked at the JS renderButton method ?
Assuming you have something like this to initialize the library and display the button in JS, you might be able to update locale in the second parameter to renderButton and call the method again to switch languages.
<html>
<body>
<script src="https://accounts.google.com/gsi/client" async defer></script>
<script>
function handleCredentialResponse(response) {
console.log("Encoded JWT ID token: " + response.credential);
}
window.onload = function () {
google.accounts.id.initialize({
client_id: "YOUR_GOOGLE_CLIENT_ID",
callback: handleCredentialResponse
});
google.accounts.id.renderButton(
document.getElementById("buttonDiv"),
{ theme: "outline", size: "large", locale: "the new locale" }
);
google.accounts.id.prompt(); // also display the One Tap dialog
}
</script>
<div id="buttonDiv"></div>
</div>
</body>
</html>
Obviously, you'd call renderButton a second time from outside of the window.onload example above, I didn't go as far as showing that in the code sample though.
I'm using FullCalendar:
http://arshaw.com/fullcalendar/
Is it possible to set the time zone? I'd like to allow my users to select the timezone they'd like to view the calendar. Right now, the event times ONLY change if I change the system time on my laptop computer. I'm using version 1.5.3 and saw this in the documentation:
<script type='text/javascript'>
$(document).ready(function() {
$('#calendar').fullCalendar({
events: {
url: 'http://www.google.com/your_feed_url/',
className: 'gcal-event', // an option!
currentTimezone: 'America/Chicago' // an option!
}
});
});
</script>
I've tried setting currentTimezone and the times don't change. I've also searched through the included javascript files and can't any references of 'currentTimezone'. How is this possible in versions 1.5+?
Try setting ignoreTimezone to false.
<script type='text/javascript'>
$(document).ready(function() {
$('#calendar').fullCalendar({
events: {
url: 'http://www.google.com/your_feed_url/',
className: 'gcal-event', // an option!
currentTimezone: 'America/Chicago' // an option!
},
ignoreTimezone: false
});
});
</script>
Let me know if this helps.
I'm using the following JQuery block in my DotNetNuke module:
jquery(document).ready(function (){
$( "#dialog:ui-dialog").dialog("destroy");
$( "#dialog-message").dialog({
modal: true,
buttons: {
Ok: function(){
$( this ).dialog("close");
}
}
});
});
</script>
<div id="dialog-message" title="Registration Confirmed">
I'm not sure how to redirect the user to the home page when they click the Ok button? Also, how do I wire up the dialog-message DIV to only fire when my ASP:Button is clicked?
Thanks much!!
You can put an OnClientClick on your Button and call a function that will show your modal. When the ok button is clicked you can change the window.location to the path of your homepage.
HTML
<asp:Button runat="server" ID="btn_ShowModal" OnClientClick="showModal(); return false;" />
Javascript
function showModal()
{
$( "#dialog-message").dialog({
modal: true,
buttons: {
Ok: function(){
$( this ).dialog("close");
window.location = "pathToHomepage";
}
}
});
}
Edit
There are two types of paths that can be used in javascript and in web development in general: relative paths and absolute paths.
Relative paths: start from the current directory and you access the desired location from there using '/' to go forward a directory and '../' to go backward
Absolute paths: the full url to the desired location
You can find a more thorough description here
'~/' is a sever side "shortcut" that unfortunately does not work on the client side without using something like this.ResolveClientUrl.
'<%= this.ResolveClientUrl("~/default.aspx") %>'
<script type="text/javascript">
function ShowPopup(message) {
$(function () {
$("#dialog").html(message);
$("#dialog").dialog({
title: "Alert",
buttons: {
Close: function () {
$(this).dialog('close');
window.location = "home.aspx";
}
},
modal: true
});
});
};
</script>
client side
string message = "Profile Updated!!.";
ClientScript.RegisterStartupScript(this.GetType(), "Popup", "ShowPopup('" + message + "');", true);
I have a server side method that can take long time. I decided to display a loading process modal and for that I used this tutorial. It works fine, but my problem is the following.
I'm using jQuery UI/Tab on the same page and it contains two tabs. On postback all UI loses styles. As I understood, the problem is in UpdatePanel, and the solutions suggested is to use the function pageLoad(). But it solved my problem partially, because the last selected tab is not persisted on postback.
It worked fine before implementing the loading model process and I used the following :
$(function() {
$("#tabs").tabs({
show: function() {
var sel = $('#tabs').tabs('option', 'selected');
$("#<%= hidLastTab.ClientID %>").val(sel);
$( "#tabs" ).tabs( "option", "disabled", [<%= hidDisTab.Value %>] );
},
selected: <%= hidLastTab.Value %>
});
});
Is there any solution for this?
I have a similar problem and I sorted out using the following:
$(document).ready(function () {
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(load_lazyload);
load_lazyload();
}
function load_lazyload() {
//here you need to add the jquery functions related to the tabs, as well as other jquery code you may have
//i.e.
$(function () {
$(".datepicker").datepicker({ dateFormat: 'dd/mm/yy' });
});
}
Hope this helps,
UPDATE: Probably, for your specific case, it would be something like this:
$(document).ready(function () {
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(load_lazyload);
load_lazyload();
}
function load_lazyload() {
$(function() {
$("#tabs").tabs({
show: function() {
var sel = $('#tabs').tabs('option', 'selected');
$("#<%= hidLastTab.ClientID %>").val(sel);
$( "#tabs" ).tabs( "option", "disabled", [<%= hidDisTab.Value %>] );
},
selected: <%= hidLastTab.Value %>
});
});
}
You need to register a ClientSideScript that selects the current tab in whatever event/method that is being executed during the postback.