Делаем простой интернет-магазин на гугл табличках. Инструкция 2.0


zip13
3720

Год назад делился своей идеей /ru/forum/993561 потом про идею забыл, но люди не забыли и сделали довольно много своих маленьких магазинчиков на основе моей гугл-таблички-шаблона. В этом году в HTML страничке 2.0 немножко поправил дизайн, добавил кнопочку для публикации магазина на бесплатном хостинге и кнопочки для сохранения на свой хостинг. И, что самое главное, попросил жену записать видеоурок, как она делает свой интернет-магазин картин.

https://youtu.be/1osWmCbGkH8

Принцип создания магазина на гугл-таблицах очень простой. Магазин работает без хостинга и домена или с ними, если они есть.

1. Переходите по ссылке для копирования моей базовой таблички на свой гугл диск https://docs.google.com/spreadsheets/d/1iwGvYQZYe1oQU1809QG1qqJWUG84gxVLKyqWBWyvDqU/copy и создаете копию

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

3. Удаляете из вашей таблицы все базовые товары, разделы и картинки . Вместо них записываете свои товары и разделы. Затем заливаете на гугл диск в папку _images свой логотип, фото товаров и картинки для слайдера. Все файлы картинок должны быть названы определенным образом, чтобы они прикрепились к нужным товарам и разделам. На вкладке system пишите название магазина, адрес, телефон и почту для связи.

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

5. Регистрируетесь на бесплатном хостинге и публикуете через меню «галочка» ваш гугл магазин получится так http://heeg.tiddlyspot.com/

6. Если у вас есть нормальный платный хостинг, нарезаете магазин на статичные странички из меню и заливаете через Filezilla

получится так https://tiddlywiki.ru/

Стандартный базовый шаблон с кастрюлями выглядит так

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


ArbNet

Техническая реализация у вас какая?

Я так понимаю на хостинг надо загрузить файлы движка, настроить доступ к гугл таблице. Затем при открытии страницы скрипт подгружает данные таблицы и парсит в страницу. Правильно понимаю?


zip13

ArbNet:
Техническая реализация у вас какая?

Я так понимаю на хостинг надо загрузить файлы движка, настроить доступ к гугл таблице. Затем при открытии страницы скрипт подгружает данные таблицы и парсит в страницу. Правильно понимаю?

Нет, на свой хостинг вы загружаете не сам движок, а абсолютно статичные странички, которые он нарезал (сгенерировал, «запёк насовсем»). А сама «нарезалка» или «магазин на гугл таблицах» — это то, что вы описываете. Только доступ к таблице открывает макрос в гугл таблице (ничего настраивать не надо, жми кнопку), а что нарезать, магазин понимает по id этой таблицы в url (или можно жестко его в настройках указать, чтобы URL был красивый). И далее как вы описали.

Вы можете к себе на хостинг загрузить вариант, который подгружает данные из конкретной таблицы при открытии. Тогда любые изменения в табличке будут сразу отображаться на сайте (нужно только страничку обновить F5) Но такой вариант будет более тормознутый уже при 2-3 тысячах товаров в магазине. Потому что магазин будет засасывать в себя всю гугл табличку целиком при открытии любой страницы. Задержка будет 1-2 секунды при открытии. И поисковиками такой вариант индексироваться не будет, так как на сервере ничего нет (никакие странички не парсятся) и все данные из таблицы льются при помощи клиентского javascript в текущий DOM страницы (одной единственной). Странички нарезает тот же самый javascript и скачивает через Blob вам на комп.

Техническая реализация очень простая. Серверных скриптов в базовом варианте нет.


_SP_

zip13:
Техническая реализация очень простая. Серверных скриптов в базовом варианте нет.

Ты аккуратнее, щаз выяснится, что и БД тебе на хостинге не нужна.

А таких тут не любят и гнобят. Довольно активно.


ArbNet

Зачем вообще нужны гугл таблицы.. Не проще ли эти таблицы делать в json формате например и как стили подключать.


_SP_

Потому, что среднему пользователю поменять в гугл-таблицах в 100500 раз проще, чем в json.

Потому, что сделано для других не слишком компетентных людей.

Можно и в экселе делать, но начинаются проблемы с версиями, экспортом итд итп

У меня такой ИМ в черновиках лежит уже лет 5-10

Делать не стал. Посчитал, что не окупится.


zip13

ArbNet:
Зачем вообще нужны гугл таблицы.. Не проще ли эти таблицы делать в json формате например и как стили подключать.

Так гугл таблицы и идут в JSON формате изначально. В другом формате их простым javascript не забрать. И с ними работать удобнее. Таблички остатки товара считают. Заказы получают, хранят и на почту отправляют. Формулами в них можно много интересного делать. Плюс в гугл табличках можно макросы писать. Например генерировать накладные и складывать их на гугл диск или сразу на печать отправлять. Макросы могут картинки с гугл диска забирать и вставлять в табличку. В общем это очень крутой инструмент круче Excel.

