[Addon] Ajax Product Listing for osC 2.3.4 bootstrap

[radhavallabh 41]

@@auzStar

It is working Now...... (w00t) :thumbsup: :D :)  :)  :)  :)  o:) You Rock!!!!!!!!!!!!!!!!!

I am so happy and grateful to you for helping me throughout this.......

 

Now the issue is that it hangs for a few seconds while loading the products so can we show a loading image on top so let the customers know that it is loading.

 

Awaiting your response

and many many thanks once again,

Warm  Regards...

[auzStar 148]

Yes I just saw that. That's great news. Even the sort and pages are working, because I modified the script at the bottom of ajax_index,php.

 

Your site is slow, that's why it hangs.

 

You can put the ajax-loader.gif from the package into the images folder (or use another with the same name) and remove the comments "//" from the script at the bottom of ajax_index.php relating to the image.

 

And because you don't have this module installed, change this line:

  var use_loading_image = '<?php echo (MODULE_HEADER_TAGS_AJAX_PRODUCT_LISTING_LOADING_IMAGE == 'True'); ?>';

to this:

  var use_loading_image = true;

Doing the above will load the image when sort or pages are used, but if you want the image to load with filter you will need to put code just before the $get function inside filter.js. 

 

 

This part of the script can be deleted:

//    buy_link = buy_link.replace('&languages_id=<?php echo $HTTP_GET_VARS['languages_id']; ?>','');
//    buy_link = buy_link.replace('&current_category_id=<?php echo $HTTP_GET_VARS['current_category_id']; ?>','');
//    buy_link = buy_link.replace('&category_parent=<?php echo $HTTP_GET_VARS['category_parent']; ?>','');
//    buy_link = buy_link.replace('languages_id=<?php echo $HTTP_GET_VARS['languages_id']; ?>&','');
//    buy_link = buy_link.replace('current_category_id=<?php echo $HTTP_GET_VARS['current_category_id']; ?>&','');
//    buy_link = buy_link.replace('category_parent=<?php echo $HTTP_GET_VARS['category_parent']; ?>&','');

Do you want the sort and page to work as ajax as well (at the moment it only works after you use filter, due to the script inside ajax_index.php).

I will require adding similar script to template_bottom.php.

 

cheers

Edited March 22, 2016 by auzStar

[♥Tsimi 525]

@@radhavallabh

 

Hats off to you for not giving up on the AJAX idea and keep digging.

 

@@auzStar

 

And hats off to you for not losing your patience and keep helping in this matter even if it doesn't have anything to do directly with this addon of yours.

 

 

 

It would be cool if we could see some code regarding this filter AJAX stuff. Kinda hard to follow since there is some additional work going on behind.

You guys can post codes regarding the filter here that way this topic stays clean(er) and the code is posted in the right place.

I then will implement it into the Filter Addon if it really does work.

Edited March 22, 2016 by Tsimi

[radhavallabh 41]

@@auzStar

Thank you I have made the changes to the code.....

The Loader is working perfectly (w00t) :D :D :D :thumbsup:

Sorry for it being slow :blush:  if you have any suggestions that could make it faster please do tell I will surely work on them and get it better.

 

I just noticed this point when you highlighted it....Yes please it would be great if I had the sort and page to work as ajax as well.. Please guide me on how to edit the template bottom.php

I greatly appreciate you valuable time and help....

Awaiting your early response;

Warm Regds.....

 

@@Tsimi

:D :thumbsup: Thank you too for being a valuable support throughout and helping me on many paths...Hope we all go a long way in achieving our goals; Sure I will try to post the edits as much clearly as possible
:)

Warm Regds....

Edited March 22, 2016 by radhavallabh

[auzStar 148]

@@radhavallabh

 

I notice the ajax image loader is not working for sort and pages (it is working for filter).

In ajax_index.php you should enable this code below in the script at the bottom so the ajax image loader will work for sort and pages.

  var use_loading_image = true;

currently you have:

//  var use_loading_image = '';

I will look at template_bottom.php script for you shortly.

[radhavallabh 41]

@@auzStar

Hi, Good Morning... :)

I edited the ajax-index.php as directed by you; :thumbsup: :D

 

I added the function to the price range filter also, but it does not seem to work could you please check and guide me where am I going wrong on it;

Awaiting your response....

Warm Regds...

[auzStar 148]

@@radhavallabh

 

All that we have done so far is for product listing on index page. It will not work for product listings in search results, specials page or new products page, as the module was originally intended. As I said earlier the module is not compatible with your store so do not install it.

 

You can try this in template_bottom.php for sort and pages (this is for their initial selection, before filter is selected, then once sort or pages or filter is selected the scripts inside ajax_index.php takes over). There is some minor differences between this script and the one inside ajax_index.php:

