Как вам помочь ?

Визуальный редактор

Актуально для версии магазина: 6.0 | 5.0-3.0

В данной статье рассмотрим встроенный HTML редактор, основные возможности и режим "источник".

 

Встроенный HTML редактор, режим "источник"

В платформе AdvantShop встроен графический редактор (рис.1), с помощью которого возможно писать текст для описания товаров, статических страниц, новостей, даже если вы не знаете верстку. Пользуетесь как блокнотом, можно добавлять картинки в текст, таблицы, списки, ссылки на другие страницы, выделять и изменять шрифты текста.

Встроенный HTML редактор, режим "источник"
Рисунок 1.

Режим источник, о котором мы сейчас поговорим - это кнопка на панели встроенного редактора, находиться в верхнем ряду слева. (рис.2)

Режим источник, о котором мы сейчас поговорим - это кнопка на панели встроенного редактора, находиться в верхнем ряду слева.
Рисунок 2.

При работе с текстом вы можете работать в 2х режимах:

Первый режим, стандартный или "визуальный", где вы можете изменять стили и внешний вид текста путем команд на панели (аналог редактирования текста в MS Office, к примеру в Word),

Второй режим - это режим "Источник", который переключает текст в чистый языка разметки HTML, менее удобный, но дает гораздо больше контроля над стилями.

 

Важно

Для работы в режиме "Источник" необходимо иметь навыки работы с языком разметки HTML.

 

Пример переключения

Внимание!

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

Добавим текст "Привет, мир!", слово "мир!" выделим жирным, используя кнопку на панели. Готово, все просто. (рис. 3)

Добавим текст "Привет, мир!", слово "мир!" выделим жирным, используя кнопку на панели. Готово, все просто.
Рисунок 3.

Переключимся в режим "Источник", посмотрим что получилось. (Рис 4)

Переключимся в режим "Источник", посмотрим что получилось.
Рисунок 4.

Мы можем произвести и обратное действие, например, отредактировать HTML в режиме "источник" и затем посмотреть что получится.

 

Как добавить таблицу

При работе с текстом в описании товара, на статической странице или в новости может возникнуть необходимость представить какие-либо данные в виде таблицы. 

В данном разделе мы рассмотрим 2 варианта, как добавить таблицу в текст (на примере статической страницы) при редактировании текста прямо в клиентской части магазина (In-place редактирование).

Заметка

Для включения In-place редактирования в настройках Вашего магазина должна стоять соответствующая галочка ("Настройки - Системные настройки - Общие").

Как добавить таблицу
Рисунок 5.

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

Так выглядит страница "О магазине" в данный момент:

Так выглядит страница "О магазине" в данный момент
Рисунок 6.

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

При первой покупке Скидка 3%
Постоянным клиентам Скидка 5%
Оптовым покупателям Скидка 15%

 

Добавление таблицы в текст через встроенный HTML-редактор

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

Добавление таблицы в текст через встроенный HTML-редактор
Рисунок 7.

Далее, в тексте ставим курсор на то место, куда нужно вставить таблицу. Затем на панели редактора выбираем иконку "таблица".

Далее, в тексте ставим курсор на то место, куда нужно вставить таблицу. Затем на панели редактора выбираем иконку "таблица".
Рисунок 8.

Появится окно настроек таблицы. В нём можно сразу указать необходимое количество строк и столбцов будущей таблицы.

Указываем нужные настройки и нажимаем кнопку "OK"

Указываем нужные настройки и нажимаем кнопку "OK"
Рисунок 9.

Готово, таблица добавлена.

Таблица добавлена.
Рисунок 10.

Далее Вы можете вносить в неё данные - непосредственно в нужные ячейки. Также, при необходимости, нажав правой кнопкой мыши на таблице, Вы можете вносить изменения в её структуру.

Сохраните изменения, кликнув на кнопку с "галочкой" в правом нижнем углу окна редактирования.

Сохраните изменения, кликнув на кнопку с "галочкой" в правом нижнем углу окна редактирования.
Рисунок 11.

Всё готово.

Всё готово.
Рисунок 12.

Добавление таблицы в текст через чистый HTML

Существует также альтернативный вариант добавления таблицы в текст - добавление непосредственно HTML-вёрстки таблицы в нужное место в общей HTML-вёрстке. 

