Options de produit Sur la page d'accueil (Module vedette) Opencart

Question

J'essaie d'afficher les options de produits sur la page d'accueil et il montre les options de produits correctement, mais après avoir sélectionné l'option de la liste déroulante lorsque je clique sur ajouter au panier bouton ça ne marche pas . Je pense qu'il y a un problème de javascript, s'il vous plaît vérifier le code et dites-moi où je me trompe.

Voici mes common.js

var cart = { 
    'add': function(product_id, el) { 
     if ($(el).parent().children('input[name="quantity"]').val() != 'undefined') { 
     quantity = $(el).parent().children('input[name="quantity"]').val(); 
    } else { 
     quantity = 1; 
    } 

    var option = $("#input-option").val(); 


     $.ajax({ 
      url: 'index.php?route=checkout/cart/add', 
      type: 'post', 
      data: 'option=' + option + 'product_id=' + product_id + '&quantity=' + (typeof(quantity) != 'undefined' ? quantity : 1), 
      dataType: 'json', 
      beforeSend: function() { 
       $('#cart > button').button('loading'); 
      }, 
      complete: function() { 
       $('#cart > button').button('reset'); 
      }, 
      success: function(json) { 
       $('.alert, .text-danger').remove(); 

       if (json['redirect']) { 
        location = json['redirect']; 
       } 

       if (json['success']) { 
        $('#content').parent().before('<div class="alert alert-success"><i class="fa fa-check-circle"></i> ' + json['success'] + ' <button type="button" class="close" data-dismiss="alert">&times;</button></div>'); 

        // Need to set timeout otherwise it wont update the total 
        setTimeout(function() { 
         $('#cart > button').html('<span id="cart-total"><i class="fa fa-shopping-cart"></i> ' + json['total'] + '</span>'); 
        }, 100); 

        $('html, body').animate({ scrollTop: 0 }, 'slow'); 

        $('#cart > ul').load('index.php?route=common/cart/info ul li'); 
       } 
      }, 
      error: function(xhr, ajaxOptions, thrownError) { 
       alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText); 
      } 
     }); 
    }, 

Et voici mon featured.tpl

<h3 class="my-fa3 blue-txt"><b>Deal of The Day</b></h3> 
<div class="row"> 
    <?php foreach ($products as $product) { ?> 
    <div class="product-layout col-lg-3 col-md-3 col-sm-6 col-xs-12"> 
    <div class="product-thumb transition"> 
     <div class="image"><a href="<?php echo $product['href']; ?>"><img src="<?php echo $product['thumb']; ?>" alt="<?php echo $product['name']; ?>" title="<?php echo $product['name']; ?>" class="img-responsive" /></a></div> 
     <div class="caption"> 
     <h4><a href="<?php echo $product['href']; ?>"><?php echo $product['name']; ?></a></h4> 

     <!--No Need-- 

     <p class="my-fa gray-txt"><b><?php echo $product['description']; ?></b></p> 

     --No Need--> 

       <div class="col-sm-12" style="color:#FF0000;"> 



        <!--SHOWING PRODUCT OPTIONS--> 


      <div id="product">  
      <?php if ($product['options']) { ?> 

      <?php foreach ($product['options'] as $option) { ?> 
      <?php if ($option['type'] == 'select') { ?> 
      <div class="form-group<?php echo ($option['required'] ? ' required' : ''); ?>"> 
       <label class="control-label" for="input-option<?php echo $option['product_option_id']; ?>"><?php echo $option['name']; ?></label> 
       <select name="option[<?php echo $option['product_option_id']; ?>]" id="input-option<?php echo $option['product_option_id']; ?>" class="form-control"> 
       <option value=""><?php echo $text_select; ?></option> 
       <?php foreach ($option['product_option_value'] as $option_value) { ?> 
       <option value="<?php echo $option_value['product_option_value_id']; ?>"><?php echo $option_value['name']; ?> 
       <?php if ($option_value['price']) { ?> - Rs.<?php echo $option_value['price']; ?> 
       <?php } ?> 
       </option> 
       <?php } ?> 
       </select> 
      </div> 
      <?php } ?> 
      <?php } ?> 
      <?php } ?> 
      </div> 



      <!--SHOWING PRODUCT OPTIONS--> 


       </div> 


     <?php if ($product['price']) { ?> 
     <p class="price dark-gray-txt my-fa4" style="font-weight:bold;"> 
      <?php if (!$product['special']) { ?> 
      <?php echo $product['price']; ?> 
      <?php } else { ?> 
      <span class="price-new"><?php echo $product['special']; ?></span> <span class="price-old"><?php echo $product['price']; ?></span> 
      <?php } ?> 
     </p> 
     <?php } ?> 
     </div> 

     <div class="my-col"> 
     <div class="my-clear-brdr"></div> 
     <div class="qty-box white-txt yellow-bg pull-left"><b>Qty</b></div> 

     <input type="text" size="3" id="quantity-<?php echo $product['product_id']; ?>" name="quantity" value="1" placeholder="1" class="form-control my-form-control input-lg qty-input radius-none pull-left" /> 

     <button type="button" onclick="cart.add('<?php echo $product['product_id']; ?>', this);" class="my-blue-btn pull-right"><i class="fa fa-shopping-cart"></i> <b><?php echo $button_cart; ?></b></button> 

     </div> 

    </div> 
    </div> 
    <?php } ?> 
