J'ai donc construit ce thème pour que le client puisse ajouter des propriétés à son site Web WordPress.
Dans ce thème, j'ai créé un système de favoris, mais il semble que je ne parvienne pas à faire en sorte que le bouton favori fonctionne sur la page de liste Type de message personnalisé.
Le problème: Chaque fois que je clique sur le bouton des favoris, celui-ci sera toujours mis en favori dans le premier message de la liste et non celui sur lequel j'ai cliqué. Image Expliquez ci-dessous:
Dans cette image, il affiche 3 des propriétés côte à côte, l’icône étoile étant le bouton favori.
Dans cette image, la première étoile est partie mais j'ai cliqué sur l'étoile à l'extrême droite de la propriété.
Ma seule pensée est que, dans jQuery, je ne trouve pas cet ID de propriété, mais simplement un élément <i>
et le cache.
Le code jQuery:
$('a#add-to-favorite').click(function(eve){
eve.preventDefault();
eve.stopPropagation();
var $star = $(this).find('i');
var add_to_fav_options = {
target: ('#fav-target'), // target element(s) to be updated with server response
beforeSubmit: function(){
$star.addClass('fa-spin');
}, // pre-submit callback
success: function(){
$star.removeClass('fa-spin');
$('#add-to-favorite').hide(0,function(){
$(this).find('#fav-output').delay(200).show();
});
}
};
$('#add-to-favorite-form').ajaxSubmit( add_to_fav_options );
});
Le code préféré:
<span class="add-to-fav">
<?php
$property_id = get_the_ID();
if(is_added_to_favorite($property_id)) {
?>
<div id="fav-output" class="show">
<i class="fa fa-star"></i>
<span id="fav-target">Added to Favourites</span>
</div>
<?php
} else {
?>
<form action="<?php echo admin_url('admin-ajax.php'); ?>" method="post" id="add-to-favorite-form">
<input type="hidden" name="property_id" value="<?php echo $property_id; ?>">
<input type="hidden" name="action" value="add_to_favorite">
</form>
<div id="fav-output">
<i class="fa fa-star"></i>
<span id="fav-target">Added To Favourites</span>
<span id="property-target-<?php echo $property_id; ?>" data-property-id="<?php echo $property_id; ?>"></span>
</div>
<a href="#add-to-favorite" id="add-to-favorite">
<i class="fa fa-star-o"></i>
<span class="add-to">Add to Favourites</span>
</a>
<?php
}
?>
</span>
Vous ne devez pas utiliser les identifiants d’élément plus d’une fois, mais plutôt les classes.
Sans entrer dans les détails, essayez les réglages ci-dessous ...
Changer ce qui suit:
<a href="#add-to-favorite" id="add-to-favorite">
<i class="fa fa-star-o"></i>
<span class="add-to">Add to Favourites</span>
</a>
...à
<a href="#add-to-favorite" class="add-to-favorite">
<i class="fa fa-star-o"></i>
<span class="add-to">Add to Favourites</span>
</a>
Changez votre JS en:
$('a.add-to-favorite').click(function(eve){
eve.preventDefault();
eve.stopPropagation();
var $context = $(this); //cache the click context here
var $star = $context.find('i');
var add_to_fav_options = {
target: ('#fav-target'), // target element(s) to be updated with server response
beforeSubmit: function(){
$star.addClass('fa-spin');
}, // pre-submit callback
success: function(){
$star.removeClass('fa-spin');
$context.hide(0,function(){
//find the #fav-output element based on click context
$context.find('#fav-output').delay(200).show();
});
}
};
$('#add-to-favorite-form').ajaxSubmit( add_to_fav_options );
});
note: non testé
JavaScript ...
$('.add-to-fav').click(function(eve){
eve.preventDefault();
eve.stopPropagation();
var $context = $(this); //cache the click context here
var $add_to_favorite = $context.find('a.add-to-favorite');
var $star = $add_to_favorite.find('i');
var add_to_fav_options = {
target: $context.find('.fav-target'), // target element(s) to be updated with server response
beforeSubmit: function(){
$star.addClass('fa-spin');
}, // pre-submit callback
success: function(){
$star.removeClass('fa-spin');
$add_to_favorite.hide(0,function(){
//find the #fav-output element based on click context
$add_to_favorite.find('.fav-output').delay(200).show();
});
}
};
$context.find('.add-to-favorite-form').ajaxSubmit( add_to_fav_options );
});
HTML ...
<span class="add-to-fav">
<?php
$property_id = get_the_ID();
if(is_added_to_favorite($property_id)) {
?>
<div class="fav-output show">
<i class="fa fa-star"></i>
<span class="fav-target">Added to Favourites</span>
</div>
<?php
} else {
?>
<form action="<?php echo admin_url('admin-ajax.php'); ?>" method="post" class="add-to-favorite-form">
<input type="hidden" name="property_id" value="<?php echo $property_id; ?>">
<input type="hidden" name="action" value="add_to_favorite">
</form>
<div class="fav-output">
<i class="fa fa-star"></i>
<span class="fav-target">Added To Favourites</span>
<span class="property-target-<?php echo $property_id; ?>" data-property-id="<?php echo $property_id; ?>"></span>
</div>
<a href="#add-to-favorite" class="add-to-favorite">
<i class="fa fa-star-o"></i>
<span class="add-to">Add to Favourites</span>
</a>
<?php
}
?>
</span>