├── .github └── .metadata.json ├── .gitignore ├── BannerApp └── Appearance │ ├── README.md │ ├── etc │ ├── adminhtml │ │ └── di.xml │ └── module.xml │ ├── registration.php │ └── view │ └── adminhtml │ ├── pagebuilder │ └── content_type │ │ └── banner.xml │ └── web │ ├── css │ ├── images │ │ └── content-type │ │ │ └── banner │ │ │ └── appearance │ │ │ └── simple-poster.svg │ └── source │ │ ├── _appearances.less │ │ └── _module.less │ └── template │ └── content-type │ └── banner │ └── simple-poster │ ├── master.html │ └── preview.html ├── BannerExt └── Extension │ ├── README.md │ ├── composer.json │ ├── etc │ └── module.xml │ ├── registration.php │ └── view │ ├── adminhtml │ ├── pagebuilder │ │ └── content_type │ │ │ └── banner.xml │ ├── ui_component │ │ └── pagebuilder_banner_form.xml │ └── web │ │ ├── css │ │ ├── images │ │ │ ├── sweater-mobile.jpeg │ │ │ └── sweater.jpeg │ │ └── source │ │ │ ├── _module.less │ │ │ └── content-type │ │ │ └── banner │ │ │ ├── _collage-center.less │ │ │ ├── _collage-right.less │ │ │ ├── _default.less │ │ │ ├── _import.less │ │ │ └── _poster.less │ │ └── template │ │ └── content-type │ │ └── banner │ │ ├── collage-centered │ │ ├── master.html │ │ └── preview.html │ │ ├── collage-left │ │ ├── master.html │ │ └── preview.html │ │ ├── collage-right │ │ ├── master.html │ │ └── preview.html │ │ └── poster │ │ ├── master.html │ │ └── preview.html │ └── frontend │ └── web │ ├── css │ └── source │ │ ├── _module.less │ │ └── content-type │ │ └── banner │ │ ├── _default.less │ │ └── _import.less │ └── images │ └── hearts.svg ├── Button └── Extension │ ├── .gitignore │ ├── README.md │ ├── composer.json │ ├── custom-button-types.gif │ ├── etc │ └── module.xml │ ├── front-end-theme.png │ ├── registration.php │ └── view │ └── adminhtml │ ├── ui_component │ ├── pagebuilder_banner_form.xml │ ├── pagebuilder_button_item_form.xml │ └── pagebuilder_slide_form.xml │ └── web │ └── css │ └── source │ ├── _custom-button-types.less │ └── _module.less ├── COPYRIGHT ├── Columns └── Extension │ ├── ColumnsPerRowAndColumnHiding.gif │ ├── Plugin │ └── StageConfigFix.php │ ├── README.md │ ├── composer.json │ ├── etc │ ├── adminhtml │ │ └── di.xml │ ├── di.xml │ ├── module.xml │ └── view.xml │ ├── registration.php │ ├── responsive-columns-module.png │ └── view │ ├── adminhtml │ ├── layout │ │ ├── pagebuilder_column_mobile-small_form.xml │ │ └── pagebuilder_column_tablet_form.xml │ ├── pagebuilder │ │ └── content_type │ │ │ ├── column.xml │ │ │ └── column_group.xml │ ├── ui_component │ │ ├── pagebuilder_column_mobile-small_form.xml │ │ └── pagebuilder_column_tablet_form.xml │ └── web │ │ ├── css │ │ ├── images │ │ │ ├── desktop.svg │ │ │ ├── mobile-small.svg │ │ │ ├── mobile.svg │ │ │ ├── switcher │ │ │ │ ├── switcher-desktop.svg │ │ │ │ ├── switcher-mobile-small.svg │ │ │ │ ├── switcher-mobile.svg │ │ │ │ └── switcher-tablet.svg │ │ │ └── tablet.svg │ │ └── source │ │ │ ├── _fonts.less │ │ │ ├── _module.less │ │ │ ├── _vars.less │ │ │ ├── content-type │ │ │ ├── column-group │ │ │ │ ├── _default.less │ │ │ │ └── _import.less │ │ │ └── column │ │ │ │ ├── _default.less │ │ │ │ └── _import.less │ │ │ ├── form │ │ │ ├── _import.less │ │ │ ├── _mobile-small.less │ │ │ └── _tablet.less │ │ │ └── viewport-switcher │ │ │ ├── tooltips.less │ │ │ └── viewports.less │ │ ├── fonts │ │ └── breakpoint-icons │ │ │ ├── breakpoint-icons.eot │ │ │ ├── breakpoint-icons.svg │ │ │ ├── breakpoint-icons.ttf │ │ │ ├── breakpoint-icons.woff │ │ │ └── selection.json │ │ ├── js │ │ └── content-type │ │ │ ├── column-group │ │ │ └── preview.js │ │ │ └── column │ │ │ └── preview.js │ │ └── ts │ │ ├── .babelrc.js │ │ ├── babel │ │ ├── plugin-amd-to-magento-amd │ │ │ ├── ast-utils.js │ │ │ └── index.js │ │ └── plugin-resolve-magento-imports │ │ │ └── index.js │ │ └── js │ │ └── content-type │ │ ├── column-group │ │ └── preview.ts │ │ └── column │ │ └── preview.ts │ ├── base │ └── web │ │ └── js │ │ └── content-type │ │ ├── column-group │ │ └── appearance │ │ │ └── default │ │ │ └── widget.js │ │ ├── column │ │ └── appearance │ │ │ └── default │ │ │ └── widget.js │ │ └── products │ │ └── appearance │ │ └── carousel │ │ └── widget.js │ └── frontend │ └── web │ └── css │ └── source │ ├── _module.less │ └── content-type │ ├── column-group │ ├── _default.less │ └── _import.less │ └── column │ ├── _default.less │ └── _import.less ├── Deactivate └── PageBuilder │ ├── README.md │ ├── cms-form-overrides.png │ ├── etc │ └── module.xml │ ├── pagebuilder-disabled-for-blocks.png │ ├── registration.php │ └── view │ └── adminhtml │ └── ui_component │ ├── banner_form.xml │ ├── cms_block_form.xml │ └── cms_page_form.xml ├── Example └── PageBuilderCountdown │ ├── README.md │ ├── composer.json │ ├── countdown.png │ ├── etc │ ├── adminhtml │ │ └── di.xml │ ├── di.xml │ └── module.xml │ ├── registration.php │ └── view │ ├── adminhtml │ ├── layout │ │ └── pagebuilder_example_countdown_form.xml │ ├── pagebuilder │ │ └── content_type │ │ │ └── example_countdown.xml │ ├── ui_component │ │ └── pagebuilder_example_countdown_form.xml │ └── web │ │ ├── css │ │ ├── images │ │ │ └── content-type │ │ │ │ └── example-countdown │ │ │ │ └── appearance │ │ │ │ └── icon-pagebuilder-countdown.svg │ │ └── source │ │ │ ├── _module.less │ │ │ └── content-type │ │ │ └── example-countdown │ │ │ ├── _default.less │ │ │ └── _import.less │ │ ├── js │ │ └── content-type │ │ │ └── example-countdown │ │ │ └── preview.js │ │ └── template │ │ └── content-type │ │ └── example-countdown │ │ └── default │ │ ├── master.html │ │ └── preview.html │ ├── base │ └── web │ │ └── js │ │ └── content-type │ │ └── example-countdown │ │ ├── appearance │ │ └── default │ │ │ └── widget.js │ │ └── countdown.js │ └── frontend │ └── web │ └── css │ └── source │ ├── _module.less │ └── content-type │ └── example-countdown │ ├── _default.less │ └── _import.less ├── FAQ └── Custom │ ├── README.md │ ├── composer.json │ ├── etc │ ├── adminhtml │ │ └── di.xml │ ├── di.xml │ └── module.xml │ ├── faq.png │ ├── registration.php │ └── view │ ├── adminhtml │ ├── layout │ │ ├── pagebuilder_faq_form.xml │ │ └── pagebuilder_faq_item_form.xml │ ├── pagebuilder │ │ └── content_type │ │ │ ├── faq.xml │ │ │ └── faq_item.xml │ ├── ui_component │ │ ├── pagebuilder_faq_form.xml │ │ └── pagebuilder_faq_item_form.xml │ └── web │ │ ├── css │ │ └── source │ │ │ ├── _module.less │ │ │ └── content-type │ │ │ ├── faq-item │ │ │ └── _import.less │ │ │ └── faq │ │ │ └── _import.less │ │ ├── js │ │ └── content-type │ │ │ ├── faq-item │ │ │ ├── preview.js │ │ │ └── wysiwyg │ │ │ │ └── tinymce4 │ │ │ │ ├── component-initializer.js │ │ │ │ └── config-modifier.js │ │ │ └── faq │ │ │ └── preview.js │ │ └── template │ │ └── content-type │ │ ├── faq-item │ │ └── default │ │ │ ├── master.html │ │ │ └── preview.html │ │ └── faq │ │ └── default │ │ ├── master.html │ │ └── preview.html │ ├── base │ └── web │ │ └── js │ │ └── content-type │ │ └── faq │ │ └── appearance │ │ └── default │ │ └── widget.js │ └── frontend │ └── web │ └── css │ └── source │ ├── _module.less │ └── content-type │ ├── faq-item │ └── _import.less │ └── faq │ └── _import.less ├── Forms └── Extension │ ├── README.md │ ├── etc │ └── module.xml │ ├── registration.php │ └── view │ └── adminhtml │ └── ui_component │ ├── pagebuilder_base_form.xml │ └── pagebuilder_base_form_with_background_attributes.xml ├── Grid └── Custom │ ├── README.md │ ├── composer.json │ ├── etc │ ├── adminhtml │ │ └── di.xml │ └── module.xml │ ├── examples │ ├── luma_homepage.html │ ├── luma_homepage_admin.png │ └── luma_homepage_storefront.png │ ├── registration.php │ └── view │ ├── adminhtml │ ├── layout │ │ ├── pagebuilder_homepage_grid_form.xml │ │ └── pagebuilder_homepage_grid_item_form.xml │ ├── pagebuilder │ │ └── content_type │ │ │ ├── homepage_grid.xml │ │ │ └── homepage_grid_item.xml │ ├── ui_component │ │ ├── pagebuilder_homepage_grid_form.xml │ │ └── pagebuilder_homepage_grid_item_form.xml │ └── web │ │ ├── css │ │ └── source │ │ │ └── _module.less │ │ ├── js │ │ └── content-type │ │ │ ├── homepage-grid-item │ │ │ └── preview.js │ │ │ └── homepage-grid │ │ │ └── preview.js │ │ └── template │ │ └── content-type │ │ ├── homepage-grid-item │ │ └── default │ │ │ ├── master.html │ │ │ └── preview.html │ │ └── homepage-grid │ │ └── default │ │ ├── master.html │ │ └── preview.html │ └── frontend │ ├── layout │ └── default.xml │ └── web │ ├── css │ └── source │ │ └── _module.less │ └── js │ └── content-type │ └── homepage-grid │ └── appearance │ └── default │ └── widget.js ├── Image └── LazyLoading │ ├── README.md │ ├── adding-lazy-loading.svg │ ├── composer.json │ ├── etc │ └── module.xml │ ├── registration.php │ └── view │ ├── adminhtml │ ├── pagebuilder │ │ └── content_type │ │ │ └── image.xml │ └── web │ │ └── template │ │ └── content-type │ │ └── image │ │ └── full-width │ │ ├── master.html │ │ └── preview.html │ └── base │ ├── layout │ └── default.xml │ └── web │ └── js │ └── resource │ └── lazysizes │ ├── lazySizesConfig.js │ ├── lazysizes.min.js │ └── ls.attrchange.min.js ├── LICENSE.txt ├── Quote └── Custom │ ├── .gitignore │ ├── README.md │ ├── composer.json │ ├── etc │ ├── adminhtml │ │ └── di.xml │ ├── di.xml │ └── module.xml │ ├── registration.php │ └── view │ ├── adminhtml │ ├── layout │ │ └── pagebuilder_custom_quote_form.xml │ ├── pagebuilder │ │ └── content_type │ │ │ └── custom_quote.xml │ ├── ui_component │ │ └── pagebuilder_custom_quote_form.xml │ └── web │ │ ├── css │ │ ├── images │ │ │ └── content-type │ │ │ │ └── custom-quote │ │ │ │ └── appearance │ │ │ │ ├── icon-pagebuilder-black-swatch.svg │ │ │ │ ├── icon-pagebuilder-blue-swatch.svg │ │ │ │ ├── icon-pagebuilder-green-swatch.svg │ │ │ │ ├── icon-pagebuilder-purple-swatch.svg │ │ │ │ ├── icon-pagebuilder-quote.svg │ │ │ │ └── icon-pagebuilder-red-swatch.svg │ │ └── source │ │ │ ├── _module.less │ │ │ └── content-type │ │ │ └── custom-quote │ │ │ ├── _default.less │ │ │ └── _import.less │ │ ├── js │ │ └── content-type │ │ │ └── custom-quote │ │ │ ├── preview.js │ │ │ └── wysiwyg │ │ │ └── tinymce4 │ │ │ └── component-initializer.js │ │ └── template │ │ └── content-type │ │ └── custom-quote │ │ └── default │ │ ├── master.html │ │ └── preview.html │ ├── base │ └── web │ │ └── js │ │ └── content-type │ │ └── custom-quote │ │ └── appearance │ │ └── default │ │ └── widget.js │ └── frontend │ └── web │ └── css │ └── source │ ├── _module.less │ └── content-type │ └── custom-quote │ ├── _default.less │ └── _import.less ├── README.md ├── Slider └── Extension │ ├── README.md │ ├── etc │ ├── di.xml │ └── module.xml │ ├── registration.php │ ├── slider-center-mode.gif │ └── view │ ├── adminhtml │ ├── pagebuilder │ │ └── content_type │ │ │ └── slider.xml │ ├── ui_component │ │ ├── pagebuilder_slide_form.xml │ │ └── pagebuilder_slider_form.xml │ └── web │ │ ├── css │ │ └── source │ │ │ ├── _module.less │ │ │ └── content-type │ │ │ └── slide │ │ │ ├── _default.less │ │ │ └── _import.less │ │ └── js │ │ └── content-type │ │ └── slider │ │ └── preview.js │ └── base │ └── web │ └── js │ └── content-type │ └── slider │ └── appearance │ └── default │ └── widget.js ├── Text └── Extension │ ├── README.md │ ├── etc │ ├── adminhtml │ │ └── di.xml │ └── module.xml │ ├── registration.php │ ├── text-extension.gif │ └── view │ └── adminhtml │ └── web │ ├── css │ └── source │ │ ├── _module.less │ │ └── content-type │ │ └── text │ │ ├── _default.less │ │ └── _import.less │ └── fonts │ ├── OFL.txt │ ├── Readme.md │ ├── poppins-bold-webfont.woff │ ├── poppins-bold-webfont.woff2 │ ├── poppins-regular-webfont.woff │ └── poppins-regular-webfont.woff2 ├── Theme └── Admin │ ├── Magento_PageBuilder │ └── web │ │ ├── css │ │ └── source │ │ │ └── content-type │ │ │ └── column-group │ │ │ └── _mobile.less │ │ └── template │ │ └── viewport │ │ └── switcher.html │ ├── README.md │ ├── media │ └── preview.jpg │ ├── registration.php │ ├── responsive-admin-theme.png │ ├── theme.xml │ ├── viewport-templates-scaled.png │ ├── viewport-templates-small.png │ └── viewport-templates.png ├── ThemeKit └── Deprecated │ ├── .gitignore │ ├── Plugin │ └── CssContentPlugin.php │ ├── README.md │ ├── composer.json │ ├── etc │ ├── adminhtml │ │ └── di.xml │ └── module.xml │ ├── registration.php │ └── view │ └── adminhtml │ ├── requirejs-config.js │ ├── ui_component │ ├── pagebuilder_banner_form.xml │ ├── pagebuilder_base_form.xml │ ├── pagebuilder_base_form_with_background_attributes.xml │ ├── pagebuilder_button_item_form.xml │ ├── pagebuilder_column_form.xml │ ├── pagebuilder_divider_form.xml │ └── pagebuilder_slide_form.xml │ └── web │ ├── css │ └── source │ │ ├── _buttons.less │ │ ├── _module.less │ │ ├── _typography.less │ │ ├── _var.less │ │ └── form │ │ └── element │ │ └── tinymce.css │ ├── fonts │ ├── OFL.txt │ └── poppins │ │ ├── bold │ │ ├── poppins-700.woff │ │ └── poppins-700.woff2 │ │ ├── light │ │ ├── poppins-300.woff │ │ └── poppins-300.woff2 │ │ ├── regular │ │ ├── poppins-400.woff │ │ └── poppins-400.woff2 │ │ └── semibold │ │ ├── poppins-600.woff │ │ └── poppins-600.woff2 │ ├── js │ └── form │ │ └── element │ │ ├── color-picker-palette.js │ │ └── color-picker.js │ └── templates │ └── form │ └── element │ └── color-picker.html ├── example-content-types.png └── examples-install-location.png /.github/.metadata.json: -------------------------------------------------------------------------------- 1 | { 2 | "templateVersion": "0.2", 3 | "product": { 4 | "name": "Page Builder", 5 | "description": "Page Builder example modules for you to download, install, and learn from." 6 | }, 7 | "contacts": { 8 | "team": { 9 | "name": "Commerce Docs", 10 | "DL": "Grp-commerce-docs", 11 | "slackChannel": "#commerce-docs" 12 | } 13 | }, 14 | "ticketTracker": { 15 | "functionalJiraQueue": { 16 | "projectKey": "COMDOX", 17 | "component": "Maintenance" 18 | }, 19 | "securityJiraQueue": { 20 | "projectKey": "MAGREQ", 21 | "component": "Commerce M2" 22 | } 23 | }, 24 | "productionCodeBranches": ["master"] 25 | } -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .idea 2 | **/node_modules/* 3 | **.js.map 4 | **.d.js 5 | /dev/tests/acceptance/vendor 6 | static-error-log.xml 7 | .DS_Store 8 | .vscode 9 | .history/ 10 | /yarn-error.log -------------------------------------------------------------------------------- /BannerApp/Appearance/README.md: -------------------------------------------------------------------------------- 1 | # Banner Appearance 2 | 3 | This example module shows you how to customize the existing Banner content type, as described in the documentation topic [Add appearances](https://devdocs.magento.com/page-builder/docs/content-types/extend/add-appearances.html). 4 | 5 | ## Installation 6 | 7 | These steps assume you have already cloned the `pagebuilder-examples` repo to the root of your Magento instance, as described in [Installing the example modules](../../README.md): 8 | 9 | 1. Navigate to to the `app/code/` directory and create a symlink using the following command: 10 | 11 | ```bash 12 | ln -s ../../pagebuilder-examples/BannerApp 13 | ``` 14 | 15 | 1. From the Magento root directory, run the `setup:upgrade` command to install and enable the module: 16 | 17 | ```bash 18 | bin/magento setup:upgrade 19 | ``` 20 | 21 | ## Author 22 | 23 | [Bruce Denham](https://github.com/bdenham). Contact us on the Slack [#pagebuilder channel](https://slack.com/app_redirect?channel=pagebuilder) for questions specific to this example. 24 | 25 | ## Feedback 26 | 27 | We encourage and welcome you to help us keep these examples current by submitting Issues and Pull Requests. We also welcome your feedback and ideas on other code examples you would like to see added to this repo. 28 | -------------------------------------------------------------------------------- /BannerApp/Appearance/etc/adminhtml/di.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | large 5 | 6 | 7 | simple-poster 8 | Simple Poster 9 | BannerApp_Extension/css/images/content-type/banner/appearance/simple-poster.svg 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /BannerApp/Appearance/etc/module.xml: -------------------------------------------------------------------------------- 1 | 2 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /BannerApp/Appearance/registration.php: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /BannerApp/Appearance/view/adminhtml/web/css/source/_appearances.less: -------------------------------------------------------------------------------- 1 | [data-content-type="banner"][data-appearance="simple-poster"] { 2 | h1 { 3 | margin: 0 !important; 4 | } 5 | .pagebuilder-banner-wrapper .pagebuilder-poster-overlay { 6 | justify-content: left; 7 | } 8 | 9 | .pagebuilder-simple-poster-content { 10 | align-self: flex-end; 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /BannerApp/Appearance/view/adminhtml/web/css/source/_module.less: -------------------------------------------------------------------------------- 1 | @import "_appearances.less"; 2 | -------------------------------------------------------------------------------- /BannerApp/Appearance/view/adminhtml/web/template/content-type/banner/simple-poster/preview.html: -------------------------------------------------------------------------------- 1 | 7 | 8 |
9 | 10 |
11 |
12 | 13 | 14 | 15 |
16 |
17 |
18 |
19 |
20 |
21 | 14 |
15 |
16 | 17 | 18 | 19 |
20 | 25 |
26 |
27 | -------------------------------------------------------------------------------- /FAQ/Custom/view/adminhtml/web/template/content-type/faq/default/master.html: -------------------------------------------------------------------------------- 1 |
    2 | 3 |
4 | -------------------------------------------------------------------------------- /FAQ/Custom/view/adminhtml/web/template/content-type/faq/default/preview.html: -------------------------------------------------------------------------------- 1 |
2 | 3 |
4 | 5 |
6 |
7 | -------------------------------------------------------------------------------- /FAQ/Custom/view/base/web/js/content-type/faq/appearance/default/widget.js: -------------------------------------------------------------------------------- 1 | define([ 2 | 'jquery', 3 | 'accordion' 4 | ], function ($) { 5 | 'use strict'; 6 | 7 | return function (config, element) { 8 | var element = $(element); 9 | element.children("li").each(function (i) { 10 | $(this).find("[data-collapsible]").attr("data-role", "collapsible"); 11 | $(this).find("[data-content]").attr("data-role", "content"); 12 | }); 13 | element.accordion({ 14 | collapsible: true, 15 | multipleCollapsible: true 16 | }); 17 | }; 18 | }); 19 | -------------------------------------------------------------------------------- /FAQ/Custom/view/frontend/web/css/source/_module.less: -------------------------------------------------------------------------------- 1 | // 2 | // FAQ module styles 3 | // _____________________________________________ 4 | 5 | @import "content-type/faq/_import.less"; 6 | @import "content-type/faq-item/_import.less"; 7 | -------------------------------------------------------------------------------- /FAQ/Custom/view/frontend/web/css/source/content-type/faq-item/_import.less: -------------------------------------------------------------------------------- 1 | // 2 | // FAQ item styles 3 | // _____________________________________________ 4 | 5 | & when (@media-common = true) { 6 | [data-content-type="faq-item"] { 7 | border-top: 1px solid #cccccc !important; 8 | border-right: 1px solid #cccccc !important; 9 | border-left: 1px solid #cccccc !important; 10 | overflow: hidden; 11 | 12 | [data-role="content"] { 13 | display: none; 14 | } 15 | 16 | [data-role="collapsible"] { 17 | font-weight: bold; 18 | line-height: 1.1; 19 | font-size: 1.4rem; 20 | margin-top: 2rem; 21 | margin-bottom: 2rem; 22 | 23 | &:before { 24 | font-family: @icons-pagebuilder__font-name; 25 | margin-right: 5px; 26 | font-size: 12px; 27 | left: 15px; 28 | position: absolute; 29 | } 30 | 31 | &[aria-expanded="true"]:before { 32 | content: @icon-pagebuilder-caret-up__content; 33 | } 34 | 35 | &[aria-expanded="false"]:before { 36 | content: @icon-pagebuilder-caret-down__content; 37 | } 38 | } 39 | } 40 | } 41 | -------------------------------------------------------------------------------- /FAQ/Custom/view/frontend/web/css/source/content-type/faq/_import.less: -------------------------------------------------------------------------------- 1 | // 2 | // FAQ styles 3 | // _____________________________________________ 4 | 5 | & when (@media-common = true) { 6 | [data-content-type="faq"] { 7 | border-bottom: 1px solid #ccc !important; 8 | list-style-type: none; 9 | position: relative; 10 | width: 100%; 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /Forms/Extension/etc/module.xml: -------------------------------------------------------------------------------- 1 | 2 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /Forms/Extension/registration.php: -------------------------------------------------------------------------------- 1 | 2 | 8 |
9 | 10 | 11 |
12 | 13 | 14 | 15 | true 16 | 17 | 18 | 19 | 20 | 21 | 22 | true 23 | 24 | 25 | 26 | 27 | 28 | 29 | true 30 | 31 | 32 | 33 |
34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 |
46 | -------------------------------------------------------------------------------- /Forms/Extension/view/adminhtml/ui_component/pagebuilder_base_form_with_background_attributes.xml: -------------------------------------------------------------------------------- 1 | 2 | 8 |
9 | 10 | 11 |
12 | 13 | 14 | 15 | true 16 | 17 | 18 | 19 |
20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 |
32 | -------------------------------------------------------------------------------- /Grid/Custom/composer.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "davemacaulay/module-page-builder-grid", 3 | "description": "Example Page Builder Grid Module", 4 | "require": { 5 | "magento/framework": "*", 6 | "magento/module-page-builder": "*", 7 | "php": "~7.1.3||~7.2.0" 8 | }, 9 | "type": "magento2-module", 10 | "license": [ 11 | "proprietary" 12 | ], 13 | "authors": [ 14 | { 15 | "name": "Dave Macaulay", 16 | "email": "macaulay@adobe.com" 17 | }, 18 | { 19 | "name": "Hwashiang Yu", 20 | "email": "hwyu@adobe.com" 21 | } 22 | ], 23 | "autoload": { 24 | "files": [ 25 | "registration.php" 26 | ], 27 | "psr-4": { 28 | "DaveMacaulay\\PageBuilderGrid\\": "" 29 | } 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /Grid/Custom/etc/adminhtml/di.xml: -------------------------------------------------------------------------------- 1 | 2 | 8 | 9 | 10 | 11 | large 12 | 13 | 14 | default 15 | Default 16 | 17 | 18 | 19 | 20 | 21 | 22 | large 23 | 24 | 25 | default 26 | Default 27 | 28 | 29 | 30 | 31 | -------------------------------------------------------------------------------- /Grid/Custom/etc/module.xml: -------------------------------------------------------------------------------- 1 | 2 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /Grid/Custom/examples/luma_homepage_admin.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/commerce-docs/pagebuilder-examples/e7f9e36d854ce9a99b15e309102d0fc85f6e2f2b/Grid/Custom/examples/luma_homepage_admin.png -------------------------------------------------------------------------------- /Grid/Custom/examples/luma_homepage_storefront.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/commerce-docs/pagebuilder-examples/e7f9e36d854ce9a99b15e309102d0fc85f6e2f2b/Grid/Custom/examples/luma_homepage_storefront.png -------------------------------------------------------------------------------- /Grid/Custom/registration.php: -------------------------------------------------------------------------------- 1 | 2 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /Grid/Custom/view/adminhtml/layout/pagebuilder_homepage_grid_item_form.xml: -------------------------------------------------------------------------------- 1 | 2 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /Grid/Custom/view/adminhtml/web/css/source/_module.less: -------------------------------------------------------------------------------- 1 | // /** 2 | // * Copyright © Magento, Inc. All rights reserved. 3 | // * See COPYING.txt for license details. 4 | // */ 5 | 6 | .pagebuilder-homepage-grid.pagebuilder-content-type.type-container { 7 | border: none; 8 | outline: none; 9 | 10 | > .element-children { 11 | display: grid; 12 | grid-gap: 10px; 13 | grid-template-columns: 1fr 1fr 1fr; 14 | grid-template-rows: 270px 370px 270px; 15 | 16 | > .pagebuilder-content-type-wrapper { 17 | height: 100%; 18 | 19 | &:nth-child(1) { 20 | grid-column: ~"2 / 4"; 21 | grid-row: 1; 22 | } 23 | &:nth-child(2) { 24 | grid-column: 1 ; 25 | grid-row: ~"1 / 3"; 26 | } 27 | &:nth-child(3) { 28 | grid-column: 2; 29 | grid-row: 2; 30 | } 31 | &:nth-child(4) { 32 | grid-column: 3; 33 | grid-row: ~"2 / 4"; 34 | } 35 | &:nth-child(5) { 36 | grid-column: ~"1 / 3"; 37 | grid-row: 3; 38 | } 39 | 40 | .pagebuilder-homepage-item { 41 | height: 100%; 42 | 43 | > .element-children { 44 | height: 100%; 45 | } 46 | } 47 | } 48 | } 49 | } 50 | -------------------------------------------------------------------------------- /Grid/Custom/view/adminhtml/web/js/content-type/homepage-grid-item/preview.js: -------------------------------------------------------------------------------- 1 | define([ 2 | 'jquery', 3 | 'underscore', 4 | 'Magento_PageBuilder/js/content-type/preview-collection', 5 | ], function ($, _, PreviewCollection) { 6 | 'use strict'; 7 | var $super; 8 | 9 | /** 10 | * Preview Constructor 11 | * 12 | * @param parent 13 | * @param config 14 | * @param stageId 15 | * @constructor 16 | */ 17 | function Preview(parent, config, stageId) { 18 | PreviewCollection.call(this, parent, config, stageId); 19 | } 20 | Preview.prototype = Object.create(PreviewCollection.prototype); 21 | $super = PreviewCollection.prototype; 22 | 23 | /** 24 | * Remove move, duplicate and remove options 25 | * 26 | * @returns {*} 27 | */ 28 | Preview.prototype.retrieveOptions = function retrieveOptions() { 29 | var options = $super.retrieveOptions.call(this, arguments); 30 | delete options.move; 31 | delete options.duplicate; 32 | delete options.remove; 33 | return options; 34 | }; 35 | 36 | return Preview; 37 | }); 38 | -------------------------------------------------------------------------------- /Grid/Custom/view/adminhtml/web/js/content-type/homepage-grid/preview.js: -------------------------------------------------------------------------------- 1 | define([ 2 | 'jquery', 3 | 'knockout', 4 | 'Magento_PageBuilder/js/events', 5 | 'underscore', 6 | 'Magento_PageBuilder/js/content-type/preview-collection', 7 | 'Magento_PageBuilder/js/content-type-factory', 8 | 'Magento_PageBuilder/js/config', 9 | ], function ($, ko, events, underscore, PreviewCollection, createContentType, pageBuilderConfig) { 10 | 'use strict'; 11 | 12 | /** 13 | * Preview Constructor 14 | * 15 | * @param parent 16 | * @param config 17 | * @param stageId 18 | * @constructor 19 | */ 20 | function Preview(parent, config, stageId) { 21 | var self = this; 22 | 23 | PreviewCollection.call(this, parent, config, stageId); 24 | 25 | events.on("homepage-grid:dropAfter", function (args) { 26 | if (args.id === self.contentType.id && self.contentType.children().length === 0) { 27 | // Once the grid is ready, let's add in our children 28 | self.populateGrid(); 29 | } 30 | }); 31 | } 32 | Preview.prototype = Object.create(PreviewCollection.prototype); 33 | 34 | /** 35 | * Populate the grid with 5 children 36 | */ 37 | Preview.prototype.populateGrid = function () { 38 | var self = this; 39 | var i; 40 | 41 | // Create 5 homepage grid items 42 | for (i = 0; i < 5; i++) { 43 | console.log(this.contentType); 44 | createContentType( 45 | pageBuilderConfig.getContentTypeConfig("homepage-grid-item"), 46 | this.contentType, 47 | this.contentType.stageId 48 | ).then(function (gridItem) { 49 | self.contentType.addChild(gridItem); 50 | }); 51 | } 52 | }; 53 | 54 | /** 55 | * Mark as not a standard container 56 | * 57 | * @returns {boolean} 58 | */ 59 | Preview.prototype.isContainer = function () { 60 | return false; 61 | }; 62 | 63 | return Preview; 64 | }); 65 | -------------------------------------------------------------------------------- /Grid/Custom/view/adminhtml/web/template/content-type/homepage-grid-item/default/master.html: -------------------------------------------------------------------------------- 1 | 7 | 8 |
9 | 10 |
11 | -------------------------------------------------------------------------------- /Grid/Custom/view/adminhtml/web/template/content-type/homepage-grid-item/default/preview.html: -------------------------------------------------------------------------------- 1 | 7 | 8 |
13 | 14 | 15 | 16 |
17 |
18 |
19 |
20 |
21 | -------------------------------------------------------------------------------- /Grid/Custom/view/adminhtml/web/template/content-type/homepage-grid/default/master.html: -------------------------------------------------------------------------------- 1 | 7 | 8 |
9 | 10 |
11 | -------------------------------------------------------------------------------- /Grid/Custom/view/adminhtml/web/template/content-type/homepage-grid/default/preview.html: -------------------------------------------------------------------------------- 1 | 7 | 8 |
13 | 14 | 15 |
16 | -------------------------------------------------------------------------------- /Grid/Custom/view/frontend/layout/default.xml: -------------------------------------------------------------------------------- 1 | 2 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | Grid_Custom/js/content-type/homepage-grid/appearance/default/widget 16 | 17 | 18 | 19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /Grid/Custom/view/frontend/web/css/source/_module.less: -------------------------------------------------------------------------------- 1 | // /** 2 | // * Copyright © Magento, Inc. All rights reserved. 3 | // * See COPYING.txt for license details. 4 | // */ 5 | 6 | & when (@media-common = true) { 7 | .pagebuilder-homepage-grid { 8 | &:extend(.page-main); 9 | margin: 0 auto !important; 10 | padding: 0 20px !important; 11 | display: grid; 12 | grid-gap: 10px; 13 | grid-template-columns: 1fr 1fr 1fr; 14 | grid-template-rows: 270px 370px 270px; 15 | 16 | .pagebuilder-homepage-grid-item { 17 | &:nth-child(1) { 18 | grid-column: ~"2 / 4"; 19 | grid-row: 1; 20 | } 21 | &:nth-child(2) { 22 | grid-column: 1 ; 23 | grid-row: ~"1 / 3"; 24 | } 25 | &:nth-child(3) { 26 | grid-column: 2; 27 | grid-row: 2; 28 | } 29 | &:nth-child(4) { 30 | grid-column: 3; 31 | grid-row: ~"2 / 4"; 32 | } 33 | &:nth-child(5) { 34 | grid-column: ~"1 / 3"; 35 | grid-row: 3; 36 | } 37 | } 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /Grid/Custom/view/frontend/web/js/content-type/homepage-grid/appearance/default/widget.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright © Magento, Inc. All rights reserved. 3 | * See COPYING.txt for license details. 4 | */ 5 | define([], function () { 6 | 'use strict'; 7 | 8 | return function (config, element) { 9 | console.log('Hello World'); 10 | }; 11 | }); 12 | -------------------------------------------------------------------------------- /Image/LazyLoading/composer.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "image/lazy-loading-image", 3 | "description": "Image extension that adds lazy loading", 4 | "require": { 5 | "magento/framework": "*", 6 | "magento/module-page-builder": "*", 7 | "php": "~7.1.3||~7.2.0" 8 | }, 9 | "type": "magento2-module", 10 | "license": [ 11 | "proprietary" 12 | ], 13 | "authors": [ 14 | { 15 | "name": "Bruce Denham", 16 | "email": "bdenham@adobe.com" 17 | } 18 | ], 19 | "autoload": { 20 | "files": [ 21 | "registration.php" 22 | ] 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /Image/LazyLoading/etc/module.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /Image/LazyLoading/registration.php: -------------------------------------------------------------------------------- 1 | 2 | 8 | 9 | 10 | 11 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /Image/LazyLoading/view/adminhtml/web/template/content-type/image/full-width/master.html: -------------------------------------------------------------------------------- 1 | 7 | 8 |
9 | 10 | 14 | 18 | 19 | 20 | 21 | 25 | 29 | 30 | 31 |
36 |
37 |
38 | -------------------------------------------------------------------------------- /Image/LazyLoading/view/adminhtml/web/template/content-type/image/full-width/preview.html: -------------------------------------------------------------------------------- 1 | 7 | 8 |
9 | 10 |
11 | 12 | 13 | 14 | 18 |
23 |
24 |
25 |
26 | -------------------------------------------------------------------------------- /Image/LazyLoading/view/base/layout/default.xml: -------------------------------------------------------------------------------- 1 | 2 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /Image/LazyLoading/view/base/web/js/resource/lazysizes/lazySizesConfig.js: -------------------------------------------------------------------------------- 1 | // This is the recommended way to customize config settings for lazysizes. 2 | // The default config settings are found here: https://github.com/aFarkas/lazysizes#js-api---options 3 | // Examples of a few customizations are shown here. 4 | 5 | (function () { 6 | window.lazySizesConfig = window.lazySizesConfig || {}; 7 | window.lazySizesConfig.loadMode = 1; 8 | window.lazySizesConfig.expand = 0; 9 | 10 | // These are settings for lazysizes' nativeLoading plugin that supports future native lazyloading. 11 | // I've commented it out because it seems a bit flaky. Feel free to uncomment and see for yourself. 12 | // Read more here: https://github.com/aFarkas/lazysizes/tree/gh-pages/plugins/native-loading 13 | 14 | // window.lazySizesConfig.nativeLoading = { 15 | // setLoadingAttribute: true, 16 | // disableListeners: { 17 | // scroll: true 18 | // }, 19 | // }; 20 | })(); 21 | -------------------------------------------------------------------------------- /Image/LazyLoading/view/base/web/js/resource/lazysizes/ls.attrchange.min.js: -------------------------------------------------------------------------------- 1 | /*! lazysizes - v5.1.1 */ 2 | !function(a,b){if(a){var c=function(){b(a.lazySizes),a.removeEventListener("lazyunveilread",c,!0)};b=b.bind(null,a,a.document),"object"==typeof module&&module.exports?b(require("lazysizes")):a.lazySizes?c():a.addEventListener("lazyunveilread",c,!0)}}("undefined"!=typeof window?window:0,function(a,b,c){"use strict";var d=function(){var e,f,g,h,i=c.cfg,j={"data-bgset":1,"data-include":1,"data-poster":1,"data-bg":1,"data-script":1},k="(\\s|^)("+i.loadedClass,l=b.documentElement,m=function(a){c.rAF(function(){c.rC(a,i.loadedClass),i.unloadedClass&&c.rC(a,i.unloadedClass),c.aC(a,i.lazyClass),("none"==a.style.display||a.parentNode&&"none"==a.parentNode.style.display)&&setTimeout(function(){c.loader.unveil(a)},0)})},n=function(a){var b,c,d,e;for(b=0,c=a.length;b 2 | 3 | 4 | 5 | large 6 | 7 | 8 | default 9 | Default 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | Quote_Custom/js/content-type/custom-quote/wysiwyg/tinymce4/component-initializer 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | -------------------------------------------------------------------------------- /Quote/Custom/etc/di.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Quote_Custom/js/content-type/custom-quote/appearance/default/widget 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /Quote/Custom/etc/module.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /Quote/Custom/registration.php: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /Quote/Custom/view/adminhtml/web/css/images/content-type/custom-quote/appearance/icon-pagebuilder-black-swatch.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | icon-pagebuilder-black-swatch 5 | Created with Sketch. 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /Quote/Custom/view/adminhtml/web/css/images/content-type/custom-quote/appearance/icon-pagebuilder-blue-swatch.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | icon-pagebuilder-blue-swatch 5 | Created with Sketch. 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /Quote/Custom/view/adminhtml/web/css/images/content-type/custom-quote/appearance/icon-pagebuilder-green-swatch.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | icon-pagebuilder-green-swatch 5 | Created with Sketch. 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /Quote/Custom/view/adminhtml/web/css/images/content-type/custom-quote/appearance/icon-pagebuilder-purple-swatch.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | icon-pagebuilder-purple-swatch 5 | Created with Sketch. 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /Quote/Custom/view/adminhtml/web/css/images/content-type/custom-quote/appearance/icon-pagebuilder-quote.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Quote/Custom/view/adminhtml/web/css/images/content-type/custom-quote/appearance/icon-pagebuilder-red-swatch.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | icon-pagebuilder-red-swatch 5 | Created with Sketch. 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /Quote/Custom/view/adminhtml/web/css/source/_module.less: -------------------------------------------------------------------------------- 1 | @import "content-type/custom-quote/_import.less"; 2 | -------------------------------------------------------------------------------- /Quote/Custom/view/adminhtml/web/css/source/content-type/custom-quote/_import.less: -------------------------------------------------------------------------------- 1 | @import '_default.less'; -------------------------------------------------------------------------------- /Quote/Custom/view/adminhtml/web/js/content-type/custom-quote/wysiwyg/tinymce4/component-initializer.js: -------------------------------------------------------------------------------- 1 | define(['jquery', 'mage/adminhtml/wysiwyg/events'], function ($, WysiwygEvents) { 2 | 'use strict'; 3 | 4 | /** 5 | * ComponentInitializer class 6 | * 7 | * @constructor 8 | */ 9 | function ComponentInitializer() { 10 | 11 | } 12 | 13 | /** 14 | * Initialize the WYSIWYG instance 15 | * 16 | * @param wysiwyg 17 | */ 18 | ComponentInitializer.prototype.initialize = function (wysiwyg) { 19 | var tinymce = wysiwyg.getAdapter(); 20 | 21 | this.$element = $("#" + wysiwyg.elementId); 22 | this.config = wysiwyg.config; 23 | 24 | tinymce.eventBus.attachEventHandler(WysiwygEvents.afterFocus, this.onFocus.bind(this)); 25 | tinymce.eventBus.attachEventHandler(WysiwygEvents.afterBlur, this.onBlur.bind(this)); 26 | }; 27 | 28 | /** 29 | * Called when TinyMCE is focused 30 | */ 31 | ComponentInitializer.prototype.onFocus = function () { 32 | var self = this; 33 | 34 | // If there isn't enough room for a left-aligned toolbar, right align it 35 | if ($(window).width() < 36 | this.$element.offset().left + parseInt(this.config.adapter_config.minToolbarWidth, 10) 37 | ) { 38 | this.$element.addClass("_right-aligned-toolbar"); 39 | } 40 | else { 41 | this.$element.removeClass("_right-aligned-toolbar"); 42 | } 43 | 44 | $.each( 45 | this.config.adapter_config.parentSelectorsToUnderlay, 46 | function (i, selector) { 47 | self.$element.closest(selector).css("z-index", 100); 48 | } 49 | ); 50 | }; 51 | 52 | /** 53 | * Called when TinyMCE is blurred 54 | */ 55 | ComponentInitializer.prototype.onBlur = function () { 56 | var self = this; 57 | 58 | $.each( 59 | this.config.adapter_config.parentSelectorsToUnderlay, 60 | function (i, selector) { 61 | self.$element.closest(selector).css("z-index", ""); 62 | } 63 | ); 64 | }; 65 | 66 | return ComponentInitializer; 67 | }); -------------------------------------------------------------------------------- /Quote/Custom/view/adminhtml/web/template/content-type/custom-quote/default/master.html: -------------------------------------------------------------------------------- 1 | 2 |
3 |
4 |
5 |
6 |
7 | -------------------------------------------------------------------------------- /Quote/Custom/view/adminhtml/web/template/content-type/custom-quote/default/preview.html: -------------------------------------------------------------------------------- 1 | 2 |
3 | 4 | 5 | 6 | 7 |
11 | 12 | 13 | 14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |