Make Wish List Dynamic for each item/ article

Question

HI i got a little Problem i have whish list script which adds artivcles from shop into a session and saves them but when i click on the which list he only adds the first item how to male it dynamic that every wish list click is for the individual item in the shop

my article structure, onclick of wlbutton1 or wlbutton2 he should add the article with id1 or 2 to the wishlist:

    echo '<div class="span3 filter--'.$obj->product_prop1.'" data-price="'.substr($obj->price, 0, -3) . '" data-popularity="3" data-size="s|m|xl" data-color="pink|orange" data-brand="'.$obj->product_brand.'">'; 
        echo '<div class="product">'; 
        echo '<div class="product-img featured">'; 
        echo '<form method="post" action="../cart_update.php">';
        echo '<div class="picture"><img src="images/'.$obj->product_img_name.'">';
        echo '<div class="img-overlay"><button class="add_to_cart btn more btn-primary">Kaufen</button><a href="#" class="btn buy btn-danger" id="producturl'.$obj->id.'">...mehr</a></div>';
        echo '</div>';
        echo '</div>';
        echo '<div id="result"></div>';
        echo '<div class="main-titles"><h4 class="title">'.$currency.$obj->price.'</h4>';
        echo '<h5 class="no-margin isotope--title" id="product'.$obj->id.'">'.$obj->product_name.'</h5>';
        echo '<p class="no-margin pacifico" style="position: absolute;right: 10px;top: 5px; text-transform: capitalize;">'.$obj->product_brand.'</p>';
        echo '<p class="no-margin" style="position: absolute;right: 10px;top: 25px;"><a class="wl-button'.$obj->id.'"><i class="icon-gift"></i></a></p>';
        echo '</div>';
        echo '<p class="desc">'.substr($obj->product_desc, 0, 160) . '...</p>';
        echo '<input type="hidden" name="product_qty" value="1" />';
        echo '<input type="hidden" name="product_code" value="'.$obj->product_code.'" />';
        echo '<input type="hidden" name="type" value="add" />';
        echo '<input type="hidden" name="return_url" value="'.$current_url.'" />';
        echo '</form>';
        echo '</div>';
        echo '</div>';

My Jquery Code how to make it dynamic and individual for eacht artivle?:

$(".wl-button").click(function() {
    var wlproduct = $('#product').text();
    var wlproducturl = $('#producturl').attr('href');
    $.ajax({
        type : "POST",
        url : "../assets/wlscript.php",
        data : { wlproduct : wlproduct, wlproducturl : wlproducturl },
        success : function(data) { 
        $('div#result').text('You added '+wlproducturl+' '+wlproduct+'\'s to your wishlist.');
        }
    }); 
}); 

Answer 1

Here an example of how you can do to find the data you need to add your article. First the HTML example :

<div class="products">
    <form>
        <p>
            <!-- Fist article -->
            <span>Article 1</span>
            <!-- A name construct so that I can easilly find in which iteration of the loop I am -->
            <input type="hidden" name="article[0].id" value="1" />
            <input type="hidden" name="article[0].name" value="article1" />
            <button class="addButton">Add article</button>
        </p>
        <p>
            <!-- Second article -->
            <span>Article 2</span>
            <input type="hidden" name="article[1].id" value="2" />
            <input type="hidden" name="article[1].name" value="article2" />
            <button class="addButton">Add article</button>
        </p>
        <!-- … others articles -->
    </form>
</div>

And the Javascript part :

$(document).ready(function(){
    $(".addButton").on("click", function(event){
        event.preventDefault();
        var button = $(this);
        var parent = button.parent(); // We need to find the container in which to seach our fields.
        var idArticle = parent.find("input[name$='.id']").val(); // Find the ID
        var nameArticle = parent.find("input[name$='.name']").val(); // Find ather data
        alert("Add article with id = " + idArticle + " and name = " + nameArticle);
        // Next step is the ajax method to call the server with the correct data. 
    });
});

By working like that, you can then send to your server the data you need to add an article to your wishlist.

Here the link to the JS Fiddle example .

In this example, you can see how to work around the HTML content from the button to find the inputs.

You can find more about "tree traversal" with the jQuery API .