Forum

Thread tagged as: Question

How to implement the layout below ?

Hi all ,

I have created a perch master page for my home page which goes as below .

<!DOCTYPE html>
<html lang="en" style="overflow-x: hidden">
<!-- Header
================================================== -->
<?php
perch_layout('global/header', array(
));
?>
<body style="padding-top:5rem;">
    <!-- ================================================== Section -  NavBar ================================================== -->
<?php
perch_layout('global/nav', array(
));
?>
    <!-- ================================================== Section End -  NavBar ================================================== -->
    <main role="main">
<!-- =================================== Section - Video  ================================= -->
    <?php perch_content('Video - Section'); ?>   
<!-- =================================== Section End - Video  ================================= -->

<!-- =================================== Section - About  ================================= -->
    <?php perch_content('About - Section'); ?>  
<!-- =================================== Section End - About  ================================= -->

<!-- =================================== Section - Featured Listings  ================================= -->
    <?php perch_content('Featured - Section'); ?>  
<!-- =================================== Section End - Featured Listings  ================================= -->     

<div class="main-carousel pl-lg-5">
    <?php perch_collection('property', [
    'count' => 10,
    'template'=>'collection.html',
    'sort'  => '_date', 
    'sort-order' => 'DESC',
]);
?>
</div>

<!-- =================================== Section - Choose Location  ================================= -->
    <?php perch_content('Choose Location - Section'); ?>  
<!-- =================================== Section End - Choose Location  ================================= -->     

<!-- =================================== Section  - Review  ================================= -->
             <div class="row pl-lg-3">
                <div class="col-md-4 d-flex flex-column justify-content-center pl-md-5 py-5 text-center-sm p-5">
                    <h3 class="display-4x r w-100 mb-3">Reviews</h3>
                    <p class="text-secondary w-100 mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. <br>Proin nec ex imperdiet, mollis libero id, fringilla ante.
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
                    <button type="button" class="btn review" style="background-image: url(/shades/resources/images/Gbutton.svg);background-size: cover;height: 50px;width:200px;border:none;background-color:transparent">
                    </button>
                </div>
                <div class="col-md-8 social ">
                    <ul class="juicer-feed " data-feed-id="playrestaurants"></ul>
                </div>

            </div>
<!-- =================================== Section End  - Choose Your Location  ================================= -->

    </main>

    <!-- Footer
    ================================================== -->
    <?php
perch_layout('global/footer', array(
));
?>
</body>
</html>

The problem I'm facing is in the video section , i need to call the perch search functionality to run a search in the collection items that i have . Also PFB my template for the video section .

<!-- =================================== Section - Video Section  ================================= -->
<div class="row">
    <div class="jumbotron jumbotron-fluid w-100 d-flex align-items-center bg-transparent" style="height:100vh;background-color:black">
        <img src="<perch:content id="BackgroundImage" type="image" label="BackgroundImage">" style="position: absolute;width:104%;height:140%;top:0%;z-index: -1" class="hidden-md"/>
        <video id="video" class="hidden-sm" style="object-fit: cover;z-index:-1;position: absolute;top:0%" autoplay playsinline muted>
            <!-- Default video source: -->
            <source type="video/mp4" src="<perch:content id="BackgroundVideo" type="file" label="BackgroundVideo">">
        </video>
        <div class="container text-center" style="margin-top:-5rem">
            <h1 class="display-4 text-white ">
                <perch:content id="heading" type="textarea" label="Heading" required title markdown editor="simplemde">
            </h1>
<!-- =================================== To Be Replaced With Search Function  ================================= -->
            <div class="input-group my-5 px-5 d-none d-md-flex">

                <div class="input-group-prepend shadow-lg" style="border-radius: 0px 0px 0px 20px ">
                    <button class="btn bg-grey px-5 text-black shadow" type="button" style="border-radius: 20px 0px 0px 0px ">
                        <p style="margin:0;" class="w-100 text-center"><i class="fas fa-search-location"></i></p>
                    </button>
                </div>
                <input id="tags" type="text" class="form-control py-4 pl-4 shadow-lg" placeholder="Enter your search location" aria-label="" aria-describedby="basic-addon1" style="border:none;">
                <div class="input-group-append">
                    <select class="btn  px-4 shadow-lg bg-grey" style="padding-right: 40px !important;">
                        <option value="volvo">Buy</option>
                        <option value="saab">Rent</option>
                        <option value="opel">Sale</option>
                        <option value="audi">Lease</option>
                    </select>
                </div>
                <div class="input-group-append">
                    <select class="btn px-5 shadow-lg bg-grey" style="border-bottom-right-radius: 20px;padding-left:15px !important">
                        <option value="Choose Range">Choose Range</option>
                        <option value="volvo">AED 1,000 - AED 5,000</option>
                        <option value="saab">AED 5,000 - AED 10,000</option>
                        <option value="opel">AED 10,000 - AED 20,000 </option>
                        <option value="audi">AED 20,000 - AED 30,000</option>
                    </select>
                </div>
            </div>
<!-- =================================== To Be Replaced With Search Function  ================================= -->
        </div>
    </div>
</div>
<!-- =================================== Section End - Video Section  ================================= -->

If you look close , i have mentioned out - " To Be Replaced With Search Function " . Since the above is the HTML template for the perch region "Video Section " , how do i include the search functionality to the master / template page ?

Titus Saju

Titus Saju 0 points

  • 2 years ago
Drew McLellan

Drew McLellan 2638 points
Perch Support

$search_form = perch_search_form([], true);
$video_content = perch_content('Video - Section', true);
$replace_string = '<!-- =================================== To Be Replaced With Search Function ================================= -->';
echo str_replace($replace_string, $search_form, $video_content);