Внимание!

Для работы с чистым HTML необходимы навыки работы с HTML. Если Вы испытываете трудности в этом вопросе, мы рекомендуем обратиться к специалисту.

 

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

Для начала вставим метку в то место, где будет наша таблица. В нужном месте напишем текст, который будет легко найти затем в HTML, например, "11111111111111111111".

Добавление таблицы в текст через чистый HTML
Рисунок 13.

Затем переключаемся в режим "Исходник" и находим нашу "метку".

Затем переключаемся в режим "Исходник" и находим нашу "метку".
Рисунок 14.

Теперь в место маркера мы вставляем HTML-код нашей таблицы. 

Например, такой:

<table border="1" cellpadding="1" cellspacing="1" style="width: 350px;">
<tbody>
 <tr>
  <td>При первой покупке</td>
  <td>Скидка 3%</td>
 </tr>
 <tr>
  <td>Постоянным клиентам</td>
  <td>Скидка 5%</td>
 </tr>
 <tr>
  <td>Оптовым покупателям</td>
 <td>Скидка 15%</td>
 </tr>
</tbody>
</table>

Получится вот так:

Получится вот так
Рисунок 15.

При переключении обратно из режима "Источника" в режим визуализации мы должны увидеть таблицу. 

При переключении обратно из режима "Источника" в режим визуализации мы должны увидеть таблицу
Рисунок 16.

Если таблицу видно, значит, всё в порядке. 

Сохраните изменения, кликнув на кнопку с "галочкой" в правом нижнем углу окна редактирования.

Сохраните изменения, кликнув на кнопку с "галочкой" в правом нижнем углу окна редактирования.
Рисунок 17.

Внимание!

Описанный пример - это базовая вещь в HTML. Если Вам нужно сделать что-то более сложное с HTML-вёрсткой, мы рекомендуем обратиться за помощью к специалисту (HTML-верстальщик), который поможет решить задачу.

 

Как разместить ссылку на скачивание документа (файла)

Предположим, Вы редактируете страницу "О магазине" прямо в клиентской части (In-place редактирование) и хотите добавить в её текст ссылку для скачивания прайс-листа клиентами Вашего магазина.

Заметка

Для включения In-place редактирования в настройках Вашего магазина должна стоять соответствующая галочка ("Настройки - Системные настройки - Общие").

Как разместить ссылку на скачивание документа (файла)
Рисунок 18.

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

Откроется панель редактирования.
Рисунок 19.

Нажмите кнопку "Вставить и редактировать ссылку".

Нажмите кнопку "Вставить и редактировать ссылку".
Рисунок 20.

Открывается окно выбора файла, где необходимо нажать “Выбор на сервере”.

Открывается окно выбора файла, где необходимо нажать “Выбор на сервере”.
Рисунок 21.

Далее открывается окно менеджера файлов, через который Вы подгружаете свой файл следующим образом:

Нажимаем "Загрузить файл", затем "Выбрать файлы".

Нажимаем "Загрузить файл", затем "Выбрать файлы".
Рисунок 22.

Выбираем файл на компьютере и нажимаем кнопку "Загрузить".

Выбираем файл на компьютере и нажимаем кнопку "Загрузить".
Рисунок 23.

Осуществите двойной клик на файле в списке - ссылка на него автоматически подставится в нужное поле.

Осуществите двойной клик на файле в списке - ссылка на него автоматически подставится в нужное поле.
Рисунок 24.

Мы получили ссылку на файл. Копируем её, возвращаемся к HTML-редактору статической страницы и прописываем ссылку (в режиме "Исходник") в тегах <a href=” ”>...</a>

Например, получится вот так:

<a href=”files/price.xlsx”>Скачать прайс-лист</a>

Мы получили ссылку на файл. Копируем её, возвращаемся к HTML-редактору статической страницы и прописываем ссылку (в режиме "Исходник") в тегах <a href=” ”>...</a>
Рисунок 25.

Нажмите "ОК", затем сохраните изменения, кликнув на кнопку с "галочкой" в правом нижнем углу окна редактирования.

Нажмите "ОК", затем сохраните изменения, кликнув на кнопку с "галочкой" в правом нижнем углу окна редактирования.
Рисунок 26.

