I am using this script in an attempt to set the visibility styling of a div and store it as a cookie, site-wide. My understanding is that path=/ should set the cookie to store at the root and thus be available to all pages - passing the value to the other pages to either keep the div's visibility, visible or hidden, depending on the users preference. However, checking the output, it appears as though the cookie is only being stored 'per-page'. What am I missing? I have placed the script in the header and it is loaded on every custom post/page of my wp theme. (omitted) - there is a toggle button top left of the page, show/hide comments.
// Placed above </head> tag on my header-webmockups.php file
<script type="text/javascript">
$( function () {
var toggle = $( '.toggle' );
var comments = toggle.find( '.comments' );
if ( $.cookie( 'divState' ) == 'visible' )
comments.show();
else
comments.hide();
toggle.find( 'a' ).click( function () {
if ( comments.is( ':visible' ) )
$.cookie( 'divState', 'hidden' );
else
$.cookie( 'divState', 'visible' );
comments.toggle();
} );
} );
$.cookie( "divState", 1, {
expires: 10000
} );
</script>
// Placed at the top of my comments.php loop (toggle div closes after page content)
<div class="toggle"><a>Show/Hide Comments</a>
// Placed after <?php wp_head(); ?> of post's custom header.php
<?php wp_enqueue_script("jquery-cookie", get_stylesheet_directory_uri().'/js/lib/jquery.cookie.js', array( 'jquery' ), '0'); ?>
You need to add expiration date to your cookie.
For example
$.cookie("test", 1, { expires : 10000 });
As i see from your URL and code, you haven't set it and it works in current session only.
So after all your script block should look like so: (remove current block entirely and paste this one)
<script type="text/javascript">
jQuery( function ($) {
var toggle = $( '.toggle' );
var comments = toggle.find( '.comments' );
if ( $.cookie( 'divState' ) == 'visible' )
comments.show();
else
comments.hide();
toggle.find( 'a' ).click( function () {
if ( comments.is( ':visible' ) )
$.cookie( 'divState', 'hidden', {expires: 10000, path: '/'} );
else
$.cookie( 'divState', 'visible', {expires: 10000, path: '/'} );
comments.toggle();
} );
} );
</script>
Related
I want to create a conditional logic quiz (chained quiz) with wpbakery. I want to click on a column and then show a diferent row. On click i want to hide the first row. I've already got the code for the first part but cant seem to figure out how to hide the first row.
// CSS - Add wherever you put your custom CSS.
body:not(.compose-mode) .my-hidden-row:not(.my-hidden-row--active) {
display: none;
}
// PHP - Add to child theme functions.php or via Code Snippets plugin.
add_action( 'wp_footer', function() { ?>
<script>
document.addEventListener( 'click', function( event ) {
button = event.target.closest( '.my-hidden-row-toggle' );
if ( ! button ) {
return;
}
var link = button;
if ( 'A' !== link.tagName ) {
link = button.querySelector( 'a' );
}
if ( ! link ) {
return;
}
var href = link.getAttribute( 'href' );
if ( ! href ) {
return;
}
var hiddenRow = document.querySelector( href );
if ( hiddenRow ) {
hiddenRow.classList.toggle( 'my-hidden-row--active');
}
event.preventDefault();
event.stopPropagation();
} );
</script>
<?php }, 99 );
Is there a hook that I can use to change the customer column heading to the company name?
As mentioned in the comments there are no hooks you can use here as the Analytics pages are rendered via JavaScript.
The code snippet below will add a mutation observer checking if the table on the order analytics page is changing (as these headers are being added dynamically via JavaScript). Each time a change (mutation) is registered it checks for the 'Customer' header. If it is found it is changed to 'Company name'. Perhaps not the most elegant solution but it does work.
add_action( 'admin_footer', 'woocommerce_analytics_change_customer_header' );
function woocommerce_analytics_change_customer_header() {
if ( isset( $_GET['page'] ) && isset( $_GET['path'] ) ) {
if ( $_GET['page'] == 'wc-admin' && $_GET['path'] == '/analytics/orders' ) {
?>
<script>
jQuery( function( $ ) {
// select the target node
var target = document.querySelector('#woocommerce-layout__primary');
// create an observer instance
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
if ( $('th.woocommerce-table__header').length ) {
$('th.woocommerce-table__header').each(function(){
let $label = $(this).find('span');
if ( $label.text() == 'Customer' ) {
$label.text('Company name');
}
});
}
});
});
// configuration of the observer:
var config = { attributes: true, childList: true, characterData: true, subtree: true };
// pass in the target node, as well as the observer options
observer.observe(target, config);
});
</script>
<?php
}
}
}
This code snippet should be added to the functions.php of your child theme or via a plugin like Code Snippets.
I wish to include a button on the website so that users can toggle out of stock items on and off.
By default, I want the out of stock items to be false. When the user browses around I need the setting he applies to be consistent. Is this possible?
This is what I have till now:
/*
* ADDING A SIMPLE BUTTON TO SHOW OR HIDE SOLD PRODUCTS
* source: https://www.offshorly.com/news/woocommerce-show-hide-sold-products-toggle/
*/
function hide_sold_products_param() {
global $wp;
$wp->add_query_var('hide_sold_products');
}
add_filter('init', 'hide_sold_products_param');
add_action('pre_get_posts', 'hide_sold_products_query', 10);
function hide_sold_products_query($query){
if($query->get('hide_sold_products') == 'true'){
$query->set('meta_query', array(
array(
'key' => '_stock',
'value' => '0',
'compare' => '>'
)
));
}
}
I also have a button on the sidebar to toggle the status.
Currently, it is not consistent
The default is not hiding out of stock items
Any help is greatly appreciated.
I looked more into this and came up with a solution, it is not ideal but it does work the way that I wanted it too. I think your biggest issue is you need to store the toggle on/off into the users session so that it gets saved as they navigate it. In header.php I added:
if (isset($_GET['hide_sold_products']) && $_GET['hide_sold_products'] === 'true') {
WC()->session->set( 'hide_sold_products', 1 );
}
if (isset($_GET['hide_sold_products']) && $_GET['hide_sold_products'] === 'false') {
WC()->session->set( 'hide_sold_products', 0 );
}
This stores the users hide/show value from the ?hide_sold_products= url variable.
Again the following is not ideal but I'll share, also added this to header.php
<?php
if($wp->request == 'store'){
$url = $wp->request;
} else {
$url = strstr($wp->request, '/', true);
}
if(!isset($_GET['hide_sold_products']) && $url == 'store'){
$currentUrl = "http://" . $_SERVER['HTTP_HOST'];
$hide_sold_products = WC()->session->get( 'hide_sold_products' );
if($hide_sold_products == 1){
$hide_sold_products_text = 'true';
} else {
$hide_sold_products_text = 'false';
}
?>
<script>
window.location = "<?php echo $currentUrl . '/' . $wp->request . '/?hide_sold_products=' . $hide_sold_products_text; ?>";
</script>
<?php } ?>
This checks to see if the user is trying to access the /store/ url in woocommerce and then will redirect them and add ?hide_sold_products= with the true/false from the session value then the url calls functions.php script. Also on your toggle button/text on the front end the show toggle needs to have this appended to it: ?hide_sold_products=false
Other than the JS redirection this works well for me. I tried the wp_redirect() but ran into the headers already sent issue since the code is in the header.php
I m using WP pointers in my code...Pointers not display again after i dismiss it once... i deleted my plugin and again activate it but wp pointers not display again... If i install a new wordpress then WP Pointers display but when i dismiss it, then it never comes agains.. Is there a way that when plugin is activated wp pointers appears again...?? Here is my code
function thsp_enqueue_pointer_script_style( $hook_suffix ) {
// Assume pointer shouldn't be shown
$enqueue_pointer_script_style = false;
// Get array list of dismissed pointers for current user and convert it to array
$dismissed_pointers = explode( ',', get_user_meta( get_current_user_id(), 'dismissed_wp_pointers', true ) );
// Check if our pointer is not among dismissed ones
if( !in_array( 'thsp_pointer', $dismissed_pointers ) ) {
$enqueue_pointer_script_style = true;
// Add footer scripts using callback function
add_action( 'admin_print_footer_scripts', 'thsp_pointer_print_scripts' );
}
// Enqueue pointer CSS and JS files, if needed
if( $enqueue_pointer_script_style ) {
wp_enqueue_style( 'wp-pointer' );
wp_enqueue_script( 'wp-pointer' );
}}add_action( 'admin_enqueue_scripts', 'thsp_enqueue_pointer_script_style' );
function thsp_pointer_print_scripts() {
$pointer_content = "<h3>My New Plugin</h3>";
$pointer_content .= "<p>If you ever activated a plugin, then had no idea where its settings page is, raise your hand.</p>";
?>
<script type="text/javascript">
//<![CDATA[
jQuery(document).ready( function($) {
$('#toplevel_page_settings').pointer({
content:'<?php echo $pointer_content; ?>',
position:{
edge: 'left', // arrow direction
align: 'center' // vertical alignment
},
pointerWidth: 350,
close:function() {
$.post( ajaxurl, {
pointer: 'thsp_pointer', // pointer ID
action: 'dismiss-wp-pointer'
});
}
}).pointer('open');
});
//]]>
</script>
Dismissed pointers are stored in the wp_usermeta table, for each user, sub meta key dismissed_wp_pointers. Ideally, your plugin should remove the IDs of your pointers for each user on deactivation (see register_deactivation_hook), if you want them to reappear on reactivation.
I have a set of different map types (styles). As you can see in the simplified example, I try to switch the map types with an onClick event.
This works great for the default - by google.maps provided - styles. But when I try to switch to my custom style, I have a delay of ~2-3 seconds (local environment) and then get a completely grey map (nothing on the tiles).
I know that the map style itself works (not the same as in the linked example), because it's my initial map style. So only the switch back to my custom style is not working. Sadly I get nothing in the console and don't know how I could debug this.
<?php
// Inside the init(); function:
?>
var custom_style = [
{
featureType: 'water'
,stylers: [
{ hue: "#009ee0" }
,{ saturation: 100 }
,{ lightness: 0 }
]
}
];
var CUSTOMMAPTYPE = new google.maps.StyledMapType(
custom_style,
// Options:
{
alt: "Show Custom style",
name: "custom"
}
);
<?php
// Inside the view
$map_types = array(
'Roadmap'
,'Terrain'
,'Satellite'
,'Hybrid'
,'CustomMapType'
);
foreach ( $map_types as $index => $type )
{
?>
<span
class="map-type"
onClick="
my_map.setMapTypeId( google.maps.MapTypeId.<?php echo strtoupper( $type ); ?> );
// This is funny: I can access all mapType objects without a problem:
console.log( my_map.mapTypes.<?php echo strtolower( $type ); ?> );
"
id="<?php echo strtolower( $type ); ?>"
>
<?php echo $type; ?>
</span>
<?php
}
?>
Any help is highly appreciated.
Thanks in advance
EDIT:
Here's something other I tried (from inside my init(); fn, that does the setup for the map):
// The map type control DOM/UI Element
var map_type_controls = document.getElementsByClassName( 'map-type' );
// using jQuery to add a DOM listener function for click events to the UI elements:
jQuery.each( map_type_controls, function() {
google.maps.event.addDomListener( this, 'click', function() {
var control_id = jQuery( this ).attr( 'id' );
var control = control_id.toUpperCase();
// uncomment to debug:
// Shows all map type control DOM element correct
// console.log( control );
// Shows all registered mapType objects incl. the custom one correct:
// console.log( my_map.mapTypes );
my_map.setMapTypeId( google.maps.MapTypeId[ control ] );
// Per recommendation - doesn't help
google.maps.event.trigger( atlas_map, "resize" );
} );
} );
Normally when you modified a property of a map, let's say a new coordinates or a zoom, even if you change the size of the container (div), you should trigger the event called resize it's the only way to avoid this problem, now, i don't know if this works when you change the type of the map but you should try, the code it's the following:
google.maps.event.trigger(map, "resize");