fix(preview): Fix preview template to take theme template into account

dist/themes/cms-custom-theme/composer.json

@@ -0,0 +1,9 @@
+{
+  "name": "monsieurbiz/cms-custom-theme",
+  "title": "CMS custom theme",
+  "extra": {
+    "sylius-theme": {
+      "title": "CMS custom theme"
+    }
+  }
+}

dist/themes/cms-custom-theme/templates/bundles/MonsieurBizSyliusCmsPagePlugin/Shop/Page/show.html.twig

@@ -0,0 +1,28 @@
+{% extends '@SyliusShop/layout.html.twig' %}
+
+{% set metaTitle = page.metaTitle ? page.metaTitle : page.title %}
+
+{% block title %}{{ metaTitle }}{% endblock %}
+
+{% block metatags %}
+    {{ parent() }}
+    <meta property="og:type" content="page" />
+    {% if metaTitle is not empty %}
+        <meta property="og:title" content="{{ metaTitle }}"/>
+    {% endif %}
+    {% if page.metaDescription is not empty %}
+        <meta name="description" property="og:description" content="{{ page.metaDescription }}"/>
+    {% endif %}
+    {% if page.metaKeywords is not empty %}
+        <meta name="keywords" content="{{ page.metaKeywords }}"/>
+    {% endif %}
+{% endblock %}
+
+{% block content %}
+    <div style="background-color: #f8f9fa; margin-top: 50px; padding: 50px; border-radius: 5px; margin-bottom: 20px;">
+        <h1 class="ui monster dividing header">{{ page.title }}</h1>
+        <div>
+            {{ page.content|monsieurbiz_richeditor_render_field }}
+        </div>
+    </div>
+{% endblock %}

dist/themes/cms-custom-theme/templates/bundles/MonsieurBizSyliusRichEditorPlugin/Shop/UiElement/text.html.twig

@@ -0,0 +1,13 @@
+{#
+    UI Element template
+    type: text
+    element fields :
+        content
+        align
+#}
+{% set align = element.align is defined and element.align is not empty ? element.align : 'inherit' %}
+{% if element is not empty and element.content is not empty %}
+<div style="text-align: {{align}};background-color: #dfe0e1; padding: 20px;">
+    {{ element.content | raw }}
+</div>
+{% endif %}

src/Resources/config/routing/admin.yaml

@@ -47,3 +47,5 @@ monsieurbiz_cms_page_admin_page_preview:
     defaults:
         _controller: monsieurbiz_cms_page.controller.page::previewAction
         template: '@MonsieurBizSyliusCmsPagePlugin\\Admin\\Page\\preview.html.twig'
+        _sylius:
+            section: shop

src/Resources/translations/messages.en.yaml

@@ -24,6 +24,8 @@ monsieurbiz_cms_page:
     actions:
       create: 'Create a new page'
       preview: 'Preview'
+    banner:
+      preview: 'Preview'
 monsieurbiz_menu:
     provider:
         page: 'Page'

src/Resources/translations/messages.fr.yaml

@@ -24,6 +24,8 @@ monsieurbiz_cms_page:
     actions:
       create: 'Créer une nouvelle page'
       preview: 'Prévisualiser'
+    banner:
+      preview: 'Prévisualisation'
 monsieurbiz_menu:
     provider:
         page: 'Page'

src/Resources/translations/messages.pl.yaml

@@ -24,6 +24,8 @@ monsieurbiz_cms_page:
         actions:
             create: 'Utwórz nową stronę'
             preview: 'Podgląd'
+        banner:
+            preview: 'Podgląd'
 monsieurbiz_menu:
     provider:
         page: 'Strona'

src/Resources/views/Admin/Page/preview.html.twig

@@ -1,4 +1,31 @@
-{% extends '@MonsieurBizSyliusCmsPagePlugin/Shop/preview_layout.html.twig' %}
+{# This extends takes account of the potential theme template #}
+{% extends '@MonsieurBizSyliusCmsPagePlugin/Shop/Page/show.html.twig' %}
+
+{% block top %}
+    <div style="
+        text-transform: uppercase;
+        line-height: 30px;
+        z-index: 999;
+        position:fixed;
+        top:0;
+        left:0;
+        height: 30px;
+        background-color: red;
+        width: 100%;
+        color: white;
+        font-weight: bold;
+        padding: 0 30px;
+        display: flex;
+        justify-content: space-between;
+    ">
+        <div>
+            <a style="color: white;" href="{{ app.request.headers.get('referer') }}">&#x21A9; {{ 'monsieurbiz_cms_page.ui.back_to_admin' | trans }}</a>
+        </div>
+        <div>{{ 'monsieurbiz_cms_page.ui.banner.preview' | trans }}</div>
+    </div>
+
+    {{ parent() }}
+{% endblock %}
 
 {% block title %}{{ page.metaTitle }}{% endblock %}
 
@@ -15,11 +42,3 @@
         <meta name="keywords" content="{{ page.metaKeywords }}"/>
     {% endif %}
 {% endblock %}
-
-{% block content %}
-    <h1 class="ui monster dividing header">{{ page.title }}</h1>
-    <div>
-        {{ page.content|monsieurbiz_richeditor_render_field }}
-    </div>
-{% endblock %}
-