softcommerce / module-graphcommerce-cms
Magento GraphCommerce CMS.
Installs: 129
Dependents: 1
Suggesters: 0
Security: 0
Stars: 4
Watchers: 4
Forks: 2
Open Issues: 2
Type:magento2-module
Requires
- php: ~8.0.0||~8.1.0||~8.2.0||~8.3.0
- magento/module-cms-graph-ql: ^100.4
- magento/module-page-builder: 2.2.*
- softcommerce/module-core: ^1.5
- softcommerce/module-seosuite: *
README
The core purpose of this module is to provide integration of PageBuilder Content Management System for GraphCommerce® headless theme, eventually replacing original HyGraph with its own CMS. This module extends PageBuilder's functionality by introducing custom components that are used for building page content.
Features
- Build rich page content by using Magento's native PageBuilder;
- Create media asset elements that support both images, SVG and video formats;
- CMS Pages, Blocks, Widgets, Categories and Products are supported;
- Add your own custom PageBuilder components;
Supported PageBuilder Components
- Use
cmsRowHeroBanner
component to build elements with banner elements; - Use
CmsRowLinks
component to build link elements that support linking to categories, products and custom URL paths. - Use
CmsRowProduct
component to build catalog elements with ability to specify products by either category, SKU or custom rules; - Use
CmsRowSpecialBanner
component to build banner content elements; - Use
CmsRowQuote
component to build rich text quotes; - Use
CmsRowText
component to build rich text content; - Use
CmsRowServiceLinks
component to build service links with the support of MUI icons;
Supported PageBuilder Elements
gc-asset
- used to serve images and video files;gc-heading
- used to provide a heading for components that require titles.gc-page-links
- used to provide links that support either a direct, product, category or CMS page URL;gc-products
- used to provide product listing defined by either a category, SKUs or a custom rule;gc-richtext
- used to provide content built with the wysiwyg as an AST format;
Compatibility
- Open Source >= 2.4.4
Demo
https://graphcommerce-cms.softcommerce.dev/
Magento Extension Installation
Using composer
# GH source: https://github.com/softcommerceltd/magento-graphcommerce-cms
composer require softcommerce/module-graphcommerce-cms
Post Installation
# Enable the module
bin/magento module:enable SoftCommerce_GraphCommerceCms
bin/magento setup:upgrade
In production mode:
# compile & generate static files
bin/magento deploy:mode:set production
In development mode:
bin/magento setup:di:compile
GraphCommerce Node Package Installation
Using YARN [recommended]
# GH source: https://github.com/softcommerceltd/graphcommerce-magento-cms
yarn add @softcommerce/graphcommerce-magento-cms
Using NPM
# GH source: https://github.com/softcommerceltd/graphcommerce-magento-cms
npm install @softcommerce/graphcommerce-magento-cms
Magento Demo [sample] Project Installation
Install latest magento instance
# 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
Create DB & USER (replace credentials & password as required)
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;
Install magento application
# 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 sample data
# 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
Set the application to production
# Compile the application code # and generate static files for production environment bin/magento deploy:mode:set production # Run indexing bin/magento indexer:reindex
*** Note: SSL certificate is required. Use free one from https://letsencrypt.org/
GraphCommerce PWA Demo Project
Both Magento & GraphCommerce plugins require some modifications to GC React project pages. Use the demo below as a starting point for your project.
# 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
- Edit graphcommerce.config.js file to change the canonical and endpoint URLs as required.
- Edit next.config.js file to change images hostname configuration.
License
Open Software License (OSL 3.0).
Please see LICENSE.txt
for full details of the OSL 3.0 license.