[Решено] первая опция автоматом

[eeeMan]

Приветствую всех, как сделать, чтобы первая опция товара была сразу выбрана?

[eeeMan]

все, сделал сам

$('.radio input[type=radio]').first().attr('checked', true);

[chukcha]

наверное было бы правильно

$('.radio input[type=radio]:first').attr('checked', true);

Это вам повезло что у вас только один блок radio

[chukcha]

или

 

вот еще

$('.radio input[type=radio]:first, .checkbox input[type=checkbox]:first').attr('checked', true);

А если еще более правильно

 $('.required .radio input[type=radio]:first, .required .checkbox input[type=checkbox]:first').attr('checked', true);

[krasheninnikov]

или

вот еще...

Добрый день. А подскажите пожалуйста, в каком месте нужно вставить эту строку чтоб первая опция по умолчанию была включена?

[chukcha]

в шаблоне товара

[krasheninnikov]

в шаблоне товара

это я понял, файл product.tpl. Не совсем пойму, куда именно данную строку вставлять в код?

[vovin2002]

в шаблоне товара

присоединяюсь к вопросу, куда именно поместить в код?

[PeterStudio]

Внизу, там где скрипты размещены

[slivkiss]

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

Спойлер

<?php echo $header; ?>


<?php // Breadcrumbs -------------------------------------------------- ?>

<?php $tbData->slotStart('product/product.breadcrumbs'); ?>
<ul class="breadcrumb">
  <?php foreach ($breadcrumbs as $breadcrumb) { ?>
  <li><a href="<?php echo $breadcrumb['href']; ?>"><?php echo $breadcrumb['text']; ?></a></li>
  <?php } ?>
</ul>
<?php $tbData->slotStop(); ?>

<?php // Page title --------------------------------------------------- ?>

<?php $tbData->slotStart('product/product.page_title', array('filter' => array('product/product.page_title.filter', 'heading_title' => &$heading_title), 'data' => $data)); ?>
<h1><?php echo $heading_title; ?></h1>
<?php $tbData->slotStop(); ?>

<?php // Product Images ----------------------------------------------- ?>

<?php $tbData->slotStart('product/product.product_images', array('data' => $data)); ?>
<?php if ($images || $thumb):
$config_group = version_compare(VERSION, '2.2.0.0', '>=') ? TB_Engine::getName() : 'config';
$image_preview_width  = $tbData['config']->get($config_group . '_image_thumb_width');
$image_preview_height = $tbData['config']->get($config_group . '_image_thumb_height');
$image_full_width     = $tbData['config']->get($config_group . '_image_popup_width');
$image_full_height    = $tbData['config']->get($config_group . '_image_popup_height');
$gallery              = $tbData['system.product_images'];
?>

<style scoped>
<?php if ($images): ?>
<?php if ($gallery['nav_position'] == 'bottom' || $gallery['nav_style'] != 'thumbs'): ?>
#product_images { padding-top: {{ratio_plus}}; }
#product_images .tb_slides { margin-top: {{ratio_minus}}; }
#product_images .tb_thumbs_wrap { padding-top: {{ratio_thumbs}}; }
<?php else: ?>
#product_images { padding-top: {{ratio_plus}}; }
<?php endif; ?>
<?php else: ?>
#product_images { padding-top: {{ratio_single}}%; }
#product_images .tb_slides { margin-top: -{{ratio_single}}%; }
<?php endif; ?>
</style>

<?php if ($thumb || $images) { ?>
<ul class="thumbnails">
  <?php if ($thumb) { ?>
  <li><a class="thumbnail" href="<?php echo $popup; ?>" title="<?php echo $heading_title; ?>"><img src="<?php echo $thumb; ?>" title="<?php echo $heading_title; ?>" alt="<?php echo $heading_title; ?>" /></a></li>
  <?php } ?>
  <?php if ($images) { ?>
  <?php foreach ($images as $image) { ?>
  <li class="image-additional"><a class="thumbnail" href="<?php echo $image['popup']; ?>" title="<?php echo $heading_title; ?>"> <img src="<?php echo $image['thumb']; ?>" title="<?php echo $heading_title; ?>" alt="<?php echo $heading_title; ?>" /></a></li>
  <?php } ?>
  <?php } ?>
</ul>
<?php } ?>

<div id="product_images" class="tb_gallery{{gallery_css_classes}}">

  <div class="tb_slides">
    <?php // Zoom Area ?>
    <?php if ($tbData['system.product_images']['zoom']): ?>
    <span class="tb_zoom_box tb_zoom_<?php echo $tbData['system.product_images']['zoom_trigger']; ?>"></span>
    <?php endif; ?>

    <?php // Fullscreen button ?>
    <?php if ($tbData['system.product_images']['fullscreen']): ?>
    <a href="javascript:;" class="tb_fullscreen_button btn btn-<?php echo $tbData['system.product_images']['fullscreen_button_size']; ?> tb_no_text tbGoFullscreen">
      <i class="tb_icon <?php echo $tbData['system.product_images']['fullscreen_button_icon']; ?>" style="font-size: <?php echo $tbData['system.product_images']['fullscreen_button_icon_size']; ?>px;"></i>
    </a>
    <?php endif; ?>

    <?php // Slides ?>
    <div class="frame" data-mightyslider="width: <?php echo $image_preview_width; ?>, height: <?php echo $image_preview_height; ?>">
      <div>
        <div data-mightyslider="type: 'image', cover: '<?php echo $tbData->escapeImg($popup); ?>', thumbnail: '<?php echo $tbData->escapeImg($thumb); ?>'"></div>
        <?php foreach ($images as $image): ?>
        <div data-mightyslider="type: 'image', cover: '<?php echo $tbData->escapeImg($image['popup']); ?>', thumbnail: '<?php echo $tbData->escapeImg($image['thumb']); ?>'"></div>
        <?php endforeach; ?>
      </div>
    </div>
  </div>

  <?php if ($images && $gallery['nav'] && $gallery['nav_style'] == 'thumbs'): ?>

  <div class="tb_thumbs_wrap">
    <div class="tb_thumbs">
      <div class="has_slider">
        <ul class="tb_listing tb_grid_view tb_size_<?php echo $gallery['nav_thumbs_num']; ?>"></ul>
      </div>
    </div>
  </div>
  <?php endif; ?>

  <?php if ($images && $gallery['nav'] && $gallery['nav_style'] != 'thumbs'): ?>
  <ul class="tb_pagination mSPages">
  </ul>
  <?php endif; ?>

</div>

<script type="text/javascript">
tbApp.onScriptLoaded(function() {

    // Gallery

    var $slider = new mightySlider(
        '#product_images .frame',
        {
            speed:             500,
            easing:            'easeOutExpo',
            viewport:          'fill',
            autoScale:         1,
            preloadMode:       'instant',
            navigation: {
                slideSize:     '100%',
                keyboardNavBy: 'slides'
            },
            commands: {
                thumbnails:    <?php echo $gallery['nav'] && $gallery['nav_style'] == 'thumbs' && $images ? 1 : 0; ?>,
                pages:         <?php echo $gallery['nav'] && $gallery['nav_style'] != 'thumbs' && $images ? 1 : 0; ?>,
                buttons:       <?php echo $gallery['nav'] && $gallery['nav_buttons'] ? 1 : 0; ?>
            },
            <?php if ($gallery['nav'] && $gallery['nav_style'] != 'thumbs'): ?>
            pages: {
                pagesBar:      '#product_images .tb_pagination',
                activateOn:    'click'
            },
            <?php endif; ?>
            dragging: {
                swingSync:     5,
                swingSpeed:    0.2
            },
            <?php if ($gallery['nav'] && $gallery['nav_style'] == 'thumbs'): ?>
            thumbnails: {
                thumbnailsBar:     '#product_images .tb_thumbs ul',
                thumbnailsButtons: 0,
                horizontal:        <?php echo $gallery['nav_position'] == 'bottom' ? 1 : 0; ?>,
                thumbnailNav:      'centered',
                thumbnailSize:     '<?php echo (100 / $gallery['nav_thumbs_num']); ?>%'
            },
            <?php endif; ?>
            classes: {
                loaderClass:   'tb_loading_bar'
            }
        }
    );

    <?php if ($gallery['zoom']): ?>
    function zoom_preview() {
        $('#{{widget_dom_id}} .tb_zoom_box.tb_zoom_click').removeClass('tb_zoomed');
        $('#{{widget_dom_id}} .tb_zoom_box').trigger('zoom.destroy').zoom({
            url: $slider.slides[$slider.relative.activeSlide].options.cover,
            on:  '<?php echo $gallery['zoom_trigger']; ?>'
        });
    }

    $('#{{widget_dom_id}} .tb_zoom_box.tb_zoom_click').bind('click', function(){
        if ($(this).hasClass('tb_zoomed')) {
            $(this).removeClass('tb_zoomed');
        } else {
            $(this).addClass('tb_zoomed');
        }
    });

    $slider.one('coverLoaded', function (eventName) {
      $('#product_images .tb_thumbs ul').removeClass('tb_grid_view tb_size_1 tb_size_2 tb_size_3 tb_size_4 tb_size_5 tb_size_6 tb_size_7 tb_size_8');
    });

    $slider.on('load moveEnd', function (eventName) {
        zoom_preview();
    });
    <?php endif; ?>

    $slider.init();
    $slider.activatePage(0);

    <?php if ($tbData['system.product_images']['fullscreen']): ?>

    // Fullscreen gallery

    var fullscreen_gallery_items = [
      {
        src:  '<?php echo $tbData->escapeImg($popup); ?>',
        w:    <?php echo $image_full_width; ?>,
        h:    <?php echo $image_full_height; ?>,
        msrc: '<?php echo $tbData->escapeImg($thumb); ?>'
      }
      <?php foreach ($images as $image): ?>
      ,{
        src:  '<?php echo $tbData->escapeImg($image['popup']); ?>',
        w:    <?php echo $image_full_width; ?>,
        h:    <?php echo $image_full_height; ?>,
        msrc: '<?php echo $tbData->escapeImg($image['thumb']); ?>'
      }
      <?php endforeach; ?>
    ];

    $('#{{widget_dom_id}} .tbGoFullscreen').bind('click', function() {
      lightbox_gallery('{{widget_dom_id}}', $slider, false, fullscreen_gallery_items);
    });
    <?php endif; ?>

    // Gallery changes detection

    var myInterval = null;

    jQuery('#content').on('change', ':input', function() {
        var callback = function() {

            var gallery,
                new_gallery = false,
                $images_src = $('#{{widget_dom_id}} .thumbnails');

            fullscreen_gallery_items = [];

            $images_src.find('a').each(function(index) {
                gallery += '<div data-mightyslider="type: \'image\', cover: \'' + $(this).attr('href') + '\', thumbnail: \'' + $(this).find('img').attr('src') + '\'"></div>';

                fullscreen_gallery_items.push({
                  src:  $(this).attr('href'),
                  w:    <?php echo $image_full_width; ?>,
                  h:    <?php echo $image_full_height; ?>,
                  msrc: $(this).find('img').attr('src')
                })

                if ($(this).attr('href') != $slider.slides[index].options.cover) {
                    new_gallery = true;
                }
            });

            if ($images_src.find('a').length != $slider.slides.length) {
                new_gallery = true;
            }

            if (new_gallery) {
                var slides_num = $slider.slides.length;

                $slider.off('load');
                for (var i = 0; i < slides_num; i++) {
                    $slider.remove('.mSSlide');
                };
                $slider.add(gallery);
                $slider.on('load', function (eventName) {
                  zoom_preview();
                });
            }

            return new_gallery;
        };

        clearInterval(myInterval);

        if (jQuery.active) {
            $(document).one("ajaxStop.product-images", function() {
                var i = 0;

                myInterval = setInterval(function () {
                    if (callback() || i == 5) {
                        clearInterval(myInterval);
                    }
                    i++;
                }, 150);
            });
        } else {
            setTimeout(function() {
                callback();
            }, 100);
        }
    });

});
</script>
<?php endif; ?>
<?php $tbData->slotStop(); ?>


<?php // Product Info ------------------------------------------------- ?>

<?php $tbData->slotStart('product/product.product_info', array('data' => $data)); ?>

<?php ${'content_top'} = ${'content_bottom'} = ''; ?>

<?php echo $content_top; ?>

<dl class="dl-horizontal">
  <dt><?php echo $text_stock; ?></dt>
  <dd><?php echo $stock; ?></dd>
  <dt><?php echo $text_model; ?></dt>
  <dd><?php echo $model; ?></dd>
  <?php if ($reward): ?>
  <dt><?php echo $text_reward; ?></dt>
  <dd><?php echo $reward; ?></dd>
  <?php endif; ?>
  <?php if ($tbData->common['manufacturers_enabled'] && $manufacturer): ?>
  <dt><?php echo $text_manufacturer; ?></dt>
  <dd><a href="<?php echo $manufacturers; ?>"><?php echo $manufacturer; ?></a></dd>
  <?php endif; ?>
</dl>

<?php echo $content_bottom; ?>

<?php $tbData->slotStop(); ?>


<?php // Product Price ------------------------------------------------ ?>

<?php $tbData->slotStart('product/product.product_price', array('data' => $data)); ?>
<?php if ($price) { ?>
<?php if ($tbData['system.product_price']['show_label']): ?>
<span class="tb_label"><?php echo $tbData->text_price; ?></span>
<?php endif; ?>

<div class="price">
  <?php $price = $tbData->priceFormat($price); ?>
  <?php if (!$special) { ?>
  <span class="price-regular"><?php echo $price; ?></span>
  <?php } else { ?>
  <?php $special = $tbData->priceFormat($special); ?>
  <span class="price-old"><?php echo $price; ?></span>
  <?php if ($tbData['system.product_price']['old_price_new_line']): ?>
  <span class="clear"></span>
  <?php endif; ?>
  <span class="price-new"><?php echo $special; ?></span>
  <?php } ?>
</div>

<?php if (!$tbData['system.product_price']['show_tax']) $tax = false; ?>
<?php if ($tax) { ?>
<span class="price-tax"><?php echo $text_tax; ?> <span><?php echo $tax; ?></span></span>
<?php } ?>

<?php if (!$tbData['system.product_price']['show_reward']) $points = false; ?>
<?php if ($points) { ?>
<span class="reward"><?php echo $text_points; ?> <?php echo $points; ?></span>
<?php } ?>

<?php if ($tbData->product_savings && $tbData['system.product_price']['show_savings']): ?>
<p class="price-savings">
<?php if ($tbData['system.product_price']['show_savings_sum']): ?>
<?php echo $tbData->product_you_save; ?>
<?php else: ?>
<?php echo $tbData->product_savings; ?>
<?php endif; ?>
</p>
<?php endif; ?>

<?php if (!$tbData['config']->get('config_customer_price') || ($tbData['config']->get('config_customer_price') && $tbData['customer']->isLogged())): ?>
<script type="text/javascript">
$(document).ready(function() {
    $('#content').find('select[name="profile_id"], :input[name^="option"], :input[name^="quantity"]').change(function(){
        $.ajax({
            type: 'post',
            url: 'index.php?route=tb/getProductPrice',
            dataType: 'json',
            data: $('#content :checked, #content select, #content :input[name^="quantity"], #content :input[name^="product_id"]'),
            success: function (data) {
                if (typeof data.error != "undefined") {
                    return;
                }

                var $priceWrap = $('.tb_wt_product_price_system');

                if ($priceWrap.has('.price-old').length) {
                    $priceWrap.find('.price-old').html(data.price);
                    $priceWrap.find('.price-new').html(data.special);
                } else {
                    $priceWrap.find('.price-regular').html(data.price);
                }
                $priceWrap.find(".price-tax span").html(data.subtotal);
            },
            error: function(xhr, ajaxOptions, thrownError) {
                alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
            }
        });
    });
});
</script>
<?php endif; ?>
<?php } ?>
<?php $tbData->slotStop(); ?>


<?php // Product Discounts -------------------------------------------- ?>

<?php $tbData->slotStart('product/product.product_discounts', array('data' => $data)); ?>
<?php if ($price): ?>
<?php if ($discounts) { ?>
<?php if ($tbData['system.product_discounts']['block_title']): ?>
<div class="panel-heading">
  <h2 class="panel-title"><?php echo $tbData->text_product_discount; ?></h2>
</div>
<?php endif; ?>
<div class="panel-body">
  <table{{table_classes}}>
    <thead>
      <tr>
        <th><?php echo $tbData->text_product_order_quantity; ?></th>
        <th><?php echo $tbData->text_product_price_per_item; ?></th>
      </tr>
    </thead>
    <tbody>
      <?php foreach ($discounts as $discount): ?>
      <tr>
        <td><?php echo sprintf($tbData->text_product_discount_items, $discount['quantity']); ?></td>
        <td><?php echo $discount['price']; ?></td>
      </tr>
      <?php endforeach; ?>
    </tbody>
  </table>
</div>
<?php } ?>
<?php endif; ?>
<?php $tbData->slotStop(); ?>


<?php // Product Options ---------------------------------------------- ?>

<?php $tbData->slotStart('product/product.product_options', array('data' => $data)); ?>
<?php if ($options || $recurrings): ?>
<?php if ($tbData['system.product_options']['block_title']): ?>
<div class="panel-heading">
  <h2 class="panel-title"><?php echo $text_option; ?></h2>
</div>
<?php endif; ?>

<?php $tbData->slotFilter('product/product_options.filter', $options, array('data' => $data)); ?>
<div class="options panel-body form-horizontal">

  <?php foreach ($options as $option) { ?>

  <?php // SELECT  ?>
  <?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>
    <div class="col-sm-9">
      <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']) { ?>
          (<?php echo $option_value['price_prefix']; ?><?php echo $option_value['price']; ?>)
          <?php } ?>
        </option>
        <?php } ?>
      </select>
    </div>
  </div>
  <?php } ?>

  <?php // RADIO  ?>
  <?php if ($option['type'] == 'radio') { ?>
  <?php if ($tbData->OcVersionGte('2.3.0.0') && !empty($option['tb_css_classes']) && $option['tb_css_classes'] == 'style_2' && isset($option['image_width'])): ?>
  <style scoped>
  #input-option<?php echo $option['product_option_id']; ?> img {
    width: <?php echo $option['image_width']; ?>px;
    height: <?php echo $option['image_height']; ?>px;
  }
  </style>
  <?php endif; ?>
  <div class="form-group<?php echo ($option['required'] ? ' required' : ''); ?><?php if (isset($option['tb_css_classes']) && !empty($option['tb_css_classes'])) echo' tb_' . $option['tb_css_classes']; ?>">
    <label class="control-label"><?php echo $option['name']; ?></label>
    <div class="col-sm-9">
      <div id="input-option<?php echo $option['product_option_id']; ?>">
        <?php foreach ($option['product_option_value'] as $option_value) { ?>
        <div class="radio<?php if (!empty($option_value['image'])): ?> image<?php endif; ?>">
          <label<?php if (isset($option['tb_css_classes']) && !empty($option['tb_css_classes']) && $option['tb_css_classes'] == 'style_2'): ?> class="tb_bg_str_2 tb_bg_hover_str_3"<?php endif; ?><?php if ($option_value['price']) { ?> title="<?php echo $option_value['price_prefix']; ?><?php echo $option_value['price']; ?>"<?php } ?>>
            <input type="radio" name="option[<?php echo $option['product_option_id']; ?>]" value="<?php echo $option_value['product_option_value_id']; ?>" />
            <?php if ($tbData->OcVersionGte('2.3.0.0')): ?>
            <?php if ($option_value['image']) { ?>
            <img src="<?php echo $option_value['image']; ?>" alt="<?php echo $option_value['name'] . ($option_value['price'] ? ' ' . $option_value['price_prefix'] . $option_value['price'] : ''); ?>" class="img-thumbnail" /> 
            <?php } ?>
            <?php endif; ?>
            <span>
              <?php echo $option_value['name']; ?>
              <?php if ($option_value['price']) { ?>
              (<?php echo $option_value['price_prefix']; ?><?php echo $option_value['price']; ?>)
              <?php } ?>
            </span>
          </label>
        </div>
        <?php } ?>
      </div>
    </div>
  </div>
  <?php } ?>

  <?php // CHECKBOX  ?>
  <?php if ($option['type'] == 'checkbox') { ?>
  <div class="form-group<?php echo ($option['required'] ? ' required' : ''); ?><?php if (isset($option['tb_css_classes']) && !empty($option['tb_css_classes'])) echo' tb_' . $option['tb_css_classes']; ?>">
    <?php if ($tbData->OcVersionGte('2.2.0.0') && !empty($option['tb_css_classes']) && $option['tb_css_classes'] == 'style_2' && isset($option['image_width'])): ?>
    <style scoped>
    #input-option<?php echo $option['product_option_id']; ?> img {
      width: <?php echo $option['image_width']; ?>px;
      height: <?php echo $option['image_height']; ?>px;
    }
    </style>
    <?php endif; ?>
    <label class="control-label"><?php echo $option['name']; ?></label>
    <div class="col-sm-9">
      <div id="input-option<?php echo $option['product_option_id']; ?>">
        <?php foreach ($option['product_option_value'] as $option_value) { ?>
        <?php if ($tbData->OcVersionGte('2.2.0.0')): ?>
        <div class="checkbox<?php if ($option_value['image']) echo ' image'; ?>">
        <?php else: ?>
        <div class="checkbox<?php if (!empty($option_value['image'])): ?> image<?php endif; ?>">
        <?php endif; ?>
          <label<?php if (isset($option['tb_css_classes']) && !empty($option['tb_css_classes']) && $option['tb_css_classes'] == 'style_2'): ?> class="tb_bg_str_2 tb_bg_hover_str_3"<?php endif; ?><?php if ($option_value['price']) { ?> title="<?php echo $option_value['price_prefix']; ?><?php echo $option_value['price']; ?>"<?php } ?>>
            <input type="checkbox" name="option[<?php echo $option['product_option_id']; ?>][]" value="<?php echo $option_value['product_option_value_id']; ?>" />
            <?php if ($tbData->OcVersionGte('2.2.0.0')): ?>
            <?php if ($option_value['image']) { ?>
            <img src="<?php echo $option_value['image']; ?>" alt="<?php echo $option_value['name'] . ($option_value['price'] ? ' ' . $option_value['price_prefix'] . $option_value['price'] : ''); ?>" class="img-thumbnail" />
            <?php } ?>
            <?php endif; ?>
            <span>
              <?php echo $option_value['name']; ?>
              <?php if ($option_value['price']) { ?>
              (<?php echo $option_value['price_prefix']; ?><?php echo $option_value['price']; ?>)
              <?php } ?>
            </span>
          </label>
        </div>
        <?php } ?>
      </div>
    </div>
  </div>
  <?php } ?>

  <?php // IMAGE  ?>
  <?php if ($option['type'] == 'image') { ?>
  <div class="form-group<?php echo ($option['required'] ? ' required' : ''); ?><?php if (isset($option['tb_css_classes']) && !empty($option['tb_css_classes'])) echo' tb_' . $option['tb_css_classes']; ?>">
    <?php if (!empty($option['tb_css_classes']) && $option['tb_css_classes'] == 'style_2' && isset($option['image_width'])): ?>
    <style scoped>
    #input-option<?php echo $option['product_option_id']; ?> img {
      width: <?php echo $option['image_width']; ?>px;
      height: <?php echo $option['image_height']; ?>px;
    }
    </style>
    <?php endif; ?>
    <label class="control-label"><?php echo $option['name']; ?></label>
    <div class="col-sm-9">
      <div id="input-option<?php echo $option['product_option_id']; ?>">
        <?php foreach ($option['product_option_value'] as $option_value) { ?>
        <div class="radio image">
          <label<?php if (isset($option['tb_css_classes']) && !empty($option['tb_css_classes']) && $option['tb_css_classes'] == 'style_2'): ?> class="tb_bg_str_2 tb_bg_hover_str_3" title="<?php echo $option_value['name']; ?><?php if ($option_value['price']) { ?> (<?php echo $option_value['price_prefix']; ?><?php echo $option_value['price']; ?>)<?php } ?>"<?php endif; ?>>
            <input type="radio" name="option[<?php echo $option['product_option_id']; ?>]" value="<?php echo $option_value['product_option_value_id']; ?>" />
            <img src="<?php echo $option_value['image']; ?>" alt="<?php echo $option_value['name'] . ($option_value['price'] ? ' ' . $option_value['price_prefix'] . $option_value['price'] : ''); ?>" />
            <span>
              <?php echo $option_value['name']; ?>
              <?php if ($option_value['price']) { ?>
              (<?php echo $option_value['price_prefix']; ?><?php echo $option_value['price']; ?>)
              <?php } ?>
            </span>
          </label>
        </div>
        <?php } ?>
      </div>
    </div>
  </div>
  <?php } ?>

  <?php // TEXT  ?>
  <?php if ($option['type'] == 'text') { ?>
  <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>
    <div class="col-sm-9">
      <input type="text" name="option[<?php echo $option['product_option_id']; ?>]" value="<?php echo $option['value']; ?>" placeholder="<?php echo $option['name']; ?>" id="input-option<?php echo $option['product_option_id']; ?>" class="form-control" />
    </div>
  </div>
  <?php } ?>

  <?php // TEXTAREA  ?>
  <?php if ($option['type'] == 'textarea') { ?>
  <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>
    <div class="col-sm-10">
      <textarea name="option[<?php echo $option['product_option_id']; ?>]" rows="5" placeholder="<?php echo $option['name']; ?>" id="input-option<?php echo $option['product_option_id']; ?>" class="form-control"><?php echo $option['value']; ?></textarea>
    </div>
  </div>
  <?php } ?>

  <?php // FILE  ?>
  <?php if ($option['type'] == 'file') { ?>
  <?php $hasFile = true; ?>
  <div class="form-group<?php echo ($option['required'] ? ' required' : ''); ?>">
    <label class="control-label"><?php echo $option['name']; ?></label>
    <div class="col-sm-9">
      <button type="button" id="button-upload<?php echo $option['product_option_id']; ?>" data-loading-text="<?php echo $text_loading; ?>" class="btn"><i class="fa fa-upload"></i> <?php echo $button_upload; ?></button>
      <input type="hidden" name="option[<?php echo $option['product_option_id']; ?>]" value="" id="input-option<?php echo $option['product_option_id']; ?>" />
    </div>
  </div>
  <?php } ?>

  <?php // DATE  ?>
  <?php if ($option['type'] == 'date') { ?>
  <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>
    <div class="col-sm-10">
      <div class="input-group date">
        <input type="text" name="option[<?php echo $option['product_option_id']; ?>]" value="<?php echo $option['value']; ?>" data-date-format="YYYY-MM-DD" id="input-option<?php echo $option['product_option_id']; ?>" class="form-control" />
        <span class="input-group-btn">
          <button class="btn btn-default tb_no_text" type="button"><i class="fa fa-calendar"></i></button>
        </span>
      </div>
    </div>
  </div>
  <?php } ?>

  <?php // DATETIME  ?>
  <?php if ($option['type'] == 'datetime') { ?>
  <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>
    <div class="col-sm-9">
      <div class="input-group datetime">
        <input type="text" name="option[<?php echo $option['product_option_id']; ?>]" value="<?php echo $option['value']; ?>" data-date-format="YYYY-MM-DD HH:mm" id="input-option<?php echo $option['product_option_id']; ?>" class="form-control" />
        <span class="input-group-btn">
          <button type="button" class="btn btn-default tb_no_text"><i class="fa fa-calendar"></i></button>
        </span>
      </div>
    </div>
  </div>
  <?php } ?>

  <?php // TIME  ?>
  <?php if ($option['type'] == 'time') { ?>
  <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>
    <div class="col-sm-9">
      <div class="input-group time">
        <input type="text" name="option[<?php echo $option['product_option_id']; ?>]" value="<?php echo $option['value']; ?>" data-date-format="HH:mm" id="input-option<?php echo $option['product_option_id']; ?>" class="form-control" />
        <span class="input-group-btn">
          <button type="button" class="btn btn-default tb_no_text"><i class="fa fa-calendar"></i></button>
        </span>
      </div>
    </div>
  </div>
  <?php } ?>

  <?php } ?>

  <?php // RECURRING  ?>
  <?php if ($recurrings) { ?>
  <div class="form-group required">
    <label><?php echo $text_payment_recurring ?></label>
    <div class="col-sm-10">
      <select name="recurring_id" class="form-control">
        <option value=""><?php echo $text_select; ?></option>
        <?php foreach ($recurrings as $recurring) { ?>
        <option value="<?php echo $recurring['recurring_id'] ?>"><?php echo $recurring['name'] ?></option>
        <?php } ?>
      </select>
      <div class="help-block" id="recurring-description"></div>
    </div>
  </div>
  <?php } ?>

</div>

<script>

// Datetimepicker

$('.date').datetimepicker({
  pickTime: false
});
$('.datetime').datetimepicker({
  pickDate: true,
  pickTime: true,
  icons: {
    time: 'fa fa-clock-o',
    date: 'fa fa-calendar',
    up:   'fa fa-angle-up',
    down: 'fa fa-angle-down'
  }
});
$('.time').datetimepicker({
  pickDate: false,
  icons: {
    up:   'fa fa-angle-up',
    down: 'fa fa-angle-down'
  }
});

// Option select

$('.options .tb_style_2 .radio').bind('click', function() {
    $(this).closest('.form-group').find('.tb_checked').removeClass('tb_checked tb_main_color_bg').addClass('tb_bg_hover_str_3');
    $(this).find('> label').removeClass('tb_bg_hover_str_3').addClass('tb_checked tb_main_color_bg');
});
$('.options .tb_style_2 .checkbox').bind('click', function(e) {
  $(this).find('> label').toggleClass('tb_checked tb_main_color_bg', $(this).find('input[type="checkbox"]').prop("checked"));
});

// File upload

