Product description tabs disappeared.

[KenPalmer]

I've been tweaking our store, and just noticed that the product description tabs have disappeared from the product page. After backing out most of the layout and style edits, it still doesn't appear.

Markup for the tab controls gets rendered to the browser, but has a visibility:hidden attribute applied to the containing div. Here is the markup. I indented for legibility. You can see the second containing div has the visibility:hidden property.

Code: Select all

<div class="tabs">
	<div id="ctl00_ctl00_NestedMaster_PageContent_ctl00_ProductDetailsTabs" class="tabs" style="visibility:hidden;">
		<div id="ctl00_ctl00_NestedMaster_PageContent_ctl00_ProductDetailsTabs_header" class="ajax__tab_header">
			<span id="ctl00_ctl00_NestedMaster_PageContent_ctl00_ProductDetailsTabs_ctl00_tab">
				<span class="ajax__tab_outer">
					<span class="ajax__tab_inner">
						<a class="ajax__tab_tab" id="__tab_ctl00_ctl00_NestedMaster_PageContent_ctl00_ProductDetailsTabs_ctl00" href="#" style="text-decoration:none;">
						<span>Description</span></a>
					</span>
				</span>
			</span>
			<span id="ctl00_ctl00_NestedMaster_PageContent_ctl00_ProductDetailsTabs_ctl01_tab">
				<span class="ajax__tab_outer">
					<span class="ajax__tab_inner">
						<a class="ajax__tab_tab" id="__tab_ctl00_ctl00_NestedMaster_PageContent_ctl00_ProductDetailsTabs_ctl01" href="#" style="text-decoration:none;">
							<span>Reviews</span></a>
					</span>
				</span>
			</span>
		</div>
		<div id="ctl00_ctl00_NestedMaster_PageContent_ctl00_ProductDetailsTabs_body" class="ajax__tab_body" style="height:100%;display:block;">
			<div id="ctl00_ctl00_NestedMaster_PageContent_ctl00_ProductDetailsTabs_ctl00" id="ctl00_ctl00_NestedMaster_PageContent_ctl00_ProductDetailsTabs_ctl00" class="ajax__tab_panel">
				<div id="ctl00_ctl00_NestedMaster_PageContent_ctl00_ProductDetailsTabs_ctl00_ProductDescription1_DescriptionAjax">
					<div class="widget productDescription">
						<div class="innerSection">
							<div class="header">
								<h2>
									Description&nbsp;
								</h2>
						</div>
						<div class="content">
						<div class="descriptionWrapper">
							<p><span>Covers subjects such as US Government, Peoples of America, World History, Countries of the World, an Atlas, Math, Biology, Chemistry, Physics, English and Literature. Contains an alphabetized, illustrated guide to books, plays, and literary figures.</span></p>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div id="ctl00_ctl00_NestedMaster_PageContent_ctl00_ProductDetailsTabs_ctl01" id="ctl00_ctl00_NestedMaster_PageContent_ctl00_ProductDetailsTabs_ctl01" class="ajax__tab_panel" style="display:none;visibility:hidden;">			
</div>

If I change that second div to this in the Chrome elements console, it renders the tabs, albeit not styled with the colors, but at least it displays them.

Code: Select all

<div id="ctl00_ctl00_NestedMaster_PageContent_ctl00_ProductDetailsTabs" class="tabs" style="visibility:block;">

That output appears to be rendered by the ProductPage.ascx control. I've looked at that, and at the code-behind. The Page_PreRender() event in that control has some visibility related code. But when running this in debugger it appears to have the properties set correctly. Here is a code snippet from that.

