Κουμπί φόρτωσης περισσότερων αντί για άπειρη κύλιση στη δραστηριότητα κοινωνικής δικτύωσης

ο κοινωνική δραστηριότητα Το πρόσθετο είναι ένα εξαιρετικό πρόσθετο για Τελικό Μέλος, φαίνεται υπέροχο και προσφέρει πραγματική αλληλεπίδραση στον ιστότοπό σας μεταξύ των μελών σας. Οι χρήστες σας μπορούν να προσθέτουν εικόνες, βίντεο, να ρίχνουν γρήγορες σημειώσεις κ.λπ. Έχω προσθέσει την προσθήκη ετικετών UM για να επιτρέψω στους χρήστες να προσθέτουν γρήγορα ετικέτες ο ένας στον άλλον, αλλά εκτός από αυτό, είναι τέλειο. Υπάρχει μόνο ένα χαρακτηριστικό που δεν μου αρέσει πολύ: η δυνατότητα άπειρης κύλισης. Όταν κάνετε κύλιση προς τα κάτω, φορτώνονται περισσότερα στοιχεία. Αυτό φαίνεται πραγματικά ωραίο, αλλά έχει το μειονέκτημα ότι ο χρήστης δεν μπορεί ποτέ να φτάσει στο υποσέλιδο. Και αν έχετε έναν ιστότοπο για κινητά όπου η δεξιά πλαϊνή γραμμή ολισθαίνει κάτω από το κύριο περιεχόμενο, ο χρήστης δεν θα δει ποτέ τη δεξιά πλευρική γραμμή.

Σωστά μαντέψατε: αυτή είναι η κατάσταση που συνάντησα σε έναν από τους ιστότοπους που διαχειρίζομαι. Έτσι, ο πελάτης μου ζήτησε να το αλλάξω σε μια ρύθμιση φόρτωσης περισσότερο. Θα πρέπει να φορτωθούν μόνο 5 αναρτήσεις, ο χρήστης μπορεί να επιλέξει να φορτώσει περισσότερες αναρτήσεις κάνοντας κλικ σε ένα κουμπί „φόρτωση περισσότερων“. Ο αριθμός των αναρτήσεων που θέλετε να φορτώσετε μπορεί να επεξεργαστεί στις ρυθμίσεις Ultimate Member. Για τη φόρτωση περισσότερων χρειαζόμουν να παρακάμψω τη δυνατότητα άπειρης κύλισης της προσθήκης ενεργοποίησης κοινωνικής δικτύωσης, ει δυνατόν χωρίς επεξεργασία της ίδιας της προσθήκης, ώστε να μπορούμε να ενημερώσουμε την προσθήκη χωρίς προβλήματα όταν φτάσει μια νέα ενημέρωση.

Ευτυχώς, με ορισμένες γραμμές jquery και css αυτό μπορεί να διορθωθεί αρκετά εύκολα:

  /*Change infinite scroll into load more button */

  //prevent the infinite scroll from running with a hack 
  $('.um-activity-wall').attr('data-single_post', 'TRUE');

  //set up a function which inserts a load more button, and removes the animated gif
  function ioh_append_loadmore_btn() {
      var lastDiv = $('.um-activity-load:last');
      lastDiv.html('<div class="ioh_load_more btn btn-primary">Load more</div>');
      lastDiv.show();
      lastDiv.addClass('ioh_load_more_container');
      lastDiv.removeClass('um-activity-load');
  }
  ioh_append_loadmore_btn();

  //add an event listener to the added load more button, which executes the loading. 
  $(document).on('click', '.ioh_load_more', function() {
      var wall = jQuery('.um-activity-wall');
      if ( wall.length > 0
          && jQuery(window).scrollTop() + jQuery(window).height() >= wall.offset().top + wall.height()
          // && jQuery('.um-activity-widget:not(.um-activity-new-post):visible').length >= jQuery('.um-activity-wall').attr('data-per_page')
          && Loadwall_ajax === false) {

          Loadwall_ajax = true;
          var lastDiv = $('.ioh_load_more_container:last');
          lastDiv.addClass('um-activity-load');

          jQuery.ajax({
              url: wp.ajax.settings.url,
              type: 'post',
              data: {
                  action: 'um_activity_load_wall',
                  offset: jQuery('.um-activity-widget:not(.um-activity-new-post):visible').length,
                  user_id:  wall.data('user_id'),
                  user_wall: wall.data( 'user_wall' ),
                  hashtag: wall.data('hashtag'),
                  nonce: um_scripts.nonce
              },
              success: function( data ) {
                  jQuery('.um-activity-load').hide();

                  if ( data === '' ) {
                      Loadwall_ajax = true;
                  } else {
                      jQuery('.um-activity-wall').append( data );
                      Loadwall_ajax = false;
                  }

                  ioh_append_loadmore_btn();

              },
              error: function (e) {
                  console.log('UM Social Activity Error', e);
              }
          });
      }

  });

Τώρα χρειάζεται μόνο να προσθέσουμε λίγο στυλ. Χρησιμοποιώ bootstrap, οπότε η προσθήκη των κλάσεων btn και btn-primary είναι αρκετή για να δημιουργήσει μια εμφάνιση κουμπιού. Εάν δεν χρησιμοποιείτε bootstrap, θα χρειαστεί να προσθέσετε μόνοι σας μερικά στυλ κουμπιών.

.ioh_load_more_container {
  margin-top: 25px;
}

.ioh_load_more {
  cursor:pointer;
}