Tab content - how can I reduce the amount of code?

Solved
Highlighted
Excursionist
20 1 2

Hi all, I am after a little help regarding tabs and in particular tab content.

 

I have managed to create the tab field on our product page - description, size guide, delivery, returns. The first tab ‘description’ content is populated via a line of code -

 

<div id="tab-description" class="shopify-tab-content current">

<div class="product-description rte" itemprop="description">

{{ product.description }}

</div>

 

So regardless of what product is being viewed it will always pull the correct description for this product. This seems to be working and has kept the code to a minimum.

 

However I am struggle on how I can populate the 3 remaining tabs? Currently I have added all of the content for these tabs in to the string of code, this has made the code pretty lengthy though… it works fine, although I do not know/think if this is the correct way to go about this?

 

I would like to link the content how I have done for the first tab (description) to keep the length of the code to a minimum, but I am unsure how this could be achieved?

 

Would it be possible to create pages for the tab content and then somehow link these pages? If anyone has an idea on how I can resolve this issue it would be greatly appreciated.

 

Please see copy of the current code in reply.

 

Many thanks

 

Screen Shot 2019-07-22 at 11.58.45.png

0 Likes
Excursionist
20 1 2

This has been added to the product.liquid

<script type="text/javascript">
  $(document).ready(function(){
    $('ul.shopify-tabs > li').click(function(){
      var tab_id = $(this).attr('data-tab');
 
      $(this).parent().find('li').removeClass('current');
      $('.shopify-tab-content').removeClass('current');
 
      $(this).addClass('current');
      $("#"+tab_id).addClass('current');
    })
  })
</script>

This has been added to the product-template.liquid

 <ul class="shopify-tabs">
      <li class="current" data-tab="tab-description"><b>DESCRIPTION</b></li>
      <li data-tab="tab-size-guide"><b>SIZE GUIDE</b></li>
      <li data-tab="tab-delivery"><b>DELIVERY</b></li>
      <li data-tab="tab-returns"><b>RETURNS</b></li>
</ul>
    <hr>
<div id="tab-description" class="shopify-tab-content current">
  <div class="product-description rte" itemprop="description">
      {{ product.description }}
    </div>
</div>
<div id="tab-size-guide" class="shopify-tab-content">
  <p>Please be aware that the conversion charts below are for guidance only as sizing can vary depending on brand/manufacturer.</p>
