2013-03-08 4 views
1

Я пытаюсь вставить кнопку корзины магазина в нижней части описания продукта в Opencart verson 1.5.4 и использую тему по умолчанию.Как добавить Добавить в корзину Кнопка в Opencart Описание продукта

Я посмотрел исходный код для конкретного продукта и скопировал эту информацию из исходного кода в нижнюю часть описания продукта.

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

Когда я нажимаю кнопку добавления в корзину, ничего не происходит.

Но когда я нажимаю на добавление в список пожеланий и сравниваю, продукт добавляется в соответствующие списки.

Что мне не хватает?

Должен ли я использовать другой код?

Может ли кто-нибудь помочь мне решить эту проблему?

ответ

0

Насколько я знаю, кнопка «Добавить в корзину» использует идентификатор, связанный в DIV. Так что jQuery не ищет # пуговицы - он ищет, например, корзину. addform # button-cart, а также ваши недостающие переменные, которые также нужно вложить. Обновите свой пост с полной версией product.tpl, пожалуйста, слишком

Это код, который необходимо использовать для перемещения Add в корзину Кнопка:

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

Но убедитесь, что ID .product-info и #cart и элементы ребенка класса поддерживаются в пределах вашего нового 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'); 
      } 
     } 
    }); 
}); 
0

UPDATE

ли вы имеете в виду "шаг" на кнопку Добавить в корзину? или просто скопируйте exesting, так что на вашей странице есть две корзины # button?

Если первое решение от @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"). Используя класс, мы можем объявить еще один элемент с тем же классом (например, ваша кнопка «add-to-cart» в нижней части описания вашего продукта).

Затем измените свой сценарий Ajax. Исходный сценарий ajax:

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

});

Изменить на:

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

});

id использование # и класс использование .. Надеюсь, это поможет вам.

+0

спасибо. Я хотел бы скопировать существующий, так что на странице есть две кнопки. Второй - в нижней части описания продукта для каждого продукта. Я не программист. Я - копия пастера, поэтому, пожалуйста, извините мой запутанный подход к этому. Будете ли вы так любезны показать мне, что код будет выглядеть так, чтобы «изменить селектор, чтобы он использовал класс (тележка для кнопок). Спасибо. –

+0

проверить мой обновленный ответ. –

1

Chang вы добавляете в корзину кнопку, с этим <a onclick="addToCart('<?php echo $product['product_id']; ?>');" class="button"><?php echo $button_cart; ?></a>.

Надеюсь, что это сработает для вас.

Смежные вопросы