Перейти к содержимому
  • Создание интернет магазинов

    Изучаем особенности разработки интернет-магазинов на базе Adobe Muse. Как создать корзину, как организовать приём оплаты, что делать с доставкой и другие ключевые вопросы разбираются подробно.

    11 занятий в этой категории

    1. Скачивание виджета интернет-магазина

      1 4, 25, 2, 6, 20, 3, 26, 27, 28, 29 4, 2, 31, 6, 20, 32, 3 https://creatura.club/uploads/monthly_2016_07/01_%D0%A1%D0%BA%D0%B0%D1%87%D0%B8%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5_%D0%B2%D0%B8%D0%B4%D0%B6%D0%B5%D1%82%D0%B0_%D0%B8%D0%BD%D1%82%D0%B5%D1%80%D0%BD%D0%B5%D1%82-%D0%BC%D0%B0%D0%B3%D0%B0%D0%B7%D0%B8%D0%BD%D0%B0.mp4.d96ee19a0ae53f6eda70defb32ed7ee4.mp4 2 До 5 минут <a href='https://creatura.club/profile/1-evgeniy-zubov/' data-ipsHover data-ipsHover-target='https://creatura.club/profile/1-evgeniy-zubov/?do=hovercard&referrer=https%253A%252F%252Fcreatura.club%252Fcourses%252Fsozdanie-internet-magazinov%252F' title="Перейти в профиль Евгений Зубов" class="ipsType_break">Евгений Зубов</a> Скрыть https://creatura.club/uploads/ Низкая сложность Скрыть

      Весь интернет-магазин создается на базе виджета, который был разработан силами команды клуба Creatura. Этот виджет вы можете скачать бесплатно на сайте клуба. Для этого вам нужно перейти на наш сайт, убедиться в том, что вы находитесь в своем аккаунте. После этого нажать на кнопку "Скачать" в панели меню, выбрать пункт "Виджет интернет-магазина". Затем перейдете на специальную страницу, где сможете скачать полную версию без каких-либо ограничений.Далее нажимаете на кнопку "Скачать файл", подтверждаете согласие с правилами, и на ваш компьютер скачается файл в формате .zip

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

      • 0 комментариев
      • 1 907 просмотров
    2. Распаковка виджета и его состав

      2 4, 25, 2, 6, 20, 3, 26, 27, 28, 29 4, 2, 31, 6, 20, 32, 3 https://creatura.club/uploads/monthly_2016_07/02_%D0%A0%D0%B0%D1%81%D0%BF%D0%B0%D0%BA%D0%BE%D0%B2%D0%BA%D0%B0_%D0%B8_%D1%81%D0%BE%D0%B4%D0%B5%D1%80%D0%B6%D0%B8%D0%BC%D0%BE%D0%B5_%D0%B0%D1%80%D1%85%D0%B8%D0%B2%D0%B0.mp4.38a0f48fd27b7fe3a7df4eccde959854.mp4 2 До 5 минут <a href='https://creatura.club/profile/1-evgeniy-zubov/' data-ipsHover data-ipsHover-target='https://creatura.club/profile/1-evgeniy-zubov/?do=hovercard&referrer=https%253A%252F%252Fcreatura.club%252Fcourses%252Fsozdanie-internet-magazinov%252F' title="Перейти в профиль Евгений Зубов" class="ipsType_break">Евгений Зубов</a> Скрыть https://creatura.club/uploads/ Низкая сложность Скрыть

      Следующий шаг – это распаковка архива для того, чтобы установить виджет в программу Adobe Muse. Вы можете использовать для этого любую удобную программу–архиватор, например, WinRAR. Далее достаточно всего лишь распаковать архив прямо в ту папку, куда он сохранился при скачивании.

      В итоге появляется еще одна папка, которая имеет такое же название, как и архив, но теперь из нее мы уже сможем установить виджет напрямую в программу Adobe Muse.

      Перед этим давайте разберемся в том, какие же здесь есть папки и файлы, необходимые для установки и создания виджета:

      1. Иконки для корзины
        А именно 2 графических файла для оформления интернет-магазина
         
      2. Настройки платежных систем
        Здесь находятся пока неизвестные и не понятные вам файлы с расширением .php, но они необходимы для приема оплаты в своем интернет-магазине, а также обеспечивают безопасность как для покупателей, так и для себя.

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

      • 0 комментариев
      • 1 168 просмотров
    3. Установка виджета интернет-магазина в Adobe Muse

      3 4, 25, 2, 6, 20, 3, 26, 27, 28, 29 4, 2, 31, 6, 20, 32, 3 https://creatura.club/uploads/monthly_2016_07/03_%D0%A3%D1%81%D1%82%D0%B0%D0%BD%D0%BE%D0%B2%D0%BA%D0%B0_%D0%B2%D0%B8%D0%B4%D0%B6%D0%B5%D1%82%D0%B0_%D0%B2_%D0%BF%D1%80%D0%BE%D0%B3%D1%80%D0%B0%D0%BC%D0%BC%D1%83.mp4.87c54377df72e3b45f528a690d71ef0c.mp4 4 До 5 минут <a href='https://creatura.club/profile/1-evgeniy-zubov/' data-ipsHover data-ipsHover-target='https://creatura.club/profile/1-evgeniy-zubov/?do=hovercard&referrer=https%253A%252F%252Fcreatura.club%252Fcourses%252Fsozdanie-internet-magazinov%252F' title="Перейти в профиль Евгений Зубов" class="ipsType_break">Евгений Зубов</a> Скрыть https://creatura.club/uploads/ Низкая сложность Скрыть

      Для установки виджета в программу вам достаточно кликнуть 2 раза на последний в папке файл, далее запустится программа Adobe Muse, если она не была запущена ранее, а затем появится сообщение «Импортированы элементы библиотеки: 3». Это сообщение означает то, что виджет установился в программу корректно. Если вы увидите какие-либо ошибки при установке, то всегда сможете обратиться в службу поддержки с конкретным вопросом. Служба поддержки находится на сайте клуба Creatura в самом низу с надписью «Служба поддержки». Но если все установлено корректно, то далее нужно приступить к созданию интернет-магазина.

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

      Первым делом создадим новый сайт, параметры его сетки сейчас не важны, поэтому оставляем их по умолчанию. Нажимаем ОК, и нас появляется новый сайт. Также на этом этапе появляется первое правило, которым вам нужно будет руководствоваться в процессе создания интернет-магазина. Его специфика заключается в следующем: Adobe Muse – это программа, которая прославилась именно своей простотой в процессе разработки лендингов. Но в программе можно создавать и многостраничные сайты, а интернет-магазин как раз является образцом правильного многостраничного сайта. Поэтому установку мы всегда будем начинать с работы с шаблоном. Если вы все еще не знаете, что это такое, то очень рекомендуем пойти "Базовый курс" для того, чтобы разбираться в этом.

      А сейчас достаточно просто перейти в шаблон и начать установку виджета уже на сайт. То есть ранее установка производилась в программу, а теперь нам нужно установить его и на наш сайт. По умолчанию у вас не будет нужного пункта справа, и чтобы найти виджет, нужно зайти в главное меню, в пункт "Окно" – "Библиотека". Как только вы нажмете этот пункт меню, у вас справа появится доп.вкладка под названием "Библиотека", а в ней папка с виджетом интернет-магазина с соответствующей версией, которую вы скачали.

      При открытии папки вы увидите 3 ключевых виджета, необходимых для создания полностью рабочего виджета интернет-магазина. Первый виджет – обязательный и имеет название "Виджет корзины и калькулятора". Второй – тоже является обязательным. Третий – "Виджет товарной кнопки" – необязательный.

      Обязательные виджеты, то есть первые 2, должны находиться на странице, так как от них зависит работа интернет-магазина. Необязательные виджеты – это те, которые можно не устанавливать к себе на страницу, и работа интернет-магазина нарушена не будет.

       

      • 0 комментариев
      • 2 005 просмотров
    4. Установка виджета интернет-магазина на сайт

      4 4, 25, 2, 6, 20, 3, 26, 27, 28, 29 4, 2, 31, 6, 20, 32, 3 https://creatura.club/uploads/monthly_2016_07/04_%D0%A3%D1%81%D1%82%D0%B0%D0%BD%D0%BE%D0%B2%D0%BA%D0%B0_%D0%B2%D0%B8%D0%B4%D0%B6%D0%B5%D1%82%D0%B0_%D0%BD%D0%B0_%D1%81%D0%B0%D0%B9%D1%82.mp4.db3c9f405c18d78872d18d26a1a7ea7b.mp4 5 До 5 минут <a href='https://creatura.club/profile/1-evgeniy-zubov/' data-ipsHover data-ipsHover-target='https://creatura.club/profile/1-evgeniy-zubov/?do=hovercard&referrer=https%253A%252F%252Fcreatura.club%252Fcourses%252Fsozdanie-internet-magazinov%252F' title="Перейти в профиль Евгений Зубов" class="ipsType_break">Евгений Зубов</a> Скрыть https://creatura.club/uploads/ Низкая сложность Скрыть

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

      Для примера поместим виджет в верхний правый угол. Последний обязательный виджет – "Виджет настроек магазина". Его мы тоже перетаскиваем на страницу. У него тоже есть своя особенность – в данном случае совсем не важно, где будет располагаться виджет. Все это потому, что в итоге на самом сайте его не будет видно посетителям, он нужен только для настройки работы вашего интернет-магазина.

      После установки обязательных виджетов мы можем увидеть, как работает интернет-магазин. И в данный момент появляется второе базовое правило, которое нужно будет учитывать. Оно звучит следующим образом: для проверки работы своего интернет-магазина нужно обязательно переходить в браузер. То есть в самой программе вы не сможете пользоваться кнопками и понять, как работает виджет. И, конечно же, важно подключение к интернету, поэтому не забывайте его проверять.

      Теперь осталось зайти в главное меню и выбрать пункт "Файл" – "Предварительный просмотр в браузере". Если все условия соблюдены и настройки выполнены верно, то при просмотре в браузере вы увидите кнопку виджета с надписью «0 товаров» как раз в том месте, где вы ее разместили в программе. Также, если мы нажмем на кнопку, у нас должно появиться окно с надписью "Добавьте товары в корзину". И этого уже полностью достаточно для того, чтобы у вас был полностью рабочий интернет-магазин. Здесь вы можете считать товары, стоимость, оформить заказ, но не будет возможности добавить какой-либо товар в магазин.

      В программе Adobe Muse добавление нового товара делается с помощью виджета товарной кнопки (напомним, что он не является обязательным). Нам остается только перетащить данный виджет, как и 2 других на страницу в том месте, где мы хотим его видеть на самом сайте. Размещаем виджет, переходим в главное меню, пункт "Файл" – "Предварительный просмотр в браузере".

      Сейчас страница отличается от первоначального варианта, а именно, добавилась кнопка "Добавить в корзину". Если мы нажимаем на данную кнопку, то в корзине появляется еще один товар в зеленом всплывающем сообщении, которое называется "Калькулятор". Здесь уже мы можем начать оформление заказа, и если бы здесь уже была настроена оплата, то можно было бы еще и оплатить заказ.

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

      • 0 комментариев
      • 1 508 просмотров
    5. Добавление товаров в интернет-магазин

      5 4, 25, 2, 6, 20, 3, 26, 27, 28, 29 4, 6, 32 https://creatura.club/uploads/monthly_2016_07/05_%D0%94%D0%BE%D0%B1%D0%B0%D0%B2%D0%BB%D0%B5%D0%BD%D0%B8%D0%B5_%D1%82%D0%BE%D0%B2%D0%B0%D1%80%D0%BE%D0%B2_%D0%B8_%D0%B8%D1%85_%D0%BD%D0%B0%D1%81%D1%82%D1%80%D0%BE%D0%B9%D0%BA%D0%B0.mp4.ca8a3afc786acc3c02a98f589bcf36ff.mp4 12 До 15 минут <a href='https://creatura.club/profile/1-evgeniy-zubov/' data-ipsHover data-ipsHover-target='https://creatura.club/profile/1-evgeniy-zubov/?do=hovercard&referrer=https%253A%252F%252Fcreatura.club%252Fcourses%252Fsozdanie-internet-magazinov%252F' title="Перейти в профиль Евгений Зубов" class="ipsType_break">Евгений Зубов</a> Скрыть https://creatura.club/uploads/ Средняя сложность Скрыть

      В предыдущем уроке мы настроили базовую основу для интернет-магазина. Теперь мы будем изучать, как работать с добавлением товаров, и подробно разберем  «Виджет товарной кнопки». Ранее мы добавили виджет товарной кнопки в шаблоны, но это не совсем правильно, так как шаблон – это элемент, который будет повторяться на многих страницах. Поэтому данный виджет на шаблоне размещать не нужно. Мы ее просто удаляем. Таким образом, на шаблоне остаются 2 обязательных виджета для того, чтобы они были на всех страницах интернет-магазина.

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

      Виджет ИМ устроен таким образом, что количество товаров в вашем интернет-магазине прямо равно количеству виджетов кнопки. То есть, если вам нужно разместить 10 товаров, то нужно будет создать 10 виджетов кнопки. Их расположение будет такое же, как и в программе. Поэтому следите за расположением кнопки.

      А сейчас мы разберем, какие настройки есть в этом весьма полезном и простом виджете. У нас будет 2 товара в качестве примера, чтобы вы видели разницу в настройках. Все настройки будут производиться с виджетом, расположенным справа. Левый останется неизменным.

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

      Главная настройкагалочка – позволяет настроить взаимодействие посетителя ИМ. Если мы ее уберем, то клиент нажать на кнопку не сможет. Это применяется в том случае, если товара нет в наличии. Перейдем в пункт "Файл" – "Предварительный просмотр в браузере", чтобы посмотреть данную настройку. Мы видим, что при нажатии на кнопку слева (неизменную), в корзину добавляется столько товаров, сколько раз мы нажмем на кнопку. Если же мы нажимаем на кнопку справа, то добавление товара не происходит, сколько бы раз мы не нажимали на нее.

      Таким образом, вам не нужно будет удалять или создавать виджет заново, если товар закончился на складе или он был снят с продаж. Будет достаточно зайти в настройки и убрать галочку в пункте "Товар в наличии". Как только мы убираем галочку, все остальные настройки тут же перестают быть активными. Если же вы оставляете галочку в первом пункте, то активируются дополнительные опции:

      Первая опция - настройка показа стоимости и цены внутри самой кнопки. То есть на кнопке будет отображаться надпись "Добавить в корзину" и рядом цена товаров, в нашем случае это 1500. Но эта опция не всегда нужна, поэтому у нас есть возможность отключить ее. Просмотрим в браузере и увидим, что обе кнопки полностью активны, но у второй кнопки не показывается цена. Тем не менее, обеими кнопками можно пользоваться уже сейчас.

      Вторая опция это название товара. Это очень важная опция, потому что как только вы что-то меняете в данном поле, у вас появляется новый товар. Если мы сейчас вернемся в браузер, то вы увидите эти разные кнопки, которые добавляют в корзину один и тот же товар. Мы нажимаем на левую и правую кнопку, при этом в корзине у нас 2 товара по одной и той же стоимости в 1500.

      И для того, чтобы создать новый товар, нужно зайти в настройки одной из кнопок и изменить название товара. Например, Товар 1 будет называться "Красный шлем", а Товар 2 "Синий шлем". Теперь снова перейдем в браузер, очистим корзину от ранее добавленных товаров, и когда мы нажмем на левую кнопку, то в корзине окажется "Красный шлем", а если на правую, то "Синий шлем". Это уже два разных товара.

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

      Третья опциястоимость товара. По умолчанию у нас в настройках указана стоимость 1500 рублей. Здесь все достаточно просто, нужно лишь в поле стоимости изменить ее на нужную сумму. Изменим стоимость синего шлема на 3200 рублей. Теперь при просмотре в браузере при нажатии на кнопку, добавляется синий шлем со стоимостью 3200 рублей и красный шлем за 1500 рублей. Итоговая сумма – 4700 рублей .

      Четвертая опциянастройка количества добавляемого товара при одном клике на кнопку. По умолчанию при одном нажатии на кнопку в корзину добавляется только 1 товар. Но вы можете установить любое количество товаров, например, поставить 7. И при просмотре в браузере вы увидите, что при одном клике на кнопку добавляется сразу 7 товаров со стоимостью каждого 3200 рублей.

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

      Если вам понадобится изменить размер товарной кнопки, то достаточно просто растянуть кнопку, потянув за угол, при этом текст внутри кнопки будет автоматически центрироваться.

      Таким образом, вы можете очень просто управлять своими товарами в интернет-магазине. При этом нет ограничений по количеству товаров на странице, но, конечно же, нужно учитывать некоторый фактор логичности. А именно, если у вас, к примеру, 1000 товаров на странице, то это будет в неудобно клиенту. Мы рекомендуем размещать на одной странице не более 50 товаров.

      • 0 комментариев
      • 1 883 просмотра
    6. Дизайн товарных кнопок

      6 4, 25, 2, 6, 20, 3, 26, 27, 28, 29 4, 6, 32 https://creatura.club/uploads/monthly_2016_07/06_%D0%94%D0%B8%D0%B7%D0%B0%D0%B9%D0%BD_%D1%82%D0%BE%D0%B2%D0%B0%D1%80%D0%BD%D1%8B%D0%B9_%D0%BA%D0%BD%D0%BE%D0%BF%D0%BE%D0%BA.mp4.5631e41a0fd31d05df2eb89b3b499393.mp4 10 До 10 минут <a href='https://creatura.club/profile/1-evgeniy-zubov/' data-ipsHover data-ipsHover-target='https://creatura.club/profile/1-evgeniy-zubov/?do=hovercard&referrer=https%253A%252F%252Fcreatura.club%252Fcourses%252Fsozdanie-internet-magazinov%252F' title="Перейти в профиль Евгений Зубов" class="ipsType_break">Евгений Зубов</a> Скрыть https://creatura.club/uploads/ Низкая сложность Скрыть

      Теперь давайте попробуем настроить дизайн товарных кнопок, с помощью которых посетители интернет-магазина смогут добавить товары в корзину. Виджет спроектирован таким образом, чтобы вам было максимально просто менять внешний вид кнопки. С точки зрения дизайна кнопка – это самый обычный прямоугольник, как если бы вы создавали прямоугольник классическим инструментов программы Adobe Muse.

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

      Точно так же мы можем изменить цвет текста. Для этого мы выделяем текст, переходим в параметры текста и выбираем нужный цвет. Также можем поставить скругление углов. Ставим, к примеру, 10 пикселей радиус скругления, кнопка перезагружается, и мы видим уже не острые углы, как ранее, а несколько скругленные.

      Также можем поменять шрифт как на стандартный, так и на нестандартный, который предварительно мы должны загрузить. Еще изменим нашему шрифту размер. И в таком виде мы будем использовать кнопку в дальнейшем. Выбираем "Файл" – "Предварительный просмотр в браузере".

      Именно таким образом вы можете редактировать каждую кнопку. Но чем больше на вашем сайте появляется кнопок, тем сложнее происходит настройка каждой из них. И для этого была придумана специальная функция "Стили объектов". По умолчанию данная функция скрыта. Для того чтобы она появилась в правой стороне, вам нужно перейти в пункт "Окно" – "Стили графики". После этого у вас появится большая новая группа – "Стили символов", "Стили абзацев", "Стили графики" и "Стили маркеров".

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

      Один раз кликаете, появляется название "Стиль". Мы можем для удобства переименовать его, к примеру, "Стандартная кнопка". Теперь у нас есть стиль, в котором сохранены все параметры оформления, кроме оформления текста. Если мы хотим применить данный стиль ко всем кнопкам на нашем сайте, то мы должны выделить все кнопки, выбрать ранее созданный стиль "Стандартная кнопка". Как только мы его выбираем, кнопка перезагружается, и у нее будет зеленое оформление, скругленные углы и прочие параметры, которые вы настраивали в первый раз.

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

      Кнопка при этом перезагрузится, в "Стили графики" появится + , и теперь для применения созданного стиля мы выделяем снова нашу измененную кнопку и уже нажимаем на другую кнопку, которая переопределит новые параметры для всех кнопок. Нажимаем на нее, и все кнопки, которые ранее были зеленые становятся красными.

      Таким очень простым и быстрым образом вы можете настраивать дизайн: заливку, скругление, размер. Но если вы хотите сделать и текст одинаковым на всех кнопках,то вам нужно переходить не в "Стили графики", а в "Стили символов". То есть "Стили графики" отвечают за цвет, заливку, скругление углов, а "Стили символов" отвечают за оформление текста.

      Выделяем кнопку, задаем ей от стиль оформления, который хотим применить и к остальным кнопкам на сайте. После создания данного стиля выделяем кнопку, переходим в "Стили символов", выбираем "Стиль", переименовываем его в "Стандартная кнопка". И теперь осталось добавить этот стиль к другим кнопкам. Выделяем другую кнопку, переходим в "Стиль символа", и теперь кнопка становится такой же, как и первая.

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

      • 0 комментариев
      • 753 просмотра
    7. Основные настройки интернет-магазина

      7 4, 25, 2, 6, 20, 3, 26, 27, 28, 29 4, 6, 32 https://creatura.club/uploads/monthly_2016_07/07_%D0%9E%D1%81%D0%BD%D0%BE%D0%B2%D0%BD%D1%8B%D0%B5_%D0%BD%D0%B0%D1%81%D1%82%D1%80%D0%BE%D0%B9%D0%BA%D0%B8_%D0%BC%D0%B0%D0%B3%D0%B0%D0%B7%D0%B8%D0%BD%D0%B0.mp4.6a7db1d7fc5592d86f312aeebca30791.mp4 21 До 30 минут <a href='https://creatura.club/profile/1-evgeniy-zubov/' data-ipsHover data-ipsHover-target='https://creatura.club/profile/1-evgeniy-zubov/?do=hovercard&referrer=https%253A%252F%252Fcreatura.club%252Fcourses%252Fsozdanie-internet-magazinov%252F' title="Перейти в профиль Евгений Зубов" class="ipsType_break">Евгений Зубов</a> Скрыть https://creatura.club/uploads/ Средняя сложность Скрыть

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

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

      Сейчас будем говорить об основных настройках, так как именно они коренным образом влияют на работу интернет-магазина:

      1. Параметр email для получения заказов.
        Сюда вы должны вписать именно тот почтовый ящик, куда в последствие хотите получать информацию о заказах. Здесь корректнее вписывать именно тот почтовый ящик, конкретно на том домене, на котором у вас находится интернет-магазин.

        То есть, если у вас, к примеру, сайт расположен на домене yandex, то и почтовый ящик должен находиться именно на этом домене. Если вы разместите адрес mail.ru, gmail.ru и т.д., то скорее всего их почтовая служба может не пропустить письма с заказами, а вы можете потерять важную информацию об оплаченном заказе.
         
      2. Отключение или включение информации об отправке письма клиенту.
        То есть эта информация будет приходить или не приходить в зависимости от ваших настроек клиенту о заказе. Рекомендуем эту настройку оставлять включенной, чтобы письмо отправлялось клиенту всегда. Это нужно для того, чтобы подтвердить факт создания заказа, о том, что все сделано правильно, и написать сообщение с самим заказом, чтобы в будущем он мог посмотреть его.
         
      3. Адрес отправителя в письмах.
        Здесь вы должны указать автора (отправителя) писем, которые будут приходить клиенту от вашего интернет-магазина. Здесь ситуация такая же, как с адресом почты. То есть лучше указывать почтовый ящик именно на вашем домене, так как это минимизирует риск попадания письма в спам. В идеале настройки 1 и 3 должны быть одинаковы.
         
      4. Ссылка на страницу «Спасибо за заказ!»
        Здесь вы указываете ту страницу, на которую будет пересылаться человек, оформивший заказ на сайте. Адрес указывать нужно вместе с http, всеми слэшами и другими элементами, присущими ссылкам.

        Чтобы данная страница появилась, мы создадим третью страницу, назовем ее «Спасибо за заказ». Далее, чтобы человек смог попасть на данную страницу, нам нужно изменить адрес страницы. Кликаем правой кнопкой мыши, переходим в "Свойства страницы", выбираем параметры, выбираем "Как имя страницы". После этого мы сможем латинскими символами указать адрес страницы, который будем потом вписывать в настройки виджета.

        Можно написать сюда классическое слова "Спасибо" на английском – "Thanks.html" или то, что будет удобно именно вам. Самое главное, чтобы у вас были латинские символы. Ну а теперь переходим снова в шаблон, настройки магазина и переходим к параметру "Ссылка на страницу спасибо". Здесь мы пишем тот самый адрес, какой писали на странице шаблона.

        В данном случае это "Thanks.html" Именно в таком виде должен быть вписан адрес страницы для корректной работы. Не забывайте вписать название своего домена, к примеру, сайт у нас был velosiped.ru, то в адрес мы пишем http://velosiped.ru/thanks.html
         
      5. Язык интернет – магазина
        Мы вернемся к данному пункту чуть позже, когда будем разбирать "Редактор фраз".
         
      6.  Валюты
        Вы можете настроить используемые валюты. По умолчанию стоит доллары, рубли, евро, гривны, тнг и юани. Вам достаточно выбрать какую-то валюту, перейти на страницу с товарными кнопками и кликнуть на одной из них. Далее открываем страницу в браузере, чтобы посмотреть настройку в действии.

        Валюта отображается на этапе заполнения заказа. Таким образом можно быстро изменить валюту, зайдя в основные настройки виджета и выбрать новую валюту.
         
      7. Минимальная сумма заказа
        Позволяет указать, на какую минимальную сумму должен быть произведен заказ клиента. По умолчанию данная опция отключена, а это значит, что клиент может создать заказ на любую сумму. Но это не всегда будет удобно, поэтому в ряде случаев требуется ограничение по сумме заказа.

        Если же эта опция для вас является необходимой, то нужно будет поставить галочку в данной строке, указать ту самую минимальную сумму для заказа в соответствии с выбранной ранее валютой. В итоге при просмотре в браузере на этапе совершения заказа клиент увидит красную надпись, сообщающую о том, что сумма заказа не соответствует минимальной. Также виджет автоматически посчитает и покажет сумму, которой не хватает для совершения заказа. 
         
      8. Анимация добавления товара
        Эта функция отвечает за то, чтобы при выборе товара и занесению его в корзину всплывало окошко "Товар добавлен в корзину". Эта функция также может быть выключена, если вы не видите в ней надобности.
         
      9. Выравнивание калькулятора
        Данная функция поможет выровнять калькулятор относительно кнопки корзины. По умолчанию всплывающее окно калькулятора будет находиться в центре кнопки. В виджете есть возможность сделать правую грань калькулятора наравне с правой гранью кнопки и также с левой гранью. Просмотреть данную опцию в действии вы сможете при просмотре в браузере.
         
      10. Контакты магазина
        Здесь вы вписываете всевозможные контакты, которые хотите предоставить покупателю. Все, что вы здесь напишете, будет отправляться в письме о заказе вашим клиентам. Важно отметить то, что для заполнения данной области есть важное правило: нельзя указывать знак «», нельзя делать переносы строк (нажимать Enter)
         
      11. Форма заказа
        По умолчанию есть 4 поля: имя, телефон, email, адрес доставки. Вы можете на свое усмотрение оставлять те поля, которые будут нужны, а какие-то убирать, выбрав вариант настройки «Нет»
         
      12. Заполнение номера телефона
        По умолчанию установлен определенный шаблон для заполнения номера телефона. То есть, если мы посмотрим в браузере на пункт заполнения номера телефона, то при клике на данное поле появляется шаблон-маска для ввода номера. Это говорит о том, что в данное поле нельзя ввести какие-либо другие данные, кроме номера.

        Данный шаблон вы можете изменять в зависимости от того, в какой ситуации, в какой стране заполняется заказ и т.д. Для изменения шаблона заходим в настройки виджета, в блок "Основные настройки". Каждая 9 в шаблоне указывает место для вставки любой цифры. То есть заполнять данное поле нужно именно цифрами 9. При просмотре в браузере вместо 9 клиент может вводить любое число.
         
      13. Поле email
        Если вы не спрашиваете у клиента данную информацию, то опция не будет работать, и ее нужно отключать. Если ее не отключать, то работа виджета может быть нарушена.

       

      • 0 комментариев
      • 831 просмотр
    8. Подключение оплаты для интернет-магазина

      8 4, 25, 2, 6, 20, 3, 26, 27, 28, 29 4, 6, 32 https://creatura.club/uploads/monthly_2016_07/08_%D0%9D%D0%B0%D1%81%D1%82%D1%80%D0%BE%D0%B9%D0%BA%D0%B0_%D0%BE%D0%BF%D0%BB%D0%B0%D1%82%D1%8B_%D0%B2_%D0%B8%D0%BD%D1%82%D0%B5%D1%80%D0%BD%D0%B5%D1%82_%D0%BC%D0%B0%D0%B3%D0%B0%D0%B7%D0%B8%D0%BD%D0%B5.mp4.00314831cbb4548befe30534c04ddaec.mp4 20 До 30 минут <a href='https://creatura.club/profile/1-evgeniy-zubov/' data-ipsHover data-ipsHover-target='https://creatura.club/profile/1-evgeniy-zubov/?do=hovercard&referrer=https%253A%252F%252Fcreatura.club%252Fcourses%252Fsozdanie-internet-magazinov%252F' title="Перейти в профиль Евгений Зубов" class="ipsType_break">Евгений Зубов</a> Скрыть https://creatura.club/uploads/ Средняя сложность Скрыть

      Теперь мы настроим оплату в интернет-магазине. Все настройки оплаты вынесены в настройки магазина, но вместо "Основные настройки" вы должны открыть пункт "Настройки оплаты". Разберем каждую из настроек по порядку:

      Включение или отключение возможности оплаты. Главная настройка

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

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

      Разберем для начала простые способы оплаты. Простыми они считаются потому, что для их настройки нужно сделать минимум действий, и они не требуют участия сторонних сайтов. Сюда относятся: оплата при получении, оплата через PayPal, через банковский перевод, через Яндекс. Деньги.

      • При получении – оплата не производится через сайт при оформлении заказа, а только при получении товара на руки (через курьера, например). Соответственно, магазин в данном случае будет работать просто как форма заказа. Эту опцию также можно отключить.
      • Платежная система PayPal – это самая популярная и известная система приема оплаты в мире. Популярна в зарубежье, не только в странах СНГ и России. Относится она к простым способам оплаты, так как вам достаточно поставить галочку в данном пункте в настройках виджета и указать свой email, использованный для регистрации на сайте PayPal. После этого вашим клиентам сразу же будет доступен такой способ оплаты.
         
      • Оплата через Яндекс.Деньги – аналогично предыдущей системе оплаты ставится галочка в настройках виджета, указывается номер кошелька на сайте Яндекс.Деньги. При этом вы сможете принимать любые банковские карты и также сами Яндекс.Деньги.
         
      • Оплата банковским переводом – при этом вы указываете реквизиты своего предприятия, эти реквизиты будут отправляться при заказе вашему клиенту на почту. То есть, вам обязательно нужно проследить за тем, что у вас в настройках указано запрашивать email и ваше согласие на отправку писем покупателям. Только при наличии данных настроек виджет будет работать без сбоев.

      При заполнении поля для реквизитов действуют такие же правила, как и для поля контактных данных магазина. То есть, нельзя делать перенос строки (нажимать Enter), также нельзя ставить знак «». Если все будет настроено в соответствии данным правилам, то виджет будет работать без сбоев.

      Теперь перейдем к настройке сложных способов оплаты. Сложными они считаются именно потому, что требуют участия сторонних сайтов, а именно сайтов платежных систем. В версии виджета 4.6 имеется возможность настройки 5-ти платежных систем, и они подключаются одинаковым способом. К ним относятся: Робокасса, Единая касса, Яндекс. Касса, Приват24, WebPay.

      Первые 3 популярны в России, Приват24 – на территории Украины, ну и WebPay – на территории Белоруссии. Если вы хотите принимать оплату через все эти платежные системы, то вы должны иметь аккаунт в каждой из них.

      Зачем вообще нужны платежные системы? Дело в том, что они значительно упрощают жизнь владельцам магазинов. Вы один раз регистрируетесь на сайте платежной системы, получаете реквизиты, а далее сможете принимать оплату с помощью более 100 вариантов способов оплаты. Это хорошая возможность быстро организовать прием оплаты.

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

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

      Перейдем к настройкам. Настройка любой из представленных платежных систем всегда состоит из 3-х этапов:

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

        В папке настроек платежных систем есть несколько файлов: php и htaccess. Первые - хранят настройки для подключения платежных систем, а второй – обеспечивает доступ к настройкам. Чтобы все сделать правильно, вам нужно будет использовать обязательно файл htaccess и также набор из фалов php в зависимости от того, какую платежную систему вы хотите настроить.

        Будем показывать на примере настройки Единой кассы. Для этого нам потребуются все файлы с названием unifiedwallet, что означает «единый кошелек». Сюда будут относиться файлы php, result, settings. Если же вы будете настраивать Приват24, то вам нужно будет использовать файл privat24_settings.php Если будете настраивать Робокассу, то используете, соответственно, robocassa_settings.php и так далее.
         
      2. Редактируем файл платежной системы
        Вернемся к настройкам виджета. Мы включили Единую кассу и нашли файл для соответствующей платежной системе. Теперь его нужно немного отредактировать. Открываем его в любом текстовом редакторе и изменяем в соответствии с инструкцией.

        В первой же строчке нужно написать номер вашего кошелька. Это набор цифр – 12 знаков. Номер нужно писать в знаке «». На второй строчке пишем пароль интернет-магазина. Тоже между знаками «». В следующих строчках заполняем все аналогично. Важно отметить, что не должно быть лишних пробелов.

        Этот файл мы сохраняем и закрываем, что эти настройки применились. Общий принцип заполнения для любой платежной системы одинаковый.
         
      3. Настройка в программе Adobe Muse
        Переходим в программу, в главное меню – "Файл"" – "Добавить файлы для передачи". Далее переходите в папку виджета интернет-магазина, далее в папку настройки платежных систем и добавляете следующие файлы: для всех платежных систем нужно сначала добавлять файл htaccess, выделяете его и нажимаете "Открыть". Поле этого "Файл" – "Добавить файлы для передачи" и добавляем все файлы, касающиеся данной платежной системы.

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

       

      • 0 комментариев
      • 1 018 просмотров
    9. Настройки доставки в интернет-магазине

      9 4, 25, 2, 6, 20, 3, 26, 27, 28, 29 4, 6, 32 https://creatura.club/uploads/monthly_2016_07/09_%D0%A1%D0%BF%D0%BE%D1%81%D0%BE%D0%B1%D1%8B_%D0%B4%D0%BE%D1%81%D1%82%D0%B0%D0%B2%D0%BA%D0%B8.mp4.43492a100ce6bb304bf343aebf19fbb3.mp4 5 До 5 минут <a href='https://creatura.club/profile/1-evgeniy-zubov/' data-ipsHover data-ipsHover-target='https://creatura.club/profile/1-evgeniy-zubov/?do=hovercard&referrer=https%253A%252F%252Fcreatura.club%252Fcourses%252Fsozdanie-internet-magazinov%252F' title="Перейти в профиль Евгений Зубов" class="ipsType_break">Евгений Зубов</a> Скрыть https://creatura.club/uploads/ Средняя сложность Скрыть

      Настройки доставки делаются так же, как и настройки оплаты и основные настройки. Они находятся в виджете ИМ, и их можно как отключать, так и включать. По умолчанию все настройки отключены. Это значит, что они недоступны посетителям и им не предлагается выбрать способ доставки.

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

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

      При этом, если мы выберем один из платных способов доставки, то к общей сумме заказа она суммироваться не будет. Все это потому, что мы не настроили отдельно данную опцию. Поэтому переходим снова в настройки виджета, настройки доставки и активируем опцию «Прибавлять стоимость доставки к заказу».

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

       

      • 0 комментариев
      • 503 просмотра
    10. Использование редактора фраз

      10 4, 25, 2, 6, 20, 3, 26, 27, 28, 29 4, 6, 32 https://creatura.club/uploads/monthly_2016_07/10_%D0%A0%D0%B5%D0%B4%D0%B0%D0%BA%D1%82%D0%BE%D1%80_%D1%84%D1%80%D0%B0%D0%B7_%D0%B8_%D0%B5%D0%B3%D0%BE_%D0%BD%D0%B0%D1%81%D1%82%D1%80%D0%BE%D0%B9%D0%BA%D0%B8.mp4.11951add40ac73e08a3323f7ea948c6d.mp4 6 До 10 минут <a href='https://creatura.club/profile/1-evgeniy-zubov/' data-ipsHover data-ipsHover-target='https://creatura.club/profile/1-evgeniy-zubov/?do=hovercard&referrer=https%253A%252F%252Fcreatura.club%252Fcourses%252Fsozdanie-internet-magazinov%252F' title="Перейти в профиль Евгений Зубов" class="ipsType_break">Евгений Зубов</a> Скрыть https://creatura.club/uploads/ Средняя сложность Скрыть

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

      Первым делом нужно включить"Редактор перевода". Если галочки здесь не будет, то все настройки далее не будут доступны. В чем смысл редактора фраз? В том, что сюда вынесены все фразы, используемые в вашем магазине. Например, здесь вы можете изменить способ доставки, в частности название, надписи полей (н-р email , телефон), название способов оплаты и т.д.

      Давайте отредактируем способы доставки. Для этого переходим в браузер, открываем форму, видим, что у нас есть 3 способа доставки. Переименуем их. Переходим в "Редактор фраз" – "Способы доставки", выбираем способ 1 называем его «Голубиная почта»,  способ 2 «Почта России», способ 3 «Курьерская доставка». И теперь мы можем увидеть все изменения в браузере.

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

      В предыдущих уроках мы рассказывали об основных настройках и обошли пункт "Язык интернет-магазина". Дело в том, что если у вас активирован "Редактор фраз", то все настройки языка будут игнорироваться. То есть, все фразы будут устанавливаться из редактора фраз. Если вы хотите изменить язык быстро, то нужно будет убрать галочку в редакторе фраз.

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

      • 0 комментариев
      • 630 просмотров
    11. Дизайн корзины и калькулятора

      11 4, 25, 2, 6, 20, 3, 26, 27, 28, 29 4, 6, 32 https://creatura.club/uploads/monthly_2016_07/11_%D0%94%D0%B8%D0%B7%D0%B0%D0%B9%D0%BD_%D0%BA%D0%BE%D1%80%D0%B7%D0%B8%D0%BD%D1%8B_%D0%B8_%D0%BA%D0%B0%D0%BB%D1%8C%D0%BA%D1%83%D0%BB%D1%8F%D1%82%D0%BE%D1%80%D0%B0.mp4.dd655a16d7c96f3c7f5b0dabb7e9bf33.mp4 10 До 30 минут <a href='https://creatura.club/profile/1-evgeniy-zubov/' data-ipsHover data-ipsHover-target='https://creatura.club/profile/1-evgeniy-zubov/?do=hovercard&referrer=https%253A%252F%252Fcreatura.club%252Fcourses%252Fsozdanie-internet-magazinov%252F' title="Перейти в профиль Евгений Зубов" class="ipsType_break">Евгений Зубов</a> Скрыть https://creatura.club/uploads/ Средняя сложность Скрыть

      Сейчас мы попробуем настроить всплывающий калькулятор и саму корзину, с помощью которой происходит подсчет товаров и оформляется заказ. Для этого есть отдельный виджет. В программе кнопка всегда будет отображаться в сером виде со значком восклицательного знака – это так и должно выглядеть. В браузере все будет отображаться в соответствии настройкам.

      Если вы перейдете в настройки виджета, то найдете 2 блока:

      1. Блок корзины
      2. Блок калькулятора и формы

      Дизайн корзины – это вид кнопки с надписью «0 товаров», а дизайн калькулятора – внешний вид всплывающего окна после нажатия на кнопку корзины.

      • Дизайн корзины.

      Настройки позволяют вам управлять настройками двух разных состояний: внешний вид в пустом состоянии (настройки для пустой корзины) и внешний вид в наполненном состоянии (более 1 товара).

      Дополнительные настройки – иконка корзины (изображение в левой части корзины). Для удобства есть 2 варианта иконки (для светлого и темного фона). Чтобы установить иконку, нужно будет для начала отметить галочкой выбор данной опции, затем нажать на оранжевую ссылку и указать тот файл, который будет служить той самой иконкой.

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

      • Настройки калькулятора.

      Настраиваются они так же, как и дизайн корзины.

      • Настройки скругления углов

      В этом поле есть 4 разных значения (10px;10px;10px;10px ). Каждое значение отвечает за свой угол: левый верхний угол, верхний правый, нижний правый, нижний левый. Чтобы изменить степень скругления, нужно изменить значение конкретного угла, например, вместо 10px поставить 20px.

      Возвращаемся в шаблон каждый раз, выделяем кнопку и ставим скругление. Таким образом мы можем управлять внешним видом. Также есть скругление у калькулятора и кнопки в нем. Найти то самое нужное скругление вы сможете только экспериментальным путем.

       

      • 1 комментарий
      • 1 230 просмотров
×