[Addon] Ajax Product Listing for osC 2.3.4 bootstrap

[auzStar]

Support thread for "Ajax Product Listing (bootstrap)".

 

Report problems here.

 

Feedback and comments welcome.

 

Download link:

http://addons.oscommerce.com/info/9455

 

 

This add-on enables faster loading of product listing content, without re-loading the whole website, when using either the manufacturer/category filter drop down list, next/prev page and sort order.

 

Useful, especially if you have other content above the product listings, where the current vertical scroll position is kept on the page when using the filter drop down list, next/prev page and sort order. For example, you may have "Category New Products Carousel" or "Category Popular Products Carousel" above category product listing content.

 

Works for product listings on the following pages:

 

- Category Product Pages
- Specials Page
- New Products Page
- Search Results Page

 

Note: content loaded via ajax is based on the stock osCommerce product listing content.

Edited March 18, 2016 by auzStar

[radhavallabh]

Hi...@@auzStar

Thanks for creating such an awesome addon... Perhaps I had been waiting for this kind of addon for long.... I had a query will it work to ajax refresh just my products when I choose a filter (This is a customized addon I am using currently ) option...

Example view of my current working store is- http://www.radhavallabh.com/radhakrishna-store/radhakrishna-deity-dress-c-25_32.html

 

Awaiting and hoping for your positive response...... :D

Thanks in advance

Warm Regds....

Edited March 19, 2016 by radhavallabh

[radhavallabh]

In addition to the above I asked this question as I am using a customized index.php also

Please your help and support will be deeply appreciated....

:)

Edited March 19, 2016 by radhavallabh

[♥Tsimi]

@@radhavallabh

 

I knew that this addon would catch your attention. :D It doesn't work as it is. Let's see if auzstar can help out.

Edited March 19, 2016 by Tsimi

[radhavallabh]

Hi

@@Tsimi Thanks for your valued update :) Yes I am too eager to get this working :D ....I thought it may work as it is... Lets Hope auzstar helps us out in getting the things to work.....

Edited March 19, 2016 by radhavallabh

[auzStar]

Anything's possible, even miracles :lol:. (It does work on stock std osC BS without core changes :D)

 

@@radhavallabh Is your site even bootstrap?

 

[radhavallabh]

No its not Bootstrap... But I use a customized theme on oscommerce 2.34

[♥Tsimi]

:D

We need a miracle Dom!

He wants this addon (http://addons.oscommerce.com/info/9374) to update the product listing page via ajax.

[♥bruyndoncx]

is it to save bandwith ? otherwise you could also filter in the browser

[auzStar]

is it to save bandwith ? otherwise you could also filter in the browser

 

Sorry Carine. Not sure what you mean?

[auzStar]

@@radhavallabh

 

To get you started :),

 

