Announcement

Collapse
No announcement yet.

Tabbed Description on Product Page - Options

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

    Tabbed Description on Product Page - Options

    I am new to the new bootstrap and v9 beta. I noticed that the products page has a tab for the description. Can we make more tabs with custom fields like Specs, or Reviews, or Related Products. What is the Coding or where are these options.

    I understand how to hard code it, but I would like to make it available in the GUI of the product information so other employees can edit it.

    Thanks
    Marshall
    http://www.hmcdisplay.com
    http://www.churchonwheels.com

    #2
    Re: Tabbed Description on Product Page - Options

    Originally posted by marshallw View Post
    I am new to the new bootstrap and v9 beta. I noticed that the products page has a tab for the description. Can we make more tabs with custom fields like Specs, or Reviews, or Related Products. What is the Coding or where are these options.

    I understand how to hard code it, but I would like to make it available in the GUI of the product information so other employees can edit it.

    Thanks
    You can add as many tabs as you want and use product custom fields to control if the show.

    Code:
    <mvt:if expr="NOT ISNULL l.settings:product:customfield_values:customfields:specs">
            <li><a href="#js-specifications" data-toggle="tab">Additional Info:</a></li>
        </mvt:if>
    and

    Code:
    <mvt:if expr="NOT ISNULL l.settings:product:customfield_values:customfields:specs">
            <div class="tab-pane" id="js-specifications">
                <h5 class="title">Additional Info:</h5>
                &mvt:product:customfield_values:customfields:specs;
            </div>
    </mvt:if>
    Last edited by Mark Hood; 10-24-14, 09:18 AM.
    Mark Hood
    Vermont Gear

    Comment


      #3
      Re: Tabbed Description on Product Page - Options

      Thanks! I actually found the custom fields method a few min after posting this... I figured it to be more of a work around though and didn't know if there was a built in check box I was missing on the add product page.

      Thank you though.
      Marshall
      http://www.hmcdisplay.com
      http://www.churchonwheels.com

      Comment


        #4
        Re: Tabbed Description on Product Page - Options

        Am I missing something or am I looking in the wrong spot? I don't see anything on the Product itself or in the Product Pages.
        Sincerely,

        Stephen M. LaBar, Jr.
        (770) 441-9447
        The Martial Arts Store

        Please Visit Our Site At:
        http://www.themartialartsstore.com

        Comment


          #5
          Re: Tabbed Description on Product Page - Options

          Originally posted by slabar View Post
          Am I missing something or am I looking in the wrong spot? I don't see anything on the Product itself or in the Product Pages.
          Are you using the bootstrap for 5.5?

          It's part of the product display layout tab of the PROD page in 5.5
          Last edited by Mark Hood; 10-27-14, 05:04 AM.
          Mark Hood
          Vermont Gear

          Comment


            #6
            Re: Tabbed Description on Product Page - Options

            Mark,

            I'm using beta 9 and I can't get any tabs to display using the code you provided above. I can get the data to display just no tab(s). I know it's something simple.
            Sincerely,

            Stephen M. LaBar, Jr.
            (770) 441-9447
            The Martial Arts Store

            Please Visit Our Site At:
            http://www.themartialartsstore.com

            Comment


              #7
              Re: Tabbed Description on Product Page - Options

              Stephen,

              It's not a part of the Miva Merchant beta. It's functionality that's built into Bootstrap. Are you using the Bootstrap framework? Here's a link to Miva's blog post on Bootstrap.

              Bootstrap Framework Info

              Regards,
              Todd

              Comment


                #8
                Re: Tabbed Description on Product Page - Options

                Todd,

                I'm using the Ready Themes which is based off of the Bootstrap from what I understand.
                Sincerely,

                Stephen M. LaBar, Jr.
                (770) 441-9447
                The Martial Arts Store

                Please Visit Our Site At:
                http://www.themartialartsstore.com

                Comment


                  #9
                  Re: Tabbed Description on Product Page - Options

                  It doesn't look like they made tabs as a part of ready themes but this should help since it can be used on either. You'll just have to change as needed for your custom field codes.
                  Code:
                  <!-- Product Tabs -->
                  <ul class="nav nav-tabs">
                      <li class="active"><a href="#js-description" data-toggle="tab">Description:</a></li>
                      <mvt:if expr="NOT ISNULL l.settings:product:customfield_values:customfields:specs">
                          <li><a href="#js-specifications" data-toggle="tab">Additional Info:</a></li>
                      </mvt:if>
                  <mvt:if expr="NOT ISNULL l.settings:product:customfield_values:customfields:SizeChart">
                          <li><a href="#js-SizeChart" data-toggle="tab">Size Chart</a></li>
                  </mvt:if>
                  <li><a href="#js-reviews" data-toggle="tab">Reviews</a></li>
                  </ul>
                  <div class="tab-content"> 
                      <div class="tab-pane active" id="js-description">
                          <h5 class="title">&mvt:product:name;</h5>
                          &mvt:product:descrip;
                      </div>
                  <mvt:if expr="NOT ISNULL l.settings:product:customfield_values:customfields:specs">
                          <div class="tab-pane" id="js-specifications">
                              <h5 class="title">Additional Info:</h5>
                              &mvt:product:customfield_values:customfields:specs;
                          </div>
                  </mvt:if>
                  <mvt:if expr="NOT ISNULL l.settings:product:customfield_values:customfields:SizeChart">
                          <div class="tab-pane" id="js-SizeChart">
                              <h5 class="title">Size Chart:</h5>
                              <iframe src="&mvt:product:customfield_values:customfields:SizeChart;" width="100%" height="600px"></iframe>
                          </div>
                  </mvt:if>
                  <div class="tab-pane" id="js-reviews">
                              Your Review Code
                          </div>
                  </div>
                  Last edited by Mark Hood; 10-28-14, 04:59 AM.
                  Mark Hood
                  Vermont Gear

                  Comment


                    #10
                    Re: Tabbed Description on Product Page - Options

                    Mark, I am also using the beta to test and design in right now. Have you activated custom fields? if you have and you created a custom field then when you add a new product on the top bar there is a list of items (Product . Images . Related Products . etc.) at the end there is a *** box. click on that and select custom fields. You should have a specifications field there. just type in that box and check your product.
                    Marshall
                    http://www.hmcdisplay.com
                    http://www.churchonwheels.com

                    Comment


                      #11
                      Re: Tabbed Description on Product Page - Options

                      Mark,

                      Thanks I was able to combine your code with mine and have tabs working now. I just have one small quirk to work out with width but will tackle that later.
                      Sincerely,

                      Stephen M. LaBar, Jr.
                      (770) 441-9447
                      The Martial Arts Store

                      Please Visit Our Site At:
                      http://www.themartialartsstore.com

                      Comment

                      Working...
                      X