Swapping out only a section of home page...
 

Hello,

I have a website (mixnob.com) that has a section at the bottom of the home page with three tabs (Featured Products, On Sale, and New Products). The data for these sections is delivered dynamically from a database. I have the variables that call all of the corresponding data. What I am needing help with is how to code this section so that when someone clicks on each tab, the correct products will show without the whole page reloading. So when you first load the home page, it defaults to showing the Featured Products, then when you click on New products, they will show, and so on.

So far I have setup the graphic and css part of it. The three tabs are there and change to a different hover color once clicked. I just need help with the actual script to make the functionality work.

I would be appreciative for any help anyone can offer with this.

Thanks,
Brook Floyd

This is the second time you have posted this question. The first time I looked at your site. I think it's far more complicated then it needs to be. I could not follow anything.

Here is a general explanation to do what you want:
You have to use AJAX. Your tabs call the ajax function and pass it an identifier. Ajax then calls a server-side script like PHP. That script gets the identifier and obtains the info and passes it back.

A second method:
Inside of the div that shows the results of your tabs have three divs, each with what is to be displayed per tab. Use display: none; on two of them. The tags than call a javascript function to turn display: none; to all three divs and then turn display: block; for the one you want to show.
Problem with this method is you have to change the HTML of your index page each time there is a change in what you want displayed. You can ruin the index page if your not careful!!!

One last thing IMHO you should light the tab that is displayed.

Hello, thanks for the post. The reason I posted it again is because I posted it in the Ajax section as was suggested. Is it still not in the correct forum?

And as far as the complexity of the site, I know. It is complicated because it is a hosted storefront from an ecommerce company called bigcommerce. They have a ton of variables, etc that make things have multiply layers, etc. but what I'm wanting to do shouldn't be too hard for a coder. I know the variables and can help in that way. And yes, I was going to make the selected tab highlight but figured it wouldn't be possible until I had the other code in place.

Anyways, I'm just looking for help to get this done. I am willing to pay someone for their time as well. I don't think it would take an experienced coder more than a half hour.

Thanks,
Brook Floyd

where does the content of the tabs come from?

Hi, it comes from global variables that bigcommerce uses that pulls the data from the database. For example, the four products that display now come from the variable %%Panel.HomeFeaturedProducts%%

The other two tabs would come from the global variables %%Panel.HomeSaleProducts%% and %%Panel.HomeNewProducts%%

So basically the ajax, or whatever coding needed to do the switching just has to swap out those three variables. Those variables pull in all the corresponding products from the database.

Here is the default.html file that is currently used for the home page. You can see that it is fairly simple but there are lots of these global variables wrapped in %% that bring in other sections of content and code.

Anyone have any ideas on this or can point me in the right direction?

Thanks,
Brook Floyd

I am thinking your %%what ever %% fills in a divs for it in the html. If wrong don't know what to say.

Anyway if that is true you just have to control which one is displayed. Here is a way of doing that.