Как добавить вкладки в описание товаров

Дата последнего изменения:

Если у товара несколько характеристик, в описание можно добавить вкладки. Чаще их можно увидеть на страницах продажи техники: “Описание”, “Характеристики”, “Аксессуары”. В Эквиде есть два способа это сделать:

Приложение Tabber App

 

С помощью приложения Tabber пожно добавить вкладки в описания шорткодами.Изменяйте вид, названия и цвет вкладок прямо в панели управления Эквида. Вкладки, добавленные через приложение, полностью адаптивныи и будут отлично выглядеть на экране любого размера.

Вот пример того, как они могут выглядеть:

 

Приложение платное с бесплатным пробным периодом.

Изменения функционала с помощью Javascript и CSS

Решение, которым мы поделимся ниже, предоставляется пользователям как есть. Оно может не работать на каких-то сайтах. Если вы хотите изменить работу скрипта, лучше нанять разработчика, чтобы он оптимизировал скрипт под ваши нужды.

1. Перво-наперво установите на свой сайт jQuery. Для этого добавьте вот этот код:

<script  type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>

в исходный код сайта, перед тэгом </head>.

Затем в исходный код страницы, где установлен Эквид, вставьте код (это скрипт, написанный с помощью нашего Javascript API):

<script type="text/javascript">
Ecwid.OnPageLoaded.add(function(page){
   if (page.type == "PRODUCT") {
        $( "#tabs" ).tabs();
   }
})
</script>

Внимание: вкладки будут добавлены только в описание на страницах деталей товара.

2. Добавьте HTML код вкладок в описание товаров. В панели управления Эквида -> Каталог -> Товары, откройте товар для редактирования, в поле описания выберите HTML



Сюда нужно добавить вот этот код:

<div id="tabs">
<ul>
<li><a href="#tabs-1">Tab name 1</a></li>
<li><a href="#tabs-2">Tab name 2</a></li>
<li><a href="#tabs-3">Tab name 3</a></li>
</ul>
<div id="tabs-1">
<p>Tab content 1</p>
</div>
<div id="tabs-2">
<p>Tab content 2</p>
</div>
<div id="tabs-3">
<p>Tab content 3</p>
</div>
</div> 

где замените Tab name на названия вкладок, и Tab content на тексты во вкладках.

3. Следующий шаг - подогнать ширину блока с описанием под ширину сайта. Это изменение в CSS Эквида.
Добавьте этот код в свою CSS тему на странице “Дизайн”, в панели управления Эквида:

#tabs {
  width: 80%; 
}

В коде ширина задается в процентах. Можно заменить на пиксели (500px). 

 

 

Была ли эта статья полезной?
Пользователи, считающие этот материал полезным: 1 из 3
Остались вопросы?
Обратитесь за помощью
  • Форум

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

  • Связь с техподдержкой

    Есть вопросы? Свяжитесь с нами, мы будем рады вам помочь.

  • Состояние сервиса

    Страница с информацией о запланированных технических работах и текущем состоянии сервиса.