如何添加添加到购物车按钮在Opencart产品描述

Question

我想在Opencart verson 1.5.4产品说明的底部插入一个商店购物车按钮，并使用默认主题。

我查看了特定产品的源代码，并将源代码中的这些信息复制到产品说明的底部。

 <div class="cart"> 
    <div>Qty:   <input type="text" name="quantity" size="2" value="1" /> 
     <input type="hidden" name="product_id" size="2" value="85" /> 
     &nbsp; 
     <input type="button" value="Add to Cart" id="button-cart" class="button" /> 
    </div> 
    <div><span>&nbsp;&nbsp;&nbsp;- OR -&nbsp;&nbsp;&nbsp;</span></div> 
    <div><a onclick="addToWishList('85');">Add to Wish List</a><br /> 
     <a onclick="addToCompare('85');">Add to Compare</a></div> 
      </div> 

当我点击添加到购物车按钮，没有任何反应。

但是，当我点击添加到愿望清单并进行比较时，产品被添加到相应的列表中。

我错过了什么？

我应该使用不同的代码吗？

任何人都可以帮我解决这个问题吗？

Answer 1

据我所知，添加到购物车的代码按钮使用一个在DIV内链接的ID。所以jQuery不会寻找＃按钮 - 购物车 - 它正在寻找，例如购物车。 addform＃button-cart，并且还缺少一些需要嵌套的变量..请使用完整版本的product.tpl更新您的文章

这是您需要用于移动添加购物车按钮：

<div class="cart"> 
    <div><?php echo $text_qty; ?> 
     <input type="text" name="quantity" size="2" value="<?php echo $minimum; ?>" /> 
     <input type="hidden" name="product_id" size="2" value="<?php echo $product_id; ?>" /> 
     &nbsp; 
     <input type="button" value="<?php echo $button_cart; ?>" id="button-cart" class="button" /> 
     <span>&nbsp;&nbsp;<?php echo $text_or; ?>&nbsp;&nbsp;</span> 
     <span class="links"><a onclick="addToWishList('<?php echo $product_id; ?>');"><?php echo $button_wishlist; ?></a><br /> 
     <a onclick="addToCompare('<?php echo $product_id; ?>');"><?php echo $button_compare; ?></a></span> 
    </div> 
    <?php if ($minimum > 1) { ?> 
    <div class="minimum"><?php echo $text_minimum; ?></div> 
    <?php } ?> 
    </div> 

但要确保.product-info和#cart ID和类子元素新的DIV举措中支持。为什么？看看这个jQuery，这取决于他们找到值 - 说了这个 - 你也可以改变它。根据您的需要

$('#button-cart').bind('click', function() { 
    $.ajax({ 
     url: 'index.php?route=checkout/cart/add', 
     type: 'post', 
     data: $('.product-info input[type=\'text\'], .product-info input[type=\'hidden\'], .product-info input[type=\'radio\']:checked, .product-info input[type=\'checkbox\']:checked, .product-info select, .product-info textarea'), 
     dataType: 'json', 
     success: function(json) { 
      $('.success, .warning, .attention, information, .error').remove(); 

      if (json['error']) { 
       if (json['error']['option']) { 
        for (i in json['error']['option']) { 
         $('#option-' + i).after('<span class="error">' + json['error']['option'][i] + '</span>'); 
        } 
       } 
      } 

      if (json['success']) { 
       $('#notification').html('<div class="success" style="display: none;">' + json['success'] + '<img src="catalog/view/theme/default/image/close.png" alt="" class="close" /></div>'); 

       $('.success').fadeIn('slow'); 

       $('#cart-total').html(json['total']); 

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

和更新的版本将是：

/* 
Notice I have changed the DIV to assign div#cart 
So it looks for <div id="cart"> 
But make sure options are available for the error response 
and validation 
*/ 

$('#button-cart').bind('click', function() { 
    $.ajax({ 
     url: 'index.php?route=checkout/cart/add', 
     type: 'post', 
     data: $('div#cart input[type=\'text\'], div#cart input[type=\'hidden\'], div#cart input[type=\'radio\']:checked, div#cart input[type=\'checkbox\']:checked, div#cart select, div#cart textarea'), 
     dataType: 'json', 
     success: function(json) { 
      $('.success, .warning, .attention, information, .error').remove(); 

      if (json['error']) { 
       if (json['error']['option']) { 
        for (i in json['error']['option']) { 
         $('#option-' + i).after('<span class="error">' + json['error']['option'][i] + '</span>'); 
        } 
       } 
      } 

      if (json['success']) { 
       $('#notification').html('<div class="success" style="display: none;">' + json['success'] + '<img src="catalog/view/theme/default/image/close.png" alt="" class="close" /></div>'); 
       $('.success').fadeIn('slow'); 
       $('#cart-total').html(json['total']); 
       $('html, body').animate({ scrollTop: 0 }, 'slow'); 
      } 
     } 
    }); 
}); 

Answer 2

UPDATE

你的意思是 “移动” 添加到购物车按钮？或者直接复制一个令人满意的游戏，这样在你的页面中有两个＃按钮 - 购物车？

如果第一个来自@TheBlackBenzKid的解决方案应该按照您的预期工作。 但是，如果你想复制现有的按钮，你应该修改选择器，使其使用class（.button-cart）。我希望这个帮助。

对不起，延迟回复。根据您的回答：

我想，这样有在页面两个按钮，因此使用类（.button-

我的意思在修改选择复制现有的购物车）你应该改变你的ajax触发器来匹配2个选择器（因为现在你有2个'触发器'，顶部的“添加到购物车”，并在底部，你复制到）。

首先修改添加到购物车到<input type="button" value="Add to Cart" id="" class="button-cart button" />

看，我们不使用id="button-cart"了，而是我们使用button-cart作为我们班attribut（class="button-cart button"）。通过使用class，我们可以声明具有相同类别的另一个元素（即您的产品说明底部的'add-to-cart'按钮）。

然后修改您的Ajax脚本。原始的ajax脚本是：

$('#button-cart').bind('click', function() { 
$.ajax({ 
// another code 

}）;

更改为：

$('.button-cart').bind('click', function() { 
$.ajax({ 
// another code 

}）;

id使用#和类使用.。我希望这对你有所帮助。

Answer 3

昌你添加到购物车按钮，与此 <a onclick="addToCart('<?php echo $product['product_id']; ?>');" class="button"><?php echo $button_cart; ?></a>。

希望它会适合你。