the way the script works in the module is that it targets specific html elements (and their id's and classes), initially to pinpoint the location of the product listing content:

  var bodyContent_listing = $("#bodyContent .contentContainer");

and then acting on the selected element:

  var sortlink = bodyContent_listing.find($("ul.dropdown-menu li a"));
  sortlink.on("click", function(e) {

first setting up the ajax page link while gathering all the required parameters:

    var href_link = \'' . tep_href_link('ajax_advanced_search_result.php', tep_get_all_get_params(array('sort')) . 'sort=\'+sort_value+\'&languages_id=' . $languages_id) . '\';

and then loading the results page (i.e. ajax_advanced_search_result.php) within the target body content captured earlier:

    bodyContent_listing.load(href_link);

Using developer tools with DOM explorer, you can see what element id's and classes are used on your site and then replace in the script with yours.

 

You would need to create a new event for your customised filter (probably under each case statement):

    $("customer filter").on("click", function(e) {

Also, the contents of the ajax pages, i.e. ajax_index.php, would need to be updated with the code from your current php files ie. index.php.

 

cheers

[auzStar]

Just to add to above, I'll try to help when I can.

[radhavallabh]

@@auzStar

Thank you so much... for explaining me the working of it....
Currently this below action on the form of the filter triggers the script to run

 

I have this on index.php

   require('more/filter/filter.php');

//After several lines the bm_filter is called on my index.php

$boxdata = new bm_filter;
echo $boxdata->getData();

This is below script on my bm_filter.php which triggers the action of the form

<form name="form_srch" id="form_srch" action="'.tep_href_link(FILENAME_DEFAULT).'" method="get" >........

On filter.php the below is the end line for submit... P.S.( The commented part is the code I tried to make ajax work... Which is very aweful)
 

.............
  $("#form_srch").submit(
			//function(e){
//				  e.preventDefault();
//	            $.get('http://www.radhavallabh.com/radhakrishna-store/more/filter/filter.php', $(this).serialize(), function(data){
//	                $('#left-div').html(data);
//	            }
			//	 $.ajax({
//        type: 'POST',
//        url: "http://www.radhavallabh.com/radhakrishna-store/more/filter/filter.php",
//        async: false,
//        data: $(this).serialize(),
//        success: function(data) {
//            $('#left-div').html(data);
//        }
//				 }
				);     

I wanted only my product listing div to refresh with products.... Hope you could guide me in implementing your awesome code to it....... :D
Awaiting your earliest and positive response...

Warm Regds......

Edited March 20, 2016 by radhavallabh

[radhavallabh]

I forgot to mention #left-div is the div that contains the product listing.....

And Sorry it is not filter.php It is filter.js ..... which has the........ $("#form_srch").submit();

Edited March 20, 2016 by radhavallabh

[auzStar]

I forgot to mention #left-div is the div that contains the product listing.....

And Sorry it is not filter.php It is filter.js ..... which has the........ $("#form_srch").submit();

 

What submits the form? Is there an onclick or something some where?

 

The below code should work as long as the data inside filter.php is being returned in html format (not json). But if you have an onclick somewhere then the e.preventDefault won't work. In that case the $.get command needs to be inside the onclick code.

  $("#form_srch").submit(
		function(e){
		    e.preventDefault();
	            $.get('http://www.radhavallabh.com/radhakrishna-store/more/filter/filter.php', $(this).serialize(), function(data){
	                $('#left-div').html(data);
	            })
		 });     

[radhavallabh]

@@auzStar

Hi Thanks so much for your valuable time and help...
Yes the form auto submits as soon a s a filter option is selected.... The end user need not click the submit button for the filters to work... Hence I do not have a onClick anywhere.
On filter.js

  $("#attrib input[type=checkbox]").change(function() {
.........
 }                    
            $("#form_srch").submit(

You are right but even the updated script you just gave me still does not work and refreshes the complete page Again....
 

May be as I have  this code below in my bm_filter.php?

<form name="form_srch" id="form_srch" action="'.tep_href_link(FILENAME_DEFAULT).'" method="get" >

Hence it forces the complete index.php to refresh??

I am using jquery in support to it.

Awaiting your response  on the above.....
Warm regds.....

Edited March 20, 2016 by radhavallabh

[radhavallabh]

@@auzStar

On bm_filter.php if I try below will it work....

var bodyContent_listing = $("#left-div.contentContainer");

var href_link = \'' . tep_href_link('index.php', tep_get_all_get_params(???????????? I am so confused what should go here please could you help on how to add the selected filter variables to this) . '\';

<form name="form_srch" id="form_srch" action="bodyContent_listing.load(href_link)" method="get" >

If yes How to get this part working in above...
tep_get_all_get_params(???????????? I am so confused what should go here please could you help on how to add the selected filter variables to this) :unsure:  .

 

Awaiting your response and help :) ;

Warm Regds....

Edited March 20, 2016 by radhavallabh

[auzStar]

@@auzStar

Hi Thanks so much for your valuable time and help...

Yes the form auto submits as soon a s a filter option is selected.... The end user need not click the submit button for the filters to work... Hence I do not have a onClick anywhere.

On filter.js

 $("#attrib input[type=checkbox]").change(function() {

.........

 }                    

            $("#form_srch").submit(

You are right but even the updated script you just gave me still does not work and refreshes the complete page Again....

May be as I have  this code below in my bm_filter.php?

<form name="form_srch" id="form_srch" action="'.tep_href_link(FILENAME_DEFAULT).'" method="get" >

Hence it forces the complete index.php to refresh??

I am using jquery in support to it.

Awaiting your response  on the above.....

Warm regds.....

 

Yes, make sure your forms have unique names/id's.

 

Yes, that's what I meant, "onclick or something". The "change" function is the "or something" :).

 

You need something like this (but get rid of the $("#form_srch").submit( ):

$("#attrib input[type=checkbox]").change(function(e) {
		    e.preventDefault();
	            $.get('http://www.radhavallabh.com/radhakrishna-store/more/filter/filter.php', $(this).serialize(), function(data){
	                $('#left-div').html(data);
	            })
		 });    

but I'm not sure if $(this).serialize() will capture the selected option, lets hope so.

 

cheers

Edited March 20, 2016 by auzStar

[radhavallabh]

@@auzStar

Hi, I tried the above code the filters do work but it is refreshing the page again completely..... :(

[auzStar]

@@auzStar

 

On bm_filter.php if I try below will it work....

var bodyContent_listing = $("#left-div.contentContainer");

var href_link = \'' . tep_href_link('index.php', tep_get_all_get_params(???????????? I am so confused what should go here please could you help on how to add the selected filter variables to this) . '\';

<form name="form_srch" id="form_srch" action="bodyContent_listing.load(href_link)" method="get" >

If yes How to get this part working in above...

tep_get_all_get_params(???????????? I am so confused what should go here please could you help on how to add the selected filter variables to this) :unsure:  .

 

Awaiting your response and help :) ;

Warm Regds....

 

tep_get_all_get_params, as it says, gets all get parameters i.e. $_GET or $HTTPS_GET_VARS variables that have already been passed to the current page via query strings in the url, which then get passed to the next page in the tep_href_link. I you want to exclude any from being passed you put then inside the array() as per below, separated by comma(,). You usually exclude them because you need to pass a new value for a current selection i.e. filter_value.

var href_link = \'' . tep_href_link('index.php', tep_get_all_get_params(array('filter')) . 'filter=\'+filter_value+\'') . '\';

[auzStar]

@@auzStar

Hi, I tried the above code the filters do work but it is refreshing the page again completely..... :(

Try emptying your browser cache, sometimes javascript files don't update locally and still use your old one.

[auzStar]

@@auzStar

 

On bm_filter.php if I try below will it work....

var bodyContent_listing = $("#left-div.contentContainer");

var href_link = \'' . tep_href_link('index.php', tep_get_all_get_params(???????????? I am so confused what should go here please could you help on how to add the selected filter variables to this) . '\';

<form name="form_srch" id="form_srch" action="bodyContent_listing.load(href_link)" method="get" >

If yes How to get this part working in above...

tep_get_all_get_params(???????????? I am so confused what should go here please could you help on how to add the selected filter variables to this) :unsure:  .

 

Awaiting your response and help :) ;

Warm Regds....

Don't use these changes you've suggested. Don't modify the form action. It's the jQuery code that will do the work of loading the resulting page inside your left-div container.

 

BTW, is you filter id attrib or attribs?

 $("#attrib input[type=checkbox]").change(function(e) { 

Edited March 20, 2016 by auzStar

[radhavallabh]

@@auzStar

I refreshed browser but still that previous edit did not work....

 

Okay I will not make this change for the bm_filter.php ....

 

It is 'attribs' sorry my typo error.....

[radhavallabh]

@@auzStar

I figured out after testing twice thrice....

After I remove $("#form_srch").submit in js the filters stops working altogether...

Edited March 20, 2016 by radhavallabh

[auzStar]

@@auzStar

I figured out after testing twice thrice....

After I remove $("#form_srch").submit in js the filters stops working altogether...

 

Taking submit out stops the default action of submitting the form, which is what we want. But if the product listing doesn't change then the $get function isn't working.

Make sure you're taking out the closing "});" when you remove the submit function, but make sure the other functions still have their closing "});".

 

And make sure the $get function has closing  "});", not just }.

 

You need to open your browser Developer Tools Console to see if there are any error messages, this will help.

 

BTW what is inside this /ext/filter/filter.php file?

Edited March 20, 2016 by auzStar