Preference page shows duplicated code from base.html.twig file

Product Support
1

Problem
My problem is: I created a new theme for mautic and I have header and footer in the theme. I want to show header and footer for my preference page and also for a simple text message when I click on the unsubscribe link of the theme.

For the simple text, it works fine but for the preference page, it shows double header and footer.

Implementation
I have header and footer in my base.html.twig file. So, it can show unsubscribe message and preference page with header and footer.

Is there anybody who created theme with header and footer for showing message and also to show them in preference page ?

2

Hello @joeyk . If you know about this issue or any other person then please inform me. I really need a solution for this issue. I didnot get any response from the community about this issue. I noticed that most of the poeple don’t even use preference pages for unsubscribe links of emails or they do not use header and footer to follow them as standard. Please try something for unsubscribe page as header and footer. I think there is bug in mautic.

Issue:
If we place the header and footer in base.html.twig file then it will show two headers and footers in the preference page. This is really a bug in mautic. Please consider this as bug. It is really getting complicated to find workaround for this.

3

Hi, sorry for the trouble. Im not sure what do you mean as header and footer. Can you post an example page here?

4

sure @joeyk . I am preparing a small description with steps that will explain how you can reproduce the issue.

5

@joeyk You can try these steps to reproduce this issue. I also created a bug on github for this link is given below :

  1. select any theme (legacy or grapesjs) from mautic (I will select for now grapesjs theme) and download it.
  2. open it in any code editor.
  3. Open config.json file and change the things according to your testing or just copy the given below code and paste it.
{
  "name": "mautic Test DoubleCodeIssue",
  "author": "Mautic team",
  "authorUrl": "https://mautic.org",
  "builder": ["grapesjsbuilder"],
  "features": [
    "email",
    "page"
  ]
}
  1. open base.html.twig file and place the code is given below and save it.
<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        {% if page is defined %}
        <title>{pagetitle}</title>
            <meta name="description" content="{pagemetadescription}">
            {% endif %}
        {% block stylesheets %}{% endblock %}
            {{ outputHeadDeclarations() }}
    </head>
    <body>
        {{ outputScripts('bodyOpen') }}
        <p>This is the base file</p>
        {% block content %}{% endblock %}
        {{ outputScripts('bodyClose') }}
    </body>
</html>
  1. Open message.html.twig file and place this given below code and save it.
{% extends ":"~template~":base.html.twig" %}

{% block stylesheets %}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" type="text/css" />
{% endblock %}

{% block content %}
    <div>
    This is message file......
        {{ message|raw }}
        {% if content is defined %}
        <div>{{ content|raw }}</div>
        {% endif %}
    </div>
{% endblock %}
  1. Open page.html.twig file and place this code the given below code and save it.
{% block content %}
<div data-section-wrapper="1">
    <center>
        <table data-section="1" style="width: 600;" width="600" cellpadding="0" cellspacing="0">
            <tbody>
                <tr>
                    <td>
                        <div data-slot-container="1" style="min-height: 30px">
                            <div data-slot="text">
                                <br>
                                <h2>Hello there!</h2>
                                <br>
                                This is Page File...
                                <br>
                                <br>
                                <br>
                            </div>
                        </div>
                    </td>
                </tr>
            </tbody>
        </table>
    </center>
</div>
{% endblock %}

  1. Now save this theme and make a .zip file.

  2. Go to mauitc and click on top right corner setting icon and click on “Themes” and click on “Install” to upload theme.

  3. When theme is uploaded, now on left side on mautic, go to components → Landing Pages and click on “+ New” and then select the uploaded theme and then go to builder and paste “{saveprefsbutton}” this text just under the text “This is Page File…” save this landing page(Note: “Set as preference center page” should be “Yes”).

  4. Now create a new email in mautic with New ‘Segment Email’ and select the uploaded theme.

  5. In the same email builder select “Contact segment” (or create any test segment with test contact) and select “Preference center page”, which you created in step 6.

  6. Click on top right corner setting icon and click on “Configuration”. you will see on left side the list of settings, click on "“Email settings”. Here you will see at the end “Unsubscribe Settings”. In “Unsubscribe Settings” please mark following fields to “Yes” :

  • Show contact preference settings
  • Show contact segment preferences

you can select all of them but at least click “Yes” for these two and then save these configuration settings.

  1. Now click on “save and close” button and then click on “send”.

  2. After sending the email check the email you just send. If you didnot received the emial then you can go to the specific email in mautic and click on “Contacts” thier will be list of all contacts, click on any contact and click on the “Event Name” with the email you just sent.

  3. Now click on the unsubscribe link of this email. You will the result as given below :

image
image1327×502 3.3 KB

Why it is showing double base file here and also why it is showing message file here.

Desired output

it should only show the one base file and only the page file here.

6

Should be mentioned, that this might be the root cause: