[Mod] удобные Вкладки на странице товара

Тема в разделе "WebAsyst", создана пользователем droni4, 5 ноя 2012.

Модераторы: mdss
  1. droni4

    droni4

    Регистр.:
    21 авг 2007
    Сообщения:
    182
    Симпатии:
    7
    Как будет выглядеть
    2012-11-05_040801.jpg

    Для интеграции в дизайн вашего сайта, копать в коде который вставляется в main.css чуть ниже

    Делаем следующее:

    1) В \www\published\publicdata\*****\attachments\SC\themes\ваш_шаблон\head.html
    добавляем строчку
    Код:
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>


    2) В \www\published\publicdata\*****\attachments\SC\themes\ваш_шаблон\main.css
    добавляем
    Код:
     .section {
        width: 100%;
        background: #EFEFEF;
        margin: 0 0 30px;
    }
    ul.tabs {
        height: 28px;
        line-height: 25px;
        list-style: none;
        border-bottom: 1px solid #DDD;
        background: #FFF;
    }
    .tabs li {
        float: left;
        display: inline;
        margin: 0 1px -1px 0;
        padding: 0 13px 1px;
        color: #777;
        cursor: pointer;
        background: #F9F9F9;
        border: 1px solid #E4E4E4;
        border-bottom: 1px solid #F9F9F9;
        position: relative;
    }
    .tabs li:hover,
    .vertical .tabs li:hover {
        color: #F70;
        padding: 0 13px;
        background: #FFFFDF;
        border: 1px solid #FFCA95;
    }
    .tabs li.current {
        color: #444;
        background: #EFEFEF;
        padding: 0 13px 2px;
        border: 1px solid #D4D4D4;
        border-bottom: 1px solid #EFEFEF;
    }
    .box {
        display: none;
        border: 1px solid #D4D4D4;
      border-width: 0 1px 1px;
        background: #EFEFEF;
        padding: 10px 12px;
    }
    .box.visible {
        display: block;
    }
    .section.vertical {
        width: 100%;
        border-left: 160px solid #FFF;
    }
    .vertical .tabs {
        width: 100%;
        float: left;
        display: inline;
        margin: 0 0 0 -160px;
    }
    .vertical .tabs li {
        padding: 0 13px;
        margin: 0 0 1px;
        border: 1px solid #E4E4E4;
        border-right: 1px solid #F9F9F9;
        width: 132px;
        height: 25px;
    }
    .vertical .tabs li:hover {
        width: 131px;
    }
    .vertical .tabs li.current {
        width: 100%;
        color: #444;
        background: #EFEFEF;
        border: 1px solid #D4D4D4;
      border-right: 1px solid #EFEFEF;
      margin-right: -1px;
    }
    .vertical .box {
      border-width: 1px;
    }
    3) В /public_html/published/publicdata/имя базы/attachments/SC/themes/ваша тема/product_info.html
    вставляем
    Код:
    <table style="width: 100%; padding: 0px;">
    <tr>
    <td><!-- cpt_container_start -->{cpt_product_name overridestyle=''}<!-- cpt_container_end --></td>
    </tr>
    <tr>
    <td id="prddeatailed_container">
    {cpt_product_images}
     
    <!-- cpt_container_start -->{cpt_product_params_fixed overridestyle=''}{cpt_product_price overridestyle=''}{cpt_product_rate_form overridestyle=''}{cpt_product_params_selectable overridestyle=''}{cpt_product_add2cart_button request_product_count='request_product_count' overridestyle=':69b814'}<!-- cpt_container_end -->
     
    </td>
    </tr>
    <tr>
    <td><!-- cpt_container_start -->{cpt_product_related_products overridestyle=''}<!-- cpt_container_end --></td>
    </tr>
    </td>
    </tr>
    <br />
    <tr>
    <td>
    <div class="section">
        <ul class="tabs">
            <li class="current">Информация о товаре</li>
            <li>Как купить?</li>
            <li>Доставка</li>
            <li>Контакты</li>
            <li>Есть вопросы?</li>
            <li>Отзывы, комментарии</li>
        </ul>
        <div class="box visible">
        <br>
        <h2>текст {$product_info.name|escape:'html'} текст</h2>
        {cpt_product_description overridestyle=''}
        </div>
        <div class="box"><noindex>Как купить. Закрываем от робота яши. (Дабы не посчиталось за дубль)</noindex></div>
        <div class="box"><noindex>Доставку тоже закрываем, роботу не надо, а клиенту очень нужно.</noindex></div>
        <div class="box"><noindex>Подробные контакты тоже закрываем, роботу не надо, а клиенту очень нужно.</noindex></div>
        <div class="box"><br>{cpt_product_details_request overridestyle=''}</div>
        <div class="box"><br>{cpt_product_discuss_link overridestyle=''}</div>
    </td>
    </tr>
    </table>
    <script type='text/javascript'>
    {literal}
    (function($) {
    $(function() {
        $('ul.tabs').delegate('li:not(.current)', 'click', function() {
            $(this).addClass('current').siblings().removeClass('current')
                .parents('div.section').find('div.box').hide().eq($(this).index()).fadeIn(150);
        })
    })
    })(jQuery)
    {/literal}
    </script>
     
    Phoenix_666, valeranp и MashaD52 нравится это.
  2. vollland

    vollland Постоялец

    Регистр.:
    24 ноя 2008
    Сообщения:
    87
    Симпатии:
    1
    Добрый день!

    уже все перепробовал, никак не хотят работать вкладки. Отображает первую вкладку корректно с контентом внутри, остальные вкладки не открывает, но подсвечивает вроде как надо, желтеньким.

    в чем может быть моя проблема?
     
  3. Voshal

    Voshal Мизантроп

    Регистр.:
    30 мар 2009
    Сообщения:
    286
    Симпатии:
    108
    Экстрасенсы в отпуске. Вы хотя бы ссылку на сайт свой привели
     
  4. vollland

    vollland Постоялец

    Регистр.:
    24 ноя 2008
    Сообщения:
    87
    Симпатии:
    1
    да, извините,
     
  5. kadurinho

    kadurinho Shop Script

    Moderator
    Регистр.:
    21 июн 2011
    Сообщения:
    620
    Симпатии:
    248
    уберите подключение jquery, вам первый шаг не нужен
     
  6. vollland

    vollland Постоялец

    Регистр.:
    24 ноя 2008
    Сообщения:
    87
    Симпатии:
    1
    убрал, лучше не стало
    на всякий случай проверяю в ие10, ие8 и опере

    а когда убираю строчку
    Код:
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
    перестает работать быстрое добавление товара в корзину
     
  7. kadurinho

    kadurinho Shop Script

    Moderator
    Регистр.:
    21 июн 2011
    Сообщения:
    620
    Симпатии:
    248
    Jquery должен быть подключен только один раз! контакты в профиле, напишите посмотрим что там
     
  8. wwizard

    wwizard

    Регистр.:
    20 июл 2009
    Сообщения:
    417
    Симпатии:
    12
    После добавления кода получается, не совсем то что ожидалось:
     
  9. kadurinho

    kadurinho Shop Script

    Moderator
    Регистр.:
    21 июн 2011
    Сообщения:
    620
    Симпатии:
    248
    видимо нужно пере сохранить страницу в utf-8 без boom и тогда все станет красиво и без крякозяблов
     
    wwizard нравится это.
  10. wwizard

    wwizard

    Регистр.:
    20 июл 2009
    Сообщения:
    417
    Симпатии:
    12
    если я перевожу кодировку в 866, то тогда страница становится не удобоваримой, а вкладки нормально. Где можно перевести вкладки в нормальную кодировку всего сайта, как есть по умолчанию. И второй вопрос что означает:

    <div class="box"><noindex>Как купить. Закрываем от робота яши. (Дабы не посчиталось за дубль)</noindex></div>
    <div class="box"><noindex>Доставку тоже закрываем, роботу не надо, а клиенту очень нужно.</noindex></div>
    <div class="box"><noindex>Подробные контакты тоже закрываем, роботу не надо, а клиенту очень нужно.</noindex></div>

    в своей вкладке соответственно. Что значит закрываем от яши?