Jump to content
ClicShopping News Read more... ×
Sign in to follow this  
Patrick

looking product tab

Recommended Posts

Hi

I don't know if there is a module, But I wrote a little code, let me time, I will put inside the forum

  • Thanks 1

Share this post


Link to post
Share on other sites

This is my first approach (not finished), this is not all the code, but you must create a modules inside modules_products_info_description.

This code allow you to create a dynamic tab with a little code to insert inside your product description (admin) 

<tabCatalog>......</tabCatalog>

the code

         $desc = $CLICSHOPPING_ProductsCommon->getProductsDescription();

         $product_tab_title = '<div id="categoriesTabs" style="overflow: auto;">';
         $product_tab_title .='<ul class="nav nav-tabs flex-column flex-sm-row" role="tablist"  id="myTab">';

          if (strpos($desc, '<tabCatalog>') !== FALSE) {
            $cut = explode('<tabCatalog>', trim($desc));
            $c = 0;

            foreach ($cut as $k => $part) {
              if (trim($part) != '') {
                if (strpos($part, '</tabCatalog>') !== FALSE) {
                  $t = substr($part, 0, strpos($part, '</tabCatalog>'));
                  if ($k = 0) {
                    $class = 'nav-link active';
                  } else {
                    $class = 'nav-link';
                  }

                  $product_tab_title .= '<li class="nav-item"><a href="#tab' . $c . '"role="tab" data-toggle="tab" class="' . $class . '">' . $t . '</a></li>';
                }
              }

              $c++;
            }
          }

          $product_tab_title .= '</ul>';
          $product_tab_title .= '</div>';

          $product_tab_description = '<div class="tabsClicShopping">';
          $product_tab_description .= '<div class="tab-content">';

          if (strpos($desc, '<tabCatalog>') !== FALSE) {
            $cut = explode('<tabCatalog>', trim($desc));

            $n = 0;

            foreach ($cut as $n => $part) {
              if (trim($part) != '') {
                if (strpos($part, '</tabCatalog>') !== FALSE) {
                  $r = substr($part, strpos($part, '</tabCatalog>') + 13);
                  $product_tab_description .= '<div class="tab-pane active" id="tab' . $n . '">' . $r . '</div>';
                }
              }

              $n++;
            }
          }

// content tab
          $products_description_content = '<!-- Start products_description_tab -->' . "\n";
          $products_description_content .= '<div class="col-md-' . $content_width .'">';
          $products_description_content .= '<div class="separator"></div>';
          $products_description_content .= '<div class="contentText">';
          $products_description_content .= $product_tab_title;
          $products_description_content .= $product_tab_description;
          $products_description_content .= '<div>';
          $products_description_content .= '<div>';
          $products_description_content .= '<div>';
          $products_description_content .= '<div>';
          $products_description_content .= '<!-- end products_description_tab -->' . "\n";

 

  • Thanks 2

Share this post


Link to post
Share on other sites

Ok, interesting approach.

 

Maybe it's better to make this and remove tab-pane active by tab-pane from the class list in the loop and add jQuery script

 

$(document).ready(function(){
  $(".tab-pane").first().addClass("active");
});

 

  • Thanks 2

Share this post


Link to post
Share on other sites

Ok, thank @Patrick, I will send the module to the administrator to push on the community.

Just wait a little time.

Edited by Julie
  • Thanks 2

Share this post


Link to post
Share on other sites

Hi @Julie,

 

the module is included on Github. You can install via extension system or download.

I changed little thing inside your module, you can compare for the next time.
Give me your Github account, I can include you to manage your module like as administrator.

 

@JPB look the module, you see how to make, also there is a documentation on the forum to help you.

 

https://github.com/ClicShoppingV3Community/modules_products_info_tab_boostrap

 

Let me know.

  • Thanks 2

Share this post


Link to post
Share on other sites

@ClicShopping Thank you, I will look when I have time, for moment, I am looking the solution and try to understand how it work.

  • Thanks 1

Share this post


Link to post
Share on other sites

Thank you interesting when the products description is long and when there are differents informations on a product.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

×

Important Information

By using this site, you agree to our Terms of Use