[Resolved] Conditional block set to pagination

[Author]

Posts

[Pete]

Hi there,

Using the conditional block, is it possible to set to to only display when the pagination on a page is on page 1?

When the user clicks to 2 on the pagination controls, the content of the conditional block no longer displays?

Thank you.

[Minesh]

Hello. Thank you for contacting the Toolset support.

I would like to know that are you using ajax pagination or page is reloaded when you click on next page?

[Pete]

Hey Minesh,

Thank you for getting back to me.

Yup, every View has the below. All Views use one of two templates all with the same function.

Thank you.

jQuery( document ).on( 'js_event_wpv_pagination_completed', function( event, data ) {
jQuery('html, body').animate({ scrollTop: (jQuery(".js-wpv-view-layout").offset().top) - 220 }, 'slow');
});

[Minesh]

I think we can play with that hook but I will require admin access details.

*** Please make a FULL BACKUP of your database and website.***
I would also eventually need to request temporary access (WP-Admin) to your site. Preferably to a test site where the problem has been replicated if possible in order to be of better help and check if some configurations might need to be changed.

I have set the next reply to private which means only you and I have access to it.

[Pete]

Hey Minesh,

The sites not live however there `re a couple of us working on this at the moment.
While giving you access is not an issue, I'd prefer not to just because we are busy on the site.

If it's not a simple setup that I was missing using Conditional then I guess its not worth the trouble.

[Minesh]

As you are already using the hook "js_event_wpv_pagination_completed":

What if you try to add the following code within the "js_event_wpv_pagination_completed" hook:

 x = jQuery(".js-wpv-view-layout").data('pagination');
  if(x.page >= 1){
    jQuery(".target-section").show()
  }else{
   jQuery(".target-section").hide();
  }

Where:
- you just need to replace the ".target-section" with your original target section you want to hide/show.

[Pete]

Hi there,

Ok added your code to the existing JS. Is this right? (see attached)

Don't get what I do with .target-section

Is this a CSS class to add to the 'section'?

Or something else?

Thank you.

[Minesh]

Can you please share problem URL where I can see the pagination as well as admin access details.

*** Please make a FULL BACKUP of your database and website.***
I would also eventually need to request temporary access (WP-Admin) to your site. Preferably to a test site where the problem has been replicated if possible in order to be of better help and check if some configurations might need to be changed.

I have set the next reply to private which means only you and I have access to it.

[Pete]

Hi there,

As mentioned previously we can't give you access at the moment, we are in the final stages of sorting this prior to going live next week.

Unless you can explain to me what I should be doing, we'll have to leave this!

[Minesh]

Don't get what I do with .target-section

Is this a CSS class to add to the 'section'?
==>

You need to replace the ".target-section" with the section that actually displays your content which you would like to show/hide. So, you will have to check the page source and find the target section div with the class name and use that actual class name to replace with "".target-section".

I hope that helps and If you do not give access and at least share the page link where I can see that section that you would like to hide it that would be helpful.

[Pete]

Hi Minesh,

Ok, thank you for the clearification.

I have added the JS.

I have added the section ID class....kt-layout-id_293f4c-15

It's still not working, am I getting this right?

Page using the template, this one of many: hidden link

[Jamal]

Hello there! Minesh won't be available for a couple of days. If you don't mind I'll continue with you on this ticket.

Actually, the code that Minesh suggested needs to be inside the "js_event_wpv_pagination_completed" event handler. Like this:

jQuery( document ).on( 'js_event_wpv_pagination_completed', function( event, data ) {
    jQuery('html, body').animate({ scrollTop: (jQuery(".js-wpv-view-layout").offset().top) - 220 }, 'slow');

    var x = jQuery(".js-wpv-view-layout").data('pagination');
    var selector = '.js-wpv-view-layout .nav-links';
    if(x.page > 1){
        jQuery( selector ).hide()
     }else{
         jQuery( selector ).show();
     }
});

Note that I used '.js-wpv-view-layout .nav-links' instead of '.target-section' to make it work.

I tried this code on the browser console and it seems to work. Please add it to the view and test it to see if it will work the way you would expect.

[Pete]

Hey Jamal,

Thank you for picking this up for me.

Ok added the code you suggested, this what I have pasted:

jQuery( document ).on( 'js_event_wpv_pagination_completed', function( event, data ) {
jQuery('html, body').animate({ scrollTop: (jQuery(".js-wpv-view-layout").offset().top) - 220 }, 'slow');

var x = jQuery(".js-wpv-view-layout").data('pagination');
var selector = '.js-wpv-view-layout .nav-links';
if(x.page > 1){
jQuery( selector ).hide()
}else{
jQuery( selector ).show();
}
});

Now when you click the 2 on pagination. the text row is still there...more the issue is 'now' the pagination buttons vanish rather than the text section.

[Jamal]

My apologies, I understood that you want to hide the pagination, which I found a bit odd. Now that I have read the description again, carefully, I wonder if you want to hide the text on this screenshot hidden link right?

If that's the case, the custom code needs to be adapted, first to not act(hide) on the pagination, and second to act on that block. However, we'll need to add a class or ID to the block to be able to target it using Javascript.

We can't use conditional because that block is located outside of the view, so we just can't use anything from the view, at least not without custom code.

If you don't know how to add a class or ID to that block, allow me temporary access to your website to implement it and take screenshots to show you how. It is a small update, it won't take more than 5 minutes. Your next reply will be private to let you share credentials safely. ** Make a database backup before sharing credentials. **

[Pete]

Hey Jamel,

See this is where it's getting confusing.

You're saying I need to add a class to the section, Minesh says inspect the code and add the section ID.

Now I know the code needs adding the the JS trigger as you showed me, can you alter this so it uses a Class and give me instructions and I'll give it a go.

Many thanks, Pete