блог диджитал-агентства - тильда иллюстрация - статья блога MANUFACT PRO

Как добавить всплывашку вместо корзины в карточку товара Tilda

В карточках товаров на Tilda (блоки ST300, ST305N, ST310N, ST315N, ST320N) кнопка в карточке обычно не работает, если не добавить на страницу корзину (блок ST100). Но что если мы хотим, чтобы кнопка в карточке товаров вела не в корзину? Как привязать кнопку в карточке к всплывашке (popup форме)? Мы посмотрели в код сайта и нашли ответ.

Оглавление

Подробнее про то, как создать интернет-магазин на Tilda читайте в нашей статье Подходит ли Tilda для интернет-магазина?

В чём проблема

Как нам сделать так, чтобы вместо корзины по кнопке открывалась форма для заполнения?

Если просто удалить корзину и добавить pop-up, кнопка становится не кликабельной и никуда не ведёт.

Мы посмотрели в код сайта. Блок с корзиной имеет ссылку oder. Поэтому вот что можно сделать.

Как мы её решили

Шаг 1

Добавить форму под карточки товара.

Важно: добавить именно после карточек товара, иначе кнопка работать не будет.

Шаг 2

Поменять ссылку #popup:myform на #order. Опубликовать страницу заново.

Шаг 3

Перезагружаем страницу и проверяем результат.

Сработало!

Осталось только настроить содержимое формы по нашим нуждам.

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

Какие ещё затруднения у вас возникают при настройке интернет-магазина на Tilda? Пишите в комментарии, и мы обязательно поможем вам разобраться.

Спасибо за внимание.
Пишите комментарии, делитесь статьёй в социальных сетях с помощью кнопок выше и подписывайтесь на рассылку в нашем блоге. Мы всегда рады новым гостям!