<?php // for template_bottom.php
if (isset($category_depth) && $category_depth == 'products' && !isset($HTTP_GET_VARS['manufacturers_id'])) {
?>

<script type="text/javascript">
$(document).ready(function() {
  var use_loading_image = true;
  if (use_loading_image == true) {
    var loading_image = '<div class="text-center" style="padding: 150px 0 150px 0;"><img src="images/ajax-loader.gif" /></div>';
  }
  var bodyContent_listing = $("#left-div");

  if ($("select[name='filter_id']").is(":visible")) {
    var filterSelect = $("select[name='filter_id']");
    var filterSelect_attr = filterSelect.attr('onchange');
    if (typeof filterSelect_attr !== typeof undefined && filterSelect_attr !== false && filterSelect_attr == 'this.form.submit()') {
      filterSelect.removeAttr('onchange');
    }
    filterSelect.on("change", function() {
      var filter_id = $(this).val();
      if (use_loading_image == true) bodyContent_listing.html(loading_image);
      var href_link = '<?php echo tep_href_link('ajax_index.php', tep_get_all_get_params(array('filter_id', 'page')) . 'filter_id=\'+filter_id+\''); ?>';
      href_link = href_link.replace(/&/g, '&');
      bodyContent_listing.load(href_link);
    });
  }

  var sortlink = bodyContent_listing.find($("div.sort_text a"));
  sortlink.on("click", function(e) {
    e.preventDefault();
    var sort_link = $(this).attr("href");
    var sort_value = sort_link.match(/sort=(.*)/)[1];
    if (use_loading_image == true) bodyContent_listing.html(loading_image);
    var href_link = '<?php echo tep_href_link('ajax_index.php', tep_get_all_get_params(array('sort')) . 'sort=\'+sort_value+\''); ?>';
    href_link = href_link.replace(/&/g, '&');
    bodyContent_listing.load(href_link);
  });

  var navlink = bodyContent_listing.find($("div.toolbar_top a"));
  navlink.on("click", function(e) {
    e.preventDefault();
    if (!$(this).parent().hasClass("active")) {
      var page_link = $(this).attr("href");
      var page = page_link.match(/page=(.*)/)[1];
      if (use_loading_image == true) bodyContent_listing.html(loading_image);
      var href_link = '<?php echo tep_href_link('ajax_index.php', tep_get_all_get_params(array('page')) . 'page=\'+page+\''); ?>';
      href_link = href_link.replace(/&/g, '&');
      bodyContent_listing.load(href_link);
    }
  });
});
</script>

<?php
}
?>

[auzStar 148]

@@radhavallabh

@@auzStar

Hi, Good Morning... :)

I edited the ajax-index.php as directed by you; :thumbsup: :D

 

I added the function to the price range filter also, but it does not seem to work could you please check and guide me where am I going wrong on it;

Awaiting your response....

Warm Regds...

 

RE: the price range filter, have you put the $get function in the right location and taken out any submit functions?

[radhavallabh 41]

@@auzStar

I pasted the code in template bottom.php It is working like a charm....... Many Many Thanks..... :thumbsup: :D :D

 

Yes I removed the submit part on the price range filter.... and pasted the function there

It is giving an error on filter.js at line 63 'e is not defined'

 

