Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New Coder
    Join Date
    Jan 2013
    Posts
    19
    Thanks
    1
    Thanked 0 Times in 0 Posts

    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

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,279
    Thanks
    23
    Thanked 611 Times in 610 Posts
    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.

  • #3
    New Coder
    Join Date
    Jan 2013
    Posts
    19
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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

  • #4
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,366
    Thanks
    11
    Thanked 590 Times in 571 Posts
    where does the content of the tabs come from?
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/9/03) IE7:0.1, IE8:4.6, IE11:9.1, IE9:3.1, IE10:3.0, FF:17.2, CH:46, SF:11.4, NON-MOUSE:38%

  • #5
    New Coder
    Join Date
    Jan 2013
    Posts
    19
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    %%Panel.HTMLHead%%
    <body>
    <div id="Header_Default">%%Panel.Header%%</div>
    <div id="homebackground">
    <div id="homebanner">
    <a href="http://www.mixnob.com">
    <img width="980" height="283" alt="Featured Product" src="http://www.mixnob.com/templates/__custom/images/homebanner.jpg">
    </a>
    </div></div>
    
    <div id="Container">
    <div id="hometribanner">
    <a href="http://www.mixnob1.com">
    <img width="326" height="140" alt="Featured Product" src="http://www.mixnob.com/templates/__custom/images/hometribanner1.jpg">
    </a></div>
    <div id="hometribanner">
    <a href="http://www.mixnob2.com">
    <img width="326" height="140" alt="Featured Product" src="http://www.mixnob.com/templates/__custom/images/hometribanner2.jpg">
    </a></div>
    <div id="hometribanner">
    <a href="http://www.mixnob3.com">
    <img width="328" height="140" alt="Featured Product" src="http://www.mixnob.com/templates/__custom/images/hometribanner3.jpg">
    </a></div>
    	<div id="Wrapper">
    		%%Panel.WrapperBanner%%
    		<div class="Content Widest" id="LayoutColumn1">
    		<!--%%Panel.HomeSlideShow%%
    			<div class="hero clearfix">
    				<div class="hero_slider">
    					%%Banner.TopBanner%%
    				</div>
    				<a id="slide_prev" class="prev" href="#">&lt;</a>
    				<a id="slide_next" class="next" href="#">&gt;</a>
    			</div>
    			%%Discount.FreeShippingEligibility%%
    			%%Panel.HomeFeaturedProducts%%
    			<!--%%Panel.HomeSaleProducts%%-->
    			<!--%%Panel.HomeNewProducts%%-->
    			%%Banner.BottomBanner%%
    		</div>
    		<br class="Clear" />
    	</div>
    	%%Panel.Footer%%
    </div>
    </body>
    </html>

  • #6
    New Coder
    Join Date
    Jan 2013
    Posts
    19
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Anyone have any ideas on this or can point me in the right direction?

    Thanks,
    Brook Floyd

  • #7
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,279
    Thanks
    23
    Thanked 611 Times in 610 Posts
    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.

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title>Title of the document</title>
    <script type="text/javascript">
    function ControlTabs(segTab){
    	document.getElementById('HomeFeaturedProducts').style.display = "none";
    	document.getElementById('HomeNewProducts').style.display = "none";
    	document.getElementById('HomeSaleProducts').style.display = "none";
    	document.getElementById(segTab).style.display = "block";
    }
    </script>
    <style type="text/css">
    
    li{
    	list-style: none;
    	display:inline;
    	float:left;
    }
    #HomeFeaturedProducts{
    	display:block;
    }
    #HomeNewProducts{
    	display:none;
    }
    #HomeSaleProducts{
    	display:none;
    }
    </style>
    </head>
    
    <body>
    <div class="blocktwo" style="display:">
    <div class="hometabs">
    	<button type="button" onclick="ControlTabs('HomeFeaturedProducts');">FEATURED PRODUCTS</button>
    	<button type="button" onclick="ControlTabs('HomeSaleProducts');">ON SALE</button>
    	<button type="button" onclick="ControlTabs('HomeNewProducts');">NEW PRODUCTS</button>
    </div>
    
    <div class="Block FeaturedProducts Moveable Panel"  id="HomeFeaturedProducts">
    <h2>Featured Products</h2>
    
    <div class="BlockContent">
    <ul class="ProductList">
    <li class="Odd">
    	<div class="ProductImage QuickView" data-product="32">
    	<a href="http://www.mixnob.com/izotope-ozone-5/"><img src="http://cdn2.bigcommerce.com/server900/fh6fet/products/32/images/128/iZotope_Ozone5_clip_8aed999966653eaf5226806153af97fc__73630.1358466808.220.220.jpg" alt="iZotope Ozone 5" /></a>
    	</div>
    	<div class="ProductDetails">
    	<strong><a href="http://www.mixnob.com/izotope-ozone-5/">iZotope Ozone 5</a></strong>
    	</div>
    	<div class="ProductPriceFeatured">
    	<div class="ProductPriceFeatured">$499.00</div>
    	<span class="Rating Rating5"><img src="http://www.mixnob.com/templates/__custom/images/IcoRating5.gif" alt=""  style="" /></span>
    	</div>
    	<div class="lowestpricetwo">Add To Cart For Lowest Price!</div>
    	<div class="ProductActionAdd" style="display:;">
    	<a href="http://mixnob.com/cart.php?action=add&amp;product_id=32">Add To Cart</a>
    	</div>
    </li>
    
    <li class="Even">
    	<div class="ProductImage QuickView" data-product="29">
    	<a href="http://www.mixnob.com/waves-redd/"><img src="http://cdn2.bigcommerce.com/server900/fh6fet/products/29/images/116/plugin17__06517.1357605367.220.220.jpg" alt="Waves REDD" /></a>
    	</div>
    	<div class="ProductDetails">
    	<strong><a href="http://www.mixnob.com/waves-redd/">Waves REDD</a></strong>
    	</div>
    	<div class="ProductPriceFeatured">
    	<div class="ProductPriceFeatured">$249.00</div>
    	<span class="Rating Rating4"><img src="http://www.mixnob.com/templates/__custom/images/IcoRating4.gif" alt=""  style="" /></span>
    	</div>
    
    	<div class="lowestpricetwo">Add To Cart For Lowest Price!</div>
    
    
    	<div class="ProductActionAdd" style="display:;">
    	<a href="http://mixnob.com/cart.php?action=add&amp;product_id=29">Add To Cart</a>
    	</div>
    </li>
    
    <li class="Odd">
    	<div class="ProductImage QuickView" data-product="31">
    	<a href="http://www.mixnob.com/waves-mercury-native-bundle/"><img src="http://cdn2.bigcommerce.com/server900/fh6fet/products/31/images/131/mernat_49e0c004d041dff65673b25769a795ef__92907.1358484498.220.220.jpg" alt="Waves Mercury Native Bundle" /></a>
    	</div>
    	<div class="ProductDetails">
    	<strong><a href="http://www.mixnob.com/waves-mercury-native-bundle/">Waves Mercury Native Bundle</a></strong>
    	</div>
    	<div class="ProductPriceFeatured">
    	<div class="ProductPriceFeatured">$2,799.00</div>
    	<span class="Rating Rating5"><img src="http://www.mixnob.com/templates/__custom/images/IcoRating5.gif" alt=""  style="" /></span>
    	</div>
    
    	<div class="lowestpricetwo">Add To Cart For Lowest Price!</div>
    
    
    	<div class="ProductActionAdd" style="display:;">
    	<a href="http://mixnob.com/cart.php?action=add&amp;product_id=31">Add To Cart</a>
    	</div>
    </li>
    
    <li class="Even">
    	<div class="ProductImage QuickView" data-product="33">
    	<a href="http://www.mixnob.com/izotope-stutter-edit/"><img src="http://cdn2.bigcommerce.com/server900/fh6fet/products/33/images/132/iZotope_Ozone5_clip_8aed999966653eaf5226806153af97fc__91481.1358738751.220.220.jpg" alt="iZotope Stutter Edit" /></a>
    	</div>
    	<div class="ProductDetails">
    	<strong><a href="http://www.mixnob.com/izotope-stutter-edit/">iZotope Stutter Edit</a></strong>
    	</div>
    	<div class="ProductPriceFeatured">
    	<div class="ProductPriceFeatured">$499.00</div>
    	<span class="Rating Rating0"><img src="http://www.mixnob.com/templates/__custom/images/IcoRating0.gif" alt=""  style="" /></span>
    	</div>
    	<div class="lowestpricetwo">Add To Cart For Lowest Price!</div>
    	<div class="ProductActionAdd" style="display:;">
    	<a href="http://mixnob.com/cart.php?action=add&amp;product_id=33">Add To Cart</a>
    	</div>
    </li>
    </ul>
    <br class="Clear" />
    </div>
    </div>
    
    <div class="Block SaleProducts Moveable Panel"  id="HomeSaleProducts">
    <h2>Products On Sale</h2>
    <div class="BlockContent">
    <ul class="ProductList">
    <li class="Odd">
    	<div class="ProductImage">
    	<a href="http://www.mixnob.com/waves-element-synthesis/"><img src="http://cdn2.bigcommerce.com/server900/fh6fet/products/30/images/122/element_body__38211.1357606943.220.220.png" alt="Waves Element Synthesis" /></a>
    	</div>
    	<div class="ProductDetails">
    	<strong><a href="http://www.mixnob.com/waves-element-synthesis/">Waves Element Synthesis</a></strong>
    	</div>
    	<div class="ProductPriceFeatured">
    	<div class="ProductPriceFeatured"><span class="SalePrice">$149.99</span></div>
    	<span class="Rating Rating5"><img src="http://www.mixnob.com/templates/__custom/images/IcoRating5.gif" alt="" style="" /></span>
    	</div>
    	<div class="lowestpricetwo">Add To Cart For Lowest Price!</div>
    	<div class="ProductActionAdd" style="display:;">
    	<a href="http://mixnob.com/cart.php?action=add&amp;product_id=30">Add To Cart</a>
    	</div>
    </li>
    
    <li class="Even">
    	<div class="ProductImage QuickView" data-product="29">
    	<a href="http://www.mixnob.com/waves-redd/"><img src="http://cdn2.bigcommerce.com/server900/fh6fet/products/29/images/116/plugin17__06517.1357605367.220.220.jpg" alt="Waves REDD" /></a>
    	</div>
    	<div class="ProductDetails">
    	<strong><a href="http://www.mixnob.com/waves-redd/">Waves REDD</a></strong>
    	</div>
    	<div class="ProductPriceFeatured">
    	<div class="ProductPriceFeatured">$249.00</div>
    	<span class="Rating Rating4"><img src="http://www.mixnob.com/templates/__custom/images/IcoRating4.gif" alt=""  style="" /></span>
    	</div>
    
    	<div class="lowestpricetwo">Add To Cart For Lowest Price!</div>
    
    
    	<div class="ProductActionAdd" style="display:;">
    	<a href="http://mixnob.com/cart.php?action=add&amp;product_id=29">Add To Cart</a>
    	</div>
    </li>
    
    <li class="Odd">
    <div class="ProductImage QuickView" data-product="33">
    <a href="http://www.mixnob.com/izotope-stutter-edit/">
    <img src="http://cdn2.bigcommerce.com/server900/fh6fet/products/33/images/132/iZotope_Ozone5_clip_8aed999966653eaf5226806153af97fc__91481.1358738751.220.220.jpg" alt="iZotope Stutter Edit" /></a>
    </div>
    <div class="ProductDetails">
    <strong><a href="http://www.mixnob.com/izotope-stutter-edit/">iZotope Stutter Edit</a></strong>
    </div>
    <div class="ProductPriceFeatured">
    <div class="ProductPriceFeatured">$499.00</div>
    <span class="Rating Rating0"><img src="http://www.mixnob.com/templates/__custom/images/IcoRating0.gif" alt=""  style="" /></span>
    </div>
    <div class="lowestpricetwo">Add To Cart For Lowest Price!</div>
    <div class="ProductActionAdd" style="display:;">
    <a href="http://mixnob.com/cart.php?action=add&amp;product_id=33">Add To Cart</a>
    </div>
    </li>
    
    <li class="Odd">
    	<div class="ProductImage QuickView" data-product="32">
    	<a href="http://www.mixnob.com/izotope-ozone-5/"><img src="http://cdn2.bigcommerce.com/server900/fh6fet/products/32/images/128/iZotope_Ozone5_clip_8aed999966653eaf5226806153af97fc__73630.1358466808.220.220.jpg" alt="iZotope Ozone 5" /></a>
    	</div>
    	<div class="ProductDetails">
    	<strong><a href="http://www.mixnob.com/izotope-ozone-5/">iZotope Ozone 5</a></strong>
    	</div>
    	<div class="ProductPriceFeatured">
    	<div class="ProductPriceFeatured">$499.00</div>
    	<span class="Rating Rating5"><img src="http://www.mixnob.com/templates/__custom/images/IcoRating5.gif" alt=""  style="" /></span>
    	</div>
    
    	<div class="lowestpricetwo">Add To Cart For Lowest Price!</div>
    
    
    	<div class="ProductActionAdd" style="display:;">
    	<a href="http://mixnob.com/cart.php?action=add&amp;product_id=32">Add To Cart</a>
    	</div>
    </li>
    
    </ul>
    </div>
    <br class="Clear" />
    </div>
    
    <div class="Block NewProducts Moveable Panel" id="HomeNewProducts" style="display:">
    <h2>New Products</h2>
    <div class="BlockContent">
    <ul class="ProductList">
    <li class="Odd">
    <div class="ProductImage QuickView" data-product="33">
    <a href="http://www.mixnob.com/izotope-stutter-edit/"><img src="http://cdn2.bigcommerce.com/server900/fh6fet/products/33/images/132/iZotope_Ozone5_clip_8aed999966653eaf5226806153af97fc__91481.1358738751.220.220.jpg" alt="iZotope Stutter Edit" /></a>
    </div>
    <div class="ProductDetails">
    <strong><a href="http://www.mixnob.com/izotope-stutter-edit/">iZotope Stutter Edit</a></strong>
    </div>
    <div class="ProductPriceFeatured">
    <div class="ProductPriceFeatured">$499.00</div>
    <span class="Rating Rating0"><img src="http://www.mixnob.com/templates/__custom/images/IcoRating0.gif" alt=""  style="" /></span>
    </div>
    <div class="lowestpricetwo">Add To Cart For Lowest Price!</div>
    <div class="ProductActionAdd" style="display:;">
    <a href="http://mixnob.com/cart.php?action=add&amp;product_id=33">Add To Cart</a>
    </div>
    </li>							<li class="Even">
    <div class="ProductImage QuickView" data-product="32">
    <a href="http://www.mixnob.com/izotope-ozone-5/"><img src="http://cdn2.bigcommerce.com/server900/fh6fet/products/32/images/128/iZotope_Ozone5_clip_8aed999966653eaf5226806153af97fc__73630.1358466808.220.220.jpg" alt="iZotope Ozone 5" /></a>
    </div>
    <div class="ProductDetails">
    <strong><a href="http://www.mixnob.com/izotope-ozone-5/">iZotope Ozone 5</a></strong>
    </div>
    <div class="ProductPriceFeatured">
    <div class="ProductPriceFeatured">$499.00</div>
    <span class="Rating Rating5"><img src="http://www.mixnob.com/templates/__custom/images/IcoRating5.gif" alt=""  style="" /></span>
    </div>
    <div class="lowestpricetwo">Add To Cart For Lowest Price!</div>
    <div class="ProductActionAdd" style="display:;">
    <a href="http://mixnob.com/cart.php?action=add&amp;product_id=32">Add To Cart</a>
    </div>
    </li>							<li class="Odd">
    <div class="ProductImage QuickView" data-product="31">
    <a href="http://www.mixnob.com/waves-mercury-native-bundle/"><img src="http://cdn2.bigcommerce.com/server900/fh6fet/products/31/images/131/mernat_49e0c004d041dff65673b25769a795ef__92907.1358484498.220.220.jpg" alt="Waves Mercury Native Bundle" /></a>
    </div>
    <div class="ProductDetails">
    <strong><a href="http://www.mixnob.com/waves-mercury-native-bundle/">Waves Mercury Native Bundle</a></strong>
    </div>
    <div class="ProductPriceFeatured">
    <div class="ProductPriceFeatured">$2,799.00</div>
    <span class="Rating Rating5"><img src="http://www.mixnob.com/templates/__custom/images/IcoRating5.gif" alt=""  style="" /></span>
    </div>
    <div class="lowestpricetwo">Add To Cart For Lowest Price!</div>
    <div class="ProductActionAdd" style="display:;">
    <a href="http://mixnob.com/cart.php?action=add&amp;product_id=31">Add To Cart</a>
    </div>
    </li>							<li class="Even">
    <div class="ProductImage QuickView" data-product="30">
    <a href="http://www.mixnob.com/waves-element-synthesis/"><img src="http://cdn2.bigcommerce.com/server900/fh6fet/products/30/images/122/element_body__38211.1357606943.220.220.png" alt="Waves Element Synthesis" /></a>
    </div>
    <div class="ProductDetails">
    <strong><a href="http://www.mixnob.com/waves-element-synthesis/">Waves Element Synthesis</a></strong>
    </div>
    <div class="ProductPriceFeatured">
    <div class="ProductPriceFeatured"><span class="SalePrice">$149.99</span></div>
    <span class="Rating Rating5"><img src="http://www.mixnob.com/templates/__custom/images/IcoRating5.gif" alt=""  style="" /></span>
    </div>
    <div class="lowestpricetwo">Add To Cart For Lowest Price!</div>
    <div class="ProductActionAdd" style="display:;">
    <a href="http://mixnob.com/cart.php?action=add&amp;product_id=30">Add To Cart</a>
    </div>
    </li>
    </ul>
    <br class="Clear" />
    </div>
    <br class="Clear" />
    </div>
    </div>
    </body>
    </html>


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •