Hi guys!
Having a little trouble with coding repeatable feature.
At this website - https://www.nippon-alloy.com/cn/new_product-1.php
I can't get Description and Specifirations tab in one line. Here's the code.

Code: Select all

<div class="container">
                  <div class="row">
                     <div class="col-lg-7 col-md-10 offset-md-1 offset-lg-0">
                        <!-- product info tabs start-->
                        <div class="product-info-tabs">
                        
                           <div class="tabs-holder">
                              <!-- tabs header start-->
                              
                              <div class="tabs-header"><cms:show_repeatable 'product_tabs'>
                              <span class="tabs-header__title"><cms:show product_tab_name /> </span>
                              
                              <!-- tabs header end-->
                              <!-- tabs content start-->
                              <div class="tabs-content">
                              
                                 <div class="tabs-content__item">
                                    <p><cms:show product_tab_text /></p>
                                    
                                    
                                 </div>
                                 
                                 
                                 
                              </div>   
                              <!-- tabs content end-->
                           </div>
                        </cms:show_repeatable>
                        </div>
                        
                        <!-- product info tabs end-->
                     </div>

Sorry, if this is simple, not that good in coding(((

[trendoman]

What is original non-couchified HTML with multiple headers and contents?

Code: Select all

<!-- shop product start-->
            <section class="section shop-product no-padding-bottom">
               <div class="container">
                  <div class="row">
                     <div class="col-lg-7 col-md-8 offset-md-2 offset-lg-0">
                        <div class="sliders-holder">
                           <!-- product slider start-->
                           <div class="product-slider">
                              <div class="slider-item"><img src="images/product-sl-1.png" alt="img">
                                 
                              </div>
                              <div class="slider-item"><img src="images/product-sl-2.png" alt="img">
                                 
                              </div>
                              <div class="slider-item"><img src="images/product-sl-3.png" alt="img">
                                 
                              </div>
                              <div class="slider-item"><img src="images/product-sl-4.png" alt="img">
                                 
                              </div>
                           </div>
                           <!-- product slider end-->
                           <!-- nav slider start-->
                           <div class="nav-slider">
                              <div class="slider-item"><img src="images/nav-sl-1.png" alt="img"></div>
                              <div class="slider-item"><img src="images/nav-sl-2.png" alt="img"></div>
                              <div class="slider-item"><img src="images/nav-sl-3.png" alt="img"></div>
                              <div class="slider-item"><img src="images/nav-sl-4.png" alt="img"></div>
                           </div>
                           <!-- nav slider end-->
                        </div>
                     </div>
                     <div class="col-lg-5 col-md-10 offset-md-1 offset-lg-0">
                        <!-- product about start-->
                        <div class="product-about">
                           <!-- status block start-->
                           <div class="status-block">
                              <p>Status: <span class="current-status">In Stock</span></p>

                           </div>
                           <!-- status block end-->
                           
                           
                           
                        </div>
                        <!-- product about end-->
                     </div>
                  </div>
               </div>
               <div class="container">
                  <div class="row">
                     <div class="col-lg-7 col-md-10 offset-md-1 offset-lg-0">
                        <!-- product info tabs start-->
                        <div class="product-info-tabs">
                           <div class="tabs-holder">
                              <!-- tabs header start-->
                              <div class="tabs-header"><span class="tabs-header__title">Descriptions</span><span class="tabs-header__title">Specifications</span></div>
                              <!-- tabs header end-->
                              <!-- tabs content start-->
                              <div class="tabs-content">
                                 <!-- tabs content item start-->
                                 <div class="tabs-content__item">
                                    <p>Streamer fish California halibut Pacific saury. Slickhead grunion lake trout. Canthigaster rostrata spikefish brown trout loach summer flounder. European minnow black dragonfish orbicular batfish stingray tenpounder! Flying characin: herring. Moses sole sea snail grouper discus. European eel slender snipe eel.</p>
                                    
                                    
                                    
                                 </div>
                                 <!-- tabs content item end-->
                                 <!-- tabs content item start-->
                                 <div class="tabs-content__item">
                                    <p>European flounder armored searobin Bengal danio, "Pacific cod Pacific cod perch starry flounder torpedo tadpole cod gianttail." Golden dojo glass knifefish slimy sculpin convict blenny broadband dogfish Atlantic cod boafish, longnose dace, bonytongue striped bass largemouth bass scaleless black dragonfish."</p>
                                 
                                 </div>
                                 <!-- tabs content item end-->
                                 
                              </div>
                              <!-- tabs content end-->
                           </div>
                        </div>
                        <!-- product info tabs end-->
                     </div>
                     <div class="col-lg-5 col-md-10 offset-md-1 offset-lg-0">
                        <!-- downloads block start-->
                        <div class="downloads-block"><a href="#" download="download"><span class="icon-holder">
                           <svg class="icon">
                              <use xlink:href="#cloud"></use>
                           </svg></span><span>Duomax twin -Deg5C.07 Advanced User Manual. pdf</span></a><a href="#" download="download"><span class="icon-holder">
                           <svg class="icon">
                              <use xlink:href="#cloud"></use>
                           </svg></span><span>Installation Guide. pdf</span></a><a href="#" download="download"><span class="icon-holder">
                           <svg class="icon">
                              <use xlink:href="#cloud"></use>
                           </svg></span><span>DUOMAX Quick Guide. pdf</span></a></div>
                        <!-- downloads block end-->
                     </div>
                  </div>
               </div>
            </section>
            <!-- shop product end-->

What I would like to do is to make two repeable separate repeatable sections.
One - to be able to add pictures of the product
Another - tabs like "Description" and "Specifications"

Here's how i solved it with tabs

Code: Select all

<!-- product info tabs start-->
                        <div class="product-info-tabs">
                        
                           <div class="tabs-holder">
                              <!-- tabs header start-->
                              
                              <div class="tabs-header">
                              <cms:show_repeatable 'product_tabs'>
                              <span class="tabs-header__title">
                              <!-- Заголовок вкладки -->
                              <cms:show product_tab_name /></span>
                              </cms:show_repeatable>
                              </div>
                              
                              <!-- tabs header end-->
                              <!-- tabs content start-->
                              <div class="tabs-content">
                                 <!-- tabs content item start-->
                                 <cms:show_repeatable 'product_tabs_text'>
                                 <div class="tabs-content__item">
                                    <p><cms:show product_tab_text /></p>
                                    
                                    
                                 
                                 </div>
                                 <!-- tabs content item end-->
                                    </cms:show_repeatable>                                 
                              </div>
                              <!-- tabs content end-->
                           </div>
                        </div>
                        <!-- product info tabs end-->

[trendoman]

As the source shows, this header section looks immutable i.e. does not allow user edit as those are simple column headers. I did not understand why you plan to use repeatable to have that editable..

Code: Select all

<!-- tabs header start-->
<div class="tabs-header">
   <span class="tabs-header__title">Descriptions</span>
   <span class="tabs-header__title">Specifications</span>
</div>
<!-- tabs header end-->

As to the whole concept of using repeatable to showcase some items with their respective pictures, descriptions and names, here is a schematic that may help you navigate the solution easier:

If the markup rarely allows, we could wrap everything inside the tag-pair and show repeatable as in

Code: Select all

<cms:show_repeatable 'my_items'>
   <p><cms:show item_name />
   
   <p><cms:show item_image />
   
   <p><cms:show item_desc />
   
   <p><cms:show item_link />
</cms:show_repeatable>

, however, as your case also shows, it is easier to divide 'show' part into pieces as in

Code: Select all

<cms:show_repeatable 'my_items'>
   <p><cms:show item_name />
</cms:show_repeatable>

<cms:show_repeatable 'my_items'>
   <p><cms:show item_image />
</cms:show_repeatable>

<cms:show_repeatable 'my_items'>
   <p><cms:show item_desc />
</cms:show_repeatable>

<cms:show_repeatable 'my_items'>
   <p><cms:show item_link />
</cms:show_repeatable>

The above examples presumably use just a single repeatable entity with a few fields defined inside it, plus may also use stacked layout as in viewtopic.php?f=5&t=11105 3. Revised repeatable-regions

Try that and see if it makes sense for that HTML.