Ссылка на скачивание размещена на странице, и нажатием на неё мы можем скачать загруженный на сервер файл.

Ссылка на скачивание размещена на странице, и нажатием на неё мы можем скачать загруженный на сервер файл.
Рисунок 27.

Иногда, в зависимости от браузера и его настроек по умолчанию, при нажатии на гиперссылку "Скачать прайс-лист" скачивание не происходит, а лишь открывается пустое окно в новой вкладке браузера. Чтобы этого избежать, разместите в теге гиперссылки атрибут download=””, который в любом случае принудит  файл скачаться. В таком случае гиперссылка будет выглядеть следующим образом:

<a href=”files/price.xls” download=””>Скачать прайс-лист</a>

 

Как добавить маркированный список

В данном разделе рассмотрим, как добавить маркированный список в текст (на примере статической страницы) при редактировании текста прямо в клиентской части магазина (In-place редактирование).

Заметка

Для включения In-place редактирования в настройках Вашего магазина должна стоять соответствующая галочка ("Настройки - Системные настройки - Общие").

Как добавить маркированный список
Рисунок 28.

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

Так выглядит страница "О магазине" в данный момент:

Так выглядит страница "О магазине" в данный момент
Рисунок 29.

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

"Наши преимущества:

- Доставка по городу "день в день"
- Круглосуточный приём заказов
- Оплата любым удобным способом
- Бонусы за покупку"

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

Перейдите в режим редактирования страницы, осуществив клик на любом месте текста. Откроется панель редактирования.
Рисунок 30.

Введите нужный вам текст, переходя на следующую строку путём нажатия кнопки "Enter" на клавиатуре (тире при вводе пунктов списка использовать не нужно)

Введите нужный вам текст, переходя на следующую строку путём нажатия кнопки "Enter" на клавиатуре (тире при вводе пунктов списка использовать не нужно)
Рисунок 31.

Выделите текст, из которого нужно сделать список, мышкой и нажмите одну из двух кнопок на панели редактора (в зависимости от того, какой список вы хотите создать - с нумерацией или без). Для примера, выберите список без нумерации.

Для примера, выберите список без нумерации.
Рисунок 32.

Сохраните изменения, кликнув на кнопку с "галочкой":

Сохраните изменения, кликнув на кнопку с "галочкой"
Рисунок 33.

На этом настройки списка завершена. В клиентской части он будет отображаться следующим образом:

На этом настройки списка завершена.
Рисунок 34.

 

Как добавить заголовок

В данном разделе рассмотрим, как добавить заголовок в текст (на примере статической страницы) при редактировании текста прямо в клиентской части магазина (In-place редактирование).

Заметка

Для включения In-place редактирования в настройках Вашего магазина должна стоять соответствующая галочка ("Настройки - Системные настройки - Общие").

Как добавить заголовок
Рисунок 35.

Предположим, у вас на сайте есть статическая страница "О магазине", которая содержит, в том числе, список преимуществ вашего магазина (инструкция по созданию списка) и вы хотите сделать надпись "Наши преимущества" заголовком.

Так выглядит страница "О магазине" со списком в данный момент:

Так выглядит страница "О магазине" со списком в данный момент
Рисунок 36.

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

Перейдите в режим редактирования страницы, осуществив клик на любом месте текста. Откроется панель редактирования.
Рисунок 37.

Выделите мышкой нужный вам фрагмент текста (в нашем примере - фразу "Наши преимущества") и в выпадающем списке на панели редактирования (см. рис. 38) выберите, к примеру, "Заголовок 2".

Выделите мышкой нужный вам фрагмент текста и в выпадающем списке на панели редактирования выберите, к примеру, "Заголовок 2".
Рисунок 38.

Сохраните изменения, кликнув на кнопку с "галочкой":

Сохраните изменения, кликнув на кнопку с "галочкой"
Рисунок 39.

На этом настройки списка завершена. В клиентской части он будет отображаться следующим образом:

На этом настройки списка завершена. В клиентской части он будет отображаться следующим образом
Рисунок 40.

По такому же принципу можно добавлять заголовки разного размера - от "Заголовок 1" до "Заголовок 4". В коде сайта такие заголовки будут предствлены, соответственно, тегами h1 - h4.

 

