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

张你加入购物车按钮，用这个 <a onclick="addToCart('<?php echo $product['product_id']; ?>');" class="button"><?php echo $button_cart; ?></a>。

希望它适合你。

Answer 2

据我所知，添加到购物车代码按钮使用在DIV中链接的ID。所以jQuery没有寻找＃button-cart - 它正在寻找，例如购物车。 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>

但请确保新DIV移动中支持.product-info和#cart ID和Class子元素。为什么？看看这个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 3

<强>更新

你的意思是“移动”添加到购物车按钮？或者只是复制一个exesting，以便在你的页面中有两个＃button-cart？

如果是第一个，@ TheBlackBenzKid的解决方案应该按预期工作。但是，如果要复制现有按钮，则应修改选择器，以便使用类（.button-cart）。我希望这有帮助。

很抱歉迟到的回复。根据你的答案：

我想复制现有的一个，以便页面中有两个按钮

我的意思是修改选择器以便它使用类（.button-cart）你应该改变你的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"）。通过使用类，我们可以声明具有相同类的另一个元素（即产品描述底部的“添加到购物车”按钮）。

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

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

}）;

更改为：

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

}）;

id使用#，类使用.。我希望这能帮到你。

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

3 个答案: