Opencart cómo agregar opciones de productos en una pestaña

Opencart 1.5.3. Im trying to get the product options on the page to be displayed inside a tab. If I use the following code I get no errors and it looks fine, but clicking add to cart does nothing. If the code is outside the tab it works fine. Im not sure what Im doing wrong.

<div id="tabs_container">
<ul id="tabs">
<li class="active"><a href="#tab1">tab1</a></li>
<li><a href="#tab2">tab2</a></li>
<li><a href="#tab3">tab3</a></li>
<li><a href="#tab4">tab4</a></li>

<div id="tabs_content_container">
<div id="tab1" class="tab_content" style="display:block"></div><!--tab1-->
<div id="tab2" class="tab_content"></div><!--tab2-->
<div id="tab3" class="tab_content"></div><!--tab3-->
<div id="tab4" class="tab_content">

<?php if ($options) { ?>
      <div class="options">
        <h2><?php echo $text_option; ?></h2>
        <br />
        <?php foreach ($options as $option) { ?>
        <?php if ($option['type'] == 'select') { ?>
        <div id="option-<?php echo $option['product_option_id']; ?>" class="option">
          <?php if ($option['required']) { ?>
          <span class="required">*</span>
          <?php } ?>
          <b><?php echo $option['name']; ?>:</b><br />
          <select name="option[<?php echo $option['product_option_id']; ?>]">
            <option value=""><?php echo $text_select; ?></option>
            <?php foreach ($option['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']) { ?>
            (<?php echo $option_value['price_prefix']; ?><?php echo $option_value['price']; ?>)
            <?php } ?>
            <?php } ?>
        <br />
        <?php } ?>
        <?php } ?>


Here is the javascript for the form submit that Opencart uses.

<script type="text/javascript"><!--
    $('#button-cart').bind('click', function() {
            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>');
                    $('html, body').animate({ scrollTop: 0 }, 'slow'); 

preguntado el 04 de julio de 12 a las 01:07

1 Respuestas

The problem will be that the closing </form> tag won't be around the tab content. You need to move the </form> after your content and that should do it

Respondido 05 Jul 12, 13:07

I was thinking about the form tags too and realized Opencart seems to use javascript and binds the submit button. I edited my original post with the javascript code. - dinamo

Have you tried moving the form tag though? Also note that they need to be in a wrapper element with the .product-info class too - jay gilford

Ive moved the javascript bind function that I posted above, but it doesnt seem to matter where you put it, so I just leave at the end of the page. I think youre onto something about the .product-info class that is written in the javascript. Im going to check those divs - dinamo

Jay I have it working now. I decided to change .product-info in the javascript to my content wrapper and working perfect now. - dinamo

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.