[Resolved] List Posts with Custom Search s

[Author]

Posts

[CharlesB2907]

Hi,

I followed the following attached tutorial exactly using about 100 Product posts that I had added using a custom template.

> From the Toolset dashboard I Created and named a View
> From the Loop Editor I activated the "Loop Wizard"
> From the pop up I chose "Table-Based Grid" with 4 col, (NOT THE Bootstrap Grid - which is disabled for Divi Builder)

Note: The object is for search results to display in a 4 column grid from left to right, top row to bottom row if possible. Could the issue be that I chose Table-Based Grid rather than Unformatted?

> Scrolled down to edit template with Divi Builder

Note: I constructed a single column Template with 4 modules in the following order:

{!{wpv-post-featured-image size="full"}!}
{!{wpv-post-taxonomy type="product_cat"}!}
{!{wpv-post-link}!}
A single static link of text

> Embedded Toolset shortcodes in Divi Modules (the same way I did for the Product page template)
> Updated the view template
> Created a New Page
> Embedded the Toolset Shortcode
> Updated the page and it displays nothing other than the page title, and a single field showing ONLY the title of the last Product posted, see screenshot.

However, I display practically nothing when the tutorial displays two "Tour" posts in a list. The tutorial must have left out some information or there must be some other reason preventing my posts from displaying in the list.

[Waqar]

Hi Charles,

Thank you for contacting us and I'll be happy to assist.

For troubleshooting the views set up, I’ll need temporary access (WP-Admin and FTP) to the website, preferably a development or cloned website, where the issue is reproducible.

This access will allow me to offer better help and check if some configurations or code might need to be changed.

Your next answer will be private which means only you and our support team will have access to it.

If you’re going to share the access details for the live/production website, it is very important that a complete backup of your database and website has been made.

I would additionally need your permission to deactivate and reactivate Plugins and the Theme and to change configurations on the site. This is also a reason the backup is really important.

Regards,
Waqar

[CharlesB2907]

Hi - Is there an update available for this issue?

Thank you.

[Waqar]

Hi Charles,

Thank you for sharing the login details.

The username which was provided didn't work, but I found the correct one from a different ticket.

I've checked your page from the screenshot ( hidden link ) and noticed that it was set to use the view "Single Product List Entry".
( hidden link )

If you'll check the content template "Loop item in Single Product List Entry" linked to this view ( hidden link ), you'll find only one shortcode [wpv-post-link], in its body.
( screenshot: hidden link )

As expected, the page is also showing the product's title with a link on the front-end.
( screenshot: hidden link )

Please add more fields in the content template's body and they'll show on the front-end.

Note: the page is showing only one product result because limit="1" is set in the view's shortcode:
( screenshot: hidden link )

[wpv-view name="single-product-list-entry" limit="1" offset="0" order="desc"]

If you'll remove the limit="1", all results will show.

I hope this helps and please let me know if you need any further assistance.

regards,
Waqar

[CharlesB2907]

Thank you for this information. The tutorial indicated to add the title field only but I will add the other fields needed.

I want to add the {!{wpv-post-featured-image size="full"}!} -and- {!{wpv-post-taxonomy type="product_cat"}!} can I sue the same field shortcodes or do I need to create a unique set of custom fields?

[CharlesB2907]

Hi Waqar,

I followed your direction and added more field and removed the limit="1", but the page doesn't appear to be responsive for mobile. Can that be changed?

[Waqar]

Hi Charles,

Thanks for the update.

Making tables based layout responsive, is always challenging which is why they're not used very often these days.

You'll need some custom CSS code to improve how the table looks on smaller screens and the following articles shares some useful techniques:

hidden link

Is there any specific reason, you're not using a bootstrap grid (which is responsive naturally), to show these results in 4 columns?

[CharlesB2907]

Hi Waqar,

Thank you for the information you provided.