<h2><strong>Men's Tops</strong></h2>
<table style="width: 60%;">
<tbody>
<tr>
<td style="width: 30%; text-align: center;"><strong> Chest Size</strong></td>
<td style="width: 30%; text-align: center;"><strong>Inches</strong></td>
<td style="width: 30%; text-align: center;"><strong>CM</strong></td>
</tr>
<tr>
<td style="width: 30%; text-align: center;"><strong>XS</strong></td>
<td style="width: 30%; text-align: center;">34 - 36</td>
<td style="width: 30%; text-align: center;">86 - 91</td>
</tr>
<tr>
<td style="width: 30%; text-align: center;"><strong>S</strong></td>
<td style="width: 30%; text-align: center;">36 - 38</td>
<td style="width: 30%; text-align: center;">91 - 96</td>
</tr>
<tr>
<td style="width: 30%; text-align: center;"><strong>M</strong></td>
<td style="width: 30%; text-align: center;">38 - 40</td>
<td style="width: 30%; text-align: center;">96 - 101</td>
</tr>
<tr>
<td style="width: 30%; text-align: center;"><strong>L</strong></td>
<td style="width: 30%; text-align: center;">40 - 42</td>
<td style="width: 30%; text-align: center;">101 - 106</td>
</tr>
<tr>
<td style="width: 30%; text-align: center;"><strong>XL</strong></td>
<td style="width: 30%; text-align: center;">42 - 44</td>
<td style="width: 30%; text-align: center;">106 - 111</td>
</tr>
<tr>
<td style="width: 30%; text-align: center;"><strong>XXL</strong></td>
<td style="width: 30%; text-align: center;">44 - 46</td>
<td style="width: 30%; text-align: center;">111 - 116</td>
</tr>
</tbody>
</table>
<p> </p>
<h2><strong>Men's Jeans, Trousers &amp; Shorts</strong></h2>
<table style="width: 60%;">
<tbody>
<tr>
<td style="width: 30%; text-align: center;"><strong>Waist Size</strong></td>
<td style="width: 30%; text-align: center;"><strong>Inches</strong></td>
<td style="width: 30%; text-align: center;"><strong>CM</strong></td>
</tr>
<tr>
<td style="width: 30%; text-align: center;"><strong>28"</strong></td>
<td style="width: 30%; text-align: center;">28</td>
<td style="width: 30%; text-align: center;">71</td>
</tr>
<tr>
<td style="width: 30%; text-align: center;"><strong>30"</strong></td>
<td style="width: 30%; text-align: center;">30</td>
<td style="width: 30%; text-align: center;">76</td>
</tr>
<tr>
<td style="width: 30%; text-align: center;"><strong>32"</strong></td>
<td style="width: 30%; text-align: center;">32</td>
<td style="width: 30%; text-align: center;">81</td>
</tr>
<tr>
<td style="width: 30%; text-align: center;"><strong>34"</strong></td>
<td style="width: 30%; text-align: center;">34</td>
<td style="width: 30%; text-align: center;">86</td>
</tr>
<tr>
<td style="width: 30%; text-align: center;"><strong>36"</strong></td>
<td style="width: 30%; text-align: center;">36</td>
<td style="width: 30%; text-align: center;">91</td>
</tr>
<tr>
<td style="width: 30%; text-align: center;"><strong>38"</strong></td>
<td style="width: 30%; text-align: center;">38</td>
<td style="width: 30%; text-align: center;">96</td>
</tr>
</tbody>
</table>
<p>  </p>
<h2><strong>Inside Leg</strong></h2>
<table style="width: 60%;">
<tbody>
<tr>
<td style="width: 30%; text-align: center;"><strong>Leg Length</strong></td>
<td style="width: 30%; text-align: center;"><strong> Inches</strong></td>
<td style="width: 30%; text-align: center;"><strong>CM</strong></td>
</tr>
<tr>
<td style="width: 30%; text-align: center;"><strong>Short</strong></td>
<td style="width: 30%; text-align: center;">30</td>
<td style="width: 30%; text-align: center;">76</td>
</tr>
<tr>
<td style="width: 30%; text-align: center;"><strong>Regular</strong></td>
<td style="width: 30%; text-align: center;">32</td>
<td style="width: 30%; text-align: center;">81</td>
</tr>
<tr>
<td style="width: 30%; text-align: center;"><strong>Long</strong></td>
<td style="width: 30%; text-align: center;">34</td>
<td style="width: 30%; text-align: center;">86</td>
</tr>
</tbody>
</table>
<p>  </p>
<h2><strong>Men's Footwear</strong></h2>
<table style="width: 60%;">
<tbody>
<tr>
<td style="text-align: center; width: 30%;"><strong>UK</strong></td>
<td style="text-align: center; width: 30%;"><strong>US</strong></td>
<td style="text-align: center; width: 30%;"><strong>EUR</strong></td>
<td style="text-align: center; width: 30%;"><strong>JP</strong></td>
</tr>
<tr>
<td style="text-align: center; width: 30%;"><strong>3 </strong></td>
<td style="text-align: center; width: 30%;">4</td>
<td style="text-align: center; width: 30%;">35.5</td>
<td style="text-align: center; width: 30%;">22</td>
</tr>
<tr>
<td style="text-align: center; width: 30%;"><strong>4</strong></td>
<td style="text-align: center; width: 30%;">5</td>
<td style="text-align: center; width: 30%;">37</td>
<td style="text-align: center; width: 30%;">23</td>
</tr>
<tr>
<td style="text-align: center; width: 30%;"><strong>5</strong></td>
<td style="text-align: center; width: 30%;">6</td>
<td style="text-align: center; width: 30%;">38</td>
<td style="text-align: center; width: 30%;">24</td>
</tr>
<tr>
<td style="text-align: center; width: 30%;"><strong>6</strong></td>
<td style="text-align: center; width: 30%;">7</td>
<td style="text-align: center; width: 30%;">39</td>
<td style="text-align: center; width: 30%;">25</td>
</tr>
<tr>
<td style="text-align: center; width: 30%;"><strong>7</strong></td>
<td style="text-align: center; width: 30%;">8</td>
<td style="text-align: center; width: 30%;">40.5</td>
<td style="text-align: center; width: 30%;">27</td>
</tr>
<tr>
<td style="text-align: center; width: 30%;"><strong>8</strong></td>
<td style="text-align: center; width: 30%;">9</td>
<td style="text-align: center; width: 30%;">42</td>
<td style="text-align: center; width: 30%;">28</td>
</tr>
<tr>
<td style="text-align: center; width: 30%;"><strong>9</strong></td>
<td style="text-align: center; width: 30%;">10</td>
<td style="text-align: center; width: 30%;">43</td>
<td style="text-align: center; width: 30%;">29</td>
</tr>
<tr>
<td style="text-align: center; width: 30%;"><strong>10</strong></td>
<td style="text-align: center; width: 30%;">11</td>
<td style="text-align: center; width: 30%;">44.5</td>
<td style="text-align: center; width: 30%;">30</td>
</tr>
<tr>
<td style="text-align: center; width: 30%;"><strong>11</strong></td>
<td style="text-align: center; width: 30%;">12</td>
<td style="text-align: center; width: 30%;">46</td>
<td style="text-align: center; width: 30%;">31</td>
</tr>
</tbody>
</table>
<p> </p>
<h2><strong>Belts</strong></h2>
<table style="width: 60%;">
<tbody>
<tr>
<td style="width: 30%; text-align: center;"><strong>Length (cm)</strong></td>
<td style="width: 30%; text-align: center;"><strong>To Fit Waist (Inches)</strong></td>
</tr>
<tr>
<td style="width: 30%; text-align: center;"><strong>85</strong></td>
<td style="width: 30%; text-align: center;">28 - 30</td>
</tr>
<tr>
<td style="width: 30%; text-align: center;"><strong>90</strong></td>
<td style="width: 30%; text-align: center;">30 - 32</td>
</tr>
<tr>
<td style="width: 30%; text-align: center;"><strong>95</strong></td>
<td style="width: 30%; text-align: center;">32 - 34</td>
</tr>
<tr>
<td style="width: 30%; text-align: center;"><strong>100</strong></td>
<td style="width: 30%; text-align: center;">34 -36</td>
</tr>
</tbody>
</table>
<p> </p>
 