Code: Select all

        protected void Page_PreRender(object sender, EventArgs e)
        {
            ProductDetailsTabs.Tabs[0].Visible = ProductDescription1.Visible;
            if (!string.IsNullOrEmpty(_Product.ExtendedDescription))
            {
                ProductDetailsTabs.Tabs[1].Visible = true;
                ExtendedDescription.Text = _Product.ExtendedDescription;
            }
            else
            {
                ProductDetailsTabs.Tabs[1].Visible = false;
            }
            ProductDetailsTabs.Tabs[2].Visible = ProductReviewsPanel1.Visible;
            ProductDetailsTabs.Tabs[3].Visible = MoreCategoryItems1.Visible;
        }

From the above, debugger shows the Tabs[#].Visible properties get set as follows:
ProductDetailsTabs.Tabs[0].Visible = true
ProductDetailsTabs.Tabs[1].Visible = false
ProductDetailsTabs.Tabs[2].Visible = true
ProductDetailsTabs.Tabs[3].Visible = false

This was working yesterday. I think the problem may rest with one of the database settings, but don't know where to look for that. Any guidance would be appreciated. Thanks.

[Logan Rhodehamel]

Did javascript get disabled in the browser or is there some other javascript related error when the page loads up?

By the way, we decided to move to a different tab solution in Gold R2 because of troubles with that tab component - primarily that they won't display at all without javascript.

[KenPalmer]

Logan, thanks for helping me out. Good question. JavaScript is not disabled. Earlier this morning I was getting this warning in Chrome:
Resource interpreted as Image but transferred with MIME type image/jpg: "http://local.alumnistore.com/GetImage.a ... 0&width=50".

That was originating from the GetImage.ashx control. I fixed that by altering line 221 in the GetImage.ashx control as indicated below:

Code: Select all

//string contentType = "image/" + cleanExtension;
string contentType = "Image"; // 10/2/2012 [Ken] To fix warning "Resource interpreted as Image but transferred with MIME type image/jpg:" from console.

Undoing that change doesn't make the tabs re-appear. I've also changed the theme back to "Computer" just in case there was something I messed up with my new theme. They still don't appear.

Right now the Chrome console shows the following message when that product page loads:

Code: Select all

FB.getLoginStatus() called before calling FB.init().  all.js:54

It took me a couple of day to manually load products, so I would hate to totally re-install and start over. This morning it felt like I was inches away from finishing before this problem appeared.

One other thing to note. I had created a second ProductDescription.ascx control, that omitted the customFieldsWrapper div. This was so I could shift the custom fields wrapper to show up next to the product image (above the add to cart/wishlist buttons beside the product image). I backed that change out as well so that I'm dealing with the original control that was provided. This worked out of the box, when I first installed.

This just "feels" to me like it's a database related issue. Maybe changes that I've made in the admin console modified some setting in a table that's impacting this. What I should have done is captured a snapshot of the original database structure before tweaking the layout. If I had a copy of the original data structure with records I may be able to run some compare scripts to see what's different. Without going to that extent, knowing where to look, would probably help out. Do you know what set of tables are associated with the store layout? I didn't see a DB diagram. Thanks.

[KenPalmer]

Can I install a second version of AbleCommerceGold on my workstation with the same license key? In troubleshooting this problem, I want to put a non-edited version of the software on my box. Thanks.

[Logan Rhodehamel]

I still feel focused on javascript because the symptom you describe matches perfectly with what happens when the javascript fails to initialize the tab container. In the absence of a javascript function being fired, the container will remain display:hidden. I won't say it's impossible but I can't imagine what database configuration would cause that to happen.

Is it possible for you to obtain the Gold R2 release and then merge your product details page with the updated code? The newer code uses jquery based tabs that do not break in the absence of javascript. At least that way we could rule this out as a possible cause.

[KenPalmer]

Logan, Thanks for the feedback. Where do I get the R2 code? The current version that I have is AbleCommerceGold-b4194-WAP. Is version 2 later than that?

[KenPalmer]

Logan, I just downloaded R2. The file is AbleCommerceGold-GoldR2-b4487-WAP.zip. I'll try merging the details page as you suggested. Thanks.