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

Очень часто при работе над интернет — магазинами на тильде сталкиваюсь с необходимостью автоматического добавления товаров в корзину, когда в неё добавляется определенный товар. По простому, это по сути реализация добавления дополнительных товаров в корзину.

Ключевым фактором создания решения является удобство настройки и простота установки, а также совместимость с другими моими модификациями Тильды (промокоды, донаты)

Преимущества данной реализации добавления дополнительных товаров

1) Главное удобство это простота настройки, чтобы он заработал корректно. Ничего сложно делать не надо:

<script>
//Здесь укажите id категории ВСЕ, которая в каталоге тильды идет по умолчанию и её нельзя удалить
var id_all_category = '434145928791';

    
//ЗДЕСЬ УКАЖИТЕ ID ТОВАРА С КОТОРЫМ ИСКОМЫЙ ТОВАР БУДЕТ ДОБАВЛЯТЬСЯ В КОРЗИНУ
var check_tovar_for_dop = [
    156523342632,
]; 
    
//ЗДЕСЬ УКАЖИТЕ ID ТОВАРА КОТОРЫЙ БУДЕТ ДОБАВЛЯТЬСЯ К НУЖНОМУ ОСНОВНОМУ АВТОМАТИЧЕСКИ, МОЖНО УКАЗЫВАТЬ НЕСКОЛЬКО ДОПОВ ЧЕРЕЗ ЗАПЯТУЮ
var find_tovar_kak_dop = [
    896990543782,919096499932,
];
..............

Есть переменные, в которые нужно вписать необходимые значения:

  • id_all_category здесь указываем ID категории товаров по умолчанию, обычно это «ВСЕ»
  • check_tovar_for_dop здесь указываем ID одного товара, который будет являться ОСНОВНЫМ
  • find_tovar_kak_dop здесь указываем ID на любое количество дополнительных товаров, которые будут добавляться в корзину автоматически, вместе с основным товаром. Я тестировал 9 товаров одновременно. Добавление такого количество товаров одновременно, не влияло на скорость работы сайта.

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

Где размещать код для магазина на Тильде

На самом деле мест для размещения кода не так много.

1) Если у вас сквозная корзина, которая расположена в подвале, то размещайте стандартный HTML блок с кодом модификации там же. Только необходимо учесть, что у карточек товаров есть свой подвал, если он одинаков и для каталога и для страниц, то проблем нет. Чтобы указать для карточек товаров общий подвал, его в настройках нужно просто выбрать

2) Есть альтернативный вариант установки кода. Для этого надо зайти в настройки проекта. Перейти во вкладку «Еще» и нажать на кнопку «Редактировать код» в разделе «HTML-КОД ДЛЯ ВСТАВКИ ВНУТРЬ HEAD»

Далее просто вставляете код, обязательно с тегами <script></script>. Если они в коде есть, то второй раз эти теги указывать не надо.

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

В видео — демонстрации, в качестве основного товара указаны «Перчатки трикотажные», в качестве товаров которые дополнительно добавляются в корзину магазина на Тильде: «Рюкзак Inferno» и «Шапка с шерстью». В настройке по умолчанию дополнительные товары можно удалить из корзины Тильды, только при удалении основного товара, но это меняется (об этом в самом низу статьи)

А теперь тоже самое текстом, внутри кода указали: (1) id категории товаров по умолчанию, (2) id основного товара, (3) id дополнительных товаров, которые будут добавляться в корзину вместе с основным. Остальные настройки не трогал

Далее в каталоге, в товаре «Перчатки трикотажные» нажимаю на кнопку «В корзину»

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

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

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

Получить готовое решение для автоматического добавления доп товаров в корзину Тильды

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

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

🎓 Получить решение: автоматическое добавление дополнительных товаров в корзину, при добавлении в неё основного товара
Стоимость: 3 500 ₽
Приобрести здесь: https://web4life.ru/dobavlenie-tovara

Как со мной связаться

Если вы не нашли вашего решения в текущей статье. Тогда присылайте ваше ТЗ задание под проект.
Пишите https://t.me/vbalakin буду рад помочь с доработкой.

Дополнительные настройки

На текущий момент я реализовал 2 настройки, которые регулируются переменными enable_delete_dop_tovar и enable_delete_all. Изменение осуществляется за счет указания либо true либо false

<script>
.....................
.....................
.....................

//!!!!!! Разрешить удаление доп товаров из корзины

//если стоит false значит из корзины нельзя удалить доп товар, он всегда будет добавляться
//если стоит true значит из корзины можно удалить доп товар
var enable_delete_dop_tovar = false;


//!!!!! Разрешить удаление ОСНОВНОГО товара вместе с ДОП товаром

//если стоит true  значит при удалении ОСНОВНОГО товара, будет удаляться и его ДОП товар
//если стоит false  значит при удалени ОСНОВНОГО товара, ДОП товар останется в корзине
var enable_delete_all = true;





......................
......................
......................

1) Если переменная enable_delete_dop_tovar = true Значит доп товары, которые добавилсь в корзину вместе с основным товаром, можно удалять. К примеру enable_delete_dop_tovar = true В корзине (см скрин ниже) добавился основной товар (1) и три дополнительных (2).

Так как переменная enable_delete_dop_tovar = true то я могу удалить доп. товар, например «Рюкзак inferno» (см скрин ниже)

Если переменная enable_delete_dop_tovar = false Значит доп товары, которые добавились в корзину вместе с основным товаром, удалить нельзя, при попытке удалить доп товар он автоматически добавится в корзину . После автодобавления, порядок товаров в корзине изменится

2) Теперь про настройки через переменную enable_delete_all
Если переменная enable_delete_all = true значит при удалении основного товара из корзины, удалятся и все его доп товары.

Так вот, если я удаляю товар «Перчатки трикотажные» который основной, то получу вот это

Из корзины удалится и основной товар и его доп товары. Если переменная enable_delete_all = false То такого не произойдет. Удалю основной товар, а его дополнительные останутся в корзине

Записаться на консультацию

Сегодня никого не удивить, что у вас есть сайт. Но какой он?

По статистике посетитель тратит на просмотр странички менее 30 секунд. То есть, у вас меньше минуты, чтобы заинтересовать его. Безусловно, можно сделать красивый сайт, но насколько он будет действенный? Вот тут и кроется секрет моего подхода — я не создаю красивую и пустую картинку, а погружаюсь в вас, наполняю сайт идеями и смыслами, чтобы вы стали уникальностью на фоне конкурентов. Слаженная система будет работать как часы, уж поверьте

Хотите показать свою уникальность, но боитесь остаться непонятым? Заполните форму и на бесплатной консультации я расскажу как привлекать и продавать свои услуги через сайт эффективно




    Еще материалы

    Категория Tilda

    Комментарии

    1. Виктор сказал:

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

      • webvova сказал:

        Виктор я немного не понял что нужно, напишите пожалуйста мне в телеграм https://t.me/vbalakin там сможем обсудить подробнее

    2. Юлия сказал:

      Я очень благодарна Владимиру за помощь! Теперь корзина работает именно так, как мне нужно — дополнительные товары добавляются автоматически. Сделала все по инструкции и все заработало! Были вопросы по покупке, написала, вопрос решился. Спасибо!!!

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

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

    Подарок

    Заполните пожалуйста форму ниже, обязательно укажите рабочий e-mail адрес, так как файл придет на указанный адрес автоматически