[Resolved] Conditional output according to the number of items

[Author]

Posts

[kelvinL-2]

Refer to attached screenshot, I want to show the first 5 items initially and then click the "More" to show the rest. How can I add the "More" if the query item is more than 5 using the conditional output in View? Can I do it using one View or 2 Views?

[Christian Cox]

Within a View, you can use the wpv-found-count shortcode to determine the total number of results and test that in a conditional:

[wpv-conditional if="( '[wpv-found-count]' gt '5' )"]
More button
[/wpv-conditional]

This works in a View, outside the wpv-loop tags. More about the wpv-found-count shortcode here:
https://toolset.com/documentation/user-guides/views-shortcodes/#wpv-found-count

Let me know if I've misunderstood what you're trying to accomplish and I'll take another look.

[kelvinL-2]

Dear Christian Cox,

Excellent reply. For the initial hidden section, from 6th to nth items, there is only one filter setting to one view, how can I separate the first 5 items and the rest into two sections of view? Should I need to create 3 views to have one for first 5 items and then another one for 6th to nth items, finally call both views from one view using the conditional output? Is it the correct plan or you can have a better solution?

Best regards,

Kelvin

[kelvinL-2]

Dear Christian Cox,

I try to create two Views, the first View to show the first 5 items, set a conditional output if total query item is more than 5, then add the More link.

The second View to show the rest so I skip 5 items from Limit and Offset and put it into the first View.

Now I find the conditional output doesn't show the More because I set Display to 5 from Limit and Offset.

Below please find the View code from the first View

<div class="merchant-product-gallery">
  <h3 class="detail-section">Product Gallery
    [wpv-conditional if="( '[wpv-post-count]' gt '5' )"]
    	<span class="align-right">More <i class="fa fa-angle-down" aria-hidden="true"></i></span>
    [/wpv-conditional]
  </h3>
[wpv-layout-start]
	[wpv-items-found]
	<!-- wpv-loop-start -->
	<table width="100%" class="wpv-loop js-wpv-loop">
	<wpv-loop wrap="5" pad="true">
		[wpv-item index=1]
		<tr>
			<td>
				[wpv-post-body view_template="Loop item in Merchant Product Gallery"]
			</td>
		[wpv-item index=other]
			<td>
				[wpv-post-body view_template="Loop item in Merchant Product Gallery"]
			</td>
		[wpv-item index=5]
			<td>
				[wpv-post-body view_template="Loop item in Merchant Product Gallery"]
			</td>
		</tr>
		[wpv-item index=pad]
			<td></td>
		[wpv-item index=pad-last]
			<td></td>
		</tr>
	</wpv-loop>
	</table>
	<!-- wpv-loop-end -->
	[/wpv-items-found]
	[wpv-no-items-found]
		<strong>[wpml-string context="wpv-views"][/wpml-string]</strong>
	[/wpv-no-items-found]
[wpv-layout-end]
[wpv-view name="merchant-product-gallery-rest"]
</div>

Here is the code to set the conditional output

    [wpv-conditional if="( '[wpv-post-count]' gt '5' )"]
    	<span class="align-right">More <i class="fa fa-angle-down" aria-hidden="true"></i></span>
    [/wpv-conditional]

Here is the code to insert the rest item from second View

[wpv-view name="merchant-product-gallery-rest"]

[Christian Cox]

Should I need to create 3 views to have one for first 5 items and then another one for 6th to nth items, finally call both views from one view using the conditional output?

I think you can do this with just 2 Views. One container View used to determine the total number of results, and the first View you showed above with some modifications.

First, the container View. Create a new View of all the Product Gallery items (no limits or offsets). In the Loop Output area of that View, remove all the content between the wpv-loop tags. You don't want to display anything repeatedly, you just want to know how many items are found. Cut the "Product Gallery" title and "More" button section out of the first View, and paste it in the wpv-items-found tags of the new View. Update the More button conditional to check to see if the total number of posts is greater than 5. The correct shortcode is wpv-found-count, not wpv-post-count. The wpv-post-count shortcode is deprecated in favor of wpv-items-count, but that isn't appropriate here anyway.

Next, insert your first View just after the Product Gallery / More button section. This View will show the first 5 posts, since you set up a limit of 5 in the View editor. Then, insert the first View again just after the previous View shortcode. This time, in the popup dialog you can specify a limit and offset that will override the settings in the View editor. Here you should choose a limit of -1, and an offset of 5. So a simplified representation of what you should have:

Product Gallery title
[wpv-conditional]More[/wpv-conditional]

[wpv-view name="your-view-slug"]
[wpv-view name="your-view-slug" limit="-1" offset="5"]

[kelvinL-2]

Dear Christian Cox,

Excellent suggestion. It works but now how I can handle the CSS comes with the Views? As both
[wpv-view name="your-view-slug"]
[wpv-view name="your-view-slug" limit="-1" offset="5"]

the stylesheet of the first row are same, so after combining both Views, an overall view, the first two rows have the same stylesheet then the third row is changed.

I capture the screenshot for your reference.

[Christian Cox]

I'm not sure how your CSS is set up, but I can show you how to do some conditional logic based on a shortcode attribute. Add an arbitrary attribute in the View shortcode, then you can access that attribute in a conditional within the View:

[wpv-view name="your-view-slug" limit="-1" offset="5" orange="true"]

Note the "orange" attribute - it's arbitrary so choose a name that makes sense for you. Then in the View, use wpv-attribute to access that shortcode attribute:

[wpv-conditional if="( [wpv-attribute name='orange'] eq 'true')"]
    <tr style="background: #fc0;">
[/wpv-conditional]
[wpv-conditional if="( [wpv-attribute name='orange'] eq 'true')" evaluate="false"]
    <tr style="background: #fff;">
[/wpv-conditional]
...

Think this will work? If not, I'll need some additional information to see how you're applying styles to each row. If you can show me a link to see it in the browser that will be helpful.

More information about passing arguments into a View using shortcode attributes:
https://toolset.com/documentation/user-guides/passing-arguments-to-views/
https://toolset.com/documentation/user-guides/views-shortcodes/#wpv-attribute

[kelvinL-2]

Dear Christian Cox,

Many thanks for your help. I can separate the first 3 items and then the rest items into to DIV. But now I have another issue is how I can get parameter wpvprchildof and pass into the second Views

I call the main View by PHP script

render_view(array('id'=>'3760', 'wpvprchildof'=> "{$merchant_id}" ));

and pass the $merchant_id to second View using wpvprchildof="xxxx"

[wpv-view name="merchant-brand-sidebar-details" wpvprchildof="xxxx" limit="-1" offset="3"]

Best regards,

Kelvin.

[Christian Cox]

Is the second View inside the first View? If so, you can use the same wpv-attribute shortcode to access the first post's attribute:

[wpv-view name="merchant-brand-sidebar-details" wpvprchildof="[wpv-attribute name='wpvprchildof']" limit="-1" offset="3"]