———- Добавлено 05.03.2020 в 19:08 ———-

_SP_:
Ты аккуратнее, щаз выяснится, что и БД тебе на хостинге не нужна.

А таких тут не любят и гнобят. Довольно активно.

БД на хостинге для такой поделки действительно не нужна. Кстати, Гугл таблицы поддерживают SQL запросы и язык запросов там почти такой же. То есть можно получить из таблицы JSON со всеми значениями за «прошлую неделю», которые начинаются на «ма» с ценой больше 100. Работает довольно шустро (делал магазин на 12000 товаров). Но своя БД — это своя БД и тут не поспоришь 🙂


_SP_

zip13:

БД на хостинге для такой поделки действительно не нужна.

Всё, тебе конец.

zip13:

Кстати, Гугл таблицы поддерживают SQL запросы и язык запросов там почти такой же. То есть можно получить из таблицы JSON со всеми значениями за «прошлую неделю», которые начинаются на «ма» с ценой больше 100. Работает довольно шустро (делал магазин на 12000 товаров).

Честно говоря не знал.

Идея использовать гугл-докс как некий saas db server конечно довольно стрёмная, но если он нужен в основном для генерации, то проблем я не вижу вообще.

Генерируется всё абсолютно статическое ? Поиск как-то реализован ?

Проблемы при размещении заказов как-то обрабатываются ?

Как-куда они вообще валятся ?

А, вижу, докс+почта. В принципе приемлимо.

Сам механизм размещения заказа насколько устойчив ?

Если какой-нибудь mail.php удалить, что будет ?


zip13

_SP_:
Всё, тебе конец.

Честно говоря не знал.
Идея использовать гугл-докс как некий saas db server конечно довольно стрёмная, но если он нужен в основном для генерации, то проблем я не вижу вообще.

Генерируется всё абсолютно статическое ? Поиск как-то реализован ?
Проблемы при размещении заказов как-то обрабатываются ?
Как-куда они вообще валятся ?
А, вижу, докс+почта. В принципе приемлимо.
Сам механизм размещения заказа насколько устойчив ?
Если какой-нибудь mail.php удалить, что будет ?

Как писал выше НИКАКИХ серверных скриптов в этом варианте нет. Нет PHP (mail.php тоже нет), нет Node.js есть только HTML CSS и javascript (Да. Генерируется всё абсолютно статическое). Одна большая статичная страница генерит много маленьких статичных страниц 🙂 Поиск реализован так же на javascript (можно его потестить).

Когда вы запускаете макрос в гугл таблице, он создает гугл форму и таблицу заказов такую https://docs.google.com/spreadsheets/d/1cEUxBevucIvfwj1g8ctD2C4uAIsN90M44ynLLf9aScw/edit#gid=920461885 на вашем гугл диске. Эту форму всасывает в себя магазин на гугл табличках при открытии . В эту форму кидаются данные, когда клиент делает заказ. Форма записывает эти данные в таблицу заказов. А таблица заказов при появлении в ней новых данных шлет письмо на почту магазина и на почту клиента с этими данными. Работает эта тема четко и в спам не попадает. Один минус — бесплатно только 100 писем в день, в табличку неограниченно.

НА SQL гугл табличек очень давно делал такую демку http://heeg.ru/shop_test29.html#index При старте она не забирает все данные из этой таблицы https://docs.google.com/spreadsheets/d/1ExMxzgAWUjle1YmeN5emOHgg7sEv8Wi6EbhOcps9u-Y/edit#gid=1907265902 таблица на 12695 строк, а шлет запросы, только на то, что смотрит человек.

Поиск тоже через SQL запрос к гугл табличке. Вбейте например слово «зонт» или любое другое название товара из таблицы и увидите с какой скоростью делается выборка. Эта демка тоже целиком статичная страничка. Тут справка от гугл https://developers.google.com/chart/interactive/docs/spreadsheets язык такой

  // Optional request to return only column C and the sum of column B, grouped by C members.
query.setQuery('select C, sum(B) group by C');


KumarPetrovich

Фигасе умельцы тут какие попадаются, среди кучи тролей


_SP_

zip13:
Эту форму всасывает в себя магазин на гугл табличках при открытии . В эту форму кидаются данные, когда клиент делает заказ. Форма записывает эти данные в таблицу заказов.

Тут ключевой вопрос в том, что будет, если гугл-докс станет по каким-то причинам малодоступен ?

Как-то обрабатываются эти ситуации ?

Письмо придет ? Или сломается раньше письма ?

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

Пока не пригодилось, но как по мне, так вполне полезная фича.

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

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