I am running a loop that will pick up any news items that should appear in a corner pop up on a website. I have the popup working great for the first item, but the second doesn't show. I've tried to do it by calling the function twice with a different delay & timeout on each one, so they should appear in sequence. I don't really do much jquery/javascript, so I don't understand why that doesn't work. I am guessing it is because the function is the same? Can anyone help me out? Code below!
TIA
<?php $delay = 50;
$timeout = 3000;
$i = 1;
while ( $loop->have_posts() ) : $loop->the_post(); ?>
<?php if (have_rows('home_page_pop_up')) :
while(have_rows('home_page_pop_up')) : the_row();
if (get_sub_field('show_home') == 'Yes') :
$showdate = get_sub_field('until_date');
$today = date('Ymd');
if ( $today <= $showdate ):
?>
<script>
jQuery.fn.cornerpopup({
variant: 9,
//displayOnce: true,
slide: true,
timeOut: <?php echo $timeout; ?>,
delay: <?php echo $delay; ?>,
link2: "<?php echo site_url(); ?>/news-community/",
header: "Recent News",
text2: "<h5><?php the_title(); ?></h5><p><?php the_excerpt(); ?> ... <a href='<?php the_permalink(); ?>'>Read more</a></p>",
button3: "View all News",
stickToBottom: true,
});
</script>
<?php endif;
endif;
$i++;
$delay = $delay + 3000;
$timeout = $timeout + 3000;
endwhile;
endif;
endwhile;
?>
Related
I am trying to build a simple interface in Woocommerce where a product gets added straight to the mini cart next to it with AJAX, rather than having the page refresh every time you add an item to the cart. Unfortunately I cannot get the AJAX to work and the page just keeps refreshing.
woocommerce.php - the default woocommerce page:
<?php
//LOOP THROUGH ALL PRODUCTS
$args = array( 'post_type' => 'product');
$loop = new WP_Query( $args );
echo "<ul class='mylisting'>";
while ( $loop->have_posts() ) : $loop->the_post();
global $product;
$id = $product->get_id();
$item_name = $product->get_name();
if( $product->is_type( 'variable' ) ){
$class = "variable-product";
} else {
$class = NULL;
}
//OUTPUT PRODUCTS
?>
<li>
<a class="menu-link <?php echo $class; ?>" data-product_id="<?php echo $id; ?>" href="/wpdev/shop/?add-to-cart=<?php echo $id; ?>"><?php echo $item_name." - ".$id; ?></a>
</li>
<?php if( $product->is_type( 'variable' ) ) : ?>
<div id="product-popup-<?php echo $id; ?>" class="product-popup">
<div class="popup-inner">
<?php woocommerce_variable_add_to_cart(); ?>
</div>
</div>
<?php endif; ?>
<?php
endwhile;
echo "</ul>";
wp_reset_query();
?>
<!-- DISPLAY MINI CART -->
<div id="mini-cart-container">
<?php woocommerce_mini_cart(); ?>
</div>
main.js - Main javascript file:
$('.menu-link').click(function(){
jQuery.ajax({
url : woocommerce_params.ajax_url,
type : 'post',
data : {
'action': 'ajax_update_mini_cart'
},
success : function( response ) {
$('#mini-cart-container').html(response);
}
});
});
functions.php
function ajax_update_mini_cart() {
echo wc_get_template( 'cart/mini-cart.php' );
die();
}
add_filter( 'wp_ajax_nopriv_ajax_update_mini_cart', 'ajax_update_mini_cart' );
add_filter( 'wp_ajax_ajax_update_mini_cart', 'ajax_update_mini_cart' );
The goal is to get the woocommerce_mini_cart() function to update with ajax. Is this possible?
I suspect the problem lies with the way I have coded the javascript ajax function, but I'm not sure. Any help would be greatly appreciated.
UPDATE: Moe's solution below has now been added, which has stopped the page reloading but the cart still doesn't update. Echoing some text inside the ajax_update_mini_cart() function does ajax that text inside the mini-cart-container div where the mini-cart should be, which proves (I think) that the javascript function and the php function is working. I think for some reason the problem comes when the echo wc_get_template( 'cart/mini-cart.php' ); is placed inside the function. Does anyone know why this is?
its following the href. try the following
$('.menu-link').click(function(e){
e.preventDefault();
jQuery.ajax({
url : woocommerce_params.ajax_url,
type : 'post',
data : {
'action': 'ajax_update_mini_cart'
},
success : function( response ) {
$('#mini-cart-container').html(response);
}
});
});
IN Woocommerce, I use Header & Footer plugin to add on body tag a tracking affiliate code for the whole site.
The code is:
<script async src="//go.linkwi.se/delivery/js/tl.js"></script>
<script>
window.lw=window.lw||function(){(lw.q=lw.q||[]).push(arguments)};lw.l=+new Date;
lw("setProgram", "12838");
lw("setDecimal", ".");
</script>
My affiliate partner ask me the code be disabled from woocommerce thank you page (according the image - Line935 to 940).
woocommerce thank you page source code:
I think I need to add_filter action or something to disable it.
Any help will be useful for this.
UPDATE: If I remove the code from Header & Footer plugin is disabled from the whole site.
Instead of using a plugin, use the following to avoid your script to be loaded on thankyou page.
You have 2 choices:
1) On Footer (the best choice, I think):
add_action( 'wp_footer' , 'linkwi_delivery_script' );
function linkwi_delivery_script(){
// Not on thankyou page
if( is_wc_endpoint_url('order-received') ) return;
?>
<script async src="//go.linkwi.se/delivery/js/tl.js"></script>
<script>
window.lw=window.lw||function(){(lw.q=lw.q||[]).push(arguments)};lw.l=+new Date;
lw("setProgram", "12838");
lw("setDecimal", ".");
</script>
<?php
}
2) On Header:
add_action( 'wp_head' , 'linkwi_delivery_script' );
function linkwi_delivery_script(){
// Not on thankyou page
if( is_wc_endpoint_url('order-received') ) return;
?>
<script async src="//go.linkwi.se/delivery/js/tl.js"></script>
<script>
window.lw=window.lw||function(){(lw.q=lw.q||[]).push(arguments)};lw.l=+new Date;
lw("setProgram", "12838");
lw("setDecimal", ".");
</script>
<?php
}
Code goes in function.php file of your active child theme (or active theme). It should works.
So finaly my code in child function.php it look like this.
// Utility function that contain Linkwise Affiliate script
function linkwise_affiliate_scripts( $order_id ){
## --- YOUR SETTINGS START BELOW --- ##
$program_id = '12838'; // <== Your program number
$decimal_sep = '.'; // Decimal separator
$currency = '978'; // For "EUR" => See: https://en.wikipedia.org/wiki/ISO_4217
## --- END SETTINGS --- ##
$order = wc_get_order( $order_id );
$order_status = $order->get_status();
$items_string = array();
$count = 0;
?>
<script async src="//go.linkwi.se/delivery/js/tlwt.js"></script>
<script>
window.lw=window.lw||function(){(lw.q=lw.q||[]).push(arguments)};
lw .l=+new Date;
lw("setProgram", "<?php echo $program_id; ?>");
lw("setDecimal", "<?php echo $decimal_sep; ?>");
</script>
<script>
lw("setCurrency", "<?php echo $currency; ?>"); // Set your currency
<?php
foreach( $order->get_items() as $item ):
$count++;
$item_id = $item->get_id(); // The item ID
// Get an instance of the WC_Product object
$product = $item->get_product();
$product_id = $item->get_product_id(); // Product ID
$price_excl_vat = wc_get_price_excluding_tax( $product ); // Unit price excluding VAT
$item_qty = $item->get_quantity(); // Item quantity
$payout = '1'; // (???)
// The string for the <noscript> at the bottom
$items_string[] = "itemid[$count]=$item_id&itemprice[$count]=$price_excl_vat&itemquantity[$count]=$item_qty&a
mp;itempayout[$count]=$payout";
?>
lw("addItem", {
id: "<?php echo $item_id; // Or can be the product ID (may be) ?>"
,price: "<?php echo $price_excl_vat; ?>"
,quantity: "<?php echo $item_qty; ?>"
,payout: "<?php echo $payout; ?>"
});
<?php
endforeach;
// Set the array of items strings in a unique string
$items_string = implode( '&', $items_string );
?>
// Other items types
<?php
$coupon_discounts = $coupon_discounts_tax = 0;
foreach( $order->get_items('coupon') as $item_coupon ){
$coupon_discounts += $item_coupon->get_discount();
$coupon_discounts_tax += $item_coupon->get_discount_tax();
}
?>
lw("setCoupon", "<?php echo $coupon_discounts; ?>");
lw("thankyou", {
orderid: "<?php echo $order_id; ?>"
,status: "<?php echo $order_status; ?>"
});
</script>
<noscript>
<img
src="//go.linkwi.se/delivery/acl.php?program=<?php echo $program_id; ?>&decimal=<?php echo $decimal_sep; ?>&<?php echo $items_string; ?>&coupon_price=<?php echo $coupon_discounts; ?>&status=<?php echo $order_status; ?>&orderid=<?php echo $order_id; ?>" style="width:0px;height:0px;"/>
</noscript>
<?php echo 'test';
}
add_filter( 'wp_footer', 'wc_linkwise_affiliate_order_received_integration' );
function wc_linkwise_affiliate_order_received_integration() {
if ( ! is_wc_endpoint_url( 'order-received' ) )
return; // Exit
global $wp;
$order_id = absint( $wp->query_vars['order-received'] );
if ( empty($order_id) || $order_id == 0 )
return; // Exit
linkwise_affiliate_scripts( $order_id ); // Run the Linkwise Affiliate
}
add_action( 'wp_footer' , 'linkwi_delivery_script' );
function linkwi_delivery_script(){
// Not on thankyou page
if( is_wc_endpoint_url('order-received') ) return;
?>
<script async src="//go.linkwi.se/delivery/js/tl.js"></script>
<script>
window.lw=window.lw||function(){(lw.q=lw.q||[]).push(arguments)};lw.l=+new Date;
lw("setProgram", "12838");
lw("setDecimal", ".");
</script>
<?php
}
I have this simple counter php code and use it in Wordpress. Here is the code:
$counter = 0;
while ($query->have_posts())
{query->the_post();$counter++;
Which works fine. But when I go to page 2, then the counter resets and starts back at 1. Is there a way that it continues counting on page 2, page 3 and so on?
the url in the browser address is: /?sf_paged=2 for page 2 and /?sf_paged=3 for page 3 etc...
Is there some if code I can do, like:
if $url = /?sf_paged=2 {
$counter2++; }
else if $url = /?sf_paged=3 {
$counter3++; }
something like that?
Init your counter like this
$counter = $_GET['sf_paged'] ? intval($_GET['sf_paged']) * $posts_per_page : 0;
Then $counter++ will be what you want.
If you want to get the number of all the posts in the query, use:
$query->found_posts
If you want to see how many posts are there from page 1 to n (where 'n' is the current page) I suggest use a simple multiplication:
$paged = ( get_query_var('paged') ) ? get_query_var('paged') : 1;
$postnum = $paged*$query->posts_per_page;
Or you could try to store it in a $_GET parameter, a cookie or a sessionStorage / localStorage. :)
try this one should works fine
<?php
$i = 0; //counter
$post_in_page = 4; //number of posts in loop
$paged = ( get_query_var('paged') ) ? get_query_var('paged') : 1; //pagi
$guide = "post_type=post&posts_per_page=$post_in_page"; //loop option
?>
<?php query_posts($guide.'&paged=' . $paged); while(have_posts()) : the_post(); ?>
<?php
$i++; //here counter
if(get_query_var('paged') != 1){ // here if current page not first page
echo get_query_var('paged')*$post_in_page+$i-$post_in_page; // that's it :D
}else{
echo $i;
}
?>
<li>
<?php echo get_the_title(); ?>
<br />
</li><!--End Loop-->
<?php endwhile; ?>
<ul class="pagnum">
<li><?php next_posts_link();?></li>
<li><?php previous_posts_link(); ?></li>
</ul><!--End pagnum-->
<?php wp_reset_query();?>
I have been looking at this code for far too long and am getting nowhere so hopefully someone can help me!
I am building a wordpress site, and for the main blog page, I want to display the content as tiles, but every 3 or 7, I want to display a promo content post-type. I can do this fine, but when I add a Load More Posts button, it resets the counter that I have keeping track of my extra promo content back to 0, therefore only showing the first 2 promo pieces over and over with each new load.
I would appreciate any help. I'm going in circles now.
the important parts of the home.php file :
<div class="blog-post-tiles">
<?php
//variables
$counter = 0;
$promo_counter = 0;
$args = array(
'post_type' => 'promo',
);
//$postlist = new WP_Query( $args );
$postlist = get_posts($args);
$posts = array();
foreach ( $postlist as $post ) {
$promo_posts_array[] += $post->ID;
}
?>
<?php if ( have_posts() ) : ?>
<?php $query = new wp_query( $query_string.'&cat=-16' );
while ( $query->have_posts() ) : $query->the_post() ?>
<?php
// print post loop
get_template_part( 'template-parts/content', get_post_format() );
$counter++;
//display promo content ever 3rd or 10th spot
if (($counter == 3) || ($counter % 10 == 0) || ($counter % 10 == 3)) {
if ($promo_counter < count($promo_posts_array)){
$print_post = $promo_posts_array[$promo_counter];
$promo_thumbnail_src = wp_get_attachment_image_src( get_post_thumbnail_id($print_post), array( 200,200 ), false, '');
?>
<div class="posts_page_tile promo-tile" id="id-<?php echo $print_post; ?>">
<div class="entry-content">
<div class="promo-image" style="background-image:url('<?php echo $promo_thumbnail_src[0]; ?>'); background-color:<?php echo get_post_meta($print_post, 'bgcolor', true) ?>">
<h3><?php echo get_the_title($print_post); ?></h3>
<div class="promo_button_white_border"><?php echo get_post_meta($print_post, 'cta', true); ?>
</div>
</div>
</div>
</div>
<?php
}
$promo_counter++;
wp_reset_postdata();
}
?>
<?php endwhile; ?>
I'm using this load more posts plugin.
I have a bit of jQuery that animates in some text then animates it out. The parameters of the animation are passed via PHP. I need the animation to loop but only after the animation is complete, but can't quite work it out.
<?php if ($text1_1 != "") { ?>
setTimeout(one_1,0); // From 0 to duration
setTimeout(one_2,<?php echo $duration * 2 ?>);
// From duration x2 to duration x3
<?php } ?>
<?php if ($text2_1 != "") { ?>
setTimeout(two_1,<?php echo $duration * 3 ?>); // From duration x3 to duration x4
setTimeout(two_2,<?php echo $duration * 5 ?>); // From duration x5 to duration x6
<?php } ?>
<?php if ($text1_1 != "") { ?>
function one_1() {
$('.text-1_1').animate({ <?php echo $animate1_1 ?>: '<?php echo $text1_1_end ?>' }, <?php echo $duration ?>, 'easeInOutCubic');
$('.text-1_2').animate({ <?php echo $animate1_2 ?>: '<?php echo $text1_2_end ?>' }, <?php echo $duration ?>, 'easeInOutCubic');
$('.text-1_3').animate({ <?php echo $animate1_3 ?>: '<?php echo $text1_3_end ?>' }, <?php echo $duration ?>, 'easeInOutCubic');
$('.text-1_4').animate({ <?php echo $animate1_4 ?>: '<?php echo $text1_4_end ?>' }, <?php echo $duration ?>, 'easeInOutCubic');
$('.text-1_5').animate({ <?php echo $animate1_5 ?>: '<?php echo $text1_5_end ?>' }, <?php echo $duration ?>, 'easeInOutCubic');
}
function one_2() {
$('.text-1_1').animate({ <?php echo $animate1_1 ?>: '<?php echo $text1_1_start ?>' }, <?php echo $duration ?>, 'easeInOutCubic');
$('.text-1_2').animate({ <?php echo $animate1_2 ?>: '<?php echo $text1_2_start ?>' }, <?php echo $duration ?>, 'easeInOutCubic');
$('.text-1_3').animate({ <?php echo $animate1_3 ?>: '<?php echo $text1_3_start ?>' }, <?php echo $duration ?>, 'easeInOutCubic');
$('.text-1_4').animate({ <?php echo $animate1_4 ?>: '<?php echo $text1_4_start ?>' }, <?php echo $duration ?>, 'easeInOutCubic');
$('.text-1_5').animate({ <?php echo $animate1_5 ?>: '<?php echo $text1_5_start ?>' }, <?php echo $duration ?>, 'easeInOutCubic');
}
<?php } ?>
How would you get function one_1() & function one_2() to loop after they've finished animating. There is also the possibility that there will be more similar functions.
Very sorry if this is a bit vague! having a bit of trouble explaining it.
Thanks for looking!
You can use the animate finish callback as described here:
http://api.jquery.com/animate/
$(element).animate( { animation params }, duration, function(){
// this is the animation finish callback
});
My suggestion is to use a recursive function, put the animation inside and call it recursively when the animation is finished
You could use something like this as a template. If the durations within each group are not the same, will require considerably more logic to set up and you would likely be best to provide all the animation data as an array, not echo to each animation
function one_1() {
/* use complete callback of one animation to call next function*/
$('.text-1_5').animate({ /* anim*/}, /*duration*/, /* easing*/, function(){
/* this animation is complete, call next function */
two_1();
});
/* other animations for this group*/
}
Maybe the solution is to replace setTimeout with
setInterval(two_1,<?php echo $duration; ?>);
setInterval(two_2,<?php echo $duration; ?>);
There is now need for doing $duration * 3 because your animations will start all in the same time