Forum

Thread tagged as: Question, Discussion

Better way to output contact details

Looking for suggestions really for the best method to setup and output multiple contact details in various areas of a site.

I currently have setup a shared multi-item region called Nurseries and which uses the template nursery.html. The region contains contact details for 3 nurseries, Barnwood, Longlevens and Quedgeley. Each have a class which provide styling differences. I use a slight variation of the nursery template on one of the calls using_nursery.html

I then output this region individually on every page of the site in the footer (footer.php), on the contact page (contact.php) and in a layout called nurseries (nurseries.php) that gets included on particular pages. Currently if I navigate to the contact page, the perch_content_custom(); function is being called 6 times. On other pages where only the footer is present, 3 times. And on pages where the nurseries layout and footer is present, 6 times.

I know it's no biggie, but I am trying to think of a better way to structure this and reduce the amount of times the function is called. I am using runway, any suggestions welcome.

nursery.html

<perch:content id="email" type="text" label="Email" required="true" suppress="true" order="100" />
<perch:content id="url" type="text" label="URL" replace="https://|" help="External map URL (optional)" suppress="true" order="110" />
<perch:content id="slug" type="slug" for="name" label="Slug" suppress="true" order="120" />

<p class="nursery-vcard-heading nursery-vcard-heading--<perch:content id="slug" type="slug" />"><perch:content id="name" type="text" label="Name" required="true" title="true" order="1" /></p>
<div class="vcard">
    <div class="adr">
    <p class="street-address"><perch:content id="address1" type="text" label="Address Line 1" required="true" order="2" /></p>
    <p class="street-address"><perch:content id="address2" type="text" label="Address Line 2" required="true" order="3" /></p>
    <p class="city"><perch:content id="locality" type="text" label="Town/City" required="true" order="4" /></p>
    <perch:if exists="url">
        <a href="<perch:content id="url" type="text" />" class="postal-code url"><perch:content id="postcode" type="text" label="Postcode" required="true" order="5" /></a>
    <perch:else />
      <span class="postal-code"><perch:content id="postcode" type="text" /></span>
    </perch:if>
    </div>
    <a href="tel:<perch:content id="phone" type="text" />" class="tel"><perch:content id="phone" type="text" label="Phone" required="true" order="6" /></a>
</div>

_nursery.html

        <h3 class="nursery-card-heading"><perch:content id="name" type="text" /></h3>
        <p class="nursery-card-location">Nursery</p>
    </div>
    <div class="nursery-card-body">
        <div class="vcard">
          <div class="adr">
                <p class="street-address"><perch:content id="address1" type="text" /></p>
                <perch:if exists="url">
                    <a href="<perch:content id="url" type="text" />" class="postal-code url"><perch:content id="postcode" type="text" /></a>
                <perch:else />
                  <span class="postal-code"><perch:content id="postcode" type="text" /></span>
                </perch:if>
          </div>
          <a href="tel:<perch:content id="phone" type="text" />" class="tel"><perch:content id="phone" type="text" label="Phone" required="true" order="6" /></a>
        </div>

contact.php

<section class="contact-top section">
            <div class="wrapper wrapper--fixed">        
            <div class="row">
                <div class="column col-s-6 col-l">
                    <div class="nursery-vcard mb-5 mb-l-0">
                        <?php
                          perch_content_custom('Nurseries', [
                              'filter'=>'slug',
                              'match'=>'contains',
                              'value'=>'barnwood',
                              'template'=>'nursery.html',
                          ]);
                        ?>
                    </div>
                </div>

                <div class="column col-s-6 col-l">
                    <div class="nursery-vcard mb-5 mb-l-0">
                        <?php
                          perch_content_custom('Nurseries', [
                              'filter'=>'slug',
                              'match'=>'contains',
                              'value'=>'longlevens',
                              'template'=>'nursery.html',
                          ]);
                        ?>
                    </div>
                </div>

                <div class="column col-s-6 col-l">
                    <div class="nursery-vcard mb-5 mb-s-0">
                        <?php
                          perch_content_custom('Nurseries', [
                              'filter'=>'slug',
                              'match'=>'contains',
                              'value'=>'quedgeley',
                              'template'=>'nursery.html',
                          ]);
                        ?>
                    </div>
                </div>

                <div class="column col-s-6 col-l">
                    <div class="contact-opening-times">
                      <p><span class="contact-label">Weekdays</span></p>
                        <p class="contact-times"><?php utility::setting('weekday'); ?></p>
                        <p><span class="contact-label">Weekends</span></p>
                        <p class="contact-times"><?php utility::setting('weekend'); ?></p>
                    </div>
                </div>
            </div>
            </div>
        </section>

footer.php

