Forum

Thread tagged as: Question, Field-Types

Snow Day Alert/Announcement

I am in the process of integrating Perch into a site I do for a private school. I am doing just fine with the Perch placeholders and syntax, but there is one bit of custom functionality I would like to implement.

How fitting that today is the school's first Snow Day.

I'd like to add a field for the editor (the director of the school) to turn on and edit when there is a delay, closing. I have the front end code done (HTML and CSS). I just need to roll it into Perch.

Admin Panel Requirements 1. The editor signs in and selects "alert" or "announcement", which will be displayed on the homepage.

  1. There is a check box to turn on the alert and open the field options which consist of a drop down and a text field.

  2. The drop down is for the alert type which controls the background color of the alert. The options would be alert, warning and maybe announcement.

  3. The text field is for the Editor to input the message for the alert ("School is closed").

I have no problem working in HTML/CSS on my own and I know enough PHP to follow instructions if I have a little guidance.

Thanks in advance for your time and help!

Blair

Ps. To see the manual version of the alert in action, just visit the school site today (Snow Day!) at:

https://reveilleweekday.com/index.php
Blair Christopher

Blair Christopher 0 points

  • 6 years ago
Drew McLellan

Drew McLellan 2638 points
Perch Support

6 years ago

Always start with the HTML and work back. What's the HTML you need to output? We can then turn it into a template.
Blair Christopher

Blair Christopher 0 points

6 years ago 
<div data-alert class="warning-box">
     Snow Day Text.
      <a href="#" class="close">×</a>
</div>

I know the PHP to Hide/Show HTML.

<body>
    <?php if (true) : ?>
        <p>It is true</p>
    <?php endif; ?>
</body>

I suppose what I'm looking for is how to pass the conditions (checkbox is checked) from the Perch backend to the PHP.
Drew McLellan

Drew McLellan 2638 points
Perch Support

6 years ago

So the first step would be:

<perch:content id="show_alert" type="checkbox" value="1" label="Show alert" order="1" suppress="true" />

<perch:if exists="show_alert">
    <div data-alert class="<perch:content id="alert_type" label="Type of alert" type="select" options="Alert|alert-box,Warning|warning-box,Announcement|announcement-box" order="2" />">
        <perch:content id="alert_message" type="textarea" markdown="true" editor="markitup" label="Message" />
        <a href="#" class="close">×</a>
    </div>
</perch:if>
Blair Christopher

Blair Christopher 0 points

6 years ago

So, is the first part looks like the Template tags for the dropdown.

<perch:content id="show_alert" type="checkbox" value="1" label="Show alert" order="1" suppress="true" />

The second part includes the Template tags for the dropdown and the text area.

<perch:if exists="show_alert">
    <div data-alert class="<perch:content id="alert_type" label="Type of alert" type="select" options="Alert|alert-box,Warning|warning-box,Announcement|announcement-box" order="2" />">
        <perch:content id="alert_message" type="textarea" markdown="true" editor="markitup" label="Message" />
        <a href="#" class="close">×</a>
    </div>
</perch:if>

So, I just need to name the Template and call it with a placeholder from my homepage HTML.

Going to try this. I'll report back, thanks so much for the help! I really appreciate it.
Blair Christopher

Blair Christopher 0 points

6 years ago

Oh, it worked so beautifully!

Thank you again so much! You know this means I won't have to get a wakeup call at 4 AM to put the Snow Day Alert up on the website!

Thanks again!
Drew McLellan

Drew McLellan 2638 points
Perch Support

6 years ago

No problem!