Forum
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 ?