starts with....  stop: function(event, ui) {

 

Oh got it its working now.... stop: function(e, event, ui)    (w00t) :D 

 

Thanks soooo much for helping me out through all this stuff , You are just awesome!!!!!!!!

 

:thumbsup: :thumbsup: Warm Regards.....

Edited March 23, 2016 by radhavallabh

[auzStar 148]

New version (v1.1) has been added to the add-on:

http://addons.oscommerce.com/info/9455/#tabs-hist

 

------------------------------------------------------------------------------
CHANGES:

 

refined code
- removed unnecessary parameters being passed
- made sure the script only loads for product listing on the index page and not on the front page (all other pages are OK)

 

other minor improvements/corrections

 

------------------------------------------------------------------------------
 

cheers

[radhavallabh 41]

@@auzStar

Hi, I am having a small issue;

When I click the filter the display is cool;

But after that if I select any of the sort option i.e. price, weight etc it displays the store incorrectly could you pls check.

eg:-

1st step I did was click a filter option

2nd step I selected sort by weight

hence The ajax-index.php opened as a page

 

I tried commenting out the sort, page and filter ajax script from ajax-index.php but yet it is breaking the display..

Could you pls guide me where am I going wrong;

Warm Regards.....

Edited March 24, 2016 by radhavallabh

[radhavallabh 41]

@auzStar

Got it I added the sort div link for replace like the buy link at the end of the ajax-index.php !!! Thanks again for your wonderful help... :D

[marcello 18]

@auzStar

 

Wanted to say that this is a great idea.  :thumbsup:  I haven't been able to test it on my own site; however, I noticed that the demo site experiences this issue when using the Back button on the browser. 

 

It appears that Html5 does have a possible solution that update the browser to reflect the change made with the ajax selection.  I came across an article that explains in more details.

 

http://www.codemag.com/Article/1301091

 

Hope this is helpful and something of interest.

[auzStar 148]

Thanks for the info @@marcello. I'll look into it.

 

cheers

[auzStar 148]

@auzStar

 

Wanted to say that this is a great idea.  :thumbsup:  I haven't been able to test it on my own site; however, I noticed that the demo site experiences this issue when using the Back button on the browser. 

 

It appears that Html5 does have a possible solution that update the browser to reflect the change made with the ajax selection.  I came across an article that explains in more details.

 

http://www.codemag.com/Article/1301091

 

Hope this is helpful and something of interest.

I've been testing this and not only does it work with the back button, it's also helped me make the ajax function without creating new pages i.e. ajax_index.php, these ajax pages will no longer be required, therefore less files to upload for the add-on. The header tags module files are all that will be required.

 

Hope to have a new version to upload soon.

 

Thanks to @@marcello for the info.

[marcello 18]

@auzStar

 

Great news.  I'm glad the info was useful.  I'll do my best to test the new code when it's available.  Most important, thank you for your efforts.  :beers:

[auzStar 148]

New version (v2.0) has been added to the add-on:

http://addons.oscomm...9455/#tabs-hist

 

------------------------------------------------------------------------------
CHANGES:

 

back button now works on ajax requests (thanks to @@marcello who referred me to this link http://www.codemag.com/Article/1301091)

 

the above link also helped me alleviate the necessity to use seperate ajax pages, these are no longer required since the resulting ajax data is now extracted from within the existing pages.

 

other minor improvements/corrections

 

------------------------------------------------------------------------------
 

cheers

Edited April 6, 2016 by auzStar

[radhavallabh 41]

@@auzStar

Hi!

Wow! Can this work on mine as well?? without the separate ajax pages.... :)

[auzStar 148]

@@auzStar

Hi!

Wow! Can this work on mine as well?? without the separate ajax pages.... :)

I'm travelling at the moment so I will have a look for you when I get a chance.

cheers

[auzStar 148]

New version (v2.1) has been added to the add-on:

http://addons.oscomm...9455/#tabs-hist

 

------------------------------------------------------------------------------
CHANGES:

 

bug fixes and improved handling of back and forward button during ajax requests

 

------------------------------------------------------------------------------

 

Demo:
http://www.auzcommerce.com.au/osc234bs_test/index.php?cPath=3_15

 

cheers

[marcello 18]

@auzStar  :thumbsup:  I just added this to a modified dev site and it works great.  I will test some more.  Awesome work!!!

[vampirehunter 16]

I installed this on most recent edge BS version.

 

The ajax loader image just shows up when i click on the second page of a list of products.

seems to just hang and not load the products.

 

What could it be?

 

I have equal height divs active on index.php

Edited April 11, 2016 by vampirehunter

[auzStar 148]

@@vampirehunter

I installed this on most recent edge BS version.

 

The ajax loader image just shows up when i click on the second page of a list of products.

seems to just hang and not load the products.

 

What could it be?

 

I have equal height divs active on index.php

 

Vampire, at this stage I don't know what the problem could be, there are currently no known issues since the add-on is fairly new. Perhaps you've found a bug.

Can you provide a link to your site or if you know how can you check developer tools see if there are any errors?

 

Does it only happen on a specific browser/version?

 

Does it happen on all pages where this should work i.e. index (categories with products), specials, new products, search results?

 

The "equal height divs" shouldn't have any affect.

 

cheers

[vampirehunter 16]

@@vampirehunter

 

Vampire, at this stage I don't know what the problem could be, there are currently no known issues since the add-on is fairly new. Perhaps you've found a bug.

Can you provide a link to your site or if you know how can you check developer tools see if there are any errors?

 

Does it only happen on a specific browser/version?

 

Does it happen on all pages where this should work i.e. index (categories with products), specials, new products, search results?

 

The "equal height divs" shouldn't have any affect.

 

cheers

 

its happening on index, specials and new products.

 

seems like its hanging and not loading the next page.

 

I turned it off and now pages are back to normal loading, so there is maybe some conflict somewhere

[marcello 18]

@vampirehunter 

 

When you click on the link do any errors appear in your browsers developers tool console?  I've not experienced any issues with this code as of yet.