I need to show product in a. Drop down

Question

I have a dropdown form here at https://ariyoconcept.com.ng/quick-widget to sell all my woocommerce products. I expect that after choosing DataBubundles from the dropdown list, the subcategories of DataBundles should be shown which happens. I now expect again that after choosing any of the subcategories, the products under the subcategory be displayed as a dropdown, which did not happen

This is the code I used, I will be very greatful if someone could point out my mistakes. Thanks in advance

         var networkform='<select name="product_subcat" id="product_subcat" class="dropdown_product_cat" style="padding:15px; font-size:20px; width:100%; border: 1px solid #7cc68d; color:#7cc68d;   box-shadow: inset 0px 0px 8px #7cc68d;font-weight:bold;" >';
         jQuery.each(response, function(i, userObject){
      
//var is_last_item = (index == (.length - 1));
  // jQuery('#form1').append('<option value="' + userObject.id+'">'+ userObject.name + '</option>');
        
             networkoption+='<option value="' + userObject.slug+'">'+ userObject.name + '</option>';
});
         
            
        jQuery('#form1').append(networkform+networkoption+'</select><hr/>');
                jQuery("#form1").hide();
            jQuery(document).ajaxStop(function(){
        
             jQuery(".dropdown_product_cat").attr('disabled', false);
                jQuery("#form1").show();
});

            //var obj = jQuery.parseJSON(response);
/*jQuery.each(response, function() {
  jQuery.each(this, function(k, v) {
    alert();
  });
});
*/      //alert(response);  
        
            }
        } });
}

            jQuery('#form1').on('change','#product_subcat', function() {
            
            jQuery("#form2").empty(); 
            jQuery("#buy").hide();
            jQuery("#importantnote").hide();
            jQuery("#form3").empty();
            var subcat_id=this.value;
            var subcat_name=jQuery( "#product_subcat option:selected" ).text();
            //alert(product_name);
            if(subcat_id!=''){  
            jQuery.ajax({url: "https://ariyoconcept.com.ng/wp-json/wc/v3/products?consumer_key=ck_a51c40a17db9f6769bb7bacfcbd0dceb273d80bc&consumer_secret=cs_abeaf1a95389a45b9a7f0542c91f6acda888c971&filter[order]=asc&filter[category]="+subcat_id+"&filter[orderby]=meta_value_num&filter[orderby_meta_key]=_regular_price", dataType:'json', success:function(response) { 
                
            //  https://ariyoconcept.com.ng/wp-json/wc/v3/products/?category="+subcat_id+"&order=desc&consumer_key=ck_a51c40a17db9f6769bb7bacfcbd0dceb273d80bc&consumer_secret=cs_abeaf1a95389a45b9a7f0542c91f6acda888c971
                
            //jQuery("#form1").empty();
            if(response.length==0){
        
                
            }else{
        var networkoption='<option value="">Choose Distributor</option>';
         var networkform='<select name="product_buy" id="product_buy" class="dropdown_product_cat" style="padding:15px; font-size:20px; width:100%; border: 1px solid #7cc68d; color:#7cc68d;   box-shadow: inset 0px 0px 8px #7cc68d;font-weight:bold;" disabled>';
         jQuery.each(response, function(key, value){
      

 jQuery.each(value, function (index, userObject) {

             networkoption+='<option value="' + userObject.id+'">'+ userObject.title + '</option>';
    
  });       
});
         
                
            
        jQuery("#form2").empty(); 
    
    jQuery('#form2').append(networkform+networkoption+'</select><hr/>');
                jQuery("#form2").hide();
            jQuery(document).ajaxStop(function(){
                 jQuery(".dropdown_product_cat").attr('disabled', false);
                jQuery("#form2").show();
});

            //var obj = jQuery.parseJSON(response);
/*jQuery.each(response, function() {
  jQuery.each(this, function(k, v) {
    alert();
  });
});```

score 0 · Answer 1 · answered Aug 07 '20 at 07:26

Going through the url you provided, it seems that the error is in the lines:

jQuery.each(response, function(key, value){
    jQuery.each(value, function (index, userObject) {
        networkoption+='<option value="' + userObject.id+'">'+ userObject.title + '</option>';
    });
});

which are in the else clause of the jQuery('#form1').on('change','#product_subcat', function() { function. The response variable is itself the array of network options it seems. Debug you code using the Dev tools on any of the browser you are using. This should give you the right answers.

Thanks so much for the explanation, I have resolved the issue by installing WordPress again, it seemed it was the wp-ajax that refused to call twice consecutively — Horlaitan15, Aug 08 '20 at 08:34

I need to show product in a. Drop down

1 Answers1