I've been tearing my hair out over this for two days, and every time I think I've solved it, it just pops up again.
In my header.php I have the following code for displaying the number of items in the cart, and a simple show/hide div displaying the items themselves, along with a total:
<a id="miniart" href="<?php echo WC()->cart->get_cart_url(); ?>" class="cart icon red relative">
<div class="number bold">
<?php echo sprintf('%d', WC()->cart->cart_contents_count); ?>
</div>
<div>
<?php returnIcon('cart'); // This function simply displays an inline SVG ?>
</div>
<div id="cartcontents">
<div class="widget_shopping_cart_content">
<?php woocommerce_mini_cart(); ?>
</div>
</div>
</a>
I also have a filter to return the cart fragments via AJAX when a new item is added:
function woocommerce_header_add_to_cart_fragment($fragments) {
ob_start();
?>
<div class="number bold">
<?php echo sprintf('%d', WC()->cart->cart_contents_count); ?>
</div>
<?php
$fragments['#minicart .number'] = ob_get_clean();
return $fragments;
}
add_filter('woocommerce_add_to_cart_fragments', 'woocommerce_header_add_to_cart_fragment');
The filter always works - I've never had a problem with that. What's totally throwing me is that the standard, pre-processed calls in the header (cart_contents_count & woocommerce_mini_cart()) seem to be totally cached. If I add a new item, the AJAX will update both to display 1 and the actual item added; but if I change the page or refresh, it defaults back to 0 and No items. If I go to my cart, despite the mini-cart still saying I have nothing, the actual cart page displays the cart contents correctly.
It only appears to update if I go to my cart page and delete something from my cart; for example, if I've actually got 7 items in my cart but the minicart displays 0, and then delete an item from my cart, suddenly the minicart will corectly display 6. However, from that point it will stay at 6, even if I add another dozen items.
Here's what I've tried:
Change the classes/IDs of the elements (i,e, #minicart to #tinycart, etc.) - works once, then immediately starts caching again.
Turned off the filters: This has no effect, since the filter is only for returning fragments when new items are added. Also worth noting that there doesn't appear to be any kind of AJAX call fired at page load that would interfere with the minicart display.
Turned off all plugins except WooCommerce: made no difference.
Turned off 'Enable AJAX add to cart buttons on archives' in WC settings: This kinda works, insofar as it reloads the entire page when an item is added, and the minicart displays number of cart items correctly (hooray!), but obviously disables the ability to add items via AJAX, which is a requirement of the site (boo.)
Deleting my own mini-cart.php template file: Just in case, to see if that was an issue. Made no difference.
Putting the woocommerce_mini_cart() function literally anywhere else: This, infuriatingly, works. If I take this function and the echo sprintf('%d', WC()->cart->cart_contents_count) line and put them anywhere - within the header, within the page body, even inside the same element that's getting 'cached', they work. They display the correct number of items, and the correct list of items. But the other calls to this function, as noted above, still appear to be cached.
As noted, this occurs even with no other plugins running; it happens both locally (a completely standard XAMPP installation on Windows) and remotely (a niftier nginx setup, slightly newer PHP version), and neither have any kind of caching enabled.
Any suggestions would be very gratefully received, as I have totally lost my mind on this one.
A bit late but I tried your code and it worked for me with some small modifications.
I have changed the a id from miniart to minicart and commented out the returnIcon
<a id="minicart" href="<?php echo WC()->cart->get_cart_url(); ?>" class="cart icon red relative">
<div class="number bold">
<?php echo sprintf('%d', WC()->cart->cart_contents_count); ?>
</div>
<div>
<?php //returnIcon('cart'); // This function simply displays an inline SVG ?>
</div>
<div id="cartcontents">
<div class="widget_shopping_cart_content">
<?php woocommerce_mini_cart(); ?>
</div>
</div>
</a>
Another change was to rename woocommerce_header_add_to_cart_fragment to wif_woocommerce_header_add_to_cart_fragment
function wif_woocommerce_header_add_to_cart_fragment($fragments) {
ob_start();
?>
<div class="number bold">
<?php echo sprintf('%d', WC()->cart->cart_contents_count); ?>
</div>
<?php
$fragments['#minicart .number'] = ob_get_clean();
return $fragments;
}
add_filter('woocommerce_add_to_cart_fragments', 'wif_woocommerce_header_add_to_cart_fragment');
Related
I am trying to change the default text thats in the empty side cart on WooCommerce. It just doesn't look inviting at all.
For some reason all my atempts fail, I have limited understanding of PHP but for the love of god I can't see anything wrong with me code.
This code has been added as a PHP snippet:
add_action( 'woocommerce_mini_cart_empty_message', 'custom_empty_cart_message', 10 );
function custom_empty_cart_message() {
?>
<div class="woocommerce-mini-cart__empty-message">
<img src="<?php echo get_stylesheet_directory_uri(); ?>/images/SD-logo.png" alt="Empty Cart Image">
<p>Your cart is currently empty.</p>
Shop Now
</div>
<?php
}
Possible solutions that won't work include translation and gettext and replace text since I want an image and button in there. If anyone has a clue how to solve this please do reply as your help is much appreciated
Replace the default empty side cart message with an image, text and button
I have been struggling with this problem for the last two weeks now, and the problem is that I am not able to display the ajax load more (and any of its post and even the button) on my custom archive page. I want to provide a sleek archive for my visitors, allowing them to just scroll in previous posts without having to use any pagination. And the strange thing is, when I echo the shortcode for the ajax load more, it doesn't display at all. When I inspect the code, it has been automatically set to visibility:hidden. What really seems to be the problem here?
How can I display this in my "page-arkiv.php"?
Plugin used: https://wordpress.org/plugins/ajax-load-more/
Code:
<h1>TEST PAGE </h1>
<?php echo do_shortcode('[ajax_load_more]'); ?>
Output:
<div id="ajax-load-more" class="ajax-load-more-wrap default" data-alm-id="" data-canonical-url="http://whatever.com/arkiv/" data-slug="arkiv" data-post-id="73">
<div class="alm-listing alm-ajax" data-repeater="default" data-post-type="post" data-order="DESC" data-orderby="date" data-offset="0" data-posts-per-page="5" data-scroll="true" data-scroll-distance="100" data-max-pages="0" data-pause-override="false" data-pause="false" data-button-label="Older Posts" data-transition="fade" data-images-loaded="false">
</div>
<div class="alm-btn-wrap" style="visibility: hidden;"><button class="alm-load-more-btn more " rel="next">Older Posts</button></div></div>
And this is my Reading settings:
In my wordpress site, I have a page that has 3 sections. Every section contains posts from a specific category. I use this wordpress query to get the latest 3 posts in that category and load it in it's section(div). So, for "Novels" section, I use this query:
<? $novels = get_option('of_novels') ?>
<?php $paged = (get_query_var('paged')) ? get_query_var('paged') : 1; query_posts('category_name=$novels&posts_per_page=3'); ?>
<?php while (have_posts()) : the_post(); ?>
<div class="sliderunit">
<?php the_post_thumbnail(); ?>
<div class="novelsslidertitle">
<div class="arrow-left"></div>
<img class="cross" src="<?php bloginfo('stylesheet_directory'); ?>/images/cross.png"/>
<?php the_title(); ?>
<h3>رواية</h3>
</div>
</div>
<?php endwhile;?>
and that gets me the latest 3 posts in #novels category. Now, I have some buttons. I want to write some jequery to loop on this category and get previous and next posts, and reloads the new queries content to that #novels div, replacing the old query code in the html using
$("<div/>").replaceWith("// Replace with a function to get the code of new output");
to act as a slider without using pagination and reloading the page? I hope my problem is well declared, I appreciate any helpful clues, links or references.
I don't think $.replaceWith is really what you need here. You would just listen for when the user reaches a certain point, maybe the last in the currently loaded posts, or the second to last, then run $.ajax() or similar query, append that to your #sliderunit and it will make it so you be able to continue scrolling/sliding. By appending and not replacing, you can go back and forth if you want without having to reload anything. If you are concerned about memory management, you could use $.remove() at a certain threshold.
In case you need a little more info on how to do this, start by appending your new data, then using CSS manipulation such as $.animate() to perform the slide effect. You can either use layers to hide things you don't want showing, or I guess you could also call $.hide() on blocks you don't want shown.
I have a web page I am working on in WP which needs some customization.
Firstly I have created a page template that will be used over and over again, only changing parts of the content. I am wondering about available options for me when enabling this fact, through the Admin panel in the HTML Editor(if possible)...
Hope my question is clear enough for you all.
Let me add some code to show what I am trying to accomplish.
<div id="header-style">
<?php get_header();?>
</div>
<div id="content">
<div id="about">
//This is what i want to be able to edit
</div>
<div id="features">
//This is what i want to be able to edit
</div>
</div>
Dino:
There are lots of ways you could do this. The main question I would ask you is, who is going to be adding/editing this content? If you're going to have a community of people adding content, the input needs to be stripped and sanitized (to avoid injecting tags or other harmful content). If its just going to be you, then here's the easiest/fastest solution:
Use custom fields. If you can't see them in the post/page edit screen, go to the little tab on the top right of the post-edit screen that says Screen Options (or something like that) and click "Custom Fields".
Once you can see the Custom Fields edit box, you can add as many fields as you want. These are stored as post meta data. You can use the <?php the_meta(); ?> function in the loop to display all of your custom fields.
You can access a specific field by using get_post_meta(). You pass in the postID and the key of the meta field:
<?php echo get_post_meta(get_the_ID(), 'my_key'); ?>
So, for your example, you would add in the post-edit screen:
about: Some text to go in the about section.
features: Some text to go in the features section.
Then, you would access these on your page like so:
<div id="header-style">
<?php get_header();?>
</div>
<div id="content">
<div id="about">
<?php echo get_post_meta(get_the_ID(), 'about'); ?>
</div>
<div id="features">
<?php echo get_post_meta(get_the_ID(), 'features'); ?>
</div>
</div>
I have recently installed a new template(more specifically SquirrelTheme - a free template) in my wordpress blog. It happens that I would like to have two buttons on my front page. Let's say button X and button Y. For creating these buttons I use a plugin called "MaxButtons" which allows you to easily create and manage a button and it's functions. After creating the said button, it gives you a shortcode that you can insert in your posts and pages - lets say [maxbutton id="1"] - to display it.
Unfortunately, after editing the template to my liking(removing divs I didn't intend to display), I can't seem to display these two buttons as the template parses plain-text, unlike the pages/posts apparently.
In case you are wondering how I am inserting the shortcode for the buttons, the template can be easily modified through the dashboard, in which I inserted the following in the field that dictates what is displayed on the specific part of my homepage:
[maxbutton id="1"] [maxbutton id="2"]
Like I said before, instead of showing the buttons as intended, I just see exactly what I type in the box.
I believe this is caused by how the template parses the text, as it uses its own function(? - php _e('...')) to echo the text:
<div class="full_content">
<center>
<?php if (squirrel_get_option('squirrel_slidehead') != '') { ?>
<h1><?php echo stripslashes(squirrel_get_option('squirrel_slidehead')); ?></h1>
<?php } else { ?>
<h1><?php _e('We are scope, a design firm in England', 'squirrel'); ?></h1>
<?php } ?>
<?php if (squirrel_get_option('squirrel_slidedesc') != '') { ?>
<h2><?php echo stripslashes(squirrel_get_option('squirrel_slidedesc')); ?></h2>
<?php } else { ?>
<p><?php _e('Newfoundland dogs are good to save children from drowning, but you must have a pond of water handy and a child.', 'squirrel') ?></p>
<p><?php _e('From drowning, but you must have a pond of water handy and a child.', 'squirrel'); ?></p>
<?php } ?>
</center>
</div>
My question is, how can I get it to display the buttons or any other code.
Thanks in advance.
You can call the function do_shortcode() to do the proper shortcode processing on some text.
Example:
echo do_shortcode('This is a button: [maxbutton id="1"]');