$('button[id^=\'button-upload\']').on('click', function() {
  var node = this;

  $('#form-upload').remove();

  $('body').prepend('<form enctype="multipart/form-data" id="form-upload" style="display: none;"><input type="file" name="file" /></form>');

  $('#form-upload input[name=\'file\']').trigger('click');

  if (typeof timer != 'undefined') {
    clearInterval(timer);
  }

  timer = setInterval(function() {
    if ($('#form-upload input[name=\'file\']').val() != '') {
      clearInterval(timer);
      $.ajax({
        url: 'index.php?route=tool/upload',
        type: 'post',
        dataType: 'json',
        data: new FormData($('#form-upload')[0]),
        cache: false,
        contentType: false,
        processData: false,
        beforeSend: function() {
          $(node).after('<i class="fa fa-circle-o-notch fa-spin"></i>');
          $(node).attr('disabled', true);
        },
        success: function(json) {
          $('.text-danger').remove();
          $(node).next('.fa-spin').remove();
          $(node).attr('disabled', false);

          if (json['error']) {
            $(node).parent().find('input').after('<div class="text-danger">' + json['error'] + '</div>');
          }

          if (json['success']) {
            alert(json['success']);

            $(node).parent().find('input').attr('value', json['code']);
          }
        },
        error: function(xhr, ajaxOptions, thrownError) {
          alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
        }
      });
    }
  }, 500);
});

// Reccuring

$('select[name=\'recurring_id\'], input[name="quantity"]').change(function(){
  $.ajax({
    url: 'index.php?route=product/product/getRecurringDescription',
    type: 'post',
    data: $('input[name=\'product_id\'], input[name=\'quantity\'], select[name=\'recurring_id\']'),
    dataType: 'json',
    beforeSend: function() {
      $('#recurring-description').html('');
    },
    success: function(json) {
      $('.alert, .text-danger').remove();

      if (json['success']) {
        $('#recurring-description').html(json['success']);
      }
    }
  });
});
</script>
<?php endif; ?>
<?php $tbData->slotStop(); ?>


<?php // Product Buy -------------------------------------------------- ?>

<?php $product_info = array(); ?>
<?php $tbData->slotStart('product/product.product_buy', array('filter' => array('product/product.product_buy.filter', 'button_cart' => &$button_cart, 'product_info' => &$product_info), 'data' => $data)); ?>
<?php if (($price && $button_cart) || $tbData->common['wishlist_enabled'] || $tbData->common['compare_enabled']): ?>
<div id="product"></div>
<div class="tb_cart_wrap">
  <?php if ($price && $button_cart): ?>
  <div class="tb_purchase_button">
    <label class="control-label" for="input-quantity"><?php echo $entry_qty; ?></label>
    <div class="tb_input_wrap">
      <input type="text" name="quantity" value="<?php echo $minimum; ?>" size="2" id="input-quantity" class="form-control" data-min="<?php echo $minimum; ?>" />
      <input type="hidden" name="product_id" value="<?php echo $product_id; ?>" />
    </div>
    <br />
    <button type="button" id="button-cart" data-loading-text="<?php echo $text_loading; ?>" class="btn"><?php echo $button_cart; ?></button>
  </div>
  <?php endif; ?>
  <div class="tb_actions">
    <?php if ($tbData->common['wishlist_enabled']): ?>
    <div class="tb_button_wishlist">
      <a class="tb_icon_10 fa-heart" href="javascript:;" onclick="wishlist.add('<?php echo $product_id; ?>');"><?php echo $button_wishlist; ?></a>
    </div>
    <?php endif; ?>
    <?php if ($tbData->common['compare_enabled']): ?>
    <div class="tb_button_compare">
      <a class="tb_icon_10 fa-retweet" href="javascript:;" onclick="compare.add('<?php echo $product_id; ?>');"><?php echo $button_compare; ?></a>
    </div>
    <?php endif; ?>
  </div>
</div>
<?php if ($minimum > 1) { ?>
<div class="minimum"><?php echo $text_minimum; ?></div>
<?php } ?>

<script type="text/javascript">
tbApp.onScriptLoaded(function() {
    $('#input-quantity').TouchSpin({
        max: 1000000000,
        verticalbuttons: true,
        verticalupclass: 'fa fa-caret-up',
        verticaldownclass: 'fa fa-caret-down'
    });
});

