| 1 |
# Page Builder Integrations |
| 2 |
|
| 3 |
CartFlows integrates with five major WordPress page builders, allowing users to design checkout pages, opt-in forms, and landing pages using their preferred tool. |
| 4 |
|
| 5 |
## Supported Page Builders |
| 6 |
|
| 7 |
| Page Builder | Integration Type | Module | |
| 8 |
|-------------|-----------------|--------| |
| 9 |
| Gutenberg (Block Editor) | Native Blocks | `modules/gutenberg/` | |
| 10 |
| Elementor | Custom Widgets | `modules/elementor/` | |
| 11 |
| Beaver Builder | Custom Modules | `modules/beaver-builder/` | |
| 12 |
| Bricks | Custom Elements | `modules/bricks/` | |
| 13 |
| Divi | Template Importer | `classes/importer/` | |
| 14 |
|
| 15 |
--- |
| 16 |
|
| 17 |
## Gutenberg (WordPress Block Editor) |
| 18 |
|
| 19 |
**Module:** `modules/gutenberg/` |
| 20 |
|
| 21 |
CartFlows registers four native Gutenberg blocks: |
| 22 |
|
| 23 |
| Block Name | Block Key | Purpose | |
| 24 |
|-----------|-----------|---------| |
| 25 |
| Checkout Form | `cartflows/checkout-form` | Embeds CartFlows checkout in any page | |
| 26 |
| Optin Form | `cartflows/optin-form` | Embeds opt-in form in any page | |
| 27 |
| Order Detail Form | `cartflows/order-detail-form` | Shows order details after purchase | |
| 28 |
| Next Step Button | `cartflows/next-step-button` | Navigation button between funnel steps | |
| 29 |
|
| 30 |
### Registration |
| 31 |
|
| 32 |
Blocks are registered via `class-cartflows-block-loader.php` which calls `register_block_type()` for each block using the compiled block assets in `modules/gutenberg/build/`. |
| 33 |
|
| 34 |
### Spectra Compatibility |
| 35 |
|
| 36 |
`class-cartflows-spectra-compatibility.php` handles conflicts and enhancements when **Spectra** (Ultimate Addons for Gutenberg) is also active. |
| 37 |
|
| 38 |
--- |
| 39 |
|
| 40 |
## Elementor |
| 41 |
|
| 42 |
**Module:** `modules/elementor/` |
| 43 |
|
| 44 |
CartFlows registers four Elementor widgets extending `\Elementor\Widget_Base`: |
| 45 |
|
| 46 |
| Widget | Class | Purpose | |
| 47 |
|--------|-------|---------| |
| 48 |
| Checkout Form | Checkout Form Widget | Full checkout form | |
| 49 |
| Optin Form | Optin Form Widget | Lead capture form | |
| 50 |
| Order Details Form | Order Details Widget | Post-purchase details | |
| 51 |
| Next Step Button | Next Step Widget | Funnel navigation button | |
| 52 |
|
| 53 |
### Registration |
| 54 |
|
| 55 |
Widgets are registered on the `elementor/widgets/widgets_registered` hook. The module checks for Elementor's presence before loading. |
| 56 |
|
| 57 |
### Styling |
| 58 |
|
| 59 |
Widget CSS is compiled and enqueued separately when Elementor is active. Each widget supports Elementor's styling controls (colours, typography, spacing) where applicable. |
| 60 |
|
| 61 |
--- |
| 62 |
|
| 63 |
## Beaver Builder |
| 64 |
|
| 65 |
**Module:** `modules/beaver-builder/` |
| 66 |
|
| 67 |
CartFlows registers two Beaver Builder modules extending `FLBuilderModule`: |
| 68 |
|
| 69 |
| Module | Purpose | |
| 70 |
|--------|---------| |
| 71 |
| Checkout Form | Checkout form for BB pages | |
| 72 |
| Order Details Form | Order details display for BB pages | |
| 73 |
|
| 74 |
### Registration |
| 75 |
|
| 76 |
Modules are registered using `FLBuilder::register_module()`. The integration loads only when Beaver Builder is active. |
| 77 |
|
| 78 |
--- |
| 79 |
|
| 80 |
## Bricks |
| 81 |
|
| 82 |
**Module:** `modules/bricks/` |
| 83 |
|
| 84 |
CartFlows registers custom Bricks elements extending Bricks' element base class: |
| 85 |
|
| 86 |
| Element | Purpose | |
| 87 |
|---------|---------| |
| 88 |
| Optin Form | Opt-in form element for Bricks | |
| 89 |
| Order Details Form | Order details element for Bricks | |
| 90 |
|
| 91 |
### Registration |
| 92 |
|
| 93 |
Elements are registered using Bricks' element registration API. Widget CSS is enqueued when Bricks is active. |
| 94 |
|
| 95 |
--- |
| 96 |
|
| 97 |
## Divi |
| 98 |
|
| 99 |
**Integration:** Template importer (`classes/importer/`) |
| 100 |
|
| 101 |
Divi is supported through the template import system rather than a dedicated module. When importing a CartFlows template designed for Divi: |
| 102 |
|
| 103 |
1. `class-cartflows-importer.php` detects the Divi template format |
| 104 |
2. Template JSON is processed by the Divi batch importer |
| 105 |
3. Divi section and module settings are imported into the step's content |
| 106 |
|
| 107 |
**File:** `classes/importer/class-cartflows-divi-batch-process.php` |
| 108 |
|
| 109 |
--- |
| 110 |
|
| 111 |
## Template Importer |
| 112 |
|
| 113 |
All page builders benefit from the CartFlows Template Library, accessible via the **Import** button in the flow canvas: |
| 114 |
|
| 115 |
``` |
| 116 |
Flow Canvas → Add Step → Choose Template |
| 117 |
``` |
| 118 |
|
| 119 |
The importer (`classes/importer/`) handles: |
| 120 |
- Fetching templates from the CartFlows API |
| 121 |
- Detecting the active page builder |
| 122 |
- Dispatching to the correct builder-specific batch importer |
| 123 |
- Background processing for large imports |
| 124 |
|
| 125 |
### Supported Importers |
| 126 |
|
| 127 |
| Builder | Batch Importer Class | |
| 128 |
|---------|---------------------| |
| 129 |
| Elementor | `class-cartflows-elementor-batch-process.php` | |
| 130 |
| Gutenberg | `class-cartflows-gutenberg-batch-process.php` | |
| 131 |
| Divi | `class-cartflows-divi-batch-process.php` | |
| 132 |
| Beaver Builder | Handled via BB's import API | |
| 133 |
|
| 134 |
--- |
| 135 |
|
| 136 |
## Compatibilities Directory |
| 137 |
|
| 138 |
In addition to modules, the `compatibilities/` directory contains compatibility patches for specific theme and plugin combinations. These are separate from the page builder modules and handle edge cases such as: |
| 139 |
|
| 140 |
- Theme-specific styling conflicts |
| 141 |
- WooCommerce plugin conflicts |
| 142 |
- Caching plugin integrations |
| 143 |
- Payment gateway compatibility |
| 144 |
|
| 145 |
--- |
| 146 |
|
| 147 |
## Detecting the Active Page Builder |
| 148 |
|
| 149 |
CartFlows uses helper functions to detect which page builder is active on a given step: |
| 150 |
|
| 151 |
```php |
| 152 |
// Example helper pattern |
| 153 |
CartFlows_Helper::get_step_type_template( $step_id ); |
| 154 |
``` |
| 155 |
|
| 156 |
The active page builder is stored in step post meta and used to determine which editor to load and which template format to use. |
| 157 |
|
| 158 |
--- |
| 159 |
|
| 160 |
## Related Pages |
| 161 |
|
| 162 |
- [](Feature-ModulesFeature-Modules](Feature-Modules](Feature-Modules) |
| 163 |
- [](Architecture-OverviewArchitecture-Overview](Architecture-Overview](Architecture-Overview) |
| 164 |
- [](WordPress-Plugin-StructureWordPress-Plugin-Structure](WordPress-Plugin-Structure](WordPress-Plugin-Structure) |
| 165 |
- [](WooCommerce-IntegrationWooCommerce-Integration](WooCommerce-Integration](WooCommerce-Integration) |
| 166 |
|
