[Ищу] Использование спойлера в описании товара

Тема в разделе "WebAsyst", создана пользователем torturesru, 9 ноя 2014.

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

    torturesru

    Регистр.:
    20 сен 2012
    Сообщения:
    288
    Симпатии:
    63
    Проблема: длинные описания фильмов и необходимо часть описания убрать под спойлер. В админке и в редакторе не нашел такой возможности. На фирменном форуме есть рекомендация следующего вида:
    1. Если вы еще не подключили библиотеку jQuery, то качаем ее.
    2. Подключаем ее между тегами <head></head>:
    Код:
    <script type="text/javascript" src="{$smarty.const.URL_JS}/jquery.js"></script>
    3. Для удобства создаем новый файл, например myshop.js.
    4. Также подключаем его между тегами <head></head>:

    Код:
    <script type="text/javascript" src="{$smarty.const.URL_JS}/myshop.js"></script>
    5. Бросаем нашу библиотеку и созданный файл в папку published/SC/html/scripts/js
    6. Где нужно вывести вопрос-ответ, добавляем:

    Код:
    <h3 class="openIt myPlus">Вопрос: Как вам позвонить?</h3>
    <div class="closeIt">
    Ответ: Возьмите телефон и позвоните )
    </div>
    Таких вопросов и ответов можно добавить сколько угодно.
    7. Открываем наш файл myshop.js (в моем примере он) и добавляем в него код:

    Код:
    $(document).ready(function() {

    //Скрываем все ответы по умолчанию
    $('.closeIt').hide();

    //Обрабатываем нажатия
    $('.openIt').toggle(function() {
    $(this).removeClass('myPlus').addClass('myMinus');
    $(this).next().slideDown(200); //показываем ответ
    },
    function() {
    $(this).removeClass('myMinus').addClass('myPlus');
    $(this).next().slideUp(200); //скрываем ответ при повторном нажатии
    });

    }); //end Ready
    Стиль CSS, для + и -

    Код:
    .myPlus { padding-left: 15px; background: url('путь к фото плюс'); background-repeat: no-repeat; background-position: 1px 3px; }
    .myMinus { padding-left: 15px; background: url('путь к фото минус'); background-repeat: no-repeat; background-position: 1px 3px; }
    .openIt { cursor: pointer; display: inline-table; }
    Но как это сделать я не понял. Был бы очень благодарен за объяснение в стиле "для самых тупых". Стоит последняя вариация третьей версии шопскрипта.
    Заранее спасибо.
     
  2. Supershop

    Supershop Постоялец Нарушитель

    Регистр.:
    8 мар 2014
    Сообщения:
    99
    Симпатии:
    16
    В этом файле все доступно. Какой конкретно пункт не можете сделать? Пишите подскажу...
     
  3. AheadOfAll

    AheadOfAll Создатель

    Регистр.:
    25 фев 2015
    Сообщения:
    39
    Симпатии:
    11
    Все предельно просто. В админке в редакторе и не появится этот пункт. Такие мелочи уже придется править вручную, но сложного там ничего нет. Что не получается?
     
    torturesru нравится это.
  4. torturesru

    torturesru

    Регистр.:
    20 сен 2012
    Сообщения:
    288
    Симпатии:
    63
    Я даже не пойму с чего начать. Просто куда и что в какой конкретный файл вставлять. Во всех же системах есть спойлер, а тут чего-то про него забыли.
    Нужно простое, например есть у меня пять дисков в комплекте с описание к каждому, если такое вставлять, получится простыня, вот и хотелось бы:
    Диск 1
    спойлер +(описание)
    Диск 2
    спойлер +(описание)
    Можно как-то сделать, чтобы впечатанный тэг
    понимался в этой системе? Ведь по логике, раз он на BB кодах работает, то для него это должно быть стандартным. Пока если вбиваешь его, он воспринимается как простой текст.
     
  5. AheadOfAll

    AheadOfAll Создатель

    Регистр.:
    25 фев 2015
    Сообщения:
    39
    Симпатии:
    11
    Первые 5 пунктов делаются единоразово, и там не очень тяжело. Да и практически любой фрилансер, думаю примерно за 10$ это сделает ))
    В принципе даже дороговато)))

    А потом просто размечаете свои диски вот так:

    <h3 class="openIt myPlus">Диск 1</h3>
    <div class="closeIt">
    (описание)
    </div>

    <h3 class="openIt myPlus">Диск 2</h3>
    <div class="closeIt">
    (описание)
    </div>

    В этом нет ничего сложного. Можно конечно сделать так что бы воспринимались коды как на форуме, но это уже будет дорогое удовольствие.
     
    torturesru нравится это.
  6. torturesru

    torturesru

    Регистр.:
    20 сен 2012
    Сообщения:
    288
    Симпатии:
    63
    Подключаем ее между тегами <head></head>:
    Код:
    <script type="text/javascript" src="{$smarty.const.URL_JS}/jquery.js"></script>
    <script type="text/javascript" src="{$smarty.const.URL_JS}/myshop.js"></script>
    Это в index.html в корне?

    myshop.js будет состоять только из:
    ---------------------------
    $(document).ready(function() {

    //Скрываем все ответы по умолчанию
    $('.closeIt').hide();

    //Обрабатываем нажатия
    $('.openIt').toggle(function() {
    $(this).removeClass('myPlus').addClass('myMinus');
    $(this).next().slideDown(200); //показываем ответ
    },
    function() {
    $(this).removeClass('myMinus').addClass('myPlus');
    $(this).next().slideUp(200); //скрываем ответ при повторном нажатии
    });

    }); //end Ready
    -------------------------------
    ?