Как добавить изображение сбоку текста

В данной статье мы рассмотрим, как добавить изображение в текст (на примере статической страницы) при редактировании текста прямо в клиентской части магазина (In-place редактирование).

Заметка

Для включения In-place редактирования в настройках Вашего магазина должна стоять соответствующая галочка ("Настройки - Системные настройки - Общие").

Как добавить изображение сбоку текста
Рисунок 41.

Предположим, у вас сайте есть страницы "О магазине", которая содержит описание вашего магазина и список преимуществ (инструкция по созданию списка), и вы хотите поместить на данную страницу изображение. Кроме того, вы хотите, чтобы текст находился справа от изображения.

Так выглядит страница "О магазине" со списком в данный момент:

Так выглядит страница "О магазине" со списком в данный момент
Рисунок 42.

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

Перейдите в режим редактирования страницы, осуществив клик на любом месте текста. Откроется панель редактирования.
Рисунок 43.

Поставьте курсор мыши в ту область текста, откуда должно будет начинаться изображение (нашем случае это будет самое начало текста). Нажмите на иконку загрузки изображения.

Нажмите на иконку загрузки изображения.
Рисунок 44.

Нажмите "Выбор на сервере"

Нажмите "Выбор на сервере"
Рисунок 45.

Нажмите "Загрузить файл", затем - "Выбрать файлы"

Нажмите "Загрузить файл", затем - "Выбрать файлы"
Рисунок 46.

Выберите на вашем локальном компьютере файл изображения и нажмите "Открыть"

Выберите на вашем локальном компьютере файл изображения и нажмите "Открыть"
Рисунок 47.

Нажмите "Загрузить"

Нажмите "Загрузить"
Рисунок 48.

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

Осуществите двойной клик на нужном вам изображении, которое было загружено.
Рисунок 49.

В открывшемся окне выберите параметр Выравнивание со значением "По левому краю" (чтобы текст находился справа от изображения). Также, при необходимости, вы можете указать такие параметры, как ширина, высота, граница и отступы (в данном примере мы оставим данные значения по умолчанию). Нажмите кнопку ОК.

Нажмите кнопку ОК.
Рисунок 50.

Сохраните изменения, кликнув на кнопку с "галочкой":

Сохраните изменения, кликнув на кнопку с "галочкой":
Рисунок 51.

Всё готово. Страница теперь выглядит следующим образом:

Всё готово. Страница теперь выглядит следующим образом
Рисунок 52.

 

Вывод изображения большего размера при нажатии на изображение

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

В движке AdVantShop.NET начиная с версии 3 есть ряд способов как без модификаций и доработки сайта сделать то что нужно, именно при нажатии на фотографию открывать картинку большего размера в отдельном окне.

