Закладки на странице карточки товара (VAMshop)

16.03.2010 | Написал

Как сделать закладки на странице карточки товара написано в «Вопросах и ответах» оффсайта. Но информация там уже устарела, поэтому я и публикую этот пост.

В админке на странице start.php основная информация по клиентам, заказам и товарам выводится в закладках. Сделаны они с помощью jQuery. Не будем изобретать велосипед и те же скрипты используем на карточке товара.

  1. В файле шаблона templates/ваш шаблон/module/product_info/product_info_v1.html после
    {config_load file="$language/lang_$language.conf" section="product_info"}

    добавляем:

    {literal}
    <link type="text/css" href="jscript/jquery/plugins/ui/css/smoothness/jquery-ui-1.7.2.custom.css" rel="stylesheet" />	
    <script type="text/javascript" src="jscript/jquery/jquery-1.3.2.min.js"></script>
    <script type="text/javascript" src="jscript/jquery/plugins/ui/jquery-ui-1.7.2.custom.min.js"></script>
    <script type="text/javascript">
           $(function(){
           $('#tabs').tabs();
           });
    </script>
    {/literal}

    Тем самым мы «прикручиваем» скрипт к странице.

  2. В том же файле в нужном нам месте добавляем блок закладок в таком виде:

    <div id="tabs">
    <ul>
    <li><a href="#vkladka_1">кнопка первой вкладки</a></li>
    <li><a href="#vkladka_2">кнопка второй вкладки</a></li>
    <li><a href="#vkladka_3">кнопка третьей вкладки</a></li>
    </ul>
    <div id="vkladka_1">текст первой вкладки</div>
    <div id="vkladka_2">текст второй вкладки</div>
    <div id="vkladka_3">текст третьей вкладки</div>
    </div>

    Обрамляющий блок должен называться tabs, а вот блоки вкладок можно назвать произвольно. Количество вкладок неограничено.

  3. Для того, чтобы настроить дизайн, пропишем стили в файле стилей.

Вот и всё.

Метки: ,
23 комментария читателей статьи "Закладки на странице карточки товара (VAMshop)"
  • Сергей пишет:

    а что это дает не пойму еслть демо?

  • Евгений Молодецкий пишет:

    Страница смотрится более компактно. А примеров масса, посмотрите, например, как на розетке карточка товара оформленна.

  • Владимир пишет:

    Подскажите как на вамшоп сделать так как в розетке(код)?

  • Евгений Молодецкий пишет:

    Да вот же весь код у Вас перед глазами. Вставляйте в нужные места вместо «текст …вой вкладки» нужные Вам метки.

  • Александр пишет:

    можно «живой» пример? Не могу понять, что именно за закладки.

  • Александр пишет:

    если не ошибаюсь, вы имели введу «вкладки»?

  • Евгений Молодецкий пишет:

    Да, именно, вкладки. К примеру, тут — http://boom-bang.ru/product_info.php?products_id=1180

  • Николай пишет:

    Поздравляю Вас с Новым Годом!
    Желаю Вам в новом году, что бы сбылись все ваши заветные желания и появились новые заветные мечты. Пусть Новый Год принесет Вам и вашим близким огромное количество позитивных эмоций, прекрасного настроения и процветания, пусть все решения принятые Вами в этом году приводили исключительно к ожидаемому результату.
    Подскажите пожалуйста а как подключить одну из информационных страниц в вкладки допустим ДОСТАВКА ?

  • Евгений Молодецкий пишет:

    Спасибо за поздравление!
    Правьте ссылку в шапке в index.html в папке Вашего шаблона, а также других файлах html в корне шаблона, если они есть.

  • Дмитрий пишет:

    Идея хорошая и полезная. Попробывал у себя реализовать на странице карточки товара. Но что то упущено.
    Вместо русского текста только — �������
    вопосы. А вот английский и цифры нормально пишутся.
    Подскажите пожалуйста, где и что поправить.
    Спасибо!

  • Дмитрий пишет:

    Спасибо за ответ. Разобрался в чём дело.
    Если код:

    кнопка первой вкладки

    текст первой вкладки

    вставить в том же (product_info_v1.html) файле (как Вы писали), ничего не выходит. Да и есть ли в этом смысл? Ведь файл (product_info_v1.html) — это общий шаблон карточки товара и если в него вставить этот кусок кода, то вкладки будут одинаковые для всех товаров, что не совсем подходит.
    А вот если вставить этот код при создании нового товара в админке (в окне описание товара при отключенном html редакторе) то вкладки принадлежат только этому товару и у других не показываются.
    Получилось абсолютно случайно, но именно так у меня работает.

  • Евгений Молодецкий пишет:

    Вообще-то так делать не правильно. Правильный путь — сделать отдельный шаблон, скажем product_info_v2.html, и назначать его тем товарам, для которых нужны вкладки.

  • Николай пишет:

    Сделал, как Вы написали. Получилось, но:
    1. В версии 1.6.4 нету файла , а есть , правильно ли его подключать?
    2. Если работают табы, перестает работать fancybox, как это исправить?
    3. Не подскажите ли js лайбокс для картинок, чтобы при клике на картинку отрывался лайтбокс с превьюшками других фото этого товара внутри, как на той же розетке например?

    Вопрос 2 очень волнует.

  • Николай пишет:

    В комменте в пункте 1 имел ввиду, что нету jscript/jquery/jquery-1.3.2.min.js , а есть просто jscript/jquery/jquery.js

  • Евгений Молодецкий пишет:

    Естественно, что нужно делать поправку на обновления скрипта. Заметка писалась больше года назад для актуальной на тот момент версии.
    Чтобы работало сразу несколько скриптов на странице товара — закладки и табы, нужно убрать в header.php «jQuery.noConflict();», сделать там подключение, как в старой версии было. По крайней мере, я так делаю.

  • sonic пишет:

    Евгений, пытаюсь заставить работать вместе fancybox и табы не получается..

    fancybox подключаю так

    $(document).ready(function() {
    $(«a.zoom»).fancybox({
    «zoomOpacity» : true,
    «overlayShow» : false,
    «zoomSpeedIn» : 500,
    «zoomSpeedOut» : 500
    });
    });

    все равно не работает.. что делаю не так ?

  • Евгений Молодецкий пишет:

    Я же в предыдущем комментарии писал. Проблема в jQuery.noConflict (); в других скриптах на странице.

  • sonic пишет:

    я и убрал «jQuery.noConflict ();»

    но вот эффект нулевой.

  • Евгений Молодецкий пишет:

    Ищите ошибки, у меня всё работает.

  • sonic пишет:

    искал не смог решить..

    скинь, если не трудно, пример header.php и product_info_v1.html

    на мыло 007sonic007(at)gmail.com

  • VRS пишет:

    Доброй ночи.
    У меня тоже конфликт вкладок с фенсибоксом =(.
    Проверила в header.php (и в исходном коде всей страницы) нет noConflict.

    В хедере подключается

    А в файле с карточкой товара

    {literal}

    $(function(){
    $('#tabs').tabs({ fx: { opacity: 'toggle', duration: 'fast' } });
    });

    {/literal}

    Пробовала оставлять одну из библиотек, но не помогло..
    Помогите, пожалуйста, их подружить).

    • Евгений Молодецкий пишет:

      Статья писалась в марте 2010 года. После этого вышло масса обновлений. Естественно, что в движке произошли изменения, и тупо скопировавав вы не получите результат. Включайте голову и все получится.

Добавить комментарий

Ваш e-mail не будет опубликован.