Skip to content

Commit c01f845

Browse files
fmontesfmontes
committed
feat(UVE): Enhance UVE integration with updated subscription and data attributes
- Updated JavaScript integration for UVE in layout templates to use createSubscription method. - Added data attributes for UVE in row, column, and container templates for improved real-time updates. - Enhanced documentation to guide users on implementing UVE JavaScript integration.
1 parent 45ecddd commit c01f845

7 files changed

Lines changed: 136 additions & 15 deletions

File tree

‎examples/dotcms-laravel/resources/js/app.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import './bootstrap';
22

33
// dotUVE is a global variable that is set by the dotCMS UVE JavaScript API
44
if (window.dotUVE) {
5-
window.dotUVE.createUVESubscription('changes', (changes) => {
5+
window.dotUVE.createSubscription('changes', (changes) => {
66
window.location.reload();
77
})
88
} else {

‎examples/dotcms-php/templates/layout.php‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,5 +23,14 @@
2323
</div>
2424
</footer>
2525
<?php endif; ?>
26+
27+
<script src="https://demo.dotcms.com/ext/uve/dot-uve.js"></script>
28+
<script>
29+
if (window.dotUVE) {
30+
window.dotUVE.createSubscription('changes', (changes) => {
31+
window.location.reload();
32+
})
33+
}
34+
</script>
2635
</body>
2736
</html>

‎examples/dotcms-php/templates/partials/column.php‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,10 @@
1313
$columnClasses .= ' ' . htmlspecialchars($column->styleClass);
1414
}
1515
?>
16-
<div class="<?= $columnClasses ?>">
16+
<div
17+
data-dot-object="column"
18+
class="<?= $columnClasses ?>"
19+
>
1720
<?php
1821
if (isset($column->containers) && is_array($column->containers)) {
1922
foreach ($column->containers as $containerRef) {

‎examples/dotcms-php/templates/partials/container.php‎

Lines changed: 63 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -7,19 +7,71 @@
77
global $pageAsset;
88

99
$identifier = $containerRef->identifier ?? null;
10+
$uuid = $containerRef->uuid ?? null;
1011
$contentlets = $containerRef->contentlets ?? null;
1112

12-
if ($contentlets) {
13-
foreach ($contentlets as $contentlet) {
14-
$contentTypeVar = $contentlet->contentType ?? 'unknown';
15-
$templatePath = dirname(__DIR__) . '/content-type/' . strtolower($contentTypeVar) . '.php';
13+
// Container attributes for UVE
14+
$containerAttrs = [
15+
'data-dot-object' => 'container',
16+
'data-dot-identifier' => $identifier,
17+
'data-dot-uuid' => $uuid,
18+
'data-dot-accept-types' => $containerRef->acceptTypes ?? '',
19+
'data-max-contentlets' => $containerRef->maxContentlets ?? 0
20+
];
1621

17-
if (file_exists($templatePath)) {
18-
include $templatePath;
19-
} else {
20-
include dirname(__DIR__) . '/content-type/content-type-not-found.php';
21-
}
22+
// Build container HTML attributes string
23+
$containerHtmlAttrs = '';
24+
foreach ($containerAttrs as $attr => $value) {
25+
if ($value !== null && $value !== '') {
26+
$containerHtmlAttrs .= ' ' . $attr . '="' . htmlspecialchars($value) . '"';
2227
}
23-
} else {
24-
echo "<!-- Container $identifier doesn't have contentlets -->";
2528
}
29+
?>
30+
<div<?= $containerHtmlAttrs ?>>
31+
<?php
32+
if ($contentlets) {
33+
foreach ($contentlets as $contentlet) {
34+
// Contentlet attributes for UVE
35+
$contentletAttrs = [
36+
'data-dot-object' => 'contentlet',
37+
'data-dot-identifier' => $contentlet->identifier ?? '',
38+
'data-dot-inode' => $contentlet->inode ?? '',
39+
'data-dot-type' => $contentlet->contentType ?? '',
40+
'data-dot-basetype' => $contentlet->baseType ?? '',
41+
'data-dot-title' => $contentlet->title ?? '',
42+
'data-dot-container' => json_encode([
43+
'identifier' => $identifier,
44+
'uuid' => $uuid,
45+
'acceptTypes' => $containerRef->acceptTypes ?? [],
46+
'maxContentlets' => $containerRef->maxContentlets ?? 0,
47+
'variantId' => $containerRef->variantId ?? null
48+
])
49+
];
50+
51+
// Build contentlet HTML attributes string
52+
$contentletHtmlAttrs = '';
53+
foreach ($contentletAttrs as $attr => $value) {
54+
if ($value !== null && $value !== '') {
55+
$contentletHtmlAttrs .= ' ' . $attr . '="' . htmlspecialchars($value) . '"';
56+
}
57+
}
58+
59+
$contentTypeVar = $contentlet->contentType ?? 'unknown';
60+
$templatePath = dirname(__DIR__) . '/content-type/' . strtolower($contentTypeVar) . '.php';
61+
?>
62+
<div<?= $contentletHtmlAttrs ?>>
63+
<?php
64+
if (file_exists($templatePath)) {
65+
include $templatePath;
66+
} else {
67+
include dirname(__DIR__) . '/content-type/content-type-not-found.php';
68+
}
69+
?>
70+
</div>
71+
<?php
72+
}
73+
} else {
74+
echo "<!-- Container $identifier doesn't have contentlets -->";
75+
}
76+
?>
77+
</div>

‎examples/dotcms-php/templates/partials/row.php‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,10 @@
77
$rowStyleClass = isset($row->styleClass) ? ' ' . htmlspecialchars($row->styleClass) : '';
88
?>
99
<div class="container">
10-
<div class="row<?= $rowStyleClass ?>">
10+
<div
11+
data-dot-object="row"
12+
class="row<?= $rowStyleClass ?>"
13+
>
1114
<?php
1215
if (isset($row->columns) && is_array($row->columns)) {
1316
foreach ($row->columns as $column) {

‎examples/dotcms-symfony/assets/app.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ console.log('This log comes from assets/app.js - welcome to AssetMapper! 🎉');
1111

1212
// dotUVE is a global variable that is set by the dotCMS UVE JavaScript API
1313
if (window.dotUVE) {
14-
window.dotUVE.createUVESubscription('changes', (changes) => {
14+
window.dotUVE.createSubscription('changes', (changes) => {
1515
window.location.reload();
1616
})
1717
} else {

‎instructions/guide.md‎

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -816,6 +816,58 @@ $containerAttrs = [
816816
?>
817817
</div>
818818
```
819+
### Step 18.4: Adding UVE JavaScript Integration
820+
821+
To enable real-time communication between the Universal Visual Editor and your web application, add the following JavaScript code to your layout template. Update `templates/layout.php` to include the UVE script and subscription:
822+
823+
```php
824+
<!DOCTYPE html>
825+
<html>
826+
<head>
827+
<title><?= htmlspecialchars($pageAsset->page->title ?? 'dotCMS Page') ?></title>
828+
<link rel="stylesheet" href="/css/app.css">
829+
<link rel="stylesheet" href="/css/layout.css">
830+
</head>
831+
<body>
832+
<?php if ($pageAsset->layout->header): ?>
833+
<header>
834+
<?php include __DIR__ . '/navigation.php'; ?>
835+
</header>
836+
<?php endif; ?>
837+
838+
<main>
839+
<?php include __DIR__ . '/page.php'; ?>
840+
</main>
841+
842+
<?php if ($pageAsset->layout->footer): ?>
843+
<footer>
844+
<div class="footer-content container">
845+
<p>&copy; <?= date('Y') ?> Your Company Name. All rights reserved.</p>
846+
</div>
847+
</footer>
848+
<?php endif; ?>
849+
850+
<!-- UVE JavaScript Integration -->
851+
<script src="https://demo.dotcms.com/ext/uve/dot-uve.js"></script>
852+
<script>
853+
if (window.dotUVE) {
854+
window.dotUVE.createSubscription('changes', (changes) => {
855+
window.location.reload();
856+
});
857+
}
858+
</script>
859+
</body>
860+
</html>
861+
```
862+
863+
This JavaScript integration:
864+
1. Loads the UVE script from your dotCMS instance
865+
2. Creates a subscription to listen for content changes
866+
3. Automatically reloads the page when changes are made in the UVE
867+
4. Ensures content authors see their changes immediately
868+
869+
The UVE script must be loaded from your dotCMS instance (replace `demo.dotcms.com` with your instance URL). The subscription to 'changes' ensures your page stays in sync with the content being edited in the UVE.
870+
819871
### Important Notes About UVE Implementation
820872

821873
1. **Data Attributes**: All UVE data attributes start with `data-dot-` prefix
@@ -824,6 +876,8 @@ $containerAttrs = [
824876
4. **Error Handling**: Always validate data before outputting attributes
825877
5. **Content Type Templates**: Keep content type templates focused on rendering content only
826878
6. **Inheritance**: The UVE attributes follow the same hierarchy as the page structure
879+
7. **JavaScript Integration**: The UVE script must be loaded from your dotCMS instance
880+
8. **Real-time Updates**: The page will automatically reload when content is changed in the UVE
827881

828882
## Troubleshooting
829883

0 commit comments

Comments
 (0)