Як продавати біти онлайн із кошиком, який працює
Роками кожен біт у моєму магазині мав одну кнопку: купити. Вона відкривала вибір ліцензії, ти обирав одну, і BeatStars вів тебе до своєї оплати з цим єдиним бітом. Це працювало і тихо втрачало продажі. Якщо продюсер хотів два біти, він мусив платити двічі, бо кожна кнопка запускала нову покупку. Ніхто так не робить. Він купує один, каже, що повернеться по інший, і не повертається.
Тож 22 жовтня я поставив на сайт справжній кошик. Не плагін: магазин це статичний сайт на Astro, без бази даних і власної адмінки. Це найбільша зміна, яку цей магазин пережив від запуску, і ось як вона працює.
Проблема з кнопкою купити
Магазин бітів це не крамниця з візком. Це каталог, де кожен товар має шість рівнів ліцензії, і ціна змінюється від рівня, а не від кількості. Саме тому більшість продюсерів ніколи не переймалися кошиком: платформа дає тобі посилання на кожен біт, і ти відправляєш покупця туди.
Втрата невидима, але реальна. Кожна додаткова оплата це ще один шанс для покупця передумати. Він двічі проходить форму оплати, двічі вводить ті самі дані і отримує два окремі листи на два файли. А якщо він хотів порівняти базову ліцензію на один біт із ліцензією з трекаутами на інший, ці дві покупки були повністю незалежними.
Що BeatStars дає тобі для роботи
BeatStars не публікує API кошика, але фронтенд магазину його використовує, і він доступний. Достатньо трьох викликів:
- Створити кошик з новим uuid. Кожна оплата отримує свіжий, тож покупець ніколи не успадковує товари з попереднього візиту.
- Додати позицію з id треку і id контракту обраної ліцензії. Саме контракт фіксує рівень і ціну, а не сам трек.
- Попросити посилання для поширення. Коли покупець його відкриває, це посилання копіює кошик у його браузер і кидає його на оплату BeatStars з усім завантаженим.
Важлива частина: оплата і доставка залишаються на BeatStars. Сайт ніколи не торкається картки, не зберігає покупця і не стає крамницею. Він лише збирає кошик і передає його, тому все це може жити на статичній сторінці.
Як зберегти статичний сайт статичним
Кошик живе в браузері. Він зберігає дві речі на позицію: який біт і яка ліцензія. Більше нічого. Назви, ціни й id контрактів читаються з власної конфігурації сайту щоразу, коли сторінка завантажується, тож зміна ціни ніколи не залишить застаріле число в кошику, який хтось почав минулого тижня.
Лічильник у шапці, кнопки додавання й видалення та підсумки це звичайний JavaScript. Немає сесії, немає логіну і немає мого сервера посередині. Єдиний момент, коли сайт із кимось говорить, це коли покупець натискає оплату і будується посилання для поширення.
Дві дрібні деталі зробили різницю в тестуванні. Одна ліцензія на біт: кошик відмовляється тримати той самий біт двічі, бо так робить платформа, а покупець, який спробує, заплутається, а не отримає послугу. І коли хтось іде на оплату і повертається, не заплативши, кошик усе ще там, відновлений із копії, збереженої прямо перед виходом. Це найближче до відновлення покинутого кошика, що можна зробити без системи акаунтів.
Знижки це та частина, яку ніхто не робить правильно
Мої ліцензії несуть власну пропозицію магазину: купи одну базову і отримай дві безкоштовно, або три стандартні і отримай дві безкоштовно. BeatStars застосовує це раз на кошик, під час оплати, на найдешевших позиціях. Якщо сайт показує підсумок 65,90 долара, а оплата каже 32,95, покупець не почувається щасливчиком, він почувається обдуреним.
Тож кошик відтворює правило і показує ту саму арифметику до того, як хтось піде: що безкоштовно, чого ще не вистачає, щоб відкрити наступну безкоштовну позицію, і яким буде підсумок. Драбина видима, поки кошик наповнюється, а не з'являється сюрпризом у кінці. Вона також каже покупцеві правду, а це єдина версія знижки, яка виживає при зустрічі зі сторінкою оплати.
Чому ти, ймовірно, не зробиш це сам
Це виглядає як дрібна функція, а нею не є. На сайті немає адмінки, немає CMS і немає плагінів: кожна сторінка генерується заздалегідь і завантажується як звичайний HTML. Кошик, який існує лише в браузері, мусить тримати підсумок, ліцензію й оплату в згоді без жодного сервера, що арбітрує.
Бік магазину гірший. BeatStars не документує API кошика, тож три виклики за ним були знайдені в його власному фронтенді й перевірені по одному. Кожній позиції потрібен id треку і id контракту ліцензії, бо ціна живе в контракті, а не в біті. Ліцензія, яку магазин вимкнув на одному треку, ламає всю оплату, тож помилка мусить повертатися з назвою біта, який її зламав, а не порожнім екраном.
Далі йде частина, яку ніхто не бачить: відтворити драбину знижок до того, як покупець піде, щоб підсумок тут і підсумок під час оплати були одним числом. BeatStars застосовує свої безкоштовні позиції раз на кошик, на найдешевших. Помились тут, і кошик це вже не функція, а скарга.
Саме тому більшість продюсерів орендують платформу, а не будують свою. І саме тому цей сайт працює на хостингу, який не падає: усе інше це статичний файл, а єдина рухома частина це платформа, яка бере гроші.
Сайт під усім цим
Ніщо з цього не вижило б на WordPress із п'ятнадцятьма плагінами. Магазин це статичний сайт: 430 сторінок, згенерованих заздалегідь, одна таблиця стилів і трохи JavaScript для плеєра й кошика. Коли відвідувач заходить, базу даних ні про що не питають.
Аудіо йде за тією самою ідеєю: HE-AAC на 56 кбіт/с замість MP3 на 320 кбіт/с, з індексом на початку файлу, щоб відтворення починалося раніше за завантаження біта, і заголовком кешу, який тримає його на машині відвідувача рік.
Що має робити хостинг після цього, небагато, але добре: швидко віддавати файли, поважати байтові діапазони й заголовки кешу, мати SSL і HTTP/2. Це той, на якому працює цей сайт. Якщо хочеш таку саму базу під своїм магазином, це єдина частина, яку справді треба орендувати.
Подивись хостинг, який я використовую
Якщо ти продаєш на іншій платформі
Цей конкретний трюк це BeatStars, бо саме там мої ліцензії й мої покупці. Логіка переноситься: будь-який магазин, що має endpoint кошика, можна так само вести зі статичного сайту. Що не переноситься, то це короткий шлях. Кошик це не кнопка з написом додати в кошик; це ціна, яка збігається, ліцензія, яка збігається, і оплата, що відкривається саме з тим, що обрав покупець.
Якщо ти досі продаєш один біт за одну оплату, почни з каталогу й ліцензій, а потім будуй кошик. Повний каталог бітів тут, і якщо хочеш почути, навколо яких бітів побудований цей магазин, почни з цього boom bap інструменталу.
Часті питання
Чи потрібен мені розробник, щоб додати кошик у магазин бітів?
Для статичного сайту так, трохи коду. Виклики це три мутації до endpoint кошика магазину, а решта це стан браузера, але хтось має це написати і перевірити кожен рівень ліцензії проти підсумку в оплаті.
Чи працює кошик, якщо покупець передумав щодо ліцензії?
Так. Кожна позиція несе свою ліцензію, і її можна змінити прямо з кошика. Кошик не дозволяє той самий біт двічі, тож зміна ліцензії замінює позицію, а не додає другу.
Де відбувається оплата?
На BeatStars, завжди. Сайт лише збирає кошик і відкриває оплату з ним завантаженим. Картки, рахунки, доставка і PDF ліцензії залишаються всередині платформи.
Чому не продавати прямо на сайті?
Бо тоді сайту знадобився б платіжний процесор, робота з податками, рахунки й база клієнтів. Статичний каталог із кошиком, що передає справу платформі, тримає швидку частину швидкою і лишає грошову частину тим, хто вже робить це легально.
