README

此模块的核心目的是提供与 GraphCommerce® 无头主题 的 PageBuilder 内容管理系统集成，最终用其自己的 CMS 替换原始的 HyGraph。该模块通过引入用于构建页面内容的自定义组件来扩展 PageBuilder 的功能。

功能

• 使用 Magento 的原生 PageBuilder 构建丰富的页面内容；
• 创建支持图像、SVG 和视频格式的媒体资产元素；
• 支持 CMS 页面、块、小部件、类别和产品；
• 添加您自己的自定义 PageBuilder 组件；

支持的 PageBuilder 组件

• 使用 cmsRowHeroBanner 组件构建带有横幅元素的元素；
• 使用 CmsRowLinks 组件构建支持链接到类别、产品或自定义 URL 路径的链接元素；
• 使用 CmsRowProduct 组件构建能够通过类别、SKU 或自定义规则指定产品的目录元素；
• 使用 CmsRowSpecialBanner 组件构建横幅内容元素；
• 使用 CmsRowQuote 组件构建丰富的文本引用；
• 使用 CmsRowText 组件构建丰富的文本内容；
• 使用 CmsRowServiceLinks 组件构建支持 MUI 图标的链接元素；

支持的 PageBuilder 元素

• gc-asset - 用于服务图像和视频文件；
• gc-heading - 用于为需要标题的组件提供标题；
• gc-page-links - 用于提供支持直接、产品、类别或 CMS 页面 URL 的链接；
• gc-products - 用于提供由类别、SKU 或自定义规则定义的产品列表；
• gc-richtext - 用于提供以 wysiwyg 构建的内容的 AST 格式；

兼容性

• 开源 >= 2.4.4

演示

https://graphcommerce-cms.softcommerce.dev/

Magento 扩展安装

使用 composer

# GH source: https://github.com/softcommerceltd/magento-graphcommerce-cms
composer require softcommerce/module-graphcommerce-cms

安装后

# Enable the module
bin/magento module:enable SoftCommerce_GraphCommerceCms
bin/magento setup:upgrade

在生产模式下

# compile & generate static files
bin/magento deploy:mode:set production

在开发模式下

bin/magento setup:di:compile

GraphCommerce Node 包安装

使用 YARN [推荐]

# GH source: https://github.com/softcommerceltd/graphcommerce-magento-cms
yarn add @softcommerce/graphcommerce-magento-cms

使用 NPM

# GH source: https://github.com/softcommerceltd/graphcommerce-magento-cms
npm install @softcommerce/graphcommerce-magento-cms

Magento 演示 [样本] 项目安装

安装最新的 magento 实例

# Install Magento
# Source: https://experienceleague.adobe.com/en/docs/commerce-operations/installation-guide/composer
composer create-project --repository-url=https://repo.magento.com/ magento/project-community-edition magento.graphcommerce

创建 DB & USER（根据需要替换凭据和密码）

CREATE DATABASE magento_graphcommerce;
CREATE USER 'magento_graphcommerce'@'localhost' IDENTIFIED BY 'magento.graphcommerce.pwd';
GRANT ALL PRIVILEGES ON magento_graphcommerce.* TO 'magento_graphcommerce'@'localhost';
GRANT SUPER ON *.* TO magento_graphcommerce@'localhost';
GRANT PROCESS ON *.* TO magento_graphcommerce@localhost;
FLUSH PRIVILEGES;

安装 magento 应用程序

# Install Magento
# Replace opensearch with elasticsearch if the latter one installed.
# Replace user credentials if required.
# Source: https://experienceleague.adobe.com/en/docs/commerce-operations/installation-guide/composer
bin/magento setup:install \
--base-url=https://magento.graphcommerce/ \
--db-host=localhost \
--db-name=magento_graphcommerce \
--db-user=magento_graphcommerce \
--db-password=magento.graphcommerce.pwd \
--admin-firstname=Magento \
--admin-lastname=GraphCommerce \
--admin-email=magento-gc@example.com \
--admin-user=magento.graphcommerce \
--admin-password=magento.graphcommerce.pwd \
--language=en_GB \
--currency=GBP \
--timezone=Europe/London \
--use-rewrites=1 \
--search-engine=opensearch \
--opensearch-host=localhost \
--opensearch-index-prefix=magento.graphcommerce \
--opensearch-port=9200

安装样本数据

# Install Magento sample data
# Source https://experienceleague.adobe.com/en/docs/commerce-operations/installation-guide/next-steps/sample-data/composer-packages
bin/magento deploy:mode:set developer
bin/magento sampledata:deploy
# Install GraphCommerce sample data
# GH Source:
# https://github.com/softcommerceltd/magento-graphcommerce-cms-sample-data
# https://github.com/softcommerceltd/magento-graphcommerce-cms-sample-data-media
composer require softcommerce/module-graphcommerce-cms-sample-data
# Update the application
bin/magento setup:upgrade

将应用程序设置为生产模式

# Compile the application code
# and generate static files for production environment
bin/magento deploy:mode:set production
# Run indexing
bin/magento indexer:reindex

*** 注意：需要 SSL 证书。请使用来自 https://letsencrypt.openssl.ac.cn/ 的免费证书。

GraphCommerce PWA 演示项目

Magento 和 GraphCommerce 插件都需要对 GC React 项目页面进行一些修改。使用下面的演示作为您项目的起点。

# Clone demo project
# GH Source: https://github.com/softcommerceltd/magento-graphcommerce-pwa
git clone -b main --single-branch git@github.com:softcommerceltd/magento-graphcommerce-pwa.git

• 编辑 graphcommerce.config.js 文件以更改所需的规范和端点 URL。
• 编辑 next.config.js 文件以更改图像主机名配置。

许可协议

开源软件许可 (OSL 3.0)。有关 OSL 3.0 许可证的完整详细信息，请参阅 LICENSE.txt。

感谢您的光临

https://softcommerce.io/