I have set subscribe popup box, but now because of Google penalty I need to have 2 different one for mobile and desktop. Function is set in function.php and ideally would like to keep it there but not sure how to gpo around it.
add_action( 'wp_footer', 'show_subscribe_popup' );
function show_subscribe_popup(){
if(is_front_page()){
//$subscribe_popup = '
//';
//echo $subscribe_popup;
include('inc/popup_form_test.php');
}
}
I created to form files and trying to incorporate var viewportWidth = $(window).width();
Any suggestions please
Related
Update #1: I've managed to get the page to refresh on click, but due to the delay in adding the additional product to the cart the billing fields aren't shown until a second refresh is done. So, simply refreshing the page on click is not a good solution.
Now, I'm thinking loading the whole checkout page via ajax might be a solution?
I'm not sure how to do this (or if it's even the best idea), so if anyone has a way to implement this or a better solution feel free to share.
Update #2: Here is a loom video that shows the problem in real time.
https://www.loom.com/share/8e49e8663f1c4599a306c9c9948636b2
When my mouse goes off-screen at 0:15 I'm refreshing the page.
---- Original Post ----
My checkout page is not adding the proper billing fields after an order bump is applied to the cart (via the checkbox to add an additional product to the order). This is causing customers to be charged but no order is generated on my side. This is because the cart refreshes via ajax, while the rest of the checkout page does not.
To replicate the error, add a free product to your cart from this page:
https://blacklotusaudio.com/free-downloads/
Then, skip the popup offer and head to checkout and click to add the additional product to your order via the order bump checkbox. You'll notice the billing fields stay the same unless you refresh the page, which is what I believe is causing the issue here.
So, my solution is to refresh the page every time the order bump is clicked, I'm just not 100% certain how best to do it.
I've tried adding a modified version of this code to the page, but I cannot correctly identify the right element(s) to target as there is no "button" on the order bump to select.
<button type="button" onClick="refreshPage()">Close</button>
<script>
function refreshPage(){
window.location.reload();
}
</script>
Any help in resolving this issue would be much appreciated. I'm sure there is a better way of solving this problem than refreshing the page, but right now that's the best I can come up with.
Edit - Here's what I'm using to make the free downloads work:
function sv_free_checkout_fields() {
// first, bail if WC isn't active since we're hooked into a general WP hook
if ( ! function_exists( 'WC' ) ) {
return;
}
// bail if the cart needs payment, we don't want to do anything
if ( WC()->cart && WC()->cart->needs_payment() ) {
return;
}
// now continue only if we're at checkout
// is_checkout() was broken as of WC 3.2 in ajax context, double-check for is_ajax
// I would check WOOCOMMERCE_CHECKOUT but testing shows it's not set reliably
if ( function_exists( 'is_checkout' ) && ( is_checkout() || is_ajax() ) ) {
add_filter( 'woocommerce_order_button_text', 'woo_custom_order_button_text' );
function woo_custom_order_button_text() {
return __( 'SEND MY DOWNLOADS', 'woocommerce' );
}
add_filter( 'woocommerce_checkout_fields', 'misha_email_first' );
function misha_email_first( $checkout_fields ) {
$checkout_fields['billing']['billing_email']['priority'] = 4;
return $checkout_fields;
}
add_filter('woocommerce_mailchimp_woocommerce_newsletter_default_checked', function ($checked) {
return true;
});
// remove coupon forms since why would you want a coupon for a free cart??
remove_action( 'woocommerce_before_checkout_form', 'woocommerce_checkout_coupon_form', 10 );
// Remove the "Additional Info" order notes
add_filter( 'woocommerce_enable_order_notes_field', '__return_false' );
// Unset the fields we don't want in a free checkout
add_filter( 'woocommerce_checkout_fields', function( $fields ) {
// add or remove billing fields you do not want
// fields: http://docs.woothemes.com/document/tutorial-customising-checkout-fields-using-actions-and-filters/#section-2
$billing_keys = array(
'billing_last_name',
'billing_company',
'billing_phone',
'billing_address_1',
'billing_address_2',
'billing_city',
'billing_postcode',
'billing_country',
'billing_state',
);
// unset each of those unwanted fields
foreach( $billing_keys as $key ) {
unset( $fields['billing'][ $key ] );
}
return $fields;
} );
}
}
add_action( 'wp', 'sv_free_checkout_fields' );
I'm using this code in functions.php on WordPress to generate an affiliate link based on the visitor location, It's working perfectly but the problem is that if page caching is turned on (W3 Total Cache), The variables get cached so if someone from the UK was the first one to open the page then the second one from Germany opened the page he will get the same link that the first visitor got.
One more thing please, I'm still very new to PHP and javascript so I would appreciate if the answer was simplified enough.
<?php
add_action( 'woocommerce_before_add_to_cart_button', 'affiliate_link', 10);
function affiliate_link() {
$not_avilable_country = '<div id="amz_not_avilable" class="amz_not_avilable">This product is not avilable in your country yet</div>';
// IP Geolocation
$country_code = $_SERVER ["HTTP_CF_IPCOUNTRY"];
// Get Custom Fields
$de_asin = get_post_meta(get_post()->ID, "wccaf_de_asin", true );
$uk_asin = get_post_meta(get_post()->ID, "wccaf_uk_asin", true );
//////////////////////////////////////////////
if ($country_code=="DE" or $country_code=="DE") {
$amazon_domain = 'https://www.amazon.de';
// $associate_id = 'bonstato-21';
$asin = $de_asin;
}
else if ($country_code=="GB" && $uk_asin!=="") {
$amazon_domain = 'https://www.amazon.co.uk';
// $associate_id = 'bonmedico-21';
$asin = $uk_asin;
}
///////////////////////////////////////////////
if( wp_is_mobile() ) {
// Amazon Link For Mobile
?>
<script>
function amzGo(){
window.location='<?php echo $amazon_domain ?>/dp/<?php echo $asin ?>/?tag=<?php echo $associate_id ?>';
}
</script>
<?php
}
else {
// Amazon Link For PC
?>
<script>
function amzGo(){
window.location='<?php echo $amazon_domain ?>/gp/aws/cart/add.html?AssociateTag=<?php echo $associate_id ?>&ASIN.1=<?php echo $asin ?>&Quantity.1=1';
}
</script>
<?php
}
?>
<div class="buy_amz_btn_wrap" >
<button type="button" id="buy_amz_btn" class="buy_amz_btn" onclick="amzGo();"><i class="fa fa-amazon fa-amz"></i><?php echo $amz_btn_title ?></button>
</div>
<?php
}
?>
A way to deactivate/disable W3 Total Cache on specific pages is to use another plugin called: "Plugin Organizer" by Jeff Sterup.
After installing and enabling it, go to settings (of the plugin) and follow the instructions to set it in the right way.
Once the plugin is enabled and settings are saved correctly, when you edit/create a new page using the editor you can see a checkbox that's show you which plugin to enable for that particular page and which to disable.
In this way you can disable W3 Total Cache on the page that's use your function on functions.php.
Hope it helps.
The most common way to bypass the cache is to serve this data via the WordPress json api and use java script to put the always fresh data into place.
The problem is not that the variable inside the code is being cached; what happens is that W3 Total Cache grabs the first page produced by your PHP code and store it in the hard disk of the server. Thenceforth, the browsers' requests are answered delivering the HTML static file stored in server's hard disk (PHP will not produce the same page again).
To solve this problem, you must transfer the "intelligence" inside your PHP code, which is responsible for create slightly different versions of your page, to your Javascript code. Bastian Haustein suggested one way to do that, using WordPress REST API. However, I would try first doing it in a simpler way: after page load, capture the link of your cached page and modify it according to the location of your visitor. Naturally, you will have to capture visitors geolocation also using JS - see the link suggested by cjmling: How to get visitor's location (i.e. country) using geolocation?
There is a social login wordpress plugin that produces a large popup window when authenticating a login from a social networking site (facebook, google, etc.)
I would like to make the popup window much smaller, but can't figure it out. The code the produces the popup window is:
if( get_option( 'wsl_settings_use_popup' ) == 1 || ! get_option( 'wsl_settings_use_popup' ) ){
?>
<html><head><script>
function init() {
window.opener.wsl_wordpress_social_login({
'action' : 'wordpress_social_login',
'provider' : '<?php echo $provider ?>'
});
window.close()
}
How do I set the width and height for this popup?
Thanks in advance!
UPDATE FOR CENTERED WINDOW
Add this 2 calculation just under provider = $(this).attr("data-provider");:
datop = (($(document).height()-400)/2);
daleft = (($(document).width()-225)/2);
Add this 2 parameters to the attributes:
top="+datop+",left="+daleft+""
like this:
"location=1,status=0,scrollbars=0,width=225,height=400,top="+datop+",left="+daleft+""
END
Edit
You can find the file here: wp-content/plugins/wordpress-social-login/assets/js/connect.js
End edit
The file is "wordpress-social-login\assets\js\connect.js" I don't know where this file will be installed, but probably you can find the function inside it in every page which contain the login (if you can locate it, you can unistall, edit the file and the reinstall with the file modified). This should be the function you are searching for:
(function($){
$(function(){
$(".wsl_connect_with_provider").click(function(){//selector.event
popupurl = $("#wsl_popup_base_url").val();//assign text of the element with id #wls_popup_base..
provider = $(this).attr("data-provider");//assign the attribute data-provider of the element with class .wls_connect..
window.open(
popupurl+"provider="+provider,//url
"hybridauth_social_sing_on", //window name
"location=1,status=0,scrollbars=0,width=1000,height=600"//attributes of the window
);
});
});
})(jQuery);
This should be the code of the popup
window.open(
popupurl+"provider="+provider,
"hybridauth_social_sing_on",
"location=1,status=0,scrollbars=0,width=1000,height=600"
);
To change width and height,edit this 2 params: ..width=1000,height=600"
Note that i add the comments to let you understand what the function do and what are you doing
I have a website I am currently developing and the client has a very unique request. They would like the user to be able to hit a button and print the contents of the browser window. I wanted to know if anyone has implemented similar functionality or knows any strategy to develop something like this as I do not have the first clue.
Example: I have 30 images on a page but only 4 fit in the viewable area or browser window. I would like to only print the exact content of the browser window / or elements that are viewable area.
Thanks in advance,
JN
This method requires jQuery, but might be able to be rewritten in plain javascript.
With a bookmarklet app of mine I found that the popup window was the most reliable way to print dynamic content and allowed the user to see the content before printing it. I also found that reducing the font size allowed fitting all the content on the page while sill be readable. You might try shrinking the images as well if that is an option. I had tried targeting media types with CSS and some jQuery print plugins but found them unreliable at best.
Here's the function I use to pass a jQuery object to be printed. I maximized the window on open and changed the title/font size. If you have more than images you'll need to clone your CSS as well, mine just happened to be stored in a variable from the bookmarklet loading.
function printElement(oElement) {
var oPopupWindow = window.open('', 'newwin', 'width=500,height=500');
oPopupWindow.moveTo(0,0);
oPopupWindow.resizeTo(screen.availWidth,screen.availHeight);
oPopupWindow.document.open();
var sHTML = '<html><head><title>TBA Enhanced User Interace</title>' +
_EUI.sCSS + '<style>img {display:none!important}table{font-size:8pt!important}</style></head><body>'
+ $('<div />').append(oElement.clone()).html() + '</body></html>';
oPopupWindow.document.write(sHTML);
oPopupWindow.document.close();
oPopupWindow.print();
oPopupWindow.close();
}
function isScrolledIntoView(elem)
{
var docViewTop = $(window).scrollTop();
var docViewBottom = docViewTop + $(window).height();
var elemTop = $(elem).offset().top;
var elemBottom = elemTop + $(elem).height();
return ((elemBottom >= docViewTop) && (elemTop <= docViewBottom));
}
function printVisibleImages() {
var oImageElement = $('<div />');
$('img').each(function() {
if (isScrolledIntoView(this)) {
oImageElement.append(this);
}
});
printElement(oImageElement);
}
Using the isScrolledIntoView function from this question: Check if element is visible after scrolling, something like the code above might work with some tweaking. Call printVisibleImages(), you might need to add some CSS for padding or pass the style sheets from the main page.
You could - in the same or a new window - wrap a DIV around all of the BODYs content and restrict the display area to currently visible . If there's a root-container-DIV for example...
<body>
<div id="theWholeDocument">
... content
</div>
</body>
... it can easily be done by jQuery:
$('#theWholeDocument').wrap( function() {
// get coordinates and dimensions of visible area first
// assing to var prLeft, prTop, prWidth, prHeight
return '<div style="position:absolute;left:"+prLeft+"px; top:"+prTop+"px; width:"+prWidth+"px; height:"+prHeight+"px; overflow:hidden"/>');
}
Should result in a Document that shows nothing else than what has been visible before. Printout schould look the same, like a screenshot - with propably cropped images at the bottom.
Make a jQuery function that loads a page on the click of a button via Ajax. (sending the page name as a post parameter). In that page, you do this:
$file = file_get_contents($_POST['file']);
echo $file;
and you style accordingly.
Maybe you can play around with Javascript (take a look at how to get window dimensions and scroll positions), but I don't realize how to print only that part of the document...
Maybe this can help you: snapshot from browser with flash or javascript
I have 30 images on a page but only 4 fit in the viewable area or
browser window.
I don't think you can say with certainty that the above works in all situations.
It is quite possible that many other browsers/resolutions will produce man different configurations, including some where the images are chopped off, etc.
The better solution, I think, is to offer X number of images per printed page and style accordingly.
One of the web apps needed something similar to what you are asking for. It is an FAQ link which produced an FAQ page and the user wanted the ability to print it, if they so chose.
I did this by simply adding a button to the html:
<input type="button" value="Print" onClick='window.print();' />
<input type="button" value="Close" onClick='window.close();' />
Because I popped this into its own little browser window, I stripped off all the other controls from the parent page via:
function popFaq() {
window.open('faq.html', '',
'left=10, top=10, width=550, height=700, resizable=1, ' +
'location=0, personalbar=0, scrollbars=1, statusbar=0, toolbar=0, menubar=0');
}
... and ...
<div id='hLink'>
<a title='Click Here for (F)requently (A)sked (Q)uestions' href='' onclick='popFaq(); return false;'>FAQ</a>
</div>
Hope that helps!
I'm building my first js/jQuery site and I've run into a hiccup. I'm trying to use both jScrollpane (Kelvin Luck) and scrollTo (Ariel Flesler) plugins in one script. If I comment one out, the other works. Are they mutually exclusive? Do I need to unbind functionality out of jScrollpane to remove a 'scrollTo' call conflict or something? (I have no idea how to do that).
I'm using jScrollPane 2beta11 and scrollTo 1.4.2. Here's my stripped-down code using both:
// JavaScript Document
$(document).ready(function() {
//jScrollPane Init
$('#scrollingDiv').jScrollPane({
});
//scrollTo Refresh
$('div.scroll-pane').scrollTo( 0 );
$.scrollTo( 0 );
//Buttons
var $scrollDiv = $('#scrollingDiv');
var next = 1;
$('#but-rt').click(function(){
$scrollDiv.stop().scrollTo( 'li:eq(1)', 800 );
next = next + 1;
});
});
I'm aware that jScrollPane has it's own scrollTo functionality, but I need scrollTo's jQuery Object selectors in my particular project. I know I've got my HTML/CSS lined up fine because each function works as long as the other is commented out.
(By the way, I plan on using "next" variable to increment scrollTo button once I figure out how... not related to my problem tho.)
Any help is much appreciated. Let me know if there's anything else I need to supply. Thanks!
-Patrick
See how to use ScrollTo functionality of JscrollPane from the following url,
http://jscrollpane.kelvinluck.com/scroll_to.html
Hope this will help you...
I too was trying to use both jScrollpane (Kelvin Luck) and scrollTo (Ariel Flesler) plugins in one script. I've come across an easy solution which doesn't even require Ariel Flesler's AWESOME Script, if you don't necessarily require animated scrolling.
I wanted to be able to scroll to a label in a list of items when the page loads.
Here's how i did it:
$(function()
//Declare the ID or ClassName of the Scroll Element
//and the ID or ClassName of the label to scroll to
MyList = $('#MyElementID OR .MyElementClassName');
MyLabel = $('#MyElementID OR .MyElementClassName');
// Initiate the Scrollpane
MyScroll = $(MyList).jScrollPane();
// Connect to the jScrollPaneAPI
jScrollPaneAPI = MyScroll.data('jsp');
// Get position co-ordinates of the Label
var MyLabelPosition = $(MyLabel).position();
// Convert position co-ordinates to an Integer
MyLabelPosition = Math.abs(MyLabelPosition.top);
// Scroll to the Label (0-x, vertical scrolling) :)
jScrollPaneAPI.scrollTo(0, MyLabelPosition-3, true);
});
There's a small bug with the exact positioning when a list gets longer,
will post a fix asap...
They are mutually exclusive because jScrollPane removes the real scrolling and replaces it with complex boxes-in-boxes being moved relative to each other via JS.
This is how I successfully mixed them -- I had a horizontal list of thumbnails; this code scrolled the thumbnails to the center:
Activated jScrollPane:
specialScrolling = $('#scrollingpart').jScrollPane();
In my serialScroll code, where I usually would call
$('#scrollingpart').trigger('goto', [pos]);
in my case, inside my
onBefore:function(e, elem, $pane, $items, pos)
I put code like this:
jScrollPaneAPI = specialScrolling.data('jsp');
//get the api to manipulate the special scrolling are
scrollpos=(Math.abs(parseInt($('.jspPane').css('left'), 10)));
//get where we are currently scrolled -- since this is a negative number,
//get the absolute value
var position = $('#scrollingpart .oneitem').eq(pos).position();
//get the relative offset location of the item we are targetting --
//note "pos" which is the index number for the items that you can access
//in serialScroll's onBefore:function
itempos=Math.abs(position.left);
//get just the x-axis location -- your layout might be different
jScrollPaneAPI.scrollBy(itempos-scrollpos-480, 0, true);
//the 480 worked for my layout; the key is to subtract the 2 values as above
Hope this helps someone out there!
This doesn't cater for all use cases (it only handles scrollToY and scrollToElement), but offers a consistent API so you can just use $( /* ... */ ).scrollTo( /* number or selector */ ) and it will work on any element, jScrollPane or native.
You could extend the method condition to cater for all the other jScrollPane methods by inferring the value passed in target though.
(function scrollPaneScrollTo(){
// Save the original scrollTo function
var $defaultScrollTo = $.fn.scrollTo;
// Replace it with a wrapper which detects whether the element
// is an instance of jScrollPane or not
$.fn.scrollTo = function $scrollToWrapper( target ) {
var $element = $( this ),
jscroll = $element.data( 'jsp' ),
args = [].slice.call( arguments, 0 ),
method = typeof target === 'number' ? 'scrollToY' : 'scrollToElement';
if ( jscroll ) {
return jscroll[ method ].call( $element, target, true );
}
else {
return $defaultScrollTo.apply( $element, args );
}
};
}();