각 품목/기사를위한 동적 인 위시리스트 만들기

Question

안녕하세요 제가 약간의 문제가 있습니다. 제가 상점에서 물건을 세션에 추가하고 저장하는 whish 목록 스크립트가 있습니다.하지만 목록을 클릭하면 첫 번째 항목 만 추가됩니다. 남성이 동적 모든 위시리스트를 클릭 가게

내 문서 구조, 온 클릭 wlbutton1 또는 wlbutton2 그는 위시리스트에 ID 1 또는 2로 문서를 추가해야합니다의 개별 항목에 대한 것을 :

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>'; 

내 Jquery 코드를 사용하여 각 객체에 대해 동적으로 개별화하는 방법 :

$(".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

기사를 추가하는 데 필요한 데이터를 찾는 방법의 예입니다. 먼저 HTML 예 :

<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> 

그리고 자바 스크립트 부분 :

$(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. 
    }); 
}); 

그런 식으로 협력함으로써, 당신은 당신의 서버에 당신이 당신의 위시리스트에 기사를 추가하는 데 필요한 데이터를 보낼 수 있습니다.

여기는 JS Fiddle example에 대한 링크입니다.

이 예제에서는 단추의 HTML 콘텐츠를 사용하여 입력을 찾는 방법을 볼 수 있습니다.

jQuery API을 사용하여 "트리 순회"에 대해 자세히 알아볼 수 있습니다.