Инструкция – КИНДЕР ПОДАРОК

Открываем консоль сайта.
Заходим в раздел Товаров.
Находим нужную сборку.
жмем на кнопку “Изменить”

Перед каждой строкой вставляем текст:


<div class="sbor1-1"></div>

После названия конфеты вставляем другой текст


<div class="imgsb-1-1"></div>

</div>

Повторяем с каждой конфетой меняя цифры 1-1 на соответствующий сбор и конфету.
Т.е. Если работаем со сбором № 6, и конфетой 4 по порядку, то строка должна быть такой:



<div class="sbor6-4">
Шоколадный батончик «Mars» mini (Mars) — 1 шт.

<div class="imgsb-6-4"></div>

</div>

ставим курсор между

<div class="imgsb-6-4">

</div>

и нажимаем кнопку “Добавить мультимедиа” (в верхней части экрана, левее)
добавится код к картинке конфеты.
Повторяем до конца со всеми конфетами.

Сохранив и просмотрев страницу у тебя должно получиться что такое.
только с картинками под каждой строкой.

Теперь делаем так что бы картинки пропали и появлялись только при наведении на текст
на странице с товаром, там где строки чередуются с картинками. В самом верху экрана последняя кнопка “Edit With Yellow Pencil” где в выпадающем меню ты выбираешь “Edit this product”, ждешь загрузку и видишь новые окна и панели с кнопками по бокам. Вместо курсора у тебя крестик. Им ты тыкаешь на первую строку с конфетой и потом по кнопке

</>

третья слева вверху.

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

.sbor10-1{
	position:relative;
}

.imgsb-10-1{
	display:none;
	box-shadow:0 5px 5px rgba(0,0,0,0.3);
	-webkit-box-shadow:0 5px 5px rgba(0,0,0,0.3);
	-moz-box-shadow:0 5px 5px rgba(0,0,0,0.3);
	margin-left:10%;
}

.sbor10-1:hover .imgsb-10-1{
	display:block;
	width:350px;
	height:400px;
	position:absolute;
	z-index:1000;
}

где “.sbor-10-1” – это номер сбора с который ты работаешь и номер конфеты по порядку.

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

Вход