Как изменить название вкладки «Дополнительно» на карточке товара? Битрикс табы стандартными средствами
Вкладки (табы) на карточке товара в 1С-Битрикс 14
Приветствую, Друзья!
В этом видеоуроке Вы узнаете о том, как сделать вкладки (табы) на карточке товара в адаптивном шаблоне 1С-Битрикс (примерно как это было в шаблонах 12 версии).
К сожалению, сделать табы на детальной странице нельзя без программирования. Поэтому мы опять лезем в PHP код, причем кода сегодня будет много, хотя и не сложного.
Я не буду разрабатывать что-то сложное, писать свой компонент для вывода вкладок с использованием HTML, CSS, PHP и Javascript. Битрикс тем и хорош, что в нем уже есть куча компонентов, в том числе стандартный для вывода табов. Есть масса примеров, которые можно подсмотреть в других типовых компонентах и шаблонах. Есть сообщество, документация и форумы для разработчиков. Рассматривайте этот урок как пример разработки под Битрикс для знающих PHP, но плохо знакомых с Bitrix Framework.В уроке я показал:
- где лежат простые компоненты,
- что надо редактировать в комплексном компоненте Каталог,
- где в комплексном компоненте подключаются простые компоненты,
- как доработать шаблон, чтобы не потерять доработки при обновлении движка,
- как подключать компоненты в шаблонах,
- как выводить разную информацию на разных вкладках,
- и еще кучу всяких мелочей.
Вопрос не очень сложный, но я пытался показать все как можно подробней и доступно, поэтому урок получился длительностью 1 час.
Все, что надо сделать, это нажать Play на видео ниже:
P.S. Если Вы не PHP программист, то я крайне не рекомендую повторять то, что Вы увидите в видео, одна ошибка и карточки товаров перестанут отображаться вообще. И перед любыми доработками обязательно делайте резервную копию всего сайта!
На этом сегодня все! Не забываем жать на социальные кнопки слева и задавать свои вопросы чуть ниже в комментариях!
blog.web-shoper.ru
Управление расположением блоков и табов
Впервые в корпоративном сайте можно самим определять, как будут располагаться блоки и табы. Теперь только вы решаете, в каком порядке будут отображаться новости, акции, галерея, услуги, статьи, видео и многое другое.Изучайте вашу целевую аудиторию, ее предпочтения к содержимому сайта и экспериментируйте с настройками. Располагайте перед глазами самую важную информацию, и она не останется незамеченной. Время на поиск нужной информации сократится, а удовлетворенность ваших клиентов возрастет.
Видеурок по управлению расположением блоков и табов:
Управлять положением блоков и табов на детальной странице можно в параметрах компонента «Новости».
Внимание! Настройки в параметрах компонента действуют на все элементы внутри раздела, включая те, что находятся в разных внутренних подразделах (категориях).
Чтобы открыть редактор параметров компонента, перейдите в каталог и переключитесь в режим правки.Наведите курсор на список категорий товаров и нажмите на изображение шестеренки.
В открывшемся окне перейдите к группе параметров «Настройки детального просмотра». Здесь находятся:
Этот конструктор управляет положением вкладок (табов) на странице товара. На изображении приведен пример табов с описанием товара, его характеристиками, связанными вопросами, проектами, документами, статьями, видео и дополнительной информацией.
- Конструктор положения блоков для шаблона с табами
Конструктор управляет общим видом страницы, позволяя изменять порядок расположения блоков. Например, на изображении ниже представлены блоки «Галерея» (1), «Тизеры» (2) и «Табы» (3). Используя этот конструктор, вы можете менять их местами так, как нужно именно вам.
- Конструктор положения блоков для шаблона без табов
В каталоге можно отказаться от использования табов. Для этого нужно переключиться в виджете настроек на безтабовый шаблон (о том, как это сделать рассказано здесь). В таком шаблоне содержимое табов станет самостоятельными блоками:
Их порядок тоже можно настроить в своем конструкторе – в конструкторе положения блоков для безтабового шаблона.
Чтобы переместить блок на другое место, захватите его левой кнопкой мыши и передвиньте вверх или вниз на нужное место.
Таб или блок, на чье место вы переместе элемент, сместится вниз или вверх (в зависимости от того, где освободится место) вместе с остальными элементами. В примере, блок «Комментарии» располагался внизу, поэтому когда мы перенесли его выше – на место блока «Отзывы» – отзывы и прочие блоки сдвинулись вниз.
aspro.ru
Как сделать адаптивные табы (вкладки) на css без использования скриптов
Добрый вечер! Сегодня я вам расскажу, каким образом можно сделать табы (вкладки) на чистом css3 без какого-либо использования jquery или других скриптов. Как вы уже знаете, чем меньше вы будете использовать скриптов, тем лучше для вашего сайта, и тем быстрее он будет работать. А скорость сайта сегодня один из самых важных показателей его ранжирования в поисковых системах.
Итак, начнем
Адаптивные вкладки (табы) на чистом css и без скриптов
Сегодня табы есть практически на любом сайте. Они необходимы для того, чтобы отображать несколько областей контента без перехода пользователя на другие страницы. Например, на одном из моих проектов по разработке интернет-магазина на Joomla было добавление двух табов, которые будут отображать по 3 товара двух типов: «хиты продаж» и «последние». Принято решение делать их на чистом css без перезагрузки сайта ненужными скриптами.
Итак, приступим.
HTML код для табов с использованием css3 по пунктам
1. В первую очередь нам необходимо создать div с классом «tabs».
2. Добавляем непосредственно кнопки-переключали с именем «tabs», при нажатии на которые они будут включать содержимое наших табов.
<input type=«radio» name=«tabs» id=«tab-first» checked >
3. Добавляем их название через label
<label for=«tab-first»>
4. Под кнопками, которые мы с Вами сделали в пунктах 1-3, мы добавляем уже непосредственно контент, который нам нужно выводить. В моем случае это три последних товара и три лучших товара.
Каждый блок у нас имеет класс tab-content и идентификаторы tab-content-1 и tab-content-2.
Итоговый HTML наших будущих табов
<div> <!-- Кнопка-переключатель и название первого таба --> <input type="radio" name="tabs" checked > <label for="tab-first"> <p>Хиты продаж</p> </label> <!-- Кнопка-переключатель и название второго таба --> <input type="radio" name="tabs"> <label for="tab-second"> <p>Последнее</p> </label> <!-- Вывод контента наших табов --> <div> <p> <!-- Тут вы размещаете контент под таб№1 --> </p> </div> <!-- #tab-content-1 --> <div> <p><!-- Тут вы размещаете контент под таб№2 --></p> </div> <!-- #tab-content-2 --> </div>
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<div> <!-- Кнопка-переключатель и название первого таба --> <input type="radio" name="tabs" checked > <label for="tab-first"> <p>Хиты продаж</p> </label> <!-- Кнопка-переключатель и название второго таба --> <input type="radio" name="tabs"> <label for="tab-second"> <p>Последнее</p> </label> <!-- Вывод контента наших табов --> <div> <p> <!-- Тут вы размещаете контент под таб№1 --> </p> </div> <!-- #tab-content-1 --> <div> <p><!-- Тут вы размещаете контент под таб№2 --></p> </div> <!-- #tab-content-2 --> </div> |
На этом мы закончили с написанием нашего html. Согласитесь, ничего сложного тут не было. Итак, идем дальше.
CSS стили для табов с использованием css3 по пунктам
Теперь самое интересное и сложное. Нам нужно наши табы сделать табами, которые будут переключаться при клике 🙂
Так как у нас будет два таба, то нам нужно назначить им такую ширину, чтобы они помещались на экране и не вылазили за его черту. Для этого мы прописываем ширину 50%. Если у вас будет другое число табов, то и ширину рассчитывайте отталкиваясь от их числа.
Также, обратите внимание, что по умолчанию, мы делаем наши кнопки-переключатели невидимыми
.tabs { max-width: 90%; float: none; list-style: none; padding: 0; margin: 75px auto; border-bottom: 4px solid #ccc; } .tabs:after { content: ''; display: table; clear: both; } .tabs input[type=radio] { display:none; } .tabs label p { padding: 5px; margin-right: 0; } .tabs label { display: block; float: left; width: 50%; color: #ccc; font-size: 30px; font-weight: normal; text-decoration: none; text-align: center; line-height: 2; cursor: pointer; box-shadow: inset 0 4px #ccc; border-bottom: 4px solid #ccc; -webkit-transition: all 0.5s; /* Safari 3.1 to 6.0 */ transition: all 0.5s; } .tabs label span { display: none; } .tabs label:hover { color: #3498db; box-shadow: inset 0 4px #3498db; border-bottom: 4px solid #3498db; } .tab-content { display: none; width: 100%; float: left; padding: 15px; box-sizing: border-box; background-color:#ffffff; }
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 |
.tabs { float: none; list-style: none; padding: 0; margin: 75px auto; border-bottom: 4px solid #ccc; } .tabs:after { content: ''; display: table; clear: both; } .tabs input[type=radio] { display:none; } .tabs label p { padding: 5px; margin-right: 0; } .tabs label { display: block; float: left; width: 50%; color: #ccc; font-size: 30px; font-weight: normal; text-decoration: none; text-align: center; line-height: 2; cursor: pointer; box-shadow: inset 0 4px #ccc; border-bottom: 4px solid #ccc; -webkit-transition: all 0.5s; /* Safari 3.1 to 6.0 */ transition: all 0.5s; } .tabs label span { display: none; } .tabs label:hover { color: #3498db; box-shadow: inset 0 4px #3498db; border-bottom: 4px solid #3498db; } .tab-content { display: none; width: 100%; float: left; padding: 15px; box-sizing: border-box; background-color:#ffffff; } |
Как заставить это работать
А тут все просто.
Добавляем следующий css код
.tabs [id^="tab"]:checked + label { background: #FFF; box-shadow: inset 0 4px #3498db; border-bottom: 4px solid #3498db; color: #3498db; } #tab-first:checked ~ #tab-content-1, #tab-second:checked ~ #tab-content-2 { display: block; }
.tabs [id^="tab"]:checked + label { background: #FFF; box-shadow: inset 0 4px #3498db; border-bottom: 4px solid #3498db; color: #3498db; } #tab-first:checked ~ #tab-content-1, #tab-second:checked ~ #tab-content-2 { display: block; } |
Строками выше мы добавляем особы стиль для активного таба используя :checked + label
Далее мы уже проверяем, какой наш переключатель имеет статус checked и отображаем содержимое, которое у нас прикреплено за ним, используя его id.
#tab-first:checked ~ #tab-content-1 — данная строка говорит о том, что нам нужно отобразить контент, который имеет id=»tab-content-1″, если tab-first имеет статус checked.
Делаем наши табы адаптивными
@media (min-width: 768px) { .tabs p { padding: 5px; margin-right: 10px; } .tabs { max-width: 750px; margin: 50px auto; } }
@media (min-width: 768px) { .tabs p { padding: 5px; margin-right: 10px; } .tabs { max-width: 750px; margin: 50px auto; } } |
Ну вот по сути и все. Наши табы готовы :). Вы их можете менять как угодно, добавлять-удалять. Спасибо за внимание 🙂
forwww.com
Как изменить название вкладки «Дополнительно» на карточке товара?
Необходимо заменить название вкладки «Дополнительно», расположенной в карточке товара, на «Детали».
Решение
В Аспро: Next название вкладки редактируется в настройках параметра компонента «Каталог». Для этого перейдите в публичной части сайта в каталог, включите режим правки и наведите на область. В появившемся меню нажмите на шестеренку:На вкладке «Настройки детального просмотра» в строке «Заголовок таба "Дополнительно"» введите нужный текст:
В Аспро: Корпоративный сайт 2.0 поле называется «Текст таба "Дополнительно":».
В Аспро: Оптимус, Аспро: Маркет и Аспро: Крутой шоп название вкладки «Дополнительно» редактируется в файле element.php.
Перейдите из административной части сайта в файловый менеджер: Контент → Структура сайта → Файлы и папки
В строке поиска введите путь к файлу: /bitrix/templates/aspro_mshop/components/bitrix/catalog/main/lang/ru/element.php – для решения «Аспро: Маркет»
/bitrix/templates/aspro_kshop/components/bitrix/catalog/main/lang/ru/element.php – для решения «Аспро: Крутой шоп».
/bitrix/templates/aspro_optimus/components/bitrix/catalog/main/lang/ru/element.php – для решения «Аспро: Оптимус».
Нажмите кнопку «Ок».
После того, как откроется содержимое файла, нажмите кнопку «Редактировать» и выберите пункт «Редактировать как PHP».
Найдите строчку кода, содержащую нужный параметр, и отредактируйте строку.
Было:
$MESS["ADDITIONAL_TAB"] = "Дополнительно";Стало: $MESS["ADDITIONAL_TAB"] = "Детали";Нажмите кнопку «Сохранить» или «Применить».Сбросьте кеш (инструкция) и проверьте результат на сайте:
aspro.ru