</div> 

Answer 1

Effectuez les modifications suivantes dans vos fichiers.

category.tpl

remplacer le code suivant

<button type="button" onclick="cart.add('<?php echo $product['product_id']; ?>');"><i class="fa fa-shopping-cart"></i> <span class="hidden-xs hidden-sm hidden-md"><?php echo $button_cart; ?></span></button> 

avec ce

<input type="hidden" name="quantity" value="<?php echo $product['minimum']; ?>" size="2" id="input-quantity" class="form-control" /> 
<input type="hidden" name="product_id" value="<?php echo $product['product_id']; ?>" /> 
<button id="categorycart<?php echo $product['product_id']; ?>" type="button" onclick="categorycartv.add('<?php echo $product['product_id']; ?>', '<?php echo $product['minimum']; ?>');"><i class="fa fa-shopping-cart"></i> <span class="hidden-xs hidden-sm hidden-md">Add to Cart</span></button> 
<script type="text/javascript"><!-- 
// Cart add remove functions 
var categorycart<?php echo $product['product_id']; ?> = { 
    'add': function(product_id, quantity) { 
     $.ajax({ 
     url: 'index.php?route=checkout/cart/add', 
     type: 'post', 
     data: $('#categoryproduct<?php echo $product['product_id']; ?> input[type=\'text\'], #categoryproduct<?php echo $product['product_id']; ?> input[type=\'hidden\'], #categoryproduct<?php echo $product['product_id']; ?> input[type=\'radio\']:checked, #categoryproduct<?php echo $product['product_id']; ?> input[type=\'checkbox\']:checked, #categoryproduct<?php echo $product['product_id']; ?> select, #categoryproduct<?php echo $product['product_id']; ?> textarea'), 
     dataType: 'json', 
     beforeSend: function() { 
      $('#categorycart<?php echo $product['product_id']; ?>').button('loading'); 
     }, 
     complete: function() { 
      $('#categorycart<?php echo $product['product_id']; ?>').button('reset'); 
     }, 
     success: function(json) { 

      $('.alert, .text-danger').remove(); 
      $('.form-group').removeClass('has-error'); 
      if (json['error']) { 
       if (json['error']['option']) { 
        for (i in json['error']['option']) { 
         var element = $('#categoryproduct<?php echo $product['product_id']; ?> #input-option' + i.replace('_', '-')); 

         if (element.parent().hasClass('input-group')) { 
          element.parent().after('<div class="text-danger">' + json['error']['option'][i] + '</div>'); 
         } else { 
          element.after('<div class="text-danger">' + json['error']['option'][i] + '</div>'); 
         } 
        } 
       } 

       if (json['error']['recurring']) { 
        $('#categoryproduct<?php echo $product['product_id']; ?> select[name=\'recurring_id\']').after('<div class="text-danger">' + json['error']['recurring'] + '</div>'); 
       } 

       // Highlight any found errors 
       $('.text-danger').parent().addClass('has-error'); 
      } 
      if (json['success']) { 
       $('#content').parent().before('<div class="alert alert-success">' + json['success'] + '<button type="button" class="close" data-dismiss="alert">&times;</button></div>'); 

       $('#cart > button').html('<i class="fa fa-shopping-cart"></i> ' + json['total']); 

       $('html, body').animate({ scrollTop: 0 }, 'slow'); 

       $('#cart > ul').load('index.php?route=common/cart/info ul li'); 
      } 
     } 
    }); 
    } 
} 
//--></script> 

En

category.php

Ajouter un élément suivant à $ data [ 'produits'] [] = array (

'minimum'  => $result['minimum'],