Вход • Регистрация

Как вывести характеристики табами

  •
  • 23 декабря 2013 г. , редакция: 23 декабря 2013 г.
  • Друзья! Подскажите как сделать что бы в карточке товара описание, характеристики и комментарии выходили табами? К примеру вкладки: Описание, Характеристики, Документация, Видео, Комментарии.
    Есть какое то решение?
  •
  • 24 декабря 2013 г.
  • Народ! Тема ещё актуальна! Поделитесь решением.
    • 25 декабря 2013 г.
    • Все очень просто. Я делаю вот так (пример в приложении):

      HTML
      Код
      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
      <html>
      <head>
      <title>Tabs</title>
      <meta http-euuiv="Content-Type" content="text/html; charset=utf-8">
      <script type='text/javascript' src='js/jquery.js'></script>
      <script type='text/javascript' src='js/script.js'></script>
      <style>
      body {padding:50px; font-family:Arial, Helvetica, sans-serif;}
      #block {width:500px; margin:0 auto;}
      #knopki {display:block; height:50px;}
      #knopki div {padding:13px 15px; float:left; margin-right:1px; background:#eee; font-size:20px; cursor:pointer;}
      #knopki div:hover {background:#eaeaea;}
      .act_tab {background:#ccc !important;}
      #bl { padding:15px; background:#ccc;}
      #bl>div {display:none;}
      #bl>div.act_t {display:block;}
      </style>
      </head>
      <body>


      <div id="block">
      <!--KNOPKI-->
      <div id="knopki">
      <div class="act_tab" id="tab_1">Tab 1</div>
      <div id="tab_2">Tab 2</div>
      <div id="tab_3">Tab 3</div>
      </div>
      <!--KNOPKI-->
      <!--BLOKI-->
      <div id="bl">
      <div id="tab_1_text" class="act_t">TEXT1</div>
      <div id="tab_2_text">TEXT2</div>
      <div id="tab_3_text">TEXT3</div>
      </div>
      <!--BLOKI-->
      </div>
      </body>
      </html>



      JS
      Код

      $(document).ready(function() {

      $("#knopki div").click(function(){
      $("#knopki div").removeClass("act_tab");
      $(this).addClass("act_tab");
      $("#bl>div").removeClass("act_t");
      ids = $(this).attr("id")+'_text';
      $("#"+ids).addClass("act_t");
      });

      });


      Чтобы вывести определенную характеристику в нужном месте необходимо в использовать метод cms.diafan.ru/dokument/full-manual/examples/kak_vyvesti_dopolnitelnuyu_kharakteristiku_tovara/
      •
      • 25 декабря 2013 г.
      • Александр, благодарю! А в файле shop.view.id.php надо что то править?
        •
        • 25 декабря 2013 г.
        • Вставляешь в нужное место блок:

          Код
          echo '
          <div id="block">
          <!--KNOPKI-->
          <div id="knopki">
          <div class="act_tab" id="tab_1">Характеристика 1</div>
          <div id="tab_2">Хар 2</div>
          <div id="tab_3">Хар 3</div>
          </div>
          <!--KNOPKI-->
          <!--BLOKI-->
          <div id="bl">
          <div id="tab_1_text" class="act_t">';
          if(! empty($result["names_param"]["Название Харктеристики 1"]))
          {
          echo 'Материал: '.$result["names_param"]["Название Харктеристики 1"]["value"];
          }
          echo '</div>
          <div id="tab_2_text">';

          if(! empty($result["names_param"]["Название Харктеристики 2"]))
          {
          echo 'Материал: '.$result["names_param"]["Название Харктеристики 2"]["value"];
          }

          echo '</div>
          <div id="tab_3_text">';
          if(! empty($result["names_param"]["Название Харктеристики 3"]))
          {
          echo 'Материал: '.$result["names_param"]["Название Харктеристики 3"]["value"];
          }
          echo '</div>
          </div>
          <!--BLOKI-->
          </div>
          ';


          У вас вообще какая задача стоит?

          Если у вас вкладки - Описание - Характеристики - Отзывы

          то тут все под другому будет
          •
          • 25 декабря 2013 г.
          • Да, задача стоит вывести табами: Описание - Характеристики - Видео.
            Видео создаётся в характеристиках.
          •
          • 26 декабря 2013 г.
          • Вставил код в файл shop.view.id.php код
            Код

            echo '
            <div id="block">
            <!--KNOPKI-->
            <div id="knopki">
            <div class="act_tab" id="tab_1">Описание1</div>
            <div id="tab_2">Параметры</div>
            <div id="tab_3">Видео</div>
            </div>
            <!--KNOPKI-->
            <!--BLOKI-->
            <div id="bl">
            <div id="tab_1_text" class="act_t">';
            //полное описание товара
            echo '<div class="shop_text">';
            $this->htmleditor($result['text'], true);
            echo '</div>';

            echo '</div>
            <div id="tab_2_text">';

            //параметры товара
            if (!empty($result["param"]))
            {
            $this->get('param', 'shop', array("rows" => $result["param"], "id" => $result["id"]));
            }
            echo '</div>
            <div id="tab_3_text">';
            if(! empty($result["names_param"]["Видео"]))
            {
            echo 'Видео: '.$result["names_param"]["Видео"]["value"];
            }
            echo '</div>
            </div>
            <!--BLOKI-->
            </div>
            ';

            Работает
            Но в параметрах выходят все характеристики в том числе и видео (тип характеристики: текстовое поле).
            Как сделать чтобы Видео выходило именно в своей вкладке?
            •
            • 26 декабря 2013 г.
            • Можно в файле shop.view.param.php в строке 19 дописать

              Код
              foreach ($result["rows"] as $param)
              {
              if ($param["name"] !== "Видео") {
              а тут стандартный код из файла с 20 по 96 строки
              }
              }


              или можно так

              Код

              if ($param["name"] == "Видео") { } else { а тут стандартный код из файла с 20 по 96 строки }

              • 26 декабря 2013 г.
              • Дописал. Всё равно выходит в двух местах.
              • 02 января 2014 г.
              • Поздравляю всех с Новым Годом!!! Желаю всем счастья!)))
                Александр, спасибо за помощь! Вот, что у меня получилось:
                http://ipicam.ru/shop/ip-kamery-vga/wanscam-jw0004-chyornaya/
                Пришлось повозиться со стилями.
                Всё хорошо, но вот как сделать чтобы "видео" выводилось только во вкладке "видео" я не разобрался(((
  •
  • 29 октября 2014 г. , редакция: 29 октября 2014 г.
  • У меня почему-то пустые поля выходят и непонятно куда вставлять те же описания, параметры и видео.

    Как вставить в эти табы информацию?
    •
    • 29 октября 2014 г.
    • Смотря какие данные. Стандартные поля дергаем из массива $result.
      Динамические блоки вставить пользуясь шаблонным тегом вставляемым в

      echo $this->htmleditor('<insert name="show_block" ... >');
      •
      • 29 октября 2014 г.
      • Да вроде все стоит на своих местах...
        У меня стоит вот этот дефолтный шаблон: http://templates.diafan.ru/show23/
        Там основные файлы в папке custom.
  •
  • 30 октября 2014 г.
  • Разобрался :)
    Вот какой код у меня:
    Код
    echo '
    <div id="block">
    <!--KNOPKI-->
    <div id="knopki">
    <div class="act_tab" id="tab_1">1</div>
    <div id="tab_2">2</div>
    <div id="tab_3">3</div>
    <div id="tab_4">4</div>
    <div id="tab_5">5</div>
    </div>
    <!--KNOPKI-->
    <!--BLOKI-->
    <div id="bl">
    <div id="tab_1_text" class="act_t">';
    //полное описание товара 1
    echo '<div class="shop_text">';
    foreach($result["param"] as $mypar){
    if($mypar["id"] != '35') continue;
    echo $mypar["value"];
    }echo '</div>';

    echo '</div>
    <div id="tab_2_text">';

    //параметры товара 2
    if (!empty($result["param"]))

    foreach($result["param"] as $mypar){
    if($mypar["id"] != '31') continue;
    echo $mypar["value"];
    }
    echo '</div>

    <div id="tab_3_text">';

    //параметры товара 3
    if (!empty($result["param"]))

    foreach($result["param"] as $mypar){
    if($mypar["id"] != '32') continue;
    echo $mypar["value"];
    }
    echo '</div>

    <div id="tab_4_text">';

    //параметры товара 4
    if (!empty($result["param"]))

    foreach($result["param"] as $mypar){
    if($mypar["id"] != '33') continue;
    echo $mypar["value"];
    }
    echo '</div>


    <div id="tab_5_text">';

    //параметры товара 5
    if (!empty($result["param"]))

    foreach($result["param"] as $mypar){
    if($mypar["id"] != '34') continue;
    echo $mypar["value"];
    }
    echo '</div>

    <div id="tab_3_text">';
    if(! empty($result["names_param"]["Видео"]))
    {
    echo 'Видео: '.$result["names_param"]["Видео"]["value"];
    }
    echo '</div>
    </div>
    <!--BLOKI-->
    </div>
    ';

    Правда мусор кое-где остался в коде

Новости

  • Не пропустите сборку DIAFAN.CMS 7.1.4
  • Вчера, 09:05
  • В новой сборке совершили революцию в структурировании кастомизированной информации в шаблонах, добавили авторегистрацию пользователей, усовершенствовали защиту от спама, актуализировали накопительную скидку, а также улучшили производительность и стабильность работы системы.
  • Сборка DIAFAN.CMS 7.1.3
  • 12 января
  • После выхода сборки 7.1 мы выпустили уже три патча, в каждом из которых улучшаем административную часть сайта. Сборка DIAFAN.CMS 7.1.3 уже доступна к установке. 
  • Новость. Сборка. Тарифы
  • 15 декабря 2023 г.
  • Подводим итоги 2023 года. Выпустили новую сборку DIAFAN.CMS 7.1.1, вводим новые тарифы на аренду сайта и коммерческую поддержку и автообновления с января 2024 г., строим планы на будущий год.
Все новости