Обычно, на любом другом сайте, такое можно было сделать с помощью стороннего скрипта, например "fancybox", и его нужно отдельно подключать, чтобы с ним работать. Так вот, для удобства скрипт "fancybox" ( http://fancybox.net/ ) уже интегрирован в движок и мы будем просто с ним работать, подключать отдельно его не нужно.

Мы будем работать с текстом, например описания товара, в панели администрирования магазина в HTML редакторе, который переведён в режим "Источник".

И так, чтобы сделать такую умную картинку, необходимо:

Шаг 1. 

К примеру картинка в HTML выглядит так:

<img alt="" src="/img/small1.jpg" />

 

Шаг 2.

Нужно её обтянуть, чтобы было так:

<a href="/img/big1.jpg">
<img alt="" src="/img/small1.jpg" />
</a>

Где: big1.jpg - это большая фотография, small1.jpg - маленькая фотография

Получится ПРОСТО ссылка на фотографию.

 

Шаг 3.

Вся магия в дополнительном параметре у ссылки: data-plugin="fancybox" 

Добавляем её нашему тегу <a> и в итоге получится так:

<a href="/img/big1.jpg" data-plugin="fancybox" >
<img alt="" src="/img/small1.jpg" />
</a>

 

Теперь при нажатии на картинку small1.jpg откроется картинка big1.jpg в окне. 

Теперь при нажатии на картинку small1.jpg откроется картинка big1.jpg в окне. 
Рисунок 53.

При нажатии получиться вот так:

При нажатии получиться вот так
Рисунок 54.

Пробуйте.

 

Что бы показывать несколько фотографий, использовать стрелочки (влево, вправо), нужно объеденить их в группы добавив атрибут rel="group1".

Чтобы получилось так:

<a href="/img/big1.jpg" data-plugin="fancybox" rel="group1">
<img alt="" src="/img/small1.jpg" />
</a>
<a href="/img/big2.jpg" data-plugin="fancybox" rel="group1">
<img alt="" src="/img/small2.jpg" />
</a>

 

Чтобы добавить описание фотографии, нужно добавить атрибут title="Описание фотографии 1".

Получится так:

<a href="/img/big1.jpg" data-plugin="fancybox" rel="group1" title="Описание к фотографии 1">
<img alt="" src="/img/small1.jpg" />
</a>
<a href="/img/big2.jpg" data-plugin="fancybox" rel="group1" title="Описание к фотографии 2">
<img alt="" src="/img/small2.jpg" />
</a>

 

Чтобы добавить описание фотографии, нужно добавить атрибут title="Описание фотографии 1"
Рисунок 55.

 

Как загрузить фотографию в текст страницы описания или новости

Чтобы добавить изображение в текст, к примеру в текст статической страницы, нужно проделать несколько шагов. 

Сразу отметим что процедура одинаковая для добавления картинки к любому тексту где есть встроенный HTML редактор, а это текст новости, текст описания товара (полное описание и краткое), статический блок и статическая страница, так же описание категории.

И так, добавление картинки разбито на 6 простых шагов.

Для начала переходим в панель администрирования, в редактирование товара (для примера выберем текст описания товара)

 

1)  В тексте описания поставьте курсор в место где должна быть картинка. По умолчанию курсор стоит в начале текста и картинка добавиться именно туда. 

2) Нажмите иконку "Изображение" на панели редактора (рис. 56).

 Нажмите иконку "Изображение" на панели редактора
Рисунок 56.

3) В открывшемся окне во вкладке "Данные об изображение" нажмите кнопку "Выбор на сервере", откроется 2ое дополнительное окно. (рис. 57).

В открывшемся окне во вкладке "Данные об изображение" нажмите кнопку "Выбор на сервере", откроется 2ое дополнительное окно.
Рисунок 57.

4) Во втором дополнительном окне нам нужно либо выбрать картинку что уже есть на сервере, к примеру была загружена ранее, либо загрузить новую картинку.

Тут есть 2 варианта:

- Если нужно загрузить совсем новую картинку, то нажмите "Загрузить файл", выберите файл и нажмите "Загрузить", после загрузки нажмите "Выбрать" (рис.58).

Если нужно загрузить совсем новую картинку, то нажмите "Загрузить файл", выберите файл и нажмите "Загрузить", после загрузки нажмите "Выбрать"
Рисунок 58.

- Если картинку уже загрузили ранее, к примеру вам нужно было вставить одну и туже картинку 2 раза и вы уже загрузили её подобным способом ранее, то просто выбираете из тех что есть в списке, затем так же нажмите кнопку "Выбрать" (рис. 59).

Выбираете из тех что есть в списке, затем так же нажмите кнопку "Выбрать"
Рисунок 59.

Окно закроется, и в окне что открылось ранее будет отображена картинка которую мы выбрали (или загрузили), тут ничего делать не нужно, просто нажмите "Ок" (рис. 60).

Окно закроется, и в окне что открылось ранее будет отображена картинка которую мы выбрали (или загрузили), тут ничего делать не нужно, просто нажмите "Ок"
Рисунок 60.

5) Картинка добавилась. В тексте выглядит как представлено на (рис. 61). 

Как картинка выглядит в тексте
Рисунок 61.

6) Осталось только сохранить изменения описания , нажав кнопку "Сохранить". 

 

Установка якоря на странице

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

Как это сделать, мы постараемся сейчас разъяснить.

Заметка

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

Создание HTML якоря на странице

Обратите внимание, добавлять якорь нужно в HTML виде в режиме Источник. Подробнее про режим источник здесь.