$('#button-cart').on('click', function() {
    var url         = window.location.href,
        button_text = $('#button-cart').text();

    $.ajax({
        url: 'index.php?route=checkout/cart/add',
        type: 'post',
        data: $('.product-info input[type=\'text\'], .product-info input[type=\'number\'], .product-info input[type=\'date\'], .product-info input[type=\'datetime\'], .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',
        beforeSend: function() {
            $('#button-cart').attr('disabled', true);
            $('#button-cart').text('');
            $('#button-cart').append('<i class="fa fa-circle-o-notch fa-spin"></i>');
        },
        success: function(json) {
            $('.alert, .text-danger').remove();
            $('.form-group').removeClass('has-error');

            setTimeout(function(){
                $('#button-cart').next('.fa-spin').remove();
                $('#button-cart').text(button_text);
                $('#button-cart').attr('disabled', false);
            },200);

            if (json['error']) {
                var errors = '';

                if (json['error']['option']) {
                    for (i in json['error']['option']) {
                        var element = $('#input-option' + i.replace('_', '-'));
            
                        element.parents('.form-group').first().find('> label + div').append('<div class="text-danger">' + json['error']['option'][i] + '</div>');
                    }
                }
                if (json['error']['recurring']) {
                    $('select[name="recurring_id"]').after('<span class="error">' + json['error']['recurring'] + '</span>');
                }
                // Highlight any found errors
                $('.text-danger').each(function() {
                    $(this).parents('.form-group').first().addClass('has-error');
                });
                // Popup any found errors
                // displayNotice('product', 'failure', 'product', errors);
            }
            if (json['success']) {
                $.get('index.php?route=common/cart/info', function(result) {
                    var $items  = $(result).find('.content').clone(),
                        $title  = $(result).find('.heading').clone();

                    $('.tb_wt_header_cart_menu_system .heading').replaceWith($title);
                    $('.tb_wt_header_cart_menu_system .content').replaceWith($items);
                    tbApp.triggerResizeCallbacks();
                });
                displayNotice('product', 'success', 'product', json['success']);
            }
        },
        error: function(xhr, ajaxOptions, thrownError) {
            alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
        }
    });
});
</script>
<?php endif; ?>
<?php $tbData->slotStop(); ?>


<?php // Product Reviews Summary -------------------------------------- ?>

<?php $tbData->slotStart('product/product.product_reviews_summary', array('data' => $data)); ?>
<?php if ($review_status): ?>
<?php if ($rating): ?>
<div class="rating responsive" data-sizes="320,0">
  <div class="tb_bar">
    <span class="tb_percent" style="width: <?php echo $rating * 20; ?>%;"></span>
    <span class="tb_base"></span>
  </div>
  <span class="tb_average"><?php echo $rating; ?>/5</span>
  <span class="tb_total">(<?php echo $reviews; ?>)</span>
  <a class="tb_review_write tb_main_color border-color" data-toggle="modal" data-target="#tbReviewFormWrap">
    <span class="tb_icon fa-pencil"></span><?php echo $text_write; ?>
  </a>
</div>
<?php else: ?>
<div class="rating responsive" data-sizes="320,0">
  <div class="tb_bar">
    <span class="tb_base"></span>
  </div>
  <span class="tb_total"><?php echo $tbData->text_product_not_yet_rated; ?></span>
  <a class="tb_review_write tb_main_color border-color" data-toggle="modal" data-target="#tbReviewFormWrap">
    <span class="tb_icon fa-pencil"></span><?php echo $text_write; ?>
  </a>
</div>
<?php endif; ?>
<?php endif; ?>
<?php $tbData->slotStop(); ?>


<?php // Product Share ------------------------------------------------ ?>

<?php $tbData->slotStart('product/product.product_share', array('data' => $data)); ?>
<?php if ($tbData['system.product_share']['button_facebook']
       || $tbData['system.product_share']['button_twitter']
       || $tbData['system.product_share']['button_google']
       || $tbData['system.product_share']['button_pinterest']
       || $tbData['system.product_share']['button_stumbleupon']
       || $tbData['system.product_share']['button_linkedin']
       || $tbData['system.product_share']['button_custom']): ?>
<?php if ($tbData['system.product_share']['block_title']): ?>
<div class="panel-heading">
  <h2 class="panel-title"><?php echo $tbData->text_product_share; ?></h2>
</div>
<?php endif; ?>
<?php if (!$tbData['system.product_share']['button_custom']): ?>
<div class="panel-body tb_share_box">
  <?php if ($tbData['system.product_share']['button_facebook']): ?>
  <div class="tb_facebook">
    <a class="fb-like" data-layout="button_count" data-action="like" data-show-faces="true" data-share="false"></a>
  </div>
  <?php endif; ?>
  <?php if ($tbData['system.product_share']['button_twitter']): ?>
  <div class="tb_twitter">
    <a class="twitter-share-button" href="https://twitter.com/share">Tweet</a>
  </div>
  <?php endif; ?>
  <?php if ($tbData['system.product_share']['button_google']): ?>
  <div class="tb_gplus" style="width: 57px;">
    <a class="g-plusone" data-size="medium"></a>
  </div>
  <?php endif; ?>
  <?php if ($tbData['system.product_share']['button_pinterest']): ?>
  <div class="tb_pinterest">
    <a href="//www.pinterest.com/pin/create/button/?url=<?php echo $tbData->current_url; ?>&media=<?php echo $thumb; ?>" data-pin-do="buttonPin" data-pin-config="beside"><img src="//assets.pinterest.com/images/pidgets/pinit_fg_en_rect_gray_20.png" /></a>
  </div>
  <?php endif; ?>
  <?php if ($tbData['system.product_share']['button_stumbleupon']): ?>
  <div class="tb_stumbleupon">
    <su:badge layout="1"></su:badge>
  </div>
  <?php endif; ?>
  <?php if ($tbData['system.product_share']['button_linkedin']): ?>
  <div class="tb_social_button tb_linkedin">
    <script src="//platform.linkedin.com/in.js" type="text/javascript">lang: <?php if($tbData->facebook['locale']): ?><?php echo $tbData->facebook['locale']; ?><?php else: ?>en_EN<?php endif; ?></script>
    <script type="IN/Share" data-url="<?php echo $tbData->current_url; ?>" data-counter="right"></script>
  </div>
  <?php endif; ?>
</div>
<script>
tbApp.onScriptLoaded(function() {

    <?php // Tweet button ?>
    <?php if ($tbData['system.product_share']['button_twitter']): ?>
    var loadTwitter = function () {
        !function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');
    };
    <?php endif; ?>

    <?php // Google +1 ?>
    <?php if ($tbData['system.product_share']['button_google']): ?>
    var loadGplus = function () {
        (function(){var po=document.createElement('script');po.type='text/javascript';po.async=true;po.src='https://apis.google.com/js/platform.js';var s=document.getElementsByTagName('script')[0];s.parentNode.insertBefore(po,s);})();
    };
    <?php endif; ?>

    <?php // Pin button ?>
    <?php if ($tbData['system.product_share']['button_pinterest']): ?>
    var loadPinterest = function () {
        (function(){var po=document.createElement('script');po.type='text/javascript';po.async=true;po.src='//assets.pinterest.com/js/pinit.js';var s=document.getElementsByTagName('script')[0];s.parentNode.insertBefore(po,s);})();
    };
    <?php endif; ?>

    <?php // Stumble Upon ?>
    <?php if ($tbData['system.product_share']['button_stumbleupon']): ?>
    var loadSU = function () {
        (function(){var li=document.createElement('script');li.type='text/javascript';li.async=true;li.src=('https:'==document.location.protocol?'https:':'http:')+'//platform.stumbleupon.com/1/widgets.js';var s=document.getElementsByTagName('script')[0];s.parentNode.insertBefore(li,s);})();
    };
    <?php endif; ?>

    <?php if ($tbData->system['js_lazyload']): ?>
    $(document).on('lazybeforeunveil', function(e) {
        if ($(e.target).filter('#{{widget_dom_id}}').length) {

            <?php // Facebook like ?>
            <?php if ($tbData['system.product_share']['button_facebook']): ?>
            var parseFBXML = function() {
                FB.XFBML.parse(document.getElementById('{{widget_dom_id}}'));
            };
            if (window.FB_XFBML_parsed === undefined) {
                window.FB_XFBML_parsed = parseFBXML;
            } else {
                parseFBXML();
            }
            <?php endif; ?>

            <?php // Tweet button ?>
            <?php if ($tbData['system.product_share']['button_twitter']): ?>
            loadTwitter();
            <?php endif; ?>

            <?php // Google +1 ?>
            <?php if ($tbData['system.product_share']['button_google']): ?>
            loadGplus();
            <?php endif; ?>

            <?php // Pin button ?>
            <?php if ($tbData['system.product_share']['button_pinterest']): ?>
            loadPinterest();
            <?php endif; ?>

            <?php // Stumble Upon ?>
            <?php if ($tbData['system.product_share']['button_stumbleupon']): ?>
            loadSU();
            <?php endif; ?>
        }
    });
    <?php else: ?>

    <?php // Tweet button ?>
    <?php if ($tbData['system.product_share']['button_twitter']): ?>
    loadTwitter();
    <?php endif; ?>

    <?php // Google +1 ?>
    <?php if ($tbData['system.product_share']['button_google']): ?>
    loadGplus();
    <?php endif; ?>

    <?php // Pin button ?>
    <?php if ($tbData['system.product_share']['button_pinterest']): ?>
    loadPinterest();
    <?php endif; ?>

    <?php // Stumble Upon ?>
    <?php if ($tbData['system.product_share']['button_stumbleupon']): ?>
    loadSU();
    <?php endif; ?>

    <?php endif; ?>
});
</script>
<?php else: ?>
<div class="tb_share_box_custom">
  <?php echo $tbData['system.product_share']['button_custom'] ?>
</div>
<?php endif; ?>
<?php endif; ?>
<?php $tbData->slotStop(); ?>


<?php // Product Description ------------------------------------------ ?>

<?php $tbData->slotStart('product/product.product_description', array('data' => $data)); ?>
<?php if ($tbData['system.product_description']['block_title']): ?>
<div class="panel-heading">
  <h2 class="panel-title"><?php echo $tab_description; ?></h2>
</div>
<?php endif; ?>
<div class="panel-body tb_product_description tb_text_wrap">
  <?php echo $description; ?>
</div>

<?php // Rich Snippets ------------------------------------------------ ?>

<?php if (!isset($tbData['seo_settings']['google_microdata']) || !empty($tbData['seo_settings']['google_microdata'])): ?>
<script type="application/ld+json">
{
  "@context":         "http://schema.org/",
  "@type":            "Product",
  "name":             "<?php echo $heading_title; ?>",
  "image":            "<?php echo $thumb; ?>",
  "description":      "<?php echo utf8_substr(strip_tags($description), 0, 200); ?>",
  <?php if ($tbData->common['manufacturers_enabled'] && $manufacturer): ?>
  "brand":{
    "@type":          "Thing",
    "name":           "<?php echo $manufacturer; ?>"
  },
  <?php endif; ?>
  <?php if ($rating): ?>
  "aggregateRating":{
    "@type":          "AggregateRating",
    "ratingValue":    "<?php echo $rating; ?>",
    "reviewCount":    "<?php echo filter_var($reviews, FILTER_SANITIZE_NUMBER_INT); ?>"
  },
  <?php endif; ?>
  "offers":{
    "@type":          "Offer",
    "priceCurrency":  "<?php echo $tbData->currency_code; ?>",
    <?php if (!$special): ?>
    "price":          "<?php echo $product_info['price_num']; ?>",
    <?php else: ?>
    "price":          "<?php echo $product_info['special_num']; ?>",
    <?php endif; ?>
    "availability":   "<?php echo strip_tags($stock); ?>",
    "seller":{
      "@type":        "Organization",
      "name":         "Executive Objects"
    }
  }
}
</script>
<?php endif; ?>
<?php $tbData->slotStop(); ?>


<?php // Product Attributes ------------------------------------------- ?>

<?php $tbData->slotStart('product/product.product_attributes', array('data' => $data)); ?>
<?php if ($attribute_groups): ?>
<?php if ($tbData['system.product_attributes']['block_title']): ?>
<div class="panel-heading">
  <h2 class="panel-title"><?php echo $tab_attribute; ?></h2>
</div>
<?php endif; ?>
<div class="panel-body tb_product_attributes">
  <table class="table">
    <?php foreach ($attribute_groups as $attribute_group): ?>
    <thead>
      <tr>
        <th colspan="2"><?php echo $attribute_group['name']; ?></th>
      </tr>
    </thead>
    <tbody>
      <?php foreach ($attribute_group['attribute'] as $attribute): ?>
      <tr>
        <td width="30%"><?php echo $attribute['name']; ?></td>
        <td><?php echo $attribute['text']; ?></td>
      </tr>
      <?php endforeach; ?>
    </tbody>
    <?php endforeach; ?>
  </table>
</div>
<?php endif; ?>
<?php $tbData->slotStop(); ?>


<?php // Product Reviews ---------------------------------------------- ?>

<?php $tbData->slotStart('product/product.product_reviews', array('data' => $data)); ?>
<?php if ($review_status) { ?>
<?php if ($tbData['system.product_reviews']['block_title']): ?>
<div class="panel-heading">
  <h2 class="panel-title"><?php echo $tab_review; ?></h2>
</div>
<?php endif; ?>
<div class="panel-body tb_product_reviews">
  <div id="review"></div>
  <a class="btn" data-toggle="modal" data-target="#tbReviewFormWrap"><?php echo $text_write; ?></a>
  <div id="tbReviewFormWrap" class="modal fade">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h2 class="modal-title"><?php echo $text_write; ?></h2>
          <a class="close" href="javascript:;" data-dismiss="modal">
            <svg><use xlink:href="<?php echo $tbData->current_url; ?>#close" /></svg>
          </a>
        </div>
        <div class="modal-body">
          <?php if ($review_guest) { ?>
          <form class="tbReviewForm form-vertical">
            <div class="form-group required">
              <label class="control-label" for="input-name"><?php echo $entry_name; ?></label>
              <div class="col-sm-12">
                <?php if ($tbData->OcVersionGte('2.2.0.0')): ?>
                <input type="text" name="name" value="<?php echo $customer_name; ?>" id="input-name" class="form-control" />
                <?php else: ?>
                <input type="text" name="name" value="" id="input-name" class="form-control" />
                <?php endif; ?>
              </div>
            </div>
            <div class="form-group required">
              <label class="control-label" for="input-review"><?php echo $entry_review; ?></label>
              <div class="col-sm-12 tb_full">
                <textarea name="text" rows="5" id="input-review" class="form-control"></textarea>
                <div class="help-block"><?php echo $text_note; ?></div>
              </div>
            </div>
            <div class="form-group required">
              <label class="control-label"><?php echo $entry_rating; ?></label>
              <div class="col-sm-12">
                <?php echo $entry_bad; ?>&nbsp;&nbsp;&nbsp;
                <input type="radio" name="rating" value="1" />
                &nbsp;
                <input type="radio" name="rating" value="2" />
                &nbsp;
                <input type="radio" name="rating" value="3" />
                &nbsp;
                <input type="radio" name="rating" value="4" />
                &nbsp;
                <input type="radio" name="rating" value="5" />
                &nbsp;<?php echo $entry_good; ?></div>
            </div>
            <?php if ($tbData->OcVersionGte('2.1.0.0')): ?>
            <?php echo $captcha; ?>
            <?php elseif ($tbData->OcVersionGte('2.0.2.0')): ?>
            <?php if ($site_key) { ?>
            <div class="form-group">
              <div class="col-sm-12">
                <div class="g-recaptcha" data-sitekey="<?php echo $site_key; ?>"></div>
              </div>
            </div>
            <?php } ?>
            <?php else: ?>
            <div class="form-group required">
              <label class="control-label" for="input-captcha"><?php echo $entry_captcha; ?></label>
              <div class="col-sm-12">
                <input type="text" name="captcha" value="" id="input-captcha" class="form-control" />
              </div>
            </div>
            <div class="form-group">
              <img src="index.php?route=tool/captcha" alt="" id="captcha" />
            </div>
            <?php endif; ?>
            <span class="clear tb_sep"></span>
            <div class="buttons clearfix">
              <div class="pull-right">
                <button type="button" id="button-review" data-loading-text="<?php echo $text_loading; ?>" class="btn btn-primary"><?php echo $button_continue; ?></button>
              </div>
            </div>
          </form>
          <?php } else { ?>
          <p class="tb_text_wrap tb_empty"><?php echo $text_login; ?></p>
          <?php } ?>
        </div>
      </div>
    </div>
  </div>
</div>

<script type="text/javascript">
tbApp.onScriptLoaded(function() {
    $('#review').delegate('.pagination a', 'click', function(e) {
      e.preventDefault();
      $('#review').fadeOut('slow');

      $('#review').load(this.href);

      $('#review').fadeIn('slow');

    });

    $('#review').load('index.php?route=product/product/review&product_id=<?php echo $product_id; ?>');

    $('#tbReviewFormWrap').detach().appendTo('body');

    $('.tbReviewForm .buttons .btn').bind('click', function() {
        $.ajax({
            url: 'index.php?route=product/product/write&product_id=<?php echo $product_id; ?>',
            type: 'post',
            dataType: 'json',
            <?php if ($tbData->OcVersionGte('2.0.2.0')): ?>
            data: $(".tbReviewForm").serialize(),
            <?php else: ?>
            data: 'name=' + encodeURIComponent($('input[name=\'name\']').val()) + '&text=' + encodeURIComponent($('textarea[name=\'text\']').val()) + '&rating=' + encodeURIComponent($('input[name=\'rating\']:checked').val() ? $('input[name=\'rating\']:checked').val() : '') + '&captcha=' + encodeURIComponent($('input[name=\'captcha\']').val()),
            <?php endif; ?>
            beforeSend: function() {
                $('.tbReviewForm').addClass('tb_blocked tb_loading');
                $('.tbReviewForm').prepend('<i class="fa fa-circle-o-notch fa-spin"></i>');
                $('.tbReviewForm .buttons .tb_button').attr('disabled', true);
            },
            complete: function() {
                $('#captcha').attr('src', 'index.php?route=tool/captcha#'+new Date().getTime());
                $('input[name=\'captcha\']').val('');
            },
            success: function(json) {
                $('.tbReviewForm .alert').remove();
                $('.tbReviewForm').find('> .fa-spin').remove();
                $('.tbReviewForm').removeClass('tb_blocked tb_loading');
                $('.tbReviewForm .tb_submit .tb_button').attr('disabled', false);

                if (json['error']) {
                    $('.tbReviewForm').prepend('<div class="alert alert-danger"><i class="fa fa-exclamation-circle"></i> ' + json['error'] + '</div>');
                }

                if (json['success']) {
                    $('.tbReviewForm').before('<div class="alert alert-success"><i class="fa fa-check-circle"></i> ' + json['success'] + '</div>');
                    $('.tbReviewForm').hide();

                    $('input[name=\'name\']').val('');
                    $('textarea[name=\'text\']').val('');
                    $('input[name=\'rating\']:checked').prop('checked', false);
                    $('#captcha').attr('src', 'index.php?route=tool/captcha#'+new Date().getTime());
                    $('input[name=\'captcha\']').val('');
                    if (typeof grecaptcha != 'undefined' && grecaptcha.reset !== undefined) {
                        grecaptcha.reset();
                    }

                    var closeDialogTimeout = setTimeout(function(){
                        $("#tbReviewFormWrap").modal('hide');
                    }, 4000);

                    $("#tbReviewFormWrap").on('hidden.bs.modal', function() {
                        $('#tbReviewFormWrap .alert').remove();
                        $('.tbReviewForm').show();
                        clearTimeout(closeDialogTimeout);
                    });
                }
            }
        });
    });
});
</script>
<?php } ?>
<?php $tbData->slotStop(); ?>


<?php // Related Products --------------------------------------------- ?>

<?php if ($tbData->slotStartSystem('product/product.related_products', array('filter' => array('product/product.related_products.filter', 'products' => &$products), 'data' => $data), true)): ?>
<?php if ($product_settings_context = $tbData['products_related']) extract($product_settings_context); ?>
<?php if ($products) { ?>
<?php if ($tbData['system.related_products']['block_title']): ?>
<div class="panel-heading">
  <h2 class="panel-title"><?php echo $tbData->text_product_tab_related; ?></h2>
</div>
<?php endif; ?>
<div class="panel-body">
  <div class="tb_products tb_listing <?php echo $listing_classes; ?>">
    <?php foreach ($products as $product) { ?>
    <?php $tbData->slotStart('products_listing.product', array('product' => $product, 'data' => $data, 'product_settings_context' => $product_settings_context)); ?>
    <div class="product-layout">
      <input class="product-id_<?php echo $product['product_id']; ?>" type="hidden" value="" />
      <div class="product-thumb">
        <?php if ($product['thumb'] && $show_thumb): $tbData->slotStart('products_listing.product.thumb'); ?>
        <div class="image"><a href="<?php echo $product['href']; ?>"><span style="max-width: <?php echo $product['thumb_width']; ?>px;"><span style="padding-top: <?php echo round($product['thumb_height'] / $product['thumb_width'], 4) * 100; ?>%"><img src="<?php echo $product['thumb']; ?>"<?php if ($tbData->system['image_lazyload']): ?> data-src="<?php echo $product['thumb_original']; ?>" class="lazyload"<?php endif; ?> width="<?php echo $product['thumb_width']; ?>" height="<?php echo $product['thumb_height']; ?>" alt="<?php echo $product['name']; ?>" style="margin-top: -<?php echo round($product['thumb_height'] / $product['thumb_width'], 4) * 100; ?>%" /></span></span></a></div>
        <?php if ($product['thumb_hover']): ?>
        <div class="image_hover"><a href="<?php echo $product['href']; ?>"><img src="<?php echo $tbData->theme_catalog_image_url; ?>pixel.gif" data-src="<?php echo $product['thumb_hover']; ?>" width="<?php echo $product['thumb_width']; ?>" height="<?php echo $product['thumb_height']; ?>" alt="<?php echo $product['name']; ?>" /></a></div>
        <?php endif; ?>
        <?php $tbData->slotCaptureEcho(); endif; ?>
        <div>
          <div class="caption">
            <?php if ($show_title): $tbData->slotStart('products_listing.product.title'); ?>
            <h4><a href="<?php echo $product['href']; ?>"><?php echo $product['name']; ?></a></h4>
            <?php $tbData->slotCaptureEcho(); endif; ?>
            <?php if ($product['description']): $tbData->slotStart('products_listing.product.description'); ?>
            <div class="description"><?php echo $product['description']; ?></div>
            <?php $tbData->slotCaptureEcho(); endif; ?>
            <?php if ($product['price']) { ?>
            <?php $tbData->slotStart('products_listing.product.price'); ?>
            <p class="price">
              <?php if (!$product['special']) { ?>
              <span class="price-regular"><?php echo $product['price']; ?></span>
              <?php } else { ?>
              <span class="price-old"><?php echo $product['price']; ?></span> <span class="price-new"><?php echo $product['special']; ?></span>
              <?php } ?>
            </p>
            <?php $tbData->slotCaptureEcho(); ?>
            <?php if ($product['tax']) { ?>
            <?php $tbData->slotStart('products_listing.product.tax'); ?>
            <span class="price-tax"><span><?php echo $text_tax; ?></span> <?php echo $product['tax']; ?></span>
            <?php $tbData->slotCaptureEcho(); ?>
            <?php } ?>
            <?php } ?>
            <?php if ($product['rating']) { ?>
            <?php $tbData->slotStart('products_listing.product.rating'); ?>
            <div class="rating">
              <div class="tb_bar">
                <span class="tb_percent" style="width: <?php echo $product['rating'] * 20; ?>%;"></span>
                <span class="tb_base"></span>
              </div>
              <span class="tb_average"><?php echo $product['rating']; ?>/5</span>
            </div>
            <?php $tbData->slotCaptureEcho(); ?>
            <?php } ?>
          </div>
          <?php if ($product['show_cart'] || $show_wishlist || $show_compare): ?>
          <div class="button-group">
            <?php if ($product['show_cart']): $tbData->slotStart('products_listing.product.button_cart'); ?>
            <div class="tb_button_add_to_cart<?php echo $cart_button_position_classes; ?>"<?php echo $cart_button_offset_attr; ?>>
              <?php if ($tbData->OcVersionGte('2.0.2.0')): ?>
              <a class="<?php echo $cart_button_classes; ?>" href="javascript:;" onclick="cart.add('<?php echo $product['product_id']; ?>', '<?php echo $product['minimum']; ?>');">
              <?php else: ?>
              <a class="<?php echo $cart_button_classes; ?>" href="javascript:;" onclick="cart.add('<?php echo $product['product_id']; ?>');">
              <?php endif; ?>
                <span data-tooltip="<?php echo $product['text_button_cart']; ?>"><?php echo $product['text_button_cart']; ?></span>
              </a>
            </div>
            <?php $tbData->slotCaptureEcho(); endif; ?>
            <?php if ($show_wishlist): $tbData->slotStart('products_listing.product.button_wishlist'); ?>
            <div class="tb_button_wishlist<?php echo $wishlist_button_position_classes; ?>"<?php echo $wishlist_button_offset_attr; ?>>
              <a class="<?php echo $wishlist_button_classes; ?>" href="javascript:;" onclick="wishlist.add('<?php echo $product['product_id']; ?>');">
                <span data-tooltip="<?php echo $tbData->text_wishlist; ?>"><?php echo $tbData->text_wishlist; ?></span>
              </a>
            </div>
            <?php $tbData->slotCaptureEcho(); endif; ?>
            <?php if ($show_compare): $tbData->slotStart('products_listing.product.button_compare'); ?>
            <div class="tb_button_compare<?php echo $compare_button_position_classes; ?>"<?php echo $compare_button_offset_attr; ?>>
              <a class="<?php echo $compare_button_classes; ?>" href="javascript:;" onclick="compare.add('<?php echo $product['product_id']; ?>');">
                <span data-tooltip="<?php echo $tbData->text_compare; ?>"><?php echo $tbData->text_compare; ?></span>
              </a>
            </div>
            <?php $tbData->slotCaptureEcho(); endif; ?>
          </div>
          <?php endif; ?>
          <?php if ($product['show_stock']): $tbData->slotStart('products_listing.product.stock_status'); ?>
          <p class="tb_label_stock_status"><?php echo $product['stock_status']; ?></p>
          <?php $tbData->slotCaptureEcho(); endif; ?>
        </div>
        <?php if ($product['show_label_sale']): $tbData->slotStart('products_listing.product.label_sale'); ?>
        <p class="tb_label_special"><?php echo $product['savings_text']; ?></p>
        <?php $tbData->slotCaptureEcho(); endif; ?>
        <?php if ($show_label_new && $product['is_new']): $tbData->slotStart('products_listing.product.label_new'); ?>
        <p class="tb_label_new"><?php echo $tbData->text_label_new; ?></p>
        <?php $tbData->slotCaptureEcho(); endif; ?>
      </div>
    </div>
    <?php $tbData->slotStopEcho(); ?>
    <?php } ?>
  </div>
</div>

<script type="text/javascript">

tbApp.init{{widget_dom_id}} = function() {
    tbApp.onScriptLoaded(function() {

        if (!tbUtils.is_touch) {

            <?php // THUMB HOVER ?>
            <?php if ($thumbs_hover_action != 'none'): ?>
            thumb_hover('#{{widget_dom_id}}', '<?php echo $thumbs_hover_action; ?>')
            <?php endif; ?>

            <?php // THUMB ZOOM ?>
            <?php if ($thumbs_hover_action == 'zoom'): ?>
            $('#{{widget_dom_id}}').find('.tb_zoom > img').elevateZoom({
                zoomType:           'inner',
                zoomWindowFadeIn:   300,
                zoomWindowFadeOut:  300,
                cursor:             'crosshair'
            });
            <?php endif; ?>

            <?php // PRODUCT HOVER ?>
            <?php if (!(!empty($slider) && $elements_hover_action == 'append') && $elements_hover_action != 'none'): ?>
            item_hover('#{{widget_dom_id}}', '<?php echo $active_elements; ?>', '<?php echo $hover_elements; ?>', '<?php echo $elements_hover_action; ?>');
            <?php endif; ?>

        }

        <?php // PRODUCT SLIDER ?>
        <?php if (!empty($slider)): ?>
        tbApp.itemSlider{{widget_dom_id}} = createItemSlider('#{{widget_dom_id}}', <?php echo count($products); ?>, <?php echo $slider_step; ?>, <?php echo $slider_speed; ?>, <?php $slider_pagination ? print '\'#{{widget_dom_id}} .tb_slider_pagination\'' : print 'false' ; ?>, <?php echo $restrictions_json; ?>, <?php echo $slider_autoplay; ?>, <?php echo $slider_loop; ?>);
        <?php endif; ?>
    });
};
tbApp.exec{{widget_dom_id}} = function() {
    tbApp.onScriptLoaded(function() {
        <?php // REFRESH SLIDER ?>
        <?php if (!empty($slider)): ?>
        tbApp.itemSlider{{widget_dom_id}}.refresh();
        <?php endif; ?>

        <?php // ADJUST PRODUCT SIZE ?>
        <?php if ($view_mode == 'grid'): ?>
        if ({{within_group}} || (!{{optimize_js_load}} && !<?php echo (int) $tbData->system['js_lazyload']; ?>)) {
            adjustItemSize('#{{widget_dom_id}}', <?php echo $restrictions_json; ?>);
        }
        <?php endif; ?>
    });
};

if (!{{within_group}}) {
    if (!<?php echo (int) $tbData->system['js_lazyload']; ?>) {
        tbApp.init{{widget_dom_id}}();
        tbApp.exec{{widget_dom_id}}();
    } else {
        $(document).on('lazybeforeunveil', function(e) {
            if ($(e.target).filter('#{{widget_dom_id}}').length) {
                tbApp.init{{widget_dom_id}}();
                tbApp.exec{{widget_dom_id}}();
            }
        });
    }
}
</script>
<?php if ($view_mode == 'grid' && empty($within_group) && ($tbData->optimize_js_load || $tbData->system['js_lazyload'])): ?>
<script type="text/javascript" data-critical="1">
adjustItemSize('#{{widget_dom_id}}', <?php echo $restrictions_json; ?>);
</script>
<?php endif; ?>
<?php } ?>
<?php $tbData->slotStop(); endif; ?>


<?php // Product Tags ------------------------------------------------- ?>

<?php $tbData->slotStart('product/product.product_tags', array('data' => $data)); ?>
<?php if ($tags): ?>
<?php if ($tbData['system.product_tags']['block_title']): ?>
<div class="panel-heading">
  <h2 class="panel-title"><?php echo $text_tags; ?></h2>
</div>
<?php endif; ?>
<ul class="panel-body tb_tags tb_style_label clearfix">
  <?php foreach ($tags as $tag): ?>
  <li><a href="<?php echo $tag['href']; ?>"><?php echo $tag['tag']; ?></a></li>
  <?php endforeach; ?>
</ul>
<?php endif; ?>
<?php $tbData->slotStop(); ?>

<?php echo $footer; ?>

 

[Rostislav2]

On 16.08.2016 at 11:22 PM, chukcha said:

или

 

вот еще

$('.radio input[type=radio]:first, .checkbox input[type=checkbox]:first').attr('checked', true);

А если еще более правильно

 $('.required .radio input[type=radio]:first, .required .checkbox input[type=checkbox]:first').attr('checked', true);

интересует как добавлять в корзину с главной, категории  и других страниц... без перехода в карточку товара, тоесть - автоматом 1я опцыя ????

[chukcha]

изменять cartAdd

[Rostislav2]

3 hours ago, chukcha said:

изменять cartAdd

просветьте как и где? файли какие именно? и какие переменные, из одного файла передать в другой ?

[strateg2010]

В 16.08.2016 в 23:22, chukcha сказал:

или

 

вот еще

$('.radio input[type=radio]:first, .checkbox input[type=checkbox]:first').attr('checked', true);

А если еще более правильно

 $('.required .radio input[type=radio]:first, .required .checkbox input[type=checkbox]:first').attr('checked', true);

Спасибо, получилось!

[PSYRU]

готов заплатить! всем привет. не совсем понял. тема хорошая а конкретики нет... opencart 3 как разобраться? возможно код другой. не спец. если есть добрые люди помогите пожалуйста. вопрос. как сделать если опция одна единственная у товара то по умолчанию она же первая и единственная, а если опций несколько то заставить выбирать? очень нужно... что куда как??? 

[searchingman]

7 часов назад, PSYRU сказал:

готов заплатить! всем привет. не совсем понял. тема хорошая а конкретики нет... opencart 3 как разобраться? возможно код другой. не спец. если есть добрые люди помогите пожалуйста. вопрос. как сделать если опция одна единственная у товара то по умолчанию она же первая и единственная, а если опций несколько то заставить выбирать? очень нужно... что куда как??? 

Вариант на примере ocStore 2.3 (дефолтный шаблон) для чекбоксов, радиокнопок и списков выбора

В файле catalog\view\theme\default\template\product\product.tpl перед 

$(document).ready(function() {
    var hash = window.location.hash;

добавить

$(document).ready(function() {
    $('.required .radio:nth-child(1) input[type=radio], .required .checkbox:nth-child(1) input[type=checkbox]').attr('checked', true);
    $('.required  option:nth-child(2)').attr('selected', true);
  });

Вариант для OpenCart 3.0.3.7 rs (дефолтный шаблон) 

В файле public_html\catalog\view\theme\default\template\product\product.twig перед

$(document).ready(function () {
$('.thumbnails').magnificPopup({

вставить тот же код

$(document).ready(function () {
$('.required .radio:nth-child(1) input[type=radio], .required .checkbox:nth-child(1) input[type=checkbox]').attr('checked', true);
$('.required  option:nth-child(2)').attr('selected', true);
});

 

Змінено 16 травня 2021 користувачем searchingman

[PSYRU]

{{ header }}
<div id="product" class="container">
    <ul class="breadcrumb mobile {{ menu_expanded ? 'col-md-offset-3 col-lg-offset-3 col-xxl-offset-4' }}">
        {% for key, breadcrumb in breadcrumbs %}
            {% if key + 1 < breadcrumbs|length %}
                <li><a href="{{ breadcrumb.href }}">{{ breadcrumb.text }}</a></li>
            {% else %}
                {% if not hide_last_breadcrumb or (hide_last_breadcrumb and key == 1) %}<li>{{ breadcrumb.text }}</li>{% endif %}
            {% endif %}
        {% endfor %}
    </ul>
    <div class="row">
        {# column_left #}
        {% if column_left and column_right %}
            {% set class = 'col-sm-4 col-md-6 col-lg-6 col-xxl-12' %}
        {% elseif column_left or column_right %}
            {% set class = 'col-sm-8 col-md-9 col-lg-9 col-xxl-16' %}
        {% else %}
            {% set class = 'col-sm-12' %}
        {% endif %}
        {% set class = 'col-sm-12' %}
        <div id="content" class="{{ class }}">
            {{ content_top }}
            <div class="heading-h1"><h1>{{ heading_title }}</h1></div>
            <div class="row">
                <div class="product-page {{ product_banners and product_banner_position == 1 ? 'col-sm-12 col-md-12 col-lg-10' : 'col-xs-12' }}">
                    <div class="row">
                        <div class="product-page__image col-sm-6">
                            {% if thumb or images %}
                                {% if thumb %}
                                    <div class="product-page__image-main uni-item">
                                        {% include 'unishop2/template/extension/module/uni_stickers.twig' %}
                                        <div class="product-page__image-main-carousel">
                                            <a class="product-page__image-main-a" href="{{ popup }}" title="{{ heading_title }}">
                                                <img src="{{ thumb }}" alt="{{ heading_title }}" class="img-responsive" width="{{ thumb_width }}" height="{{ thumb_height }}" />
                                            </a>
                                            {% if images %}
                                                {% for image in images %}
                                                    <a class="product-page__image-main-a" href="{{ image.popup }}" title="{{ heading_title }}">
                                                        <img src="{{ image.small }}" alt="{{ heading_title }}" width="{{ thumb_width }}" height="{{ thumb_height }}" loading="lazy" class="img-responsive" />
                                                    </a>
                                                {% endfor %}
                                            {% endif %}
                                        </div>
                                        {% if not wishlist_btn_disabled %}
                                            <button type="button" title="{{ button_wishlist }}" onclick="wishlist.add({{ product_id }});" class="product-page__wishlist-btn wishlist"><i class="fa fa-heart"></i></button>
                                        {% endif %}
                                        {% if not compare_btn_disabled %}
                                            <button type="button" title="{{ button_compare }}" onclick="compare.add({{ product_id }});" class="product-page__compare-btn compare"><i class="fas fa-align-right"></i></button>
                                        {% endif %}
                                    </div>
                                {% endif %}
                                {% if images %}
                                    <div class="product-page__image-addit owl-carousel">
                                        <img src="{{ small }}" alt="{{ heading_title }}" class="product-page__image-addit-img selected img-responsive" data-thumb="{{ thumb }}" data-full="{{ popup }}" width="{{ additional_width }}" height="{{ additional_height }}" />
                                        {% if images %}
                                            {% for image in images %}
                                                <img src="data:image/gif;base64,R0lGODlhAQABAIABAP///wAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="{{ image.thumb }}" alt="{{ heading_title }}" class="product-page__image-addit-img img-responsive owl-lazy" data-thumb="{{ image.small }}" data-full="{{ image.popup }}" width="{{ additional_width }}" height="{{ additional_height }}" />
                                            {% endfor %}
                                        {% endif %}
                                    </div>
                                {% endif %}
                            {% endif %}
                        </div>
                        <div class="col-sm-6 product-block">
                            <div class="product-data">
                                {% if show_model %}
                                    <div class="product-data__item model"><div class="product-data__item-div"><span class="product-data__item-span">{{ text_model }}</span></div> {{ model }}</div>
                                {% endif %}
                                {% if sku %}
                                    <div class="product-data__item sku"><div class="product-data__item-div"><span class="product-data__item-span">{{ text_sku }}:</span></div> {{ sku }}</div>
                                {% endif %}
                                {% if show_manuf and manufacturer %}
                                    <div class="product-data__item manufacturer"><div class="product-data__item-div"><span class="product-data__item-span">{{ text_manufacturer }}</span></div><a href="{{ manufacturers }}">{{ manufacturer }}</a></div>
                                {% endif %}
                                {% if location %}
                                    <div class="product-data__item location"><div class="product-data__item-div"><span class="product-data__item-span">{{ text_location }}:</span></div> {{ location }}</div>
                                {% endif %}
                                {% if reward and show_reward == 1 or show_reward == 3 %}
                                    <div class="product-data__item reward"><div class="product-data__item-div"><span class="product-data__item-span">{{ text_reward }}</span></div> {{ reward }}</div>
                                {% endif %}
                                {% if points and show_reward == 2 or show_reward == 3 %}
                                    <div class="product-data__item points"><div class="product-data__item-div"><span class="product-data__item-span">{{ text_points }}</span></div> {{ points }}</div>
                                {% endif %}
                                {% if upc %}
                                    <div class="product-data__item upc"><div class="product-data__item-div"><span class="product-data__item-span">{{ text_upc }}:</span></div> {{ upc }}</div>
                                {% endif %}
                            {#    {% if ean %}
                                    <div class="product-data__item ean"><div class="product-data__item-div"><span class="product-data__item-span">{{ text_ean }}:</span></div> {{ ean }}</div>
                                {% endif %}    #}
                                {% if jan %}
                                    <div class="product-data__item jan"><div class="product-data__item-div"><span class="product-data__item-span">{{ text_jan }}:</span></div> {{ jan }}</div>
                                {% endif %}
                                {% if isbn %}
                                    <div class="product-data__item isbn"><div class="product-data__item-div"><span class="product-data__item-span">{{ text_isbn }}:</span></div> {{ isbn }}</div>
                                {% endif %}
                                {% if mpn %}
                                    <div class="product-data__item mpn"><div class="product-data__item-div"><span class="product-data__item-span">{{ text_mpn }}:</span></div> {{ mpn }}</div>
                                {% endif %}
                                {% if not product.quantity_indicator %}
                                    <div class="product-data__item stock"><div class="product-data__item-div"><span class="product-data__item-span">{{ text_stock }}</span></div> {{ stock }}</div>
                                {% endif %}
                                {% if show_length == 1 %}
                                    {% if length %}<div class="product-data__item length"><div class="product-data__item-div"><span class="product-data__item-span">{{ text_length }}</span></div> {{ length }}</div>{% endif %}
                                    {% if weight %}<div class="product-data__item weight"><div class="product-data__item-div"><span class="product-data__item-span">{{ text_weight }}</span></div> {{ weight }}</div>{% endif %}
                                {% endif %}
                            </div>
                            {% if product.quantity_indicator %}
                                <hr />
                                {% include 'unishop2/template/extension/module/uni_quantity_indicator.twig' %}
                            {% endif %}
                            {% if product.show_timer %}
                                <hr />
                                <div class="product-page__timer">
                                    <div class="product-page__timer-heading">{{ text_special_timer }}</div>
                                </div>
                            {% endif %}
                            {% if price %}
                                <hr />
                                <div class="product-page__price price" data-price="{{ price_value }}" data-special="{{ special_value }}" data-discount="{{ discounts_value }}">
                                    {% if special %}
                                        <span class="price-old">{{ price }}</span><span class="price-new">{{ special }}</span>
                                    {% else %}
                                        {{ price }}
                                    {% endif %}
                                </div>
                                {% if discounts %}
                                    <!-- <h5 class="heading"><span>{{ text_new_discount }}</span></h5> -->
                                    <div class="product-page__discount">
                                        {% for discount in discounts %}
                                            <div class="product-page__discount-item">{{ discount.quantity }} {{ text_discount }} - {{ discount.price }}</div>
                                        {% endfor %}
                                    </div>
                                {% endif %}
                                {% if tax %}<div class="price-tax">{{ text_tax }} {{ tax }}</div>{% endif %}
                            {% endif %}
                            {% if options %}
                                <hr />
                                <div class="product-page__option option row">
                                    {% for option in options %}
                                        {% if option.type == 'select' %}
                                            <div class="{{ option.required ? 'required' }} option__group col-xs-12 col-md-6">
                                                <label class="option__group-name" for="input-option{{ option.product_option_id }}">{{ option.required ? '*' }} {{ option.name }}:</label>
                                                <select name="option[{{ option.product_option_id }}]" id="input-option{{ option.product_option_id }}" class="option__select form-control">
                                                    <option value="">{{ text_select }}</option>
                                                    {% for option_value in option.product_option_value %}
                                                        <option value="{{ option_value.product_option_value_id }}" data-prefix="{{ option_value.price_prefix }}" data-price="{{ option_value.price_value }}">
                                                            {{ option_value.name }} {{ option_value.price ? '(' ~ option_value.price_prefix ~ '' ~ option_value.price ~ ')' }}
                                                        </option>
                                                    {% endfor %}
                                                </select>
                                            </div>
                                        {% endif %}
                                        {% if option.type == 'radio' %}
                                            <div class="{{ option.required ? 'required' }} option__group col-xs-12">
                                                <label class="option__group-name">{{ option.required ? '*' }} {{ option.name }}:</label>
                                                <div id="input-option{{ option.product_option_id }}">
                                                    {% for option_value in option.product_option_value %}
                                                        <label class="option__item">
                                                            <input type="radio" name="option[{{ option.product_option_id }}]" value="{{ option_value.product_option_value_id }}" data-prefix="{{ option_value.price_prefix }}" data-price="{{ option_value.price_value }}" class="hidden" />
                                                            {% if option_value.image %}
                                                                <img src="{{ option_value.image }}" alt="{{ option_value.name }} {{ option_value.price ? option_value.price_prefix ~ '' ~ option_value.price }}" data-type="product" data-thumb="{{ option_value.small }}" data-full="{{ option_value.full }}" class="option__img" />
                                                            {% else %}
                                                                <span class="option__name" {{ option_value.price ? 'data-toggle="tooltip" title="'~option_value.price_prefix~' '~option_value.price~'"' }}>{{ option_value.name }}</span>
                                                            {% endif %}
                                                        </label>
                                                    {% endfor %}
                                                </div>
                                            </div>
                                        {% endif %}
                                        {% if option.type == 'checkbox' %}
                                            <div class="{{ option.required ? 'required' }} option__group col-xs-12">
                                                <label class="option__group-name">{{ option.required ? '*' }} {{ option.name }}:</label>
                                                <div id="input-option{{ option.product_option_id }}">
                                                    {% for option_value in option.product_option_value %}
                                                        <label class="option__item">
                                                            <input type="checkbox" name="option[{{ option.product_option_id }}][]" value="{{ option_value.product_option_value_id }}" data-prefix="{{ option_value.price_prefix }}" data-price="{{ option_value.price_value }}" class="hidden" />
                                                            {% if option_value.image %}
                                                                <img src="{{ option_value.image }}" alt="{{ option_value.name }} {{ option_value.price ? option_value.price_prefix ~ '' ~ option_value.price }}" data-type="product" data-thumb="{{ option_value.small }}" data-full="{{ option_value.full }}" class="option__img" />
                                                            {% else %}
                                                                <!-- <span class="option__name">{{ option_value.name }} {{ option_value.price ? '(' ~ option_value.price_prefix ~ '' ~ option_value.price ~ ')' }}</span> -->
                                                                <span class="option__name" {{ option_value.price ? 'data-toggle="tooltip" title="'~option_value.price_prefix~' '~option_value.price~'"' }}>{{ option_value.name }}</span>
                                                            {% endif %}
                                                        </label>
                                                    {% endfor %}
                                                </div>
                                            </div>
                                        {% endif %}
                                        {% if option.type == 'text' %}
                                            <div class="form-group {{ option.required ? 'required' }} col-xs-12">
                                                <label class="option__group-name" for="input-option{{ option.product_option_id }}">{{ option.required ? '*' }} {{ option.name }}</label>
                                                <input type="text" name="option[{{ option.product_option_id }}]" value="{{ option.value }}" placeholder="{{ option.name }}" id="input-option{{ option.product_option_id }}" class="form-control" />
                                            </div>
                                        {% endif %}
                                        {% if option.type == 'textarea' %}
                                            <div class="form-group {{ option.required ? 'required' }} col-xs-12">
                                                <label class="option__group-name" for="input-option{{ option.product_option_id }}">{{ option.required ? '*' }} {{ option.name }}</label>
                                                <textarea name="option[{{ option.product_option_id }}]" rows="5" placeholder="{{ option.name }}" id="input-option{{ option.product_option_id }}" class="form-control">{{ option.value }}</textarea>
                                            </div>
                                        {% endif %}
                                        {% if option.type == 'file' %}
                                            <div class="form-group {{ option.required ? 'required' }} col-xs-12">
                                                <label class="option__group-name">{{ option.required ? '*' }} {{ option.name }}</label>
                                                <button type="button" id="button-upload{{ option.product_option_id }}" data-loading-text="{{ text_loading }}" class="btn btn-default btn-block"><i class="fa fa-upload"></i> {{ button_upload }}</button>
                                                <input type="hidden" name="option[{{ option.product_option_id }}]" value="" id="input-option{{ option.product_option_id }}" />
                                            </div>
                                        {% endif %}
                                        {% if option.type == 'date' %}
                                            <div class="form-group {{ option.required ? 'required' }} col-xs-12">
                                                <label class="option__group-name" for="input-option{{ option.product_option_id }}">{{ option.required ? '*' }} {{ option.name }}</label>
                                                <div class="input-group date">
                                                    <input type="text" name="option[{{ option.product_option_id }}]" value="{{ option.value }}" data-date-format="YYYY-MM-DD" data-locale="{{ datepicker }}" id="input-option{{ option.product_option_id }}" class="form-control" />
                                                    <span class="input-group-btn"><button class="btn btn-default" type="button"><i class="fa fa-calendar"></i></button></span>
                                                </div>
                                            </div>
                                        {% endif %}
                                        {% if option.type == 'datetime' %}
                                            <div class="form-group {{ option.required ? 'required' }} col-xs-12">
                                                <label class="option__group-name" for="input-option{{ option.product_option_id }}">{{ option.required ? '*' }} {{ option.name }}</label>
                                                <div class="input-group datetime">
                                                    <input type="text" name="option[{{ option.product_option_id }}]" value="{{ option.value }}" data-date-format="YYYY-MM-DD HH:mm" data-locale="{{ datepicker }}" id="input-option{{ option.product_option_id }}" class="form-control" />
                                                    <span class="input-group-btn"><button type="button" class="btn btn-default"><i class="fa fa-calendar"></i></button></span>
                                                </div>
                                            </div>
                                        {% endif %}
                                        {% if option.type == 'time' %}
                                            <div class="form-group {{ option.required ? 'required' }} col-xs-12">
                                                <label class="option__group-name" for="input-option{{ option.product_option_id }}">{{ option.required ? '*' }} {{ option.name }}</label>
                                                <div class="input-group time">
                                                    <input type="text" name="option[{{ option.product_option_id }}]" value="{{ option.value }}" data-date-format="HH:mm" id="input-option{{ option.product_option_id }}" class="form-control" />
                                                    <span class="input-group-btn"><button type="button" class="btn btn-default"><i class="fa fa-calendar"></i></button></span>
                                                </div>
                                            </div>
                                        {% endif %}
                                    {% endfor %}
                                </div>
                            {% endif %}
                            {% if price %}
                                <hr style="margin-top:0" />
                                <div class="product-page__cart">
                                    <input type="hidden" name="product_id" value="{{ product_id }}" />
                                    <div class="qty-switch">
                                        <input type="text" name="quantity" value="{{ minimum }}" data-minimum="{{ minimum }}" id="input-quantity" class="qty-switch__input form-control" />
                                        <div>
                                            <i class="qty-switch__btn fa fa-plus btn-default"></i>
                                            <i class="qty-switch__btn fa fa-minus btn-default"></i>
                                        </div>
                                    </div>
                                    <button type="button" class="product-page__add-to-cart add_to_cart btn btn-lg {{ cart_btn_class }}" data-pid="{{ product_id }}" id="button-cart"><i class="{{ cart_btn_icon }}"></i><span>{{ cart_btn_text }}</span></button>
                                    <button type="button" class="product-page__quick-order quick-order btn btn-lg {{ quick_order is empty ? 'hidden' }}" data-toggle="tooltip" title="{{ quick_order_title }}" onclick="quick_order('{{ product_id }}');"><i class="{{ quick_order_icon }}"></i>{% if show_quick_order_text_product %}<span class="hidden-xs hidden-sm">{{ quick_order_title }}</span>{% endif %}</button>
                                </div>
                                {% if minimum > 1 %}<div class="product-page__minimum"><i class="fa fa-info-circle"></i> {{ text_minimum }}</div>{% endif %}
                                <hr style="margin-bottom:15px" />
                            {% endif %}
                            {% if recurrings %}
                                <hr>
                                <h3>{{ text_payment_recurring }}</h3>
                                <div class="form-group required">
                                    <select name="recurring_id" class="form-control">
                                        <option value="">{{ text_select }}</option>
                                        {% for recurring in recurrings %}
                                            <option value="{{ recurring.recurring_id }}">{{ recurring.name }}</option>
                                        {% endfor %}
                                    </select>
                                    <div class="help-block" id="recurring-description"></div>
                                </div>
                            {% endif %}
                            {% if show_attr and attribute_groups %}
                                <div class="product-data">
                                    {% for key, attribute_group in attribute_groups %}
                                        {% if key < show_attr_group %}
                                            {% for key, attribute in attribute_group.attribute %}
                                                {% if key < show_attr_item %}
                                                    <div class="product-data__item">
                                                        <div class="product-data__item-div"><span class="product-data__item-span">{{ attribute.name }}</span></div>
                                                        <div class="product-data__item-div">{{ attribute.text }}</div>
                                                    </div>
                                                {% endif %}
                                            {% endfor %}    
                                        {% endif %}
                                    {% endfor %}
                                </div>
                                <a class="product-page__more-attr" onclick="$('a[href=\'#tab-specification\']').click(); scroll_to('#tab-specification'); return false;">{{ text_all_attributes }}</a>
                                <hr />
                            {% endif %}
                            {% if review_status %}
                                <div class="product-page__rating rating">
                                    {% for i in 1..5 %}
                                        <i class="{{ rating < i ? 'far' : 'fa' }} fa-star"></i>
                                    {% endfor %}                            
                                    &nbsp;&nbsp;<a onclick="$('a[href=\'#tab-review\']').click(); scroll_to('#tab-review'); return false;" class="product-page__rating-a">{{ reviews }}</a>
                                    <hr />
                                </div>
                            {% endif %}
                            {% if socialbutton %}
                                <div class="product-page__share">
                                    <div id="goodshare" data-socials="{% for i, social in socialbutton %}{{ social }}{{ i + 1 < socialbutton|length ? ',' }}{% endfor %}"></div>
                                </div>
                            {% endif %}
                            {% if product_banners and product_banner_position == 2 %}
                                {% include 'unishop2/template/extension/module/uni_product_banner.twig' %}
                            {% endif %}
                        </div>
                    </div>
                </div>
                {% if product_banners and product_banner_position == 1 %}
                    <div class="col-sm-12 col-md-12 col-lg-2">
                        {% include 'unishop2/template/extension/module/uni_product_banner.twig' %}
                    </div>
                {% endif %}
            </div>
            {% if product_banners and product_banner_position == 3 %}
                {% include 'unishop2/template/extension/module/uni_product_banner.twig' %}
            {% endif %}
            {% if manufacturer_descr and manufacturer_position %}
                <div class="product-manuf">
                    {% if manufacturer_descr.image %}
                        <div class="product-manuf__image">
                            <img src="{{ manufacturer_descr.image }}" alt="{{ manufacturer_descr.name }}" class="img-responsive"/>
                        </div>
                    {% endif %}
                        <h4 class="product-manuf__name">{{ manufacturer_descr.name }}</h4>
                        {{ manufacturer_descr.description }}... <a href="{{ manufacturer_descr.href }}" title="" >{{ text_manufacturer_more }}</a>
                </div>
                <div class="clearfix"></div>
            {% endif %}
            
            <script>
                let img_array = [], 
                    elemA = '.product-page__image-main-a', 
                    elemImg = '.product-page__image-main-a img',
                    elemAddit = '.product-page__image-addit',
                    elemAdditImg = '.product-page__image-addit-img',
                    elemMain = '.product-page__image-main-carousel',
                    options_img;
                    
                function productPageCarousel() {                
                    if($(elemAddit).length) {
                        $(elemMain).addClass('owl-carousel').owlCarousel({
                            items:1,
                            dots:false,
                            //lazyLoad:true,
                            mouseDrag:false,
                            onDragged: function (event) {
                                $(elemAddit).trigger('to.owl.carousel', [parseFloat(event.item.index)]);
                                imgDataReplace(event.item.index);
                            }
                        });
                
                        $(elemAddit).owlCarousel({
                            responsive:{0:{items:4}, 1050:{items:6 }},
                            responsiveBaseElement:$(this),
                            dots:false,
                            lazyLoad:true,
                            lazyLoadEager:1,
                            mouseDrag:false,
                            loop:false,
                            nav:true,
                            navText: ['<i class="fa fa-chevron-left"></i>', '<i class="fa fa-chevron-right"></i>'],
                            onRefreshed: function(event) {
                                //if($('.product-page__option .option__img').length) {
                                if (typeof(getPoipProduct) === 'function') {
                                    let html = '';
                                    setTimeout(function() {
                                        $(elemAdditImg).each(function() {
                                            html += '<a class="product-page__image-main-a" href="'+$(this).data('full')+'" title="'+$(this).attr('alt')+'">';
                                            html += '<img src="'+$(this).data('thumb')+'" alt="'+$(this).attr('alt')+'" class="img-responsive">';
                                            html += '</a>';
                                        });
                        
                                        $(elemMain).trigger('replace.owl.carousel', html).trigger('refresh.owl.carousel').trigger('to.owl.carousel', [0, 250]);
                                    }, 200);
                                }
                            }
                        });
    
                        $('html body').on('click mouseover', elemAdditImg, function() {
                            $(elemMain).trigger('to.owl.carousel', [parseFloat($(this).parent().index()), 250]);
                            imgDataReplace($(this).parent().index())
                        });
                    }
                }
                
                productPageCarousel();
                
                let observer = new MutationObserver(function(e) {
                    productPageCarousel();
                });

                observer.observe($('.product-page__image')[0], {childList:true});
                
                function imgDataReplace(indx) {
                    let el = $(elemAddit).find('.owl-item:eq('+indx+') img');
                        
                    $(elemAdditImg).addClass('selected').not(el).removeClass('selected');
                        
                    options_img = false;
                        
                    if(indx == 0) {
                        $(elemA).first().attr('href', el.data('full'));
                        $(elemImg).first().attr('src', el.data('thumb'));
                    }
                }
                
                $(function() {
                    $('html body').on('click', elemA, function(e) {
                        e.preventDefault();
        
                        let img_indx = 0,
                            img_array = [];
                        
                        if($(elemAdditImg+'.selected').length) {
                            img_indx = parseFloat($(elemAdditImg+'.selected').parent().index());
                        }
                    
                        if(!options_img) {
                            $(elemAdditImg).each(function() {
                                img_array.push({src:$(this).data('full'), type:'image', title:$(this).attr('alt')});
                            });
                        }
        
                        if(img_array.length == 0) {
                            img_array.push({src:$(elemA).attr('href'), type:'image', title:$(elemImg).attr('alt')});
                        }

                        $.magnificPopup.open({
                            items:img_array,
                            gallery:{
                                enabled:true,
                            },
                            removalDelay:{{ uni_popup_img_effect_in != 'animated disabled' ? 800 : 0 }},
                            callbacks:{
                                open:function() {
                                    var $this = this;
        
                                    $this.content.addClass('{{ uni_popup_img_effect_in }}');
                                    $('html body').addClass('magnific-open');
                    
                                    setTimeout(function() { 
                                        $this.content.removeClass('{{ uni_popup_img_effect_in }}');
                                    }, 850);
                    
                                    $this.goTo(img_indx);
                                },
                                beforeClose:function() {
                                    this.content.addClass('{{ uni_popup_img_effect_out }}');
                                    $('html body').removeClass('magnific-open');
                                }
                            },
                        });
                    });

                    {% if change_opt_img_p %}
                        $('.product-page input[type="radio"] + .option__img').on('click', function() {
                            $(elemA).first().attr('href', $(this).data('full'));
                            $(elemImg).first().attr('src', $(this).data('thumb'));
                    
                            options_img = true;
                    
                            $(elemAdditImg).removeClass('selected');
                            $(elemMain).trigger('to.owl.carousel', [0, 250]);
                        });
                    {% endif %}
                });
            </script>
            
            <div class="hidden-xs hidden-sm" style="height:20px"></div>
            
            <ul class="nav nav-tabs">
                <li class="active"><a href="#tab-description" data-toggle="tab"><i class="fas fa-file-alt" aria-hidden="true"></i>{{ tab_description }}</a></li>
                {% if attribute_groups %}
                    <li><a href="#tab-specification" data-toggle="tab"><i class="fa fa-list-alt" aria-hidden="true"></i>{{ tab_attribute }}</a></li>
                {% endif %}
                {% if review_status %}
                    <li><a href="#tab-review" class="tab-review" data-toggle="tab"><i class="fas fa-comments" aria-hidden="true"></i>{{ tab_review }} {{ review_total ? '<span class="uni-badge">'~review_total~'</span>' }}</a></li>
                {% endif %}
                {% if uni_product_tabs %}
                    {% for tab in uni_product_tabs %}
                        <li><a href="#tab-{{ tab.id }}" class="tab-{{ tab.id }}" data-toggle="tab"><i class="{{ tab.icon }}"></i>{{ tab.title }} <span class="uni-badge hidden"></span></a></li>
                    {% endfor %}
                {% endif %}
            </ul>
            <div class="tab-content">
                <div class="tab-pane active" id="tab-description">{{ description }}</div>
                {% if attribute_groups %}
                    <div class="tab-pane" id="tab-specification">
                        {% for attribute_group in attribute_groups %}
                            <h4 class="heading"><span>{{ attribute_group.name }}</span></h4>
                            <div class="product-data">
                                {% for attribute in attribute_group.attribute %}
                                    <div class="product-data__item">
                                        <div class="product-data__item-div"><span class="product-data__item-span">{{ attribute.name }}</span></div>
                                        <div class="product-data__item-div">{{ attribute.text }}</div>
                                    </div>
                                {% endfor %}
                            </div>
                        {% endfor %}
                        {% if show_length == 2 %}
                            <h4 class="heading"><span>{{ entry_length_weigth }}</span></h4>
                            <div class="product-data">
                                {% if length %}
                                    <div class="product-data__item length"><div class="product-data__item-div"><span class="product-data__item-span">{{ text_length }}</span></div> {{ length }}</div>
                                {% endif %}
                                {% if weight %}
                                    <div class="product-data__item weight"><div class="product-data__item-div"><span class="product-data__item-span">{{ text_weight }}</span></div> {{ weight }}</div>
                                {% endif %}
                            </div>
                        {% endif %}
                    </div>
                {% endif %}
                {% if review_status %}
                    <div class="tab-pane" id="tab-review">
                        <div class="review-info">
                            <div class="review-info__total">{{ text_review_total }}</div>
                            <div class="review-info__score hidden-xs">{{ text_review_score }}</div>
                            <div class="review-info__rating rating hidden-xs">
                                {% for i in 1..5 %}
                                    <i class="{{ rating < i ? 'far' : 'fa' }} fa-star"></i>
                                {% endfor %}
                            </div>
                            <button class="btn btn-sm btn-primary" onclick="$('.review-form-wrapper').collapse('toggle');">{{ text_write }}</button>
                        </div>
                        <div class="review-form-wrapper collapse">
                        <form class="review-form form-horizontal uni-form" id="form-review">
                            {% if review_guest %}
                                <div class="form-group required">
                                    <label class="col-sm-2 control-label" for="input-name">{{ entry_name }}</label>
                                    <div class="col-sm-10">
                                        <input type="text" name="name" value="{{ customer_name }}" id="input-name" class="form-control" />
                                    </div>
                                </div>
                                {% if show_plus_minus_review %}
                                    <div class="form-group {{ plus_minus_review_required ? 'required' }}">
                                        <label class="col-sm-2 control-label" for="input-review-plus">{{ entry_plus }}</label>
                                        <div class="col-sm-10">
                                            <textarea name="plus" rows="5" id="input-review-plus" class="form-control"></textarea>
                                        </div>
                                    </div>
                                    <div class="form-group {{ plus_minus_review_required ? 'required' }}">
                                        <label class="col-sm-2 control-label" for="input-review-minus">{{ entry_minus }}</label>
                                        <div class="col-sm-10">
                                            <textarea name="minus" rows="5" id="input-review-minus" class="form-control"></textarea>
                                        </div>
                                    </div>
                                {% else %}
                                    <input type="hidden" name="plus" value="" />
                                    <input type="hidden" name="minus" value="" />
                                {% endif %}
                                <div class="form-group required">
                                    <label class="col-sm-2 control-label" for="input-review">{{ entry_review }}</label>
                                    <div class="col-sm-10">
                                        <textarea name="text" rows="5" id="input-review" class="form-control"></textarea>
                                        <div class="help-block"><small>{{ text_note }}</small></div>
                                    </div>
                                </div>
                                <div class="form-group required">
                                    <label class="col-sm-2 control-label">{{ entry_rating }}</label>
                                    <div class="col-sm-10">
                                        <input type="radio" name="rating" value="1" class="review-form__input" />
                                        <input type="radio" name="rating" value="2" class="review-form__input" />
                                        <input type="radio" name="rating" value="3" class="review-form__input" />
                                        <input type="radio" name="rating" value="4" class="review-form__input" />
                                        <input type="radio" name="rating" value="5" class="review-form__input" />
                                        
                                        <div class="review-form__stars rating">
                                            <i class="review-form__star far fa-star"></i>
                                            <i class="review-form__star far fa-star"></i>
                                            <i class="review-form__star far fa-star"></i>
                                            <i class="review-form__star far fa-star"></i>
                                            <i class="review-form__star far fa-star"></i>
                                        </div>
                                    </div>
                                </div>
                                {{ captcha }}
                                <div class="form-group">
                                    <div class="col-sm-2 hidden-xs"></div>
                                    <div class="col-sm-10">
                                        <button type="button" id="button-review" data-loading-text="{{ text_loading }}" class="review-form__btn btn btn-lg btn-primary">{{ add_new_review }}</button>
                                    </div>
                                </div>
                            {% else %}
                                {{ text_login }}
                            {% endif %}
                        </form>
                        </div>
                        <div id="review">{{ uni_reviews }}</div>
                    </div>
                {% endif %}
                {% if uni_product_tabs %}
                    {% for tab in uni_product_tabs %}
                        <div class="tab-pane" id="tab-{{ tab.id }}">{{ tab.description }}</div>
                    {% endfor %}
                {% endif %}
            </div>
            <div class="clearfix" style="margin:0 0 30px"></div>
            {% if tags %}
                <div class="product-tag">
                    <i class="fa fa-tags"></i>
                    {% for i, tag in tags %}
                        <a class="product-tag__item uni-href" data-href="{{ tag.href }}" title="{{ tag.tag }}">{{ tag.tag }}</a>
                    {% endfor %}
                </div>
            {% endif %}
            {% if manufacturer_descr and not manufacturer_position %}
                <div class="product-manuf">
                    {% if manufacturer_descr.image %}
                        <div class="product-manuf__image">
                            <img src="{{ manufacturer_descr.image }}" alt="{{ manufacturer_descr.name }}" class="img-responsive"/>
                        </div>
                    {% endif %}
                        <h4 class="product-manuf__name">{{ manufacturer_descr.name }}</h4>
                        {{ manufacturer_descr.description }}... <a href="{{ manufacturer_descr.href }}" title="" >{{ text_manufacturer_more }}</a>
                </div>
                <div class="clearfix"></div>
            {% endif %}
            {% if products %}
                <div class="heading"><span>{{ text_related }}</span></div>
                <div class="uni-module product-related">
                    <div class="uni-module__wrapper">
                        {% for product in products %}
                            <div class="product-thumb uni-item">
                                <div class="product-thumb__image" {{ product.special_date_end ? 'data-special-end="'~product.special_date_end~'"' }}>
                                    {% include 'unishop2/template/extension/module/uni_stickers.twig' %}    
                                    <a href="{{ product.href }}" title="{{ product.name }}">
                                        <img src="{{ product.thumb }}" {{ product.additional_image ? 'data-additional="'~product.additional_image~'"' }} loading="lazy" alt="{{ product.name }}" width="{{ img_width }}" height="{{ img_height }}" class="img-responsive" />
                                    </a>
                                </div>
                                <div class="product-thumb__caption">
                                    <a class="product-thumb__name" href="{{ product.href }}">{{ product.name }}</a>
                                    {% if product.show_description %}
                                        <div class="product-thumb__description description">{{ product.description }}</div>
                                    {% endif %}
                                    {% include 'unishop2/template/extension/module/uni_attributes.twig' %}
                                    {% include 'unishop2/template/extension/module/uni_options.twig' %}
                                    {% include 'unishop2/template/extension/module/uni_quantity_indicator.twig' %}
                                    {% if product.rating >= 0 and show_rating %}
                                        <div class="product-thumb__rating rating">
                                            {% for i in 1..5 %}
                                                <i class="{{ product.rating < i ? 'far fa-star' : 'fa fa-star' }}"></i>
                                            {% endfor %} 
                                            {% if product.num_reviews > 0 %}<a class="product-thumb__rating-a uni-badge uni-href" data-href="{{ product.href }}#tab-review">{{ product.num_reviews }}</a>{% endif %}
                                        </div>
                                    {% endif %}
                                    {% if product.price %}
                                        <div class="product-thumb__price price" data-price="{{ product.price_value }}" data-special="{{ product.special_value }}" data-discount="{{ product.discounts }}">
                                            {% if not product.special %}
                                                {{ product.price }}
                                            {% else %}
                                                <span class="price-old">{{ product.price }}</span> <span class="price-new">{{ product.special }}</span> 
                                            {% endif %}
                                        </div>
                                        {% if product.tax %}
                                            <div class="price-tax">{{ text_tax }} {{ product.tax }}</div>
                                        {% endif %}
                                    {% endif %}
                                    <div class="product-thumb__cart cart {{ product.cart_btn_class }}">
                                        {% if product.show_quantity %}
                                            <div class="qty-switch">
                                                <input type="text" name="quantity" value="{{ product.minimum }}" data-minimum="{{ product.minimum }}" class="qty-switch__input form-control" />
                                                <div>
                                                    <i class="qty-switch__btn fa fa-plus btn-default"></i>
                                                    <i class="qty-switch__btn fa fa-minus btn-default"></i>
                                                </div>
                                            </div>
                                        {% endif %}
                                        <button type="button" class="product-thumb__add-to-cart add_to_cart btn {{ product.cart_btn_class }}" title="{{ product.cart_btn_text }}" data-pid="{{ product.product_id }}" onclick="cart.add({{ product.product_id }}, this)"><i class="{{ product.cart_btn_icon }}"></i><span class="hidden-sm hidden-md">{{ product.cart_btn_text }}</span></button>
                                        <button type="button" class="product-thumb__quick-order quick-order btn {{ product.quick_order is empty ? 'hidden' }}" data-toggle="tooltip" title="{{ quick_order_title }}" onclick="quick_order('{{ product.product_id }}');"><i class="{{ quick_order_icon }}"></i>{% if show_quick_order_text %}<span class="hidden-xs hidden-sm">{{ quick_order_title }}</span>{% endif %}</button>
                                        <button type="button" class="product-thumb__wishlist wishlist {{ wishlist_btn_disabled ? 'hidden' }}" title="{{ button_wishlist }}" onclick="wishlist.add('{{ product.product_id }}');"><i class="fa fa-heart"></i></button>
                                        <button type="button" class="product-thumb__compare compare {{ compare_btn_disabled ? 'hidden' }}" title="{{ button_compare }}" onclick="compare.add('{{ product.product_id }}');"><i class="fas fa-align-right"></i></button>
                                    </div>
                                </div>
                            </div>
                        {% endfor %}
                    </div>
                </div>
                <script>
                    $('.product-related').uniModules({
                        type:'{{ type_view is defined ? type_view : 'carousel' }}',
                        autoheight:['product-thumb__name', 'product-thumb__description', 'product-thumb__option'],
                        loop: {{ products|length > 4 ? 'true' : 'false' }}
                    });
                    {% if show_timer %}
                        $('.product-related .image').each(function() {
                            var date = $(this).data('special-end');
            
                            if(date) {
                                $(this).uniTimer({
                                    date   :''+date+'',
                                    texts   :['{{ text_special_day }}','{{ text_special_hour }}','{{ text_special_min }}','{{ text_special_sec }}'],
                                    hideText :false,
                                    hideIsNull:false
                                });
                            }
                        });
                    {% endif %}
                </script>
                <div style="height:10px;clear:both"></div>
            {% endif %}
                
            {{ auto_related }}
                
            {{ content_bottom }}
        </div>
        {# column_right #}
    </div>
</div>
<script>
    {% if product.show_timer %}
        $('.product-page__timer').uniTimer({
            date :'{{ product.show_timer }}',
            texts :['{{ text_special_day }}','{{ text_special_hour }}','{{ text_special_min }}','{{ text_special_sec }}']
        });
    {% endif %}
</script>
{% if socialbutton %}
    <script defer async src="catalog/view/javascript/goodshare/goodshare.min.js"></script>
    <link href="catalog/view/javascript/goodshare/goodshare.css" rel="stylesheet" media="screen" />
{% endif %}
<script>
    dataLayer.push({
        'ecommerce':{
            'currencyCode':'{{ microdata.code }}',
            'detail':{
                'products':[{
                    'id': {{ product_id }}, 
                    'name': "{{ microdata.name }}", 
                    'brand': "{{ microdata.manufacturer }}", 
                    'category': "{{ microdata.category }}", 
                    'variant': '',
                    'price': {{ microdata.price }}
                }]
            }
        }
    });
    
    if (typeof(gtag) === 'function') {
        gtag('event', 'view_item', {
            "items": [{
                'id': {{ product_id }}, 
                'name': "{{ microdata.name }}", 
                'brand': "{{ microdata.manufacturer }}", 
                'category': "{{ microdata.category }}", 
                'variant': '',
                'price': {{ microdata.price }}
            }]
        });
    }
    
    $('html body').on('click', '#button-cart:not(.disabled)', function() {
        $.ajax({
            url: 'index.php?route=checkout/cart/add',
            type: 'post',
            data: $('.product-page input[type=\'text\'], .product-page input[type=\'hidden\'], .product-page input[type=\'radio\']:checked, .product-page input[type=\'checkbox\']:checked, .product-page select, .product-page textarea'),
            dataType: 'json',
            success: function(json) {
                $('.text-danger').remove();
                $('.form-group').removeClass('has-error');
            
                if (json['error']) {
                    if (json['error']['option']) {
                        for (i in json['error']['option']) {
                            var elem = $('.option #input-option' + i.replace('_', '-')), elem2 = (elem.parent().hasClass('input-group')) ? elem.parent() : elem;
                            
                            elem2.after('<div class="text-danger">'+json['error']['option'][i]+'</div>');
                            $('.option .text-danger').delay(5000).fadeOut();
                        }
                        
                        uniFlyAlert('danger', json['error']['option']);
                    }
                    
                    if (json['error']['recurring']) {
                        $('select[name=\'recurring_id\']').after('<div class="text-danger">' + json['error']['recurring'] + '</div>');
                    }

                    $('.text-danger').parent().addClass('has-error');
                }

                if (json['success']) {
                    if(!uniJsVars.cart_popup_disable) {
                        uniModalWindow('modal-cart', '', '', json['success']);
                    }
                        
                    if(uniJsVars.cart_popup_autohide) {
                        setTimeout(function() { 
                            $('#modal-cart').modal('hide');
                        }, uniJsVars.cart_popup_autohide_time * 1000);
                    }
                
                    $.get('index.php?route=common/cart/info', function(data) {
                        $('.header-cart__dropdown').html($(data).find('.header-cart__dropdown').html());
                        $('.header-cart__total-items').html($(data).find('.header-cart__total-items').text());
                    });
                    
                    dataLayer.push({
                        'ecommerce':{
                            'currencyCode':'{{ microdata.code }}',
                            'add':{
                                'products':[json['products']]
                            }
                        }
                    });
                    
                    if (typeof(gtag) === "function") {
                        gtag('event', 'add_to_cart', {"items": [json['products']]});
                    }
                    
                    if(uniJsVars.cart_btn.metric_id && uniJsVars.cart_btn.metric_target) {
                        if (typeof(ym) === "function") {
                            ym(uniJsVars.cart_btn.metric_id, 'reachGoal', uniJsVars.cart_btn.metric_target);
                        } else {
                            new Function('yaCounter'+uniJsVars.cart_btn.metric_id+'.reachGoal(\''+uniJsVars.cart_btn.metric_target+'\')')();
                        }
                    }
                    
                    if(uniJsVars.cart_btn.analytic_category && uniJsVars.cart_btn.analytic_action) {
                        if (typeof(gtag) === "function") {
                            gtag('event', uniJsVars.cart_btn.analytic_action, {'event_category': uniJsVars.cart_btn.analytic_category});
                        } else if (typeof(ga) === "function") {
                            ga('send', 'event', uniJsVars.cart_btn.analytic_category, uniJsVars.cart_btn.analytic_action);
                        }
                    }
                }        
            },
            error: function(xhr, ajaxOptions, thrownError) {
                console.log(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
            }
        });
    });

    $('button[id^=\'button-upload\']').on('click', function() {
        var node = this;

        $('#form-upload').remove();

        $('body').prepend('<form enctype="multipart/form-data" id="form-upload" style="display:none;"><input type="file" name="file" /></form>');

        $('#form-upload input[name=\'file\']').trigger('click');

        if (typeof timer != 'undefined') {
            clearInterval(timer);
        }

        timer = setInterval(function() {
            if ($('#form-upload input[name=\'file\']').val() != '') {
                clearInterval(timer);

                $.ajax({
                    url: 'index.php?route=tool/upload',
                    type: 'post',
                    dataType: 'json',
                    data: new FormData($('#form-upload')[0]),
                    cache: false,
                    contentType: false,
                    processData: false,
                    beforeSend: function() {
                        $(node).button('loading');
                    },
                    complete: function() {
                        $(node).button('reset');
                    },
                    success: function(json) {
                        $('.text-danger').remove();

                        if (json['error']) {
                            $(node).parent().find('input').after('<div class="text-danger">' + json['error'] + '</div>');
                        }

                        if (json['success']) {
                            alert(json['success']);
                            $(node).parent().find('input').attr('value', json['code']);
                        }
                    },
                    error: function(xhr, ajaxOptions, thrownError) {
                        console.log(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
                    }
                });
            }
        }, 500);
    });
    
    $('.tab-review').on('click mouseover', function() {
        $('#review').load('index.php?route=product/product/review&product_id={{ product_id }}');
    });

    $('#review').on('click', '.pagination a', function(e) {
        e.preventDefault();
        
        var url = $(this).attr('href');
        
        $('#review').fadeOut(function() {
            scroll_to('#tab-review');
            
            $(this).load(url, function() {
                $('#review').fadeIn();
                
                if(!$('.review-pagination .active').next().find('a').length) {
                    $('.show-more-review').hide();
                } else {
                    $('.show-more-review').show();
                }
            });
        });
    });
    
    $('#review').on('click', '.show-more-review', function() {
        var url = $('.review-pagination .active').next().find('a').attr('href'),
            show_more_btn = $(this),
            show_more_btn_i = show_more_btn.find('i');
        
        if(typeof(url) == 'undefined' || url == '') return;
    
        $.ajax({
            url: url,
            type: 'get',
            dataType: 'html',
            beforeSend: function() {
                show_more_btn_i.addClass('spin');
            },
            success: function(data) {
                var $data = $(data);
            
                $data.find('.review-list__item').hide();
                
                $('.review-list').append($data.find('.review-list').html());
                
                $('.review-pagination .pagination').html($data.find('.pagination').html());
                
                if(!$('.review-pagination .active').next().find('a').length) {
                    show_more_btn.hide();
                }
            
                show_more_btn_i.removeClass('spin');
                
                $('.review-list__item').fadeIn();
            }
        });
    });

    $('#button-review').on('click', function() {
        $.ajax({
            url: 'index.php?route=product/product/write&product_id={{ product_id }}',
            type: 'post',
            dataType: 'json',
            data: $('#form-review').serialize(),
            beforeSend: function() {
                $('#button-review').button('loading');
            },
            complete: function() {
                $('#button-review').button('reset');
            },
            success: function(json) {
                if (json['error']) {
                    uniFlyAlert('danger', json['error']);
                }

                if (json['success']) {
                    $('#form-review').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>');
                    $('#form-review input, #form-review textarea').val('');
                    $('.review_star input').attr('checked', false).prop('checked', false);
                    $('#form-review').slideToggle();
                    
                    scroll_to('.alert.alert-success');
                }
            }
        });
    });
    
    $('.review-form__input').on('mouseenter', function () {
        $('.review-form__star:lt('+$(this).val()+')').removeClass('far').addClass('fa');
        
        $(this).on('mouseleave', function() {
            $('.review-form__star').removeClass('fa').addClass('far');
        
            $('.review-form__input').each(function() {
                if($(this).prop('checked')) {
                    $('.review-form__star:lt('+$(this).val()+')').removeClass('far').addClass('fa');
                }
            });
        });
    });

    $('.review-form__input').on('click', function(){
        $('.review-form__star:not(:lt('+$(this).val()+'))').removeClass('fa').addClass('far');
    });
    
    if($('#tab-question').length) {
        //$('.tab-question').on('click mouseover', function() {
            $('#tab-question').load('index.php?route=extension/module/uni_request/requests&p_id={{ product_id }}');
        //});
            
        $('#tab-question').on('click', '.pagination a', function(e) {
            e.preventDefault();
            $('#tab-question #question-list').fadeOut().load(this.href +' #question-list > *').fadeIn();
        });
    }
    
    {% if recurrings %}        
        $('select[name=\'recurring_id\'], input[name="quantity"]').change(function(){
            $.ajax({
                url: 'index.php?route=product/product/getRecurringDescription',
                type: 'post',
                data: $('input[name=\'product_id\'], input[name=\'quantity\'], select[name=\'recurring_id\']'),
                dataType: 'json',
                beforeSend: function() {
                    $('#recurring-description').html('');
                },
                success: function(json) {
                    $('.alert, .text-danger').remove();

                    if (json['success']) {
                        $('#recurring-description').html(json['success']);
                    }
                }
            });
        });
    {% endif %}

    var hash = window.location.hash;

    if (hash) {
        $('.nav-tabs a').each(function() {
            if (hash == $(this).attr('href')) {
                $($(this)).trigger('click');
                uniScrollTo(hash);
            }
        });
    
        var hashpart = hash.split('#'), vals = hashpart[1].split('-'), elem = $('.product-page .option');
            
        for (i=0; i < vals.length; i++) {            
            elem.find('select option[value="'+vals[i]+'"]').attr('selected', true).trigger('select');
            elem.find('input[type="radio"][value="'+vals[i]+'"]').attr('checked', true).prop('checked', true).change();
            elem.find('input[type="checkbox"][value="'+vals[i]+'"]').attr('checked', true).prop('checked', true);
        }
    }
</script>
<script type="application/ld+json">
    {
        "@context": "http://schema.org",
        "@type": "BreadcrumbList",
        "itemListElement": [
        {% for i, breadcrumb in breadcrumbs %}
            {
            "@type": "ListItem",
            "position": {{ i+1 }},
            "name": "{{ i == 0 ? shop_name : breadcrumb.text|replace({'"':'', '&quot;':''}) }}",
            "item": "{{ breadcrumb.href }}"
            {{ i + 1 < breadcrumbs|length ? '},' : '}' }}
        {% endfor %}
        ]
    }
</script>
<script type="application/ld+json">
    {
        "@context": "https://schema.org",
        "@type": "Product",
        "name": "{{ microdata.name }}",
        "category": "{{ microdata.category }}",
        "image": ["{{ popup }}"{% for i, image in images %}{{ i+1 <= images|length ? ',' }} "{{ image.popup }}"{% endfor %}],
        "brand": "{{ microdata.manufacturer }}",
        "manufacturer": "{{ microdata.manufacturer }}",
        "model": "{{ microdata.model }}",
        "sku": "{{ microdata.sku }}",
        "mpn": "{{ microdata.mpn }}",
        "description": "{{ microdata.description }}",
        "offers": {
            "@type": "Offer",
            "availability": "https://schema.org/{{ quantity > 0 ? 'InStock' : 'OutOfStock' }}",
            "price": "{{ microdata.price }}",
            {{ microdata.price_date_end ? '"priceValidUntil": "'~microdata.price_date_end~'",'}}
            "priceCurrency": "{{ microdata.code }}",
            "url": "{{ microdata.url }}"
        }
        {% if microdata.review_status and microdata.reviews_num > 0 %},
        "aggregateRating": {
            "@type": "AggregateRating",
            "ratingValue": "{{ microdata.rating }}",
            "reviewCount": "{{ microdata.reviews_num }}"
        }
        {% endif %}
        {% if microdata.reviews %},
        "review": [
            {% for i, review in microdata.reviews %}
            {
                "@type": "Review",
                "author": "{{ review.author }}",
                "datePublished": "{{ review.date_added }}",
                "description": "{{ review.text }}",
                "reviewRating": {
                    "@type": "Rating",
                    "ratingValue": "{{ review.rating }}",
                    "bestRating": "5"
                }
            {{ i+1 < microdata.reviews|length ? '},' : '}' }}
            {% endfor %}
        ]
        {% endif %}
    }
</script>
    {% set break = false %}
    {% for option in options if not break %}
        {% if option.type == 'date' or option.type == 'time' or option.type == 'datetime' %}
            <script src="catalog/view/javascript/jquery/datetimepicker/moment/moment.min.js"></script>
            <script src="catalog/view/javascript/jquery/datetimepicker/moment/moment-with-locales.min.js"></script>
            <script src="catalog/view/javascript/jquery/datetimepicker/bootstrap-datetimepicker.min.js"></script>
            <link href="catalog/view/javascript/jquery/datetimepicker/bootstrap-datetimepicker.min.css" rel="preload" as="style" />
            <link href="catalog/view/javascript/jquery/datetimepicker/bootstrap-datetimepicker.min.css" rel="stylesheet" media="screen" />
            <script>
                $('.date').datetimepicker({
                    pickTime: false
                });
                $('.datetime').datetimepicker({
                    pickDate: true,
                    pickTime: true
                });
                $('.time').datetimepicker({
                    pickDate: false
                });
            </script>
            {% set break = true %}
        {% endif %}
    {% endfor %}
{{ footer }}

[PSYRU]

спасибо  за ответ. а как встроить в этот твиг сторонней темы? готов отблагодарить за решение... не хватает познаний...