The reason I am not using Bootstrap is because I use Divi Builder to create sites. This is my first Toolset project. Tutorials directed to disable Bootstrap if using Divi.

If you have additional information on Bootstrap-Toolset-Divi integration, I'd be eager to try it.

[Waqar]

Hi Charles,

Thank you for clarifying that and sorry I missed out about the "Divi Bootstrap incompatibility".
( https://toolset.com/documentation/recommended-themes/toolset-divi-integration/matching-divi-styling-using-toolset/#managing-divi-theme-bootstrap-incompatibility )

I also noticed that your product results consist of images of variable heights and you'd like to show them vertically centered. In this case, using a table-based grid makes more sense, since it offers natural support for vertical alignment.

You can add the following CSS code from the article I shared earlier ( hidden link ), into the view's "CSS editor" tab and the table will adjust on smaller screens:

table.wpv-loop.js-wpv-loop { 
	width: 100%; 
	border-collapse: collapse; 
}

@media only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px)  {

	/* Force table to not be like tables anymore */
	table.wpv-loop.js-wpv-loop, table.wpv-loop.js-wpv-loop thead, table.wpv-loop.js-wpv-loop tbody, table.wpv-loop.js-wpv-loop th, table.wpv-loop.js-wpv-loop td, table.wpv-loop.js-wpv-loop tr { 
		display: block; 
	}
	
	/* Hide table headers (but not display: none;, for accessibility) */
	table.wpv-loop.js-wpv-loop thead tr { 
		position: absolute;
		top: -9999px;
		left: -9999px;
	}

	
	table.wpv-loop.js-wpv-loop td { 
		/* Behave  like a "row" */
		border: none;
		border-bottom: 1px solid #eee;
		position: relative;
		padding-left: 50%; 
	}
}

I hope this helps.

regards,
Waqar

[CharlesB2907]

Waqar,

Thank you! The support you provided on this issue not only resolves this serious display issue, but it also introduces me to another level of CSS that I can learn from and adapt to other projects.

Have you heard of a CSS editor CSS HERO? If it truly works, I may be able to use it in styling the search and content update/edit forms?

Just wondering if you have heard of it and if you think it would be useful.

My first Toolset project is almost ready. Thank you again.

[Waqar]

Hi Charles,

Glad your first Toolset project is near completion - well done.

I'm afraid, I haven't personally used "CSS HERO", but from looking through their documentation and the demo, it looks promising.
( hidden link )

If you're looking for a visual point-&-click tool to generate code for custom CSS styles, it seems worth a try.

I'm so happy you found our support useful and for new questions/concerns, you're welcome to open new tickets.

regards,
Waqar

[CharlesB2907]

Hi Waqar,

I have a follow up question pertaining to this thread. I know we have the table-based grid enabled for the homepage view with CSS to style the grid. I'm working to create the custom search form for the homepage.

However, my question pertains to setting up another table-based grid to enable me to place a custom search form for placement inside the product page. I created another view titled "Product page search view".

If I select the table-based grid option for the product page custom search form view, will the previously created CSS for displaying the grid in a single column on mobile also work for the product search view grid as well?

Considering that I want ALL of the site search forms to display in a grid with the exact same styling, is it necessary to create two separate search forms or can I use the same form for both the homepage and the product page?

[Waqar]

Hi Charles,

Thanks for writing back.

The custom CSS code that I shared targets the table with classes "wpv-loop" & "js-wpv-loop", which will be by default available for any view that uses the table-based grid. This means that you can include it in your new view as well and it will work.

A single view can be used on multiple pages and therefore if there is no difference in the requirement, you can re-use your existing view on the homepage, product page or on any other pages.

I hope this clarifies.

regards,
Waqar

[CharlesB2907]

Hi - Thank you for the detailed information. It helps a great deal.

[Waqar]

You're very welcome, Charles.

Glad I could help and please open a new ticket for any new questions.

regards,
Waqar