Announcement

Collapse
No announcement yet.

Tabbed Content Section

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

    Tabbed Content Section

    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.
    Leslie Kirk
    Miva Certified Developer
    Miva Merchant Specialist since 1997
    Previously of Webs Your Way
    (aka Leslie Nord leslienord)

    Email me: [email protected]
    www.lesliekirk.com

    Follow me: Twitter | Facebook | FourSquare | Pinterest | Flickr

    #2
    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

    Code:
    <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
    Leslie Kirk
    Miva Certified Developer
    Miva Merchant Specialist since 1997
    Previously of Webs Your Way
    (aka Leslie Nord leslienord)

    Email me: [email protected]
    www.lesliekirk.com

    Follow me: Twitter | Facebook | FourSquare | Pinterest | Flickr

    Comment


      #3
      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.
      Matt E.
      www.harpkit.com

      Comment


        #4
        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.

        Code:
        // ---- 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.
        Leslie Kirk
        Miva Certified Developer
        Miva Merchant Specialist since 1997
        Previously of Webs Your Way
        (aka Leslie Nord leslienord)

        Email me: [email protected]
        www.lesliekirk.com

        Follow me: Twitter | Facebook | FourSquare | Pinterest | Flickr

        Comment


          #5
          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...
          Leslie Kirk
          Miva Certified Developer
          Miva Merchant Specialist since 1997
          Previously of Webs Your Way
          (aka Leslie Nord leslienord)

          Email me: [email protected]
          www.lesliekirk.com

          Follow me: Twitter | Facebook | FourSquare | Pinterest | Flickr

          Comment


            #6
            Originally posted by lesliekirk View Post
            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.
            Leslie Kirk
            Miva Certified Developer
            Miva Merchant Specialist since 1997
            Previously of Webs Your Way
            (aka Leslie Nord leslienord)

            Email me: [email protected]
            www.lesliekirk.com

            Follow me: Twitter | Facebook | FourSquare | Pinterest | Flickr

            Comment

            Working...
            X