<div class="footer-top wrapper--wide">
        <div class="row row--collapse">
            <div class="column col-s-6 col-l">
              <div class="nursery-vcard">
                <?php
                  perch_content_custom('Nurseries', [
                  'filter'=>'slug',
                  'match'=>'contains',
                  'value'=>'barnwood',
                  'template'=>'nursery.html',
                  ]);
                ?>
              </div>
                <div class="footer-status mb-5 mb-l-0">
                  <svg class="icon icon--clock"><use xlink:href="<?php utility::asset('/svg/svg-defs.svg'); ?>#icon-clock"></use></svg>
                  <?php status(); ?>
                </div>
            </div>

            <div class="column col-s-6 col-l">
                <div class="nursery-vcard">
                    <?php
                      perch_content_custom('Nurseries', [
                          'filter'=>'slug',
                          'match'=>'contains',
                          'value'=>'longlevens',
                          'template'=>'nursery.html',
                      ]);
                    ?>
                </div>
                <div class="footer-status mb-5 mb-l-0">
                  <svg class="icon icon--clock"><use xlink:href="<?php utility::asset('/svg/svg-defs.svg'); ?>#icon-clock"></use></svg>
                  <?php status(); ?>
                </div>
            </div>

            <div class="column col-s-6 col-l">
                <div class="nursery-vcard">
                    <?php
                      perch_content_custom('Nurseries', [
                          'filter'=>'slug',
                          'match'=>'contains',
                          'value'=>'quedgeley',
                          'template'=>'nursery.html',
                      ]);
                    ?>
                </div>
                <div class="footer-status mb-5 mb-s-0">
                  <svg class="icon icon--clock"><use xlink:href="<?php utility::asset('/svg/svg-defs.svg'); ?>#icon-clock"></use></svg>
                  Opening early 2018
                </div>
            </div>

            <div class="column col-s-6 col-l">
                <p class="footer-heading">More</p>
                <nav class="footer-nav">
                    <ul class="nav">
                        <li class="nav-item"><a href="#" class="nav-link">Team</a></li>
                        <li class="nav-item"><a href="#" class="nav-link">Gallery</a></li>
                        <li class="nav-item"><a href="#" class="nav-link">FAQs</a></li>
                        <li class="nav-item"><a href="#" class="nav-link">Documents</a></li>
                    </ul>
                </nav>
                <a href="#" class="footer-subscribe">Subscribe to our newsletter</a>
            </div>
        </div>
    </div>

nurseries.php

<section class="nurseries section">
    <div class="wrapper wrapper--fixed">
        <header class="section-header">
            <h2 class="section-heading">Our nurseries</h2>
            <p class="section-txt">Ready to take a look around, contact us today to arrange an initial visit.</p>
        </header>

        <div class="row">
            <div class="column col-m-4">
                <div class="nursery-card nursery-card--barnwood mb-2 mb-m-0">
                    <div class="nursery-card-header">
                        <img src="<?php utility::asset('/svg/mascot-penguin.svg'); ?>" alt="Penguin mascot" class="card-mascot" />
                        <?php
                          perch_content_custom('Nurseries', [
                              'filter'=>'slug',
                              'match'=>'contains',
                              'value'=>'barnwood',
                              'template'=>'_nursery.html',
                          ]);
                        ?>
                        <a href="#visit" class="nursery-card-button button" role="button">Book a visit</a>
                    </div>
                </div>
            </div>

            <div class="column col-m-4">
              <div class="nursery-card nursery-card--longlevens mb-2 mb-m-0">
                    <div class="nursery-card-header">
                        <img src="<?php utility::asset('/svg/mascot-bear.svg'); ?>" alt="Bear mascot" class="nursery-card-mascot" />
                        <?php
                          perch_content_custom('Nurseries', [
                              'filter'=>'slug',
                              'match'=>'contains',
                              'value'=>'longlevens',
                              'template'=>'_nursery.html',
                          ]);
                        ?>
                        <a href="#visit" class="nursery-card-button button" role="button">Book a visit</a>
                    </div>
              </div>
            </div>

            <div class="column col-m-4">
              <div class="nursery-card nursery-card--quedgeley">
                    <div class="nursery-card-header">
                        <img src="<?php utility::asset('/svg/mascot-fox.svg'); ?>" alt="Fox mascot" class="nursery-card-mascot" />
                        <?php
                          perch_content_custom('Nurseries', [
                              'filter'=>'slug',
                              'match'=>'contains',
                              'value'=>'quedgeley',
                              'template'=>'_nursery.html',
                          ]);
                        ?>
                        <a href="/contact#enquiry" class="nursery-card-button button" role="button">Register</a>
                    </div>
              </div>
            </div>
        </div>
    </div>
</section>
Marc Sanders

Marc Sanders 0 points

  • 3 years ago
Duncan Revell

Duncan Revell 78 points
Registered Developer

3 years ago

You can use one call to perch_content_custom but pass it the split-items option - this gives you an array containing each item. In your case, it should return an array with 3 items - one for each nursery.

<?php 
$nurseries = perch_content_custom('Nurseries', [ 
'template'=>'nursery.html', 
'split-items'=>true,
]); 
?>
...//...
<?php echo $nurseries[0]; ?>
...//...
<?php echo $nurseries[2]; ?>
...etc...

They will be numbered 0, 1, 2 so you may also need to order the output of perch_content_custom (by slug maybe) so you know which item relates to which index.
Do the same again for the items but using _nursery.html
Marc Sanders

Marc Sanders 0 points

3 years ago

Yes, that seems to make sense.

Thank you