Grid Template
Grid Template is an Important part of Our plugin. Its a new Addition to the Reactive version 3.0.0.
This section Has All the Grid Layouts and you can Edit and make changes to Your Frontend Grid From This Section.
To Find this section go to your,
Admin -> Grid Templates
Here, you will find all the Grids Provided with Reactive Pro 3.0.0
Now, I will show you how to Edit the grid code to add or remove some changes,
First, check the above image it has 6 Grid templates, Now if you go to the Frontend Search page and open the Grid Panel Layout section you will see the below image, (To know more about Frontend Grid Panel check the Frontend Grid Section, here we will only discuss about how to modify or add a new grid layout)
And here is how the Simple Grid looks like in the frontend. To know details about Frontend Grid Check Our frontend Grid section.
Yes it's a Simple Grid with Just a Title in the Centre and a formatted date in the lower left.
But, you don't want to show this date in your site now how can you modify this Grid! Well Just Hang with and follow the below steps,
First, Open the Simple Grid Template From the below direction
Admin -> Grid templates -> Simple
Check the 2nd image of this article, you will see that there's a post name Simple Now open it in your browser,
Now, Copy all the Codes from the Grid Template Code Section and then click on the Add New Grid Template From the upper left,
It will look like below a bank template,
Now, Name the Grid Template Complex and paste the code in the Grid Template Code Section, it will look like below,
So, our goal was to remove the date from the grid code, and if you check the code of simple grid from the image, we have removed the below line of code in our Complex Grid code,
the Simple Grid code line number 22 has been removed in our Complex Grid,
<span class="reactiveDate">{{post.post_formated_date}}</span>
and that's how easily we have just edited our Simple Grid and Also Created our New Complex Grid, Now just Update this post. and go to your frontend Search page -> Open the Grid panel -> Navigate to the Layouts Section, you will see that a New Complex Layout automatically has been added,
Select the Complex Layout and save it, and you will see that the date has been removed in our new Complex Grid.
Yes, You have successfully Created a new Layout and also able to change the grid.
But what if your story is different, you don't want to remove the date but want to add the author name or some other information or want to change some mark up. Well we have use Wordpress Template Library here, you can check the official documentation for detail information from the below link,
So, now you want to change the information, how do you do that, For the mark up part, Its just basic html, you can add any kind of html here. We will show you how to add other information for example Author Name.
First, Go to The Frontend Search Page -> open the browser console -> you will see there an object in the console
Now, Open the Object like the below image,
After Opening the Object -> Open the Posts Object -> then open the 0 index -> you will find all of your post data
so if you want to change the date on Simple Grid code line number 22 and add the name of the post author in your Complex grid code,
check the key name in your browser console and from the above image it seem like the post author name key is
post_**author\_name **you got the key name now you add the 22 number line like below in your Complex Grid code.
<span class="reactiveDate">{{post.post_author_name}}</span>
Yes that's it. It will add the post author name instead of post date in your Complex grid. Now, update the grid and check in the Frontend Search page.