Здравствуйте. Если у вас есть прайс-лист ваших товаров, папка с картинками, час свободного времени и огромное желание превратить все это в полноценный интернет магазин, то это видео для вас. Сразу скажу, что никаких денег для этого платить не нужно!
Для урока я подготовил вот такой прайс-лист, который у меня остался от одного из заказчиков и две папки с картинками. Одна папка с маленькими для превьюшек и одна для групп больших картинок товара. Что делать, если у вас нет ни прайса ни картинок? Как их можно достать? Во-первых вы можете сделать их сами. Никто лучше вас не опишет ваш товар. Во-вторых вы можете попросить табличку с путями к картинкам у своего поставщика, выкачать все картинки программой или магазином и переименовать их в нужный вид макросом Excel, как это сделала я, и третий путь – это парсинг чужого сайта. Не самый приятный вариант, при котором специальная программа вытягивает данные с чужого сайта.
Отдельно остановлюсь на этапе переименовании картинок. Чтобы не указывать отдельной колонкой в прайсе путь к картинке (хотя так тоже можно) в последней версии был добавлен новый механизм. Теперь если название jpg файла начинается со слова small_КОД_ТОВАРА_любые символы.jpg , то эта картинка по коду вяжется к превью этого товара, а если название jpg файла начинается просто с КОД_ТОВАРА_любые символы.jpg то эта картинка автоматом станет одной из больших картинок товара. Такой подход избавляет нас от дополнительного хранения путей к картинкам. Но для этого нам и нужен макрос Excel, чтобы имея колонку кода товара и путь к картинки переделать это в папку с переименованными картинками. При таком подходе все картинки должны находится в одной папке и как мы помним код товара – это у нас только английские буквы, цифры и символ подчеркивания. В моем примере я просто пронумеровал позиции в прайсе. Так тоже можно.
Будем считать, что с Excel мы разобрались. Следующее, что нам нужно – это Гугл почта на GMAIL.COM Если у вас она есть, то просто залогиньтесь в нее, если же нету, то идем и регистрируем новую. Ваш магазин в дальнейшем будет рассылать письма вашим заказчикам и по сути сделает адрес общедоступным. Поэтому желательно зарегистрировать отдельный почтовый ящик gmail под магазин, чтобы потом если магазин закроется можно было его легко и просто удалить.
И так почта у нас есть. Теперь заходим на сайт heeg.ru и нажимаем самую большую кнопку «СОЗДАТЬ КОПИЮ ТАБЛИЦЫ ТОВАРОВ HEEG.HTML К СЕБЕ НА ГУГЛ ДИСК» как понятно из навания кнопка скопирует уже готовую табличку с демо-товарами вам на гугл диск. Далее «Создать копию» и теперь ждем пока подгрузится верхнее установочное меню. Для запуска установки из появившегося меню «HEEG магазин» выбираем единственный пункт «создать интернет магази» и опять долго ждем. Гугл макрос добавит пустую папку для картинок _images к вам на гугл диск, добавит панельку справа к таблице, создаст в корне гугл диска форму заказа и отдельную закрытую табличку с заказами.
Для запуска установки вам потребуется авторизация. Гугл вам объяснит, что скрипт будет вносить изменения в ваши данные. Чтобы магазин заработал все это нужно подтвердить. Когда вы создали копию таблицы магазина, вы также создали копию гугл макроса, который был прикреплен к этой таблице. Эту копию гугл считает новым приложением, которого он ни разу не видел и не проверял, поэтому будет всячески вас об этом предупреждать. Поэтому, чтобы лишний раз не переживать за свои данные и мою честность, еще раз рекомендую делать магазин на новом аккаунте гугл. Поэтому подтверждаем. Продолжить, выбираем себя, дополнительные настройки, Перейти на страницу "Создание бесплатного магазина HEEG.HTML" (небезопасно) и наконец «разрешить». Теперь ждем и снова ждем. Нужно обязательно дождаться пока исчезнет надпись (или надписи) «выполняется скрипт» Иногда кода процесс подвисает, нужно обновить страничку и запустить по новой.
И так у вас появилась копия уже ВАШЕГО магазина. Пока она заполнена чужими товарами, но тем не менее магазин уже работает, и мы можем его протестировать. Нажмем «перейти в магазин» отлично – какая-то посуда. Давайте уже все менять. Для начала попробуем поменять номер телефона. Все данные магазина у нас находятся на вкладке system меняем наш телефон. ОБЯЗАТЕЛЬНО уходим из ячейки, чтобы она сохранилась и переходим в магазин. Теперь давайте поменяем логотип. Так как для урока я логотип не подготовил. Пока вместо логотипа будет надпись. Если у вас есть логотип переименуйте его в logo.png и скиньте в папку _images Гугл Диска. Я же пока выберу siteTitle то есть название сайта и выше поменяю его название на банальное ПАЛАТКИ. Перейдем – отлично. Давайте слайдер уберём, так как для него у меня тоже картинок пока нет… Еще можно поправить почту магазина для контакта. Почту поступления заказов указывать не нужно. Заказы будут приходить на ваш Гмеил почтовый ящик и в таблицу. Кстати давайте что-нибудь уже закажем в нашем магазине! Вроде заказали и заказ ушел, НО КУДА? В первую очередь в нашу таблицу заказов! Ссылка на нее есть вверху нашей таблицы. Здорово заказ в табличке есть, но хотелось бы еще чтобы он отправлялся на почту магазина и клиента в виде красивой таблички. Для этого опять нужно подождать секунд 15 пока появится верхнее меню «ОТПРАВКА ПОЧТЫ» и запустить отправку почты. Тут все просто. Запускаем. Опять ждем секунд 15 ничего не происходит, затем подтверждаем установку. Делаем еще один заказ и смотрим, что он появился, и в табличке, и в почте.
Посуду отправляет, теперь займемся палатками. Заливаем наши картинки. Для этого на панельке справа нажимаем «Загрузить картинки на гугл диск». Закидываем маленькие картинки и туда же большие. И ждем пока все добавится. Теперь нужно картинки добавить в нашу табличку на вкладку GD-images для этого жмем кнопку ниже «записать картинки из гугл диска в таблицу» картинки должны быть уже загружены, обязательно проверьте. Теперь, загружаем данные из прайса. Переименовываем колонки прайса код=id название = name цена это price, а описание – это text и еще добавим колонку tags. В этой колонке нужно указать код раздела, в котором находится товар. Так как разделы мы пока не сделали, везде пишем index, то есть самый верхний раздел. Очищаем старые товары на вкладке goods, удаляем ненужные разделы на вкладке parts и вставляем из excel товары. Переходим в магазин. Ура, в нашем магазине палатки! Закажем парочку .
Кажется, всё? Хотя, нет. Мы не сделали разделы для нашего магазина и описание «О нас». Об этом я рассказывал в прошлых уроках. Поэтому для скорости давайте разделим все наши товары на 2 раздела «палатки» и “остальное”, для этого вместо наших index проставим нужные метки в parts и создадим нужные разделы с метками index. И напоследок, давайте заменим текст «О компании» давайте зайдем и посмотрим, что там сейчас. Мы видим, что эта статья имеет код (он же id) education и помимо двух системных меток имеет метку (tags) more. То есть находится в разделе «еще». Давайте подменим этот раздел на свой. Пишем в разделах подмену и наш раздел появился. Если хотите, чтобы раздел просто исчез, просто не указывайте никаких меток и его не будет в дереве разделов. Вот и все всем спасибо за внимание. Пока.
Здравствуйте. Считаю по-настоящему счастливыми тех людей, которым удалось превратить свое хобби в приносящее доход любимое дело. Причем абсолютно не важно, решили вы заняться разведением животных, выращиванием редких растений или ваше любимое дело – пошив эксклюзивных свадебных платьев. Самое важное – не испугаться и сделать первый шаг к своей мечте. В сегодняшнем уроке я буду делать маленький интернет-магазин и одновременно галерею работ художника Татьяны Ворониной.
Моя жена Татьяна не первый год профессионально занимается акварельной живописью. Ее работы участвуют в международных выставках и занимают призовые места. Идея монетизировать своё хобби появилась довольно давно. Пару лет назад Татьяна создала свой профиль в Instagram, сейчас у нее около 600 подписчиков, но как-либо заказов это не дает и продать готовые картины через эту платформу тоже не получается. Был также опыт работы с ярмаркой мастеров, но сейчас ни в платном ни в бесплатном варианте этот сайт никак не помогает и заказов с нtго нет. Больше всего работ было куплено или заказано друзьями.
Сейчас у Татьяны около 60 готовых работ и огромное желание развиваться дальше. Для создания интернет магазина нам понадобится табличка с названиями и ценой картин и папка с изображениями. Табличка очень простая. Для удобства добавил в нее колонки с шириной и высотой картин в сантиметрах. Ранее планировал использовать эти данные внутри описания картин через фигурные скобки хсм, но давайте лучше эти данные перенесем сразу в название картин. Для этого сделаем дополнительный столбик и формулой привяжем размер к названию и переименуем столбики. Я не уверен, что они нам пригодятся, но к ненужным столбикам добавим к названию hide_, тогда значения этих столбиков не попадут в магазин.
Будем считать, что табличка у нас готова. Давайте перенесем на шаблон heeg.html Для этого зайдем на сайт heeg.ru и нажмем зеленую кнопку под видео. Если вы будете залогинены под сервисами гугл, то вам предложат создать копию базовой гугл таблицы. Как и в предыдущем уроке быстро запускаем макросы из правого верхнего меню, не обращая внимания на заботливые предупреждения гугл. Сначала в таблице магазина, затем в таблице заказов. Поменяем в таблице название магазина на «Галерея и онлайн-магазин художника Татьяны Ворониной» и перейдем пока в магазин шаблона, чтобы убедится, что он работает.
Мы видим, что мы можем вносить изменения в магазин, давайте теперь удалим все товары и разделы. Стало на много лучше. Но очень хочется поменять логотип на свой и добавить свои картинки на верхний слайдер. Чтобы появился ваш логотип, достаточно сохранить его под именем logo.png, и положить в папку _images вашего гугл диска. А затем кнопкой добавить пути к картинкам. Пробуем. Логотипа шириной 400 пикселей будет достаточно. Точно так же мы добавляем свое фото foto.jpg на левое меню и фон с к этому фото foto_back.jpg
С этим все просто, а как быть с остальными картинками? У нас есть большие картинки на слайдере, у товара есть маленькая картинка превью на плитке товара и несколько больших картинок в карточке товара. У раздела может быть маленькая картинка на плитке. В предыдущих версиях магазина картинки привязывались к товарам и разделам метками tags, в версии 6.8.0 все немножко иначе. Чтобы большие картинки показывались в карточке товара, название этой картинки должно начинаться с кода этого товара. Например если код товара 123aaa, тогда названия больших картинок должны быть 123aaa_любые_символы.jpg, а код маленькой картинки 123aaa_small_любые_символы.jpg. Чтобы добавить картинки на верхний слайдер их название должно быть slider1_ любые_символы.jpg. Все картинки выводятся в алфавитном порядке, поэтому чтобы поменять порядок картинок, их нужно просто переименовать. Я уже подготовил и переименовал картинки шириной 1900 пикселей для верхнего слайдера своего магазина картин, давайте их добавим на гугл диск и запишем в таблицу. Как вы видите у нас еще ведется столбик tags в таблице, но нужен он исключительно для совместимости со старой версией магазина. Смотрим, появился ли наш слайдер. Теперь настало время добавить товары из нашей таблицы.
Как мы видим товары перенеслись в наш магазин. По умолчанию все товары сортируются по стоимости. Позже мы это поменяем. Пока у товаров нет картинок, но мы их сейчас добавим. Мы могли бы просто переименовать файлики .jpg руками, но в версии 6.8.0 появился новый необычный способ переименования изображений. Давайте скачаем к себе магазин. При этом он потеряет связь с гугл таблицей, но при этом мы сможем переименовывать изображения. Как мы видим картинки появились в нашей папке, но интернете их нет. Картинки просто огромные и их нужно пережать перед заливкой на гугл диск. Что я уже сделал, пропустив картинки через бесплатный он-лайн сервис, я уменьшил их до 1200 точек по ширине.
Как видно, все картинки прикрепились к товарам. Можно было бы также прикрепить маленькие картинки, но вместо этого я сделаю плитки товаров шириной с экран браузера. Думаю здесь это будет уместно. Теперь давайте создадим 2 раздела - «готовые работы» и «под заказ». К плиткам разделов можно прикрепить маленькие картинки, но в уроке я это делать не буду. Давайте луше поменяем порядок вывода товаров в нашем главном разделе index, поменяем его название и иконку.
Это конечно не финальный вариант магазина, но давайте попробуем опубликовать его на бесплатном хостинге tiddlyspot.com для этого нужно на нем зарегистрироваться, чтобы получить логин и пароль. Далее заходим в публикация и почта, переходим на сайт без https, вводим свой логин и пароль, жмем галочку в кружочке и ждем пока она потухнет. Вот и всё, наш магазин опубликован на бесплатном хостинге. У этого хостинга много недостатков. Открытое соединение и невозможность восстановить пароль, поэтому как и любой другой бесплатный хостинг, лучше его использовать в качестве начальной тренировочной платформы.
Давайте в конце урока я покажу, как нарезать магазин на много статичных страниц и залить уже на свой нормальный хостинг. В конце мы перенесем фото товаров тоже на свой хостинг.
старая версия магазина СОЗДАТЬ КОПИЮ ТАБЛИЦЫ ТОВАРОВ HEEG.HTML v. 2.1 К СЕБЕ НА ГУГЛ ДИСК