</div>
<div id="tab-delivery" class="shopify-tab-content">
<p class="p1"><b>UK Standard Delivery:</b> £2.50 / Free for orders over £20.00</p>
<p class="p1">Orders are dispatched by Royal Mail’s Tracked 48 Delivery and generally take 1-5 working days to arrive. All orders placed before 13:00 are dispatched the same day.</p>
<p class="p1"><b>UK Next Day Delivery</b>: £8.00</p>
<p class="p1">Next day delivery is available on all orders made Monday - Thursday before 13:00. Orders placed Monday - Thursday before 13:00 will be dispatched the same day by Royal Mail Special Delivery and are guaranteed to arrive the following day. Royal Mail cannot specify a particular delivery time.</p>
<p class="p1"><b>UK Special Saturday Delivery</b> - £10.00</p>
<p class="p1">Saturday delivery is available on orders made before Friday 14:00. Orders placed between Thursday 13:00 and Friday 14:00 will be dispatched by Royal Mail Special Saturday Delivery and are guaranteed to arrive Saturday. Royal Mail cannot specify a particular delivery time.</p>
<p class="p1"><b>International Delivery</b> £12.00 (Per Item)</p>
<p class="p1">Please allow 5 - 14 working days for international delivery. Orders are dispatched by Royal Mail’s International Signed For service where items will receive priority handling in the UK and abroad and are electronically tracked to the point of delivery. Please note that any customs or import duties are levied once the package reaches its destination country. Additional charges for customs clearance must be paid by the recipient. We have no control over these charges and cannot predict what they may be. Customs policies vary widely from country to country; you may want to contact your local customs office for further information.</p>
<p class="p1">For further information regarding our available delivery options please <a href="https://www.arenamenswear.com/pages/returns">click here</a>.</p>
<p class="p2"> </p>
<p class="p2"> </p>
 
 
</div>
<div id="tab-returns" class="shopify-tab-content">
  UK & International Returns
 
If you are not satisfied with your purchase or need to return an item for any reason, you may return your items to us providing they are in their original, reusable condition with all original packaging within 14 days of receipt. Refunds will normally be processed within three to five working days after the goods are returned and received by ourselves, however this may take longer to appear on your account statement. We will email you to confirm a refund has been made.
 
Please not that all are authorised stockists for all our brands, meaning that all our products are 100% genuine and sourced directly from the brands themselves.
 
To view more returns information, click here.
 
<p>
<p class="p1"><b>UK &amp; International Returns</b></p>
<p class="p1">If you are not satisfied with your purchase or need to return an item for any reason, you may return your items to us providing they are in their original, reusable condition with all original packaging within 14 days of receipt. Refunds will normally be processed within three to five working days after the goods are returned and received by ourselves, however this may take longer to appear on your account statement. We will email you to confirm a refund has been made.</p>
<p class="p1">Please not that all are authorised stockists for all our brands, meaning that all our products are 100% genuine and sourced directly from the brands themselves.</p>
<p class="p1">To view more returns information, click <a href="https://www.arenamenswear.com/pages/returns" title="Returns">here.</a></p>
</div>

This has been added to the bottom of the theme.scss.liquid

ul.shopify-tabs {
    margin: 0px;
    padding: 0px;
    list-style: none;
}
ul.shopify-tabs > li{
    background: none;
    color: #333;
    display: inline-block;
    padding: 10px 15px;
    cursor: pointer;
}
ul.shopify-tabs > li.current{
    background: #EDEDED;
    color: #444444;
    font-weight: bold;
    border-radius: 50px;
}
.shopify-tab-content{
    display: none;
    background: #ffffff;
    padding: 15px;
}
.shopify-tab-content.current{
    display: block;
}
0 Likes

Success.

Excursionist
20 1 2

Solved... add content to new snippets, then link {delivery.returns} etc.

1 Like
Shopify Partner
1663 50 174

For deliveries and returns, the policy objects is also an option, possibly using the split filter to get specific parts

https://help.shopify.com/en/themes/liquid/objects/shop#shop-policies

https://help.shopify.com/en/themes/liquid/objects/policy

Problem Solved? ✔️Accept the solution so you can help others.
Confused? Busy? ? Get me to solve it paull.newton+shopifyforum@gmail.com.
Buy me a coffee? ☕ paypal.me/paulnewton or donate to eff.org
0 Likes