Интеграция ShopEngine с Gutenberg для магазина WooCommerce

Наконец-то ожидание закончилось! ShopEngine теперь совместим с вашим редактором блоков Gutenberg . Раньше вы могли получить доступ к виджетам ShopEngine только через окно Elementor, верно?

Но теперь ShopEngine доступен и помимо этого. Помимо доступа к виджетам ShopEngine через Elementor, вы можете использовать ShopEngine в Gutenberg для магазина WooCommerce . Однако в Гутенберге эти виджеты будут отображаться в виде блоков.

На самом деле функции виджетов Elementor и блоков Gutenberg идентичны. Тогда в чем разница? Разница заключается в применении. Для виджетов Elementor вам нужно было перетаскивать виджеты в обозначенные области, чтобы просмотреть вывод. Но для блоков Гутенберга вам нужно просто щелкнуть блоки, и ваша работа сделана.

Обзор Гутенберга:

Как пользователь WordPress, вы должны быть знакомы с термином Гутенберг . Это редактор контента WordPress, также известный как редактор блоков WordPress. В настоящее время Gutenberg является самым популярным редактором WordPress среди пользователей WordPress благодаря простоте использования. Многие плагины WordPress Gutenberg также доступны от сторонних разработчиков.

Раньше люди больше привыкли использовать «Классический редактор», еще один редактор WordPress. С момента появления Гутенберга люди стали больше использовать блочный редактор по сравнению с классическим редактором. Особенностью Гутенберга является его блочный контент .

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

И это именно то, на чем мы сосредоточимся в этом информативном блоге, так как отныне куча функций ShopEngine будет в вашем распоряжении в Гутенберге для WooCommerce. Прежде чем мы углубимся в пользовательские блоки ShopEngine в Gutenberg, позвольте мне пролить свет на то, почему мы интегрировали ShopEngine с Gutenberg для WooCommerce .

Зачем интегрировать ShopEngine с Gutenberg:

ShopEngine изначально был разработан исключительно для Elementor. Это означает, что вы можете создавать свои страницы WooCommerce только для Elementor. Но теперь, как я упоминал ранее, ShopEngine сделал еще один шаг вперед после интеграции с Gutenberg.

Итак, что заставило нас интегрировать ShopEngine с Gutenberg для WooCommerce ? Чтобы ответить на этот вопрос, позвольте мне представить вам фрагменты данных-

Согласно gutenstats.blog, Gutenberg на данный момент получил 76 миллионов активных установок. Вдобавок ко всему, на сегодняшний день с Гутенбергом написано 264,5 миллиона сообщений.

Этих фрагментов данных, я думаю, достаточно, чтобы убедить любого, почему мы расширили ассортимент ShopEngine до Гутенберга. Миллионы людей используют Gutenberg для разработки своего контента, и мы не хотим, чтобы они упустили захватывающие функции, которые предлагает ShopEngine.

Еще несколько причин интеграции ShopEngine с Gutenberg:

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

Идея состоит в том, чтобы позволить вам спроектировать 100% вашего сайта WooCommerce с помощью редактора Gutenberg. Если это произойдет, спрос на Гутенберга, вероятно, резко возрастет. Итак, стоит интегрировать ShopEngine с Gutenberg для WooCommerce, верно?

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

Некоторые из известных блоков ShopEngine в Гутенберге:

Прежде чем я пролью свет на блоки ShopEngine, позвольте мне пояснить, что ShopEngine поставляется с более чем 65 виджетами , более чем 13 модулями и множеством шаблонов для страниц магазина WooCommerce, предназначенных для пользователей Elementor. После интеграции ShopEngine с Gutenberg для WooCommerce теперь вы можете получить доступ к 45+ блокам ShopEngine в Gutenberg .

В зависимости от типа страницы, которую вы выбрали для создания шаблона для своего магазина WooCommerce, блоки Гутенберга будут отображаться соответствующим образом. Кроме того, вы получите доступ к таким модулям, как «Быстрый просмотр», «Образцы вариантов», «Сравнение продуктов» и «Список желаний» .

Давайте взглянем на некоторые блоки ShopEngine в Gutenberg для магазина WooCommerce.

Название продукта:

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

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

Список продуктов:

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

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

Описание товара:

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

Оплата на кассе:

Как и виджет Checkout Payment в Elementor, блок Checkout Payment работает в Gutenberg. Вы можете просмотреть блок «Оплата при оформлении заказа», если перейдете к шаблону сборки для своей страницы оформления заказа. После этого вы можете добавить блок оплаты при оформлении заказа, как вам нужно для вашего магазина WooCommerce.

У вас будет возможность изменить стиль контента, способы оплаты, кнопку и т. д. Вы можете настроить положение флажка, цвет кнопки, типографику, границу и т. д.

Архив продуктов:

Страница «Архивные товары» содержит все размещенные товары в одном месте. Чтобы создать шаблон страницы архива в Gutenberg для WooCommerce, просто перейдите на левую боковую панель и щелкните блок «Архивировать продукты» . Все продукты инвентаря будут отображаться один за другим.

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

Таблица корзины:

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

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

Недавно просмотренные продукты:

С помощью блока недавно просмотренных продуктов ShopEngine вы можете продемонстрировать продукты, которые ваши пользователи недавно просматривали или просматривали в вашем магазине WooCommerce. Вы можете отображать недавно просмотренные продукты на странице магазина, странице продукта, странице корзины и т. д.

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

Завершение:

Итак, как вы относитесь к нашему шагу по интеграции ShopEngine с Gutenberg для WooCommerce ? Сообщите нам о своем опыте развертывания блоков ShopEngine в Gutenberg для магазина WooCommerce.

Вы можете оставить любой положительный или отрицательный отзыв об интеграции Gutenberg для WooCommerce. Мы также были бы признательны за предложения от вас по оптимизации нашего процесса интеграции. Однако наши работы по интеграции ShopEngine с Gutenberg все еще продолжаются. Вскоре мы закончим проект.