Чем больше работаешь, тем больше проектов, а чем больше проектов, тем больше нестандартных запросов.
Интернет-магазины - довольно распространенный запрос, ведь на Тильде их сделать гораздо дешевле, чем на других платформах, а сервисы интеграции позволяют создать совсем не простенькие сайтики, как многие думают)
Сегодня вам расскажу о нестандартном решении каталога для сайта компании, которая занимается производством цулаг.
Реализацию кода можно посмотреть тут - https://zulagi.com/catalog
Как реализовать.
Шаг 1. Добавляем на страницу блок PR 102. Оформляем каждую карточку: добавляем изображение ( логотип) и ссылка (в нашем случае это якорная ссылка)
Шаг 2. Добавляем на страницу якорные ссылки T173 , столько сколько у вас их в предыдущем блоке и называем мы их именно так как прописывали в карточке.
Также добавляем добавляем блок с таблицей - CL46, как показано на рисунке выше. Я сделала таким образом страницу, чтобы было удобно и понимать какой логотип - какая якорная ссылка и какая таблица.
Далее добавляем простой скрипт - он нужен для того, чтобы по якорной ссылке открывалась соответствующая таблица
<style>
/*Скрываем наши блоки по ID*/
#rec353504261{
display:none;
}
</style>
<script>
//При нажатии на кнопку со ссылкой #collection
$('[href = "#brogen"]').click(function() {
//Открываем первый блок
$('#rec353504261').slideToggle(500); t_lazyload_update();
});
</script>
Где взять ID блока? Заходим в Настройки блока , слева появляется блок , листаем вниз и находим ID. нажимаем скопировать и переносим в наш маленький код.
По коду видно , что мы скрываем тот блок, который должен при открытии логотип с якорной ссылкой открываться. Мы сначала его скрываем , а потом при нажатии делаем видимым. Схема достаточно простая, чтобы не запутаться , если вы начинающий специалист я рекомендую делать на каждый блок свой скрипт.
Если у вас остались вопросы или не получается поставить код, то пишите мне , я обязательно помогу!
Если вы дочитали до конца и статья была вам полезна, пожалуйста, поставьте лайк, это очень важно для меня)