Версия магазина 6.5.1
Если у вас есть собственный интернет магазин, то вы уже наверное поняли, что создать свой сайт с интернет магазином – это очень просто. Достаточно скачать готовый шаблон, наполнить его товарами через меню и залить на хостинг. Но как только магазин начинает работать, начинаются проблемы иного рода. Если брать техническую сторону сайтостроения, то сложность второго уровня – это проблемы организации и хранения данных. Уже после первой сотни товаров становится понятно, что заводить новые товары через меню или поменять описания у десятка старых товаров – это огромная проблема. Первый спасательный круг в организации данных для магазиностоителей – это таблицы Excel или их очень приятный вариант таблички Гугл таблицы. Excel отлично взаимодействует с различными бухгалтерскими программами. Поэтому частично номенклатуру можно выгрузить из 1c Бухгалтерии. А из табличек гугл магазин может считывать текущие остатки товаров или даже все данные магазина, если это нужно.
Но давайте обо всем по порядку. Давайте как всегда скачаем последнюю версию магазина и посмотрим, что она умеет. Текущая версия 6.5.1 скачиваем, распаковываем, открываем.
Первое, что бросается в глаза – теперь шаблон магазина пустой. В нем нет товаром и дизайн главной максимально лаконичный. Крупный текст на главной странице манит нас сразу попробовать новую фишку этой версии –гугл таблички. Но мы не будем торопиться. Для начала поведаю вам как хранить данные по старинке в Excel. В отличии от гугл табличек., которые вшиты в эту версию, чтобы заработал импорт данных из XLSX табличек , нужно установить аш 2 плагина.
Открываем меню галочка – выбрать шаблон – плагины и выбираем 2 плагина и сохраняемся под новым именем. Если вы все сделали так же, но у вас не появилось окно с местом сохранения файла, то скорее всего у вас не стоит галка в настройках браузера «указывать место для сохранения» про эту галку рассказывал в предыдущих уроках. Поставьте ее. Открываем сохранённый вариант. С плагином Excel магазин потолстел на целый мегабайт, поэтому когда мы закончим работать лучше его удалить. Это первый недостаток по сравнению с гугл табличками. Запомните его будем дальше считать вместе. Смотрим появились ли наши плагины галочка-системная панель –плагины – видим, что плагины установились. Запомните это место магазина. Отсюда впоследствии мы будем удалять наши плагины. После установки этих плагинов в настройках магазина появляется специальная вкладка с настройками таблиц excel XLSX Utilities. По умолчанию она настроена на ту табличку, что идет в архиве в магазине, но давайте заглянем в нее, на тот случай если вам понадобится что-то поменять. Отрывая дерево настроек, мы можем увидеть, что у нас жестко завязаны названия листов и столбцов для импорта. Если нужно будет добавить какой-то столбик, или лист то его нужно будет дописать в настройки. Это второй недостаток импорта из табличек excel. При импорте из гугл таблиц, скрипт загрузит все листы и все столбики если их название не начитается с hide. Но об этом позже.
Давайте откроем табличку Excel, которая идет с архивом, и посмотрим, как организованы данные. Редактировать этот файл можно как в платных. Так и в бесплатных вариантах excel. Использовать макросы не обязательно. И так. Мы видим, что наша книга по умолчанию состоит из трех листов. На листе goods описаны наши товары, parts показывает наши разделы (с привязкой родитель-дети), a images – это таблица с крупными картинками товаров. Очень часто пишу, что структура хранения всех данных основана на метках и принципе «родители – дети». Давайте посмотрим нашу вкладку и поймем кто там родители, а кто дети. По табличке мы видим, что у раздела «инновационные изделия» стоит метка «index» это, и значит, что его родитель index, а этот раздел его ребенок. По табличке видно, то у индекса 4 ребенка. А у этих детей есть свои дети и если мы посмотрим на меню, то оно выстроено именно там деревом. Что касается товаров, то они тоже присоединяются к своим разделами метками. То есть товары это дети разделов. А изображения товаров - это дети товаров. И весь магазин это одно большое дерево. На самом деле такая организация данных не обязательна. Я делал магазин и со структурой из пяти и одного листа. Например, если у вас одноуровневое меню, то не обязательно делать отдельный лист с его описанием. Достаточно будет дополнительного столбика с названием раздела в листе товары. И крупные картинки тоже не обязательно выносить отдельно. Делал магазин открыток, в котором всегда было 3 крупных картинки на товар и их название складывалось из кода товара с тремя символами, поэтому магазин мог сам генерировать путь к картинкам и их прямое указание не требовалось. Поэтому даные магазины хранились на одном листе и этого было достаточно. Назовем структуру из трех листов «классической» так как она подходит для большинства магазинов. А как вам ее менять решайте сами. Рассмотрим заголовки нашей таблицы. Как вы знаете из предыдущего урока в Тиддливики встроена своя база данных. И при импорте данных из нашей таблицы, они просто добавятся в базу текущей вики. При этом, если id (он же title) записи в базе будет совпадать с записью в импортируемой таблицы, то эта запись тихо перезапишется не спросив ни слова. Перед импортом база вики не чистится от товаров. Поэтому каждый менеждер может вести свою табличку своих разделов, а администратор может объединять данные в магазине Хиг. Во время импорта заголовки наших таблиц превратятся в поля наших записей, а содержимое столбцов в значения этих полей. При этом через настройки мы можем задать, что , например, столбец с заголовком id должен превратится в поле с названием title (ключевое поле). А столбец с заголовком name превратится при импорте в поле caption (русское название). Есть и более интересные настройки импорта. При них все записи из листа goods будут получать дополнительную метку товара “$:\Note” а все записи с листа images будут получать дополнительное поле type = image\JPEG . Все эти тонкости импорта указываются в настройках магазина, в которых мы уже с вами были. С теорией разобрались, плагины у нас установлены, давайте заливать данные. Залить их можно через импорт или перетащив мышкой табличку в магазин. Я буду просто перетаскивать. Как видим, Хиг сразу увидел наши товары, нажмем импорт и они сразу отобразятся в магазине. Не все картинки нашлись и меню не очень красивое, но это не беда. Показываю как поправить. Посмотрим как перенеслись наши колонки таблицы и превратились в поля наших стаей. Обращаем внимание, что поле id превратилось в поле title, name в caption. К товарам и разделам добавилась нужная метка а изображениям присвоился type. С табличками Excel разобрались, теперь давайте знакомится с фишечкой версии 6.5 Гугл табличками. Очистим наш магазин от товаров и удалим уже не нужные ехсel плагины и сохранимся под новым именем.
Наш магазин вернулся к первоначальному состоянию. Переходим по ссылке с главной страницы в настройки гугл таблиц. Если впоследствии вы удалите этот текс с главной, то эти же настройки вы сможете найти на одной из вкладок настроек магазина. И так мы видим что верхняя часть настроек прилагает нам сразу ввести id нашей ГУГЛ таблички для заливки данных в магазин. Рядом с полем для id есть кнопка с ластиком для очистки магазина от существующих товаров. Давайте понажимаем эти кнопки. Ниже показано откуда брать id таблицы и примеры магазинов. Прежде чем приступить к созданию собственной таблицы давайте подробно рассмотрим эти примеры. Переходим по первой ссылке. Первое, что замечаешь, это небольшую задержку при открытии магазина (обычно магазин хига открывается мгновенно). Она не критична, но все-таки хочется понять, что происходит во время этой задержки. Если мы посмотрим в url то увидим некоторые параметры id магазина и почта владельца таблицы – давайте удалим их и мы увидим, что на самом деле без этих параметров наш магазин абсолютно пустой в нем нет ни товаров ни разделов, а при загрузке он обращается к гугл табличке и использует ее как базу данных и скачивает в себя все ее содержимое. Получается в зависимости от того, какую табличку мы подключаем к нашему пустому шаблону, такой магазин и видит клиент. То есть мы создаем сколько хочешь гугл табличек и получаем неограниченное число магазинов с одним адресом. Если перейдем по второй ссылке и так же удалим все параметры, мы увидим, что у пустого магазина при помощи гугл таблички мы можем менять не только содержимое, но и внешний вид магазина. Помимо внешнего хранения данных гугл таблички могут быть использованы как средство переноса данных в магазин. То есть если мы сохраним магазин после заливки данных из гугл таблицы, то они так и запекутся внутри магазина. Давайте сохраним второй пример к себе. Как мы видим все сохранилось, все товары видны даже без параметров в url. И грузится такой магазин побыстрее, так все содержимое внутри магазина и не скачивается из внешней таблички.
Теперь немножко о безопасности. Так как магазин изменяет свой вид в зависимости от id в url, то может сложится впечатление, что любой желающий может вставить в свой id таблицы на вашем сайте и таки «паразитическим» образом сделать свой магазин. Если мы не хотим, чтобы это произошло, в самом конце есть настройки, которые запрещают все гугл таблицы или все кроме одной гугл таблицы. По умолчанию ВСЕ гугл таблицы в настройках запрещены, поэтому если вы хотите, чтобы данные загружались как в примерах, вам будет нужно выбрать какой-то другой пункт (например нижний) и сохранить изменения. Простая заливка товаров по кнопке работает всегда. И вот что может быть интересно, так это в каком положении находятся переключатели из примеров. Давайте посмотрим демо магазин frame.html и убедимся, что Хиг вполне официально разрешает использовать свой сайт для создания собственного магазина (если он не нарушает законодательство РФ и не содержит товары 18+.) . Если . То есть если вам нужен магазин, то достаточно просто создать гугл табличку, наполнить ее своими товарами, опубликовать, расшарить, вставить id в url сайта донора и готово.
И так мы с вами поняли, что магазин хиг может подгружать данные в себя из гугл из внешней таблицы. А мы уже можем решать сохранить эти данные внутрь магазина или подгружать каждый раз при открытии магазина. Я рекомендую все-таки хранить данные внутри и заливать сохраненный магазин через ftp на свой хостинг или использовать быструю Php публикацию. Но решать, конечно Вам. Давайте уже откроем гугл таблички посмотрим, чем они отличаются от Excel. И конечно попробуем создать свою. Первое что мы увидим, что вкладки такие же как в Excel. Кроме вкладок system и hide. Вкладка system нужна для замены системных статей в магазине. Если вы будете создавать магазин на собственном хостинге, то все эти параметры удобнее будет менять внутри магазине и эту вкладку можно удалить. А вот если вы будете для своего магазина использовать сайт-донор хига, то стати на этой вкладке будут подменять статьи шаблона и вы сможете добавить все параметры своего магазина и даже подтянуть свою гугл форму для отправки заказа, если не захотите использовать встроенный почтовый сервис. На всякий случай давайте посмотрим какие параметры подменяют таблички – примеры. Параметров масса – это и стоимость доставки и цвет палитры и наличие левого меню и тип верхнего и прочее. Можно подменить в доноре абсолютно любой показатель. Достаточно указать его id (он же title) и его новое содержимое. Довольно удобно.
Вкладки goods parts images нам уже знакомы они ничем не отличаются от excel варианта. Единственное, нужно помнить, что в гугл табличках нужно использовать в заголовках столбцов английские буквы и чертоку (минус) для разделения слов. Например old-price. И так наша задача создать собственную гугл табличку и залить ее содержимое в наш магазин. Если вы залогиненый в гугл сервисы то в меню файл у вас будет доступен пункт «создать копию». Эта кнопка просто копирует табличку демо-магазина на ваш аккаунт и у вас появится возможность ее редактировать. Если данный пункт у вас не активен, то войдите один раз в один из сервисов гугла. Например почту Г-меил. Мы создали копию, чтобы магазин мог скачать из нее данные, таблица обязательно дожна быть опубликована и рашарена. Необходимы именно оба этих действия. Если сделаете только одно, то ничего работать не будет. И так расшариваем и публикуем. Прежде чем вносить изменения давайте посмотрим видит ли наш магазин новую табличку. Копируем код вставляем его поле и нажимаем кнопку «залить сейчас» . Все данные залились. Давайте очистим магазин и начнем вносить изменения.
Удаляем лишнее. Создаем новый раздел. В нем новый подраздел а в этом подразделе делаем новый товар. Разделам указываем родителей в колонке tags. При создании товара, нам нужно вставить одно или несколько крупных изображений. Если у вас есть свой собственный хостинг, просто предварительно залейте все изображения товаров. Если вы делаете партнерский магазин, то можете указать путь на картинки с сайта партнера. Если у вас нет ни того ни другого залейте изображения товаров в гугл фото или на сайт социальной сети или любой другой бесплатный и удобный сервис, который позволяет хранить изображения. В гугл фото пойдем в общие альбомы, если у вас такого альбома нет, то добавьте. Загружаем нужные фото и переносим ссылки на них в нашу табличку. Табличка готова. Заливаем и ищем наш товар с картинками. Отлично магазин на нашем рабочем столе работает, а как показать наше творчество нашим потенциальным покупателям. Очень просто. Покупаем самый дешевый хостинг и заливаем магазин туда. Или просто подставляем наш код таблички на сайт донора Хига , сморим что она срабатывает и отправляем ссылку на наш труд нашим потенциальным клиентам. Всем удачи. Пока.