#470 closed enhancement (wontfix)
Add Infinite Scrolling to WordPress Events plugin
Reported by: | iandunn | Owned by: | iandunn |
---|---|---|---|
Milestone: | Priority: | normal | |
Component: | Make (Get Involved) / P2 | Keywords: | needs-patch good-first-bug needs-testing |
Cc: |
Description
The Official WordPress Events plugin displays WordPress-related events that are pulled in from the APIs on Meetup.com and WordCamp.org.
It currently loads the first 50 events, but we'd like to support infinite scrolling as well.
Attachments (5)
Change History (16)
#2
@
10 years ago
- Cc devenbansod.bits@… added
- Keywords reporter-feedback added
#3
@
10 years ago
- Keywords reporter-feedback removed
We're not looking to load all of the events up front, we still want to initially load 50 of them, but then we want to fetch more events as needed. Infinite scrolling refers to the design pattern where additional content is lazy-loaded as the user approaches the end of a page.
Here's some more info on it:
#4
@
10 years ago
Added the infinite scrolling functionality (Diffs provided above). Works on my WordPress installation. Needs further testing.
The above diffs are not in a proper format please see - https://github.com/utkarshd420/official-wordpress-events, for better readability.
#5
@
10 years ago
- Keywords needs-testing dev-feedback added
Hey Utkarsh,
The Patch looks good.
But as you mentioned, the diffs uploaded here do not seem to be in proper format. Also, you don't have to upload 2 different patches for 2 different files. Changes in both files can be included in the same patch. Just go to the root of your working copy. Just do
svn diff > patch_name.diff
If you have added any new files not present in working copy(which is not the case here), then you might have to do
svn add path_to_new_file
Also there were some formatting and coding standards mistakes that I found, I have changed them accordingly and also merged the 2 patches into one. Please review if the changes are right or you can always remove those changes.
Edited Patch Added.
Needs Testing though. Please make any changes if you want.
#6
@
10 years ago
Thanks Utkarsh and Deven, here are a few things that can be improved:
- Don't remove braces from single-line statements inside conditions - https://make.wordpress.org/core/handbook/coding-standards/php/#brace-style. In general, it's a bad idea to make changes that are unrelated to the ticket, because they add diff noise and prevent an organized and logical commit history.
$off
should be validated to make sure it's an integer$off
isn't a meaningful variable name; use$offset
instead.- Instead of
wp_die()
, usewp_send_json_success()
andwp_send_json_error()
- Instead of returning the HTML output, just return the JSON-encoded data, and then build the elements in JavaScript, based on a template. See https://lkwdwrd.com/wp-template-js-templates-wp/ for a tutorial.
- Add the parameter type for
$offset
in the phpDoc - Follow the coding standards for variable declaration at the beginning of JavaScript functions.
- Prefix the
infinite_scroll
action to avoid conflicts with other plugins - Is
async_infinite_load()
triggered when the user scrolls to within 10px of the bottom? If so, that should be more like 300px, so that there's plenty of time for the HTTP request to return before the user gets to the end of the page - The JavaScript should be wrapped in a literal to avoid variables/functions being global.
Also, since most of WordPress.org has a footer, we probably trigger async_infinite_load()
when the user clicks on a 'Load More Events' button, rather than automatically. If it's automatic, then the user won't be able to reach the footer until they scroll through an unreasonable number of "pages."
#8
@
10 years ago
Thanks Ian, for your feedback and suggestions. I'll make the necessary changes and submit a new patch as soon as possible.
Yes, I also think that we should load more events only when the user clicks on a Load more button. I'll remove the scroll() jQuery function and add a button or a href element to load more options.
#9
@
10 years ago
Hi,
Following is the patch with the above suggested changes by Ian. I've tried my best to stick to the coding standards but being a newbie I might have made some mistakes. The patch attached is working correctly. Added a load more link too instead of automatic loading. I've used the wp.template as well (was really cool!! Thanks Ian) .
I also increased the date of events that the plugin gets from 1 month to 4 months Mostly because, often there are not more than 50 events in a month
#10
@
10 years ago
- Keywords dev-feedback removed
- Owner set to iandunn
- Status changed from new to accepted
Thanks, this looks good. I think the next step is to get WordCamps pulled in too. The JSON API isn't currently active on wordcamp.org, but if you change WORDCAMP_API_BASE_URL
to point to your local sandbox you can simulate it. You can use the Meta Environment to setup a local version of WordCamp.org to pull sample data from.
Here's a few minor things I noticed:
wp_json_send_*()
functions callsdie()
, so you don't need toreturn
after them.wp_localize_script()
is the standard method for outputting JavaScript variables likeajaxurl
ajaxurl
should have the plugin prefix, to avoid conflicts with the Core variable that other plugins may enqueue$offset++
is a cleaner way of writing$offset = $offset + 1;
.esc_url()
is more restrictive thanesc_attr()
, so it's not necessary to wrapesc_url()
calls inesc_attr()
.- Data passed to
wp_send_json_*()
will be automatically passed throughjson_encode()
, so you don't need to do it manually.
I uploaded a refreshed patch, since some other changes were made to the plugin since it was uploaded.
I went through the MeetUp API request we are making to get the MeetUp Events in the function 'get_meetup_events()' on line 117.
In MeetUp API request, I guess we can remove 'page' argument and we will be done.
But how do we add an option to change between some constant Results and Infinite Results ?
What I had in mind was we can check if the 'POSTS_PER_PAGE' constant value in 'official_wordpress_events.php' is '-1' then we can assume infinite scrolling and if its a postive integer then we can take that value.
Suggest changes and I will then add the patch accordingly.