-3

I have a Woocommerce website with a plugin so the costumer can add a product to his/her wishlist by pressing a button. This button has an image with a white heart. After clicking the button the white heart has to be changed in a red heart. This works, but only after the page is reloaded. So I want to let change the image real-time. I know something like AJAX is needed. The name of the image is used by the variable $cls . This one is used in the src of the image.

I have the following code:

<?php
if(is_user_logged_in()) {  
    $hlink=get_permalink()."?add_to_wishlist=".$post_ID;
    $a=1; 
} else {  $hlink='/login';$a=0; }
    $is_in_wishlist = YITH_WCWL()->is_product_in_wishlist( $post_ID );

    if($is_in_wishlist==1) { 
         $cls='red'; 
    } else {  
        $cls='white'; 
    }
?>      
<a href="<?php echo $hlink;?>" <?php if($a==1){ ?> rel='nofollow' <?php } ?> data-product-id="<?php echo $post_ID ?>" data-product-type="simple" class='add_to_wishlist'><img class="botButton" id="changeheartcolor"  src="//voice-overs.online/wp-content/themes/Impreza-child/images/voice-overs_online_heart-<?php echo $cls; ?>.svg">

How can I make it work so the heart (image) will change directly change without refreshing the page?

Script47
  • 14,230
  • 4
  • 45
  • 66
Dave Schepers
  • 5
  • 1

1 Answers1

0

You need to use javascript to reaload the image, not a PHP question just change the src value of image by javascript, also preload it before change.

azurinko
  • 261
  • 2
  • 11
  • Can you use search? https://stackoverflow.com/questions/11722400/programmatically-change-the-src-of-an-img-tag – azurinko Oct 06 '17 at 12:00
  • I tried solutions like this before, but it isn't working. My question of the topic is: How can I implement AJAX to reload the image directly. – Dave Schepers Oct 06 '17 at 12:49