Для создания якоря следует сделать закладку в соответствующем месте и дать ей имя при помощи атрибута name тега <a>. 

Например, вот так:

<a name="one"></a>

Где one - это название якоря, а атрибут href можно не указывать вовсе. Этот код ссылки нужно вставить туда, куда нам нужно перейти. К примеру, в начале каждой главы или абзаца с нужной информацией. При нажатии на ссылку которую мы добавим позже, пользователя будет перебрасывать именно в ту часть текста где расположен код якоря.

Якорей на странице может быть несколько.

Важно

Имена для якорей должны быть уникальными (разными).

Заметка

Данные теги нужно помещать непосредственно перед заголовком пункта, к которому переходим. Помещать текст в теги <a></a> не нужно, так как в таком случае текст будет отображаться как ссылка.

Добавление ссылки на якорь

И так, якорь мы только что создали. Теперь нам нужно добавить ссылку на него, точнее, ссылку, при нажатии на которую пользователя бы перебрасывало к месту якоря. 

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

1) Для ссылок на якори внутри одной страницы

Для этого нам понадобиться в оглавление или подходящий для этого раздел документа, добавить обычную ссылку вида:

<a href="http://вашдомен.ru/pages/название_статической_страницы#one" target="_self">Ваш текст</a>

Заметка

target="_self" загружает страницу в текущее окно.

target="_blank" загружает страницу в новое окно браузера.

Это код обычной ссылки, за исключением того что для атрибута href указывается адрес страницы, знак решетки "#" и название якоря к которому нужно перейти.

Заметка

Можно использовать как сокращённый вариант - всё что после домена и слеша ( / ), так и полный путь до страницы вместе с доменом.

Например, если страница на которой мы разместили якоря находится тут: http://вашдомен.ru/pages/название_статической_страницы#one, то подойдут варианты:

<a href="./pages/название_статической_страницы#one" target="_self">Ваш текст</a>

<a href="http://вашдомен.ru/pages/название_статической_страницы#one" target="_self">Ваш текст</a>

В первом варианте, важно отметить, в ссылке обязательно перед слешем " / " нужно ставить точку.

 

2) Для ссылок на якори на разных страницах.

Правило такое же как для ссылок на одной странице, за исключением что Вы указываете полный путь до нужной страницы, в конец ссылки добавляете решетку "#" и название якоря. 

Например:

<a href="http://вашдомен.ru/pages/название_статической_страницы#one" target="_self">Ваш текст</a>

Эта ссылка "http://вашдомен.ru/pages/название_статической_страницы#one" означает, перейти на адрес http://вашдомен.ru/pages/название_статической_страницы к якорю #one

Т.е. при нажатии на ссылку произойдет переход по ссылки и последует "переброс" по документу к нужному якорю.

Всё просто. Пробуйте.

 

Всё готово.

 

Вывод всплывающего окна с текстом при нажатии на ссылку

По вопросу отображения текста во всплывающем окне. 

Необходимо чтобы в тексте описания была возможность выводить ссылку или картинку, при нажатии на которую открывается всплывающее окно с каким либо текстом, и даже возможно картинкой в этом тексте. 

В движке AdVantShop.NET, начиная с версии 3, есть ряд способов как без модификаций и доработки сайта сделать то что нужно, именно при нажатии на ссылку открывать специальное всплывающее окно небольшого размера с затемнением фона.

И так.

Используя интегрированный скрипт http://fancybox.net/, мы соорудим HTML конструкцию из ссылки и пары div чтобы всё заработало.

Ещё раз, сам скрипт для работы окон уже есть внутри движка магазина, мы только будем его использовать, и сейчас покажем как.

Для начала создадим ссылку которая будет видна клиенту, и при нажатии на которую будет показываться окно, чтобы сделать такую ссылку нужно для обычной ссылки прописать дополнительный атрибут, а именно добавить data-plugin="fancybox"  т.е. обычная ссылка в HTML выглядит так:

<a href="#size">ссылка 1</a>

а ссылка которая нужна нам, будет выглядеть так:

<a data-plugin="fancybox" href="#size">ссылка 1</a>

Обратите внимание, что href у ссылки содержит текст #size - это название элемента, который будет содержать текст в окне, его рассмотрим ниже.

