Tabbed Content Section

[lesliekirk]

Has anyone done a tabbed content section in the Suivant ReadyTheme. I'm doing a little rearranging of where the product description will appear and I'd like to be able to throw in tabbed content sections. Of course, it needs to be responsive and play nice with the framework.

[lesliekirk]

Re: Tabbed Content Section

So let me answer my own question and share what I quickly found. Since the Suivant ReadyTheme is based on the cornerstoneUX, I googled it and found cornerstoneUX.smartTabs. Very lightweight and easy to configure.

To give you a head start on adding your own tabbed content

<dl id="js-smart-tabs--tabs" class="smart-tabs">
					<dt><a href="#">Product Details</a></dt>
					<dd>
						&mvt:product:descrip;
					</dd>
					<dt><a href="#">Reviews</a></dt>
					<dd>
						reviews will go here
					</dd>
					<dt><a href="#">Product Tags</a></dt>
					<dd>
						tags will go here
					</dd>
				</dl>

And take a peek at who wrote the script

[harpkit]

Re: Tabbed Content Section

Hi Leslie,

I used these Responsive Tabs on my site. I found them fairly easy to install and they seem to work well.

[lesliekirk]

I've run into some difficulties with cornerstoneUX.smartTabs that I seemed to have resolved on one site but have brought the same issue along to another site. The only problem, what fixed the issue in one site is not resolving it in this site.

When I add the tabs to the PROD Product Display Layout, the plus / minus increments stop working and the Related Products display goes bonkers. Something in the tabs is breaking it because on a page that doesn't have tabs the plus / minus is just fine and so is the Related items layout.

In the other site, Brennan said that it might have been related to this code and suggested I try commenting it out.

// ---- Update Display Price Based on Attribute Selections (If Attribute Machine Is Not Being Used) //
    if (typeof attrMachCall === 'undefined' && document.getElementById('js-product-attribute-count').value > 0) {
            for(var baseProductPrice=Number(document.getElementById("js-price-value").getAttribute("data-base-price")),regularProductPrice=Number(),productAttributeCount=Number(document.getElementById("js-product-attribute-count").value+1),productAttributes=document.getElementById("js-purchase-product").elements,attributeType=[""],i=0;i<productAttributes.length;i++){var tagName=productAttributes[i].tagName.toLowerCase(),elementType=productAttributes[i].type,type=productAttributes[i].getAttribute("data-attribute-type"), name=productAttributes[i].name;"hidden"==elementType&&null!=type&&attributeType.push(type);productAttributes[i].onchange=function(){updateProductDisplayPrice()}} function updateProductDisplayPrice(){for(var b,a,c=baseProductPrice,f=regularProductPrice,d=1;d<productAttributeCount;d++)if(b=document.getElementsByName("Product_Attributes["+d+"]:value"),"select"==attributeType[d])for(var e=0;e<b.length;e++)a=b.item(e),a=a.options.item(a.selectedIndex),c+=Number(a.getAttribute("data-option-price")),f+=Number(a.getAttribute("data-regular-price"));else if("radio"==attributeType[d]||"checkbox"==attributeType[d])for(e=0;e<b.length;e++)a=b.item(e),a.checked&&(c+=Number(a.getAttribute("data-option-price")), f+=Number(a.getAttribute("data-regular-price")));else if("text"==attributeType[d]||"memo"==attributeType[d])a=b.item(0),a.value&&(c+=Number(a.getAttribute("data-option-price")),f+=Number(a.getAttribute("data-regular-price")));b=document.getElementsByName("Quantity");c*=Number(b.item(0).value);b.item(0);document.getElementById("js-price-value").innerHTML=formatCurrency(c);document.getElementById("js-mobile-price-value")&&(document.getElementById("js-mobile-price-value").innerHTML=formatCurrency(c))} function formatCurrency(b){var a=!1;0>b&&(a=!0,b=Math.abs(b));return(a?"-$":"$")+parseFloat(b,10).toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g,"$1,").toString()}updateProductDisplayPrice();
    };

It did not help. It also didn't resolve the problem with the other site, so Brennan had also suggested that I needed to add id of js-price-value to the price field. I dinked around with it a little bit but still no joy. To me, it really didn't make sense because the script.js and the PROD page were working just fine as is UNTIL I added the smartTabs into the mix.

I'll leave the code in place for a few days, but I will most likely be switching to another Responsive Tab script.

[lesliekirk]

Quick note - I went back and started from fresh on the basic PROD template. I copied everything over again and did not fix the problem. The plus / minus incrementer is not working and the Related items is still out of whack. So that adds to the mystery...

[lesliekirk]

Quick note - I went back and started from fresh on the basic PROD template. I copied everything over again and did not fix the problem. The plus / minus incrementer is not working and the Related items is still out of whack. So that adds to the mystery...

Note: when creating a new PROD Page Template you will need to either change the body id="js-&mvte:page:code;" to body id="js-PROD" or edit the scripts.js and add the new page.

Now just trying to figure out the related products product image doesn't pull in and the CSS not being "obeyed" for the layout.