33 Responses

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

      3
      3
  1. Спасибо большое за данное решение! Единственное на просторах и интернета, которое помогло!

    Есть вопрос: допустим на странице одной есть 2 блока с разными карточками товаров. 1-ый это блок с направлениями. 2-ой это блок с ближайшими мероприятиями.

    Если использовать ваше решение, то pop-up подвязывается абсолютно ко всем кнопкам «Забронировать место».

    А как сделать так, чтобы в одном блоке выскакивала одна форма, а во втором другая?

    1. Рады, что вы нашли нашу статью)

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

  2. Хотелось бы добавить свои дополнительные кнопки и блоки в попап-карточку товара. Когда в блоках магазина ST305N, ST320N… демо каталог — все получается, но как только включаешь свой каталог товаров — все пропадает и никак не вставить ничего. Спасибо.

    1. Для этого вам поможет код наших «коллег по цеху» так сказать 🙂

      mo-ti.ru/prodpopupbtn

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

  3. Здравствуйте! Сделала по вашей инструкции, сработало, но содержимое по итогу отображает шаблонное, т.е то наполнение в блоке BF502N, которое идет по умолчанию и при изменении под мои запросы, сохранении, публикации и перезагрузке — не меняется( Как быть? Помогите, пож-та

    1. Добрый день! Это скорее всего связано с проблемой публикации изменений. Рекомендуем ещё раз пройтись внимательно по каждому шагу, обязательно перепроверить не дублируется ли всплывающее окно на странице (Нет ли на странице одинаковых всплывающих окон с одинаковыми #), и если не поможет, то проще всего просто обратиться со ссылкой на нашу статью и скриншотами результатов в тех.поддержку Тильды в вашем личном кабинете. Они очень быстро отвечают 🙂

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

  4. Доброго дня. Zero block st100 с корзиной находится в хедере. Добавляю дополнительные поля для оформления заказа, сохраняю изменения, но ничего не обновляется. В чем причина?

    1. Если вы использовали именно настройку страницы Header через настройки сайта. То после внесения любых изменений в блоки которые находятся в Хедере необходимо сначала опубликовать хедер, после переопубликовать все страницы с помощью соответствующей кнопки в панели Tilda.
      Должно помочь)

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

    1. Здравствуйте. Тоже столкнулась с этой проблемой. Блок st310n Поле для ссылки есть только в карточке (не в попапе), когда товары записаны в блоке, не в общем каталоге. Если выводить каталог, то кнопки меняются на «Подробнее о товаре» и «добавить в корзину». А хочется подключить каталог (тогда все цены и варианты выводятся в карточку) и ссылку на сторонний сайт (сервис онлайн-записи на услуги). Может быть у кого-то есть подсказка?

      1. Для этого вам поможет код наших “коллег по цеху” так сказать 🙂

        mo-ti.ru/prodpopupbtn — с помощью него вы сможете добавить отдельную кнопку в каждую отдельную карточку товара.)

  6. Почему то в 320N работает попап только в каталоге товаров, а на странице самого товара уже не работает, хотя ссылка там та же #order
    Почему так может быть?

    1. Насколько я понимаю, вы включили настройку отображения страниц товаров вместо попапов. Вам необходимо настроить footer (подвал сайта) и положить ваш изменённый попап именно туда. Если вы настроили подвал отдельно для каталога товаров — то ваш попап необходимо положить туда. Потом на всякий случай 2-3 раза переопубликуйте все страницы кнопкой публикации всех страниц — что бы во всех карточках товаров подтянулся результат.

  7. Здравствуйте а как можно при нажатии на кнопку что бы она перекидывала на мессенджеры? То есть я нажимаю на товар он переходит в попап и там я назвал кyопку заказать. И хотел что бы она перекидывала на Ватсап. А она на данный момент перекидывать jбратно на страницу товаров.

      1. Не совсем понял, а сам код то где)
        И какой блок использовать дополнительно, ведь в Т123 не где поменять ссылку #popup:myform на #order
        Если не затруднит, можно чуточку подробнее)))
        Спасибо

        1. Извиняюсь, скопировал в буфер обмена а вставить видимо забыл.))

          Вы можете воспользоваться следующим кодом 🙂

          Вставьте в блок Другое►Т123

          $(“.t778 .t-popup a”).attr(“href”, “#popup:myform”);

          Только замените #popup:myform на ссылку вашего ватсапа.)

  8. Добрый вечер! Можно ли сделать поп ап с выбором номинала сертификата, чтобы пользователь сразу переходил на страницу с оплатой без перехода в корзину и чтобы вообще ее не было?

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

    1. Увы, для этого нужно написать большое количество стороннего кода для замены действия закрытия попапа. Рекомендуем в таком случае включить функционал отдельной страницы товара вместо всплывающего окна, и проблема пропадет 🙂

      Чтобы сделать отдельные страницы, перейдите в Товары → Настройки → задайте Хедер и/или Футер для страниц и установите галочку Открывать страницу вместо попапа → Сохранить
      Таким образом для каждого товара будет открываться отдельная страница.

  10. Применила инструкцию к блоку ST330 форма появляется, всё отлично. Но товар всё равно добавляется в корзину, которая спрятана за всплывающей формой. Получается, что форма закрывается, а под ней видна корзина с товаром, которую можно закрыть, но у меня как у клиента началась бы паника))

    1. Верно, тут к сожалению либо корзина, либо всплывашка. На странице нельзя оставить и то, и другое при применении этой инструкции. Т.е. удалите блок корзины со страницы.)

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Другие интересные материалы в нашем блоге
блог диджитал агентства - сайт-визитка иллюстрация - статья блога MANUFACT PRO
Разработка сайтов
Что такое сайт-визитка

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

Читать »
Все статьи
Как изменить внешний вид сортировки товаров (порядка товаров) на Tilda в любом товарном блоке

Подробная инструкция как стилизовать внешний вид полоски сортировки товаров в товарных блоках на Tilda. Простой готовый код для стилизации выпадашки сортировки товаров и инструкция по его использованию.

Читать »
MANUFACT это Digital Agency состоящее из специалистов в различных областях, связанных с разработкой и поддержкой веб-проектов. В нашем корпоративном блоге мы делимся тем полезным, что знаем сами. Знакомьтесь с нами неторопливо и со вкусом, делитесь впечатлениями и узнавайте новое.
Выжимки из наших статей и уникальные материалы мы публикуем в нашем Телгерам-канале. Подписывайтесь, чтобы ничего не пропустить.
Зачитались?

Оставьте свой email и получайте актуальный материал от команды MANUFACT.

НУЖЕН САЙТ ИЛИ РЕКЛАМА?
При заказе сайта в нашей студии, бесплатно настроим эффективную рекламу в Google

Зачитались?

Оставьте нам свой e-mail адрес и получайте актуальный материал от команды MANUFACT