Далее, ниже ссылки, обычно прямо под ней, чтобы не потерять, разместим такой код:

<div style="display:none;">
   <div id="size">
 
     ...тут будет наш HTML текст...
 
   </div>
</div>
Это 2 вложенных дива (div) у верхнего прописан стиль style="display:none;", у вложенного прописан id="size", внутри мы можем указать любой HTML текст, включая картинки.
 
И так, рассмотрим пару примеров.

 

Пример 1

Для примера разместим там небольшое описание способа доставки.

Жирным отметим код который нужен для обслуживания всплывающего окна.

Получится примерно, так:

<a data-plugin="fancybox" href="#dostavka">ссылка 1</a>
 
<div style="display:none">
    <div id="dostavka">
 
       <strong>Курьером</strong> (доставка курьером осуществляется на следующий
       день после заказа<br />с 12-00 до 19-00, пожалуйста указывайте удобное время доставки).
 
       <ul>
              <li>Стоимость доставки определяется от суммы заказа:</li>
              <li>Заказ до 500р. стоимость доставки 400р.</li>
              <li>Заказ от 500р до 2000р. стоимость доставки 200р.</li>
              <li>Заказ свыше 2000р. - доставки бесплатно.</li>
       </ul>
 
    </div>
</div>

В этом примере мы назвали внутренний div как dostavka, т.е. код получился id="dostavka", можно придумать любое название, важно чтобы оно было указанно в верхней ссылке, и не было два и более одинаковых названий на странице. 

И так, разместим код на любой статической странице, и посмотрим что получилось (рис. 62).

И так, разместим код на любой статической странице, и посмотрим что получилось
Рисунок 62.

олучилась ссылка при нажатии на которую показывается окно с текстом, супер.
Рисунок 63.

Получилась ссылка при нажатии на которую показывается окно с текстом, супер.

 

Пример 2

Давайте улучшим наше всплывающее окно, добавим в текст картинку. 

Однако, добавить картинку напрямую в скрытый элемент не получится, по этому вы можете временно убрать у верхнего div, его стиль display:none; тогда элемент станет виден в режиме визуализации (не в режиме источник), добавьте картинку в нужное место и затем верните элементу его display:none;

Получится примерно, так:

<a data-plugin="fancybox" href="#dostavka">ссылка 1</a>
 
<div style="display:none;">
    <div id="dostavka">
 
       <strong>Курьером</strong> (доставка курьером осуществляется на следующий
       день после заказа<br />с 12-00 до 19-00, пожалуйста указывайте удобное время доставки).
 
       <center><img src="mf2.jpg"/></center>
 
       <ul>
              <li>Стоимость доставки определяется от суммы заказа:</li>
              <li>Заказ до 500р. стоимость доставки 400р.</li>
              <li>Заказ от 500р до 2000р. стоимость доставки 200р.</li>
              <li>Заказ свыше 2000р. - доставки бесплатно.</li>
       </ul>
 
    </div>
</div>

 

Тестируем

Тестируем
Рисунок 64

Получилось отлично. 

 

Так же, всплывающее окно можно использовать для вывода табличных данных, например вот так (рис. 65)

Так же, всплывающее окно можно использовать для вывода табличных данных, например вот так
Рисунок 65

 

Два и более всплывающих окна

Чтобы вставить 2 и более окон на одну страницу, разместите код друг за другом, но обязательно укажите уникальный id для элементов, в противном случае по всем ссылкам будет открываться только одно окно.

Получится примерно, так:

<a data-plugin="fancybox" href="#okno1">ссылка 111</a>
 
<div style="display:none">
    <div id="okno1">
        ...текст для окна 111...
    </div>
</div>
 
<a data-plugin="fancybox" href="#okno2">ссылка 222</a>
 
<div style="display:none">
    <div id="okno2">
        ...текст для окна 222...
    </div>
</div>

Пробуйте, используйте. Способы применения всплывающих окон, ограничены только воображением.

Всё готово.

Другие статьи по теме

Открыть онлайн чат? Открыть
Статья оказалась полезной? Да Нет
Благодарим за отзыв.

Как мы можем улучшить статью?

Не нашли нужную статью? Предложить тему

Не нашли нужную статью?

Благодарим за отзыв.