I am using opencart version 3.0.x
I have a module called tmo tabs on my website, this module collects the latest additions, best sellers and specials in one place.
In this module, if the number of products is more than 5, the module makes itself a carousel.
I don't want it to be a carousel. I want all products to be displayed in 5 rows one under the other.
I am making changes on the module page but it does not have any effect on my website.
module page
Code: Select all
<div class="hometab">
<div class="container">
<div class="row">
<div id="tabs" class="htabs">
<div class="tab_title maintitle">
<div class="products-title1">Tüm Ürünler</div>
</div>
<ul class='etabs'>
<li class='tab latest'>
{% if latestproducts %}
<a href="#tab-latest">{{ tab_latest }}</a>
{% endif %}
</li>
<li class='tab bestseller'>
{% if bestsellersproducts %}
<a href="#tab-bestseller">{{ tab_bestseller }}</a>
{% endif %}
</li>
<li class='tab special'>
{% if specialproducts %}
<a href="#tab-special">{{ tab_special }}</a>
{% endif %}
</li>
</ul>
</div>
{% if bestsellersproducts %}
<div id="tab-bestseller" class="tab-content">
<div class="box">
<div class="box-content">
{% set sliderFor = 5 %}
{% set productCount = bestsellersproducts|length %}
{% if productCount >= sliderFor %}
<div class="customNavigation">
<a class="fa prev"> </a>
<a class="fa next"> </a>
</div>
{% endif %}
<div class="box-product {% if productCount >= sliderFor %}product-carousel{% else %} productbox-grid{% endif %}" id="{% if productCount >= sliderFor %}tabbestseller-carousel{% else %}tabbestseller-grid{% endif %}">
{% for product in bestsellersproducts %}
<div class="{% if productCount >= sliderFor %}slider-item{% else %}product-items{% endif %}">
<div class="product-block product-thumb transition">
<div class="product-block-inner">
<div class="image">
{% if product.thumb_swap %}
<a href="{{ product.href }}">
<img src="{{ product.thumb }}" title="{{ product.name }}" alt="{{ product.name }}" class="img-responsive reg-image"/>
<img class="img-responsive hover-image" src="{{ product.thumb_swap }}" title="{{ product.name }}" alt="{{ product.name }}"/>
</a>
{% else %}
<a href="{{ product.href }}">
<img src="{{ product.thumb }}" title="{{ product.name }}" alt="{{ product.name }}" class="img-responsive"/></a>
{% endif %}
{% if not product.special %}
{% else %}
<span class="saleicon sale">Sale</span>
<span class="percentsaving">{{ product.percentsaving }}%</span>
{% endif %}
<div class="hover-button-group">
<div class="quickview" ><a href="{{ product.quick }}" data-toggle="tooltip" title="{{ button_quickview }} "><i class="fa fa-eye" aria-hidden="true"></i></a></div>
<button class="wishlist" type="button" data-toggle="tooltip" title="{{ button_wishlist }} " onclick="wishlist.add('{{ product.product_id }} ');"><i class="fa fa-heart"></i></button>
<button class="compare" type="button" data-toggle="tooltip" title="{{ button_compare }} " onclick="compare.add('{{ product.product_id }} ');"><i class="fa fa-retweet" aria-hidden="true"></i></button>
</div>
{# if product.rating #}
<div class="rating">
{% for i in 1..5 %}
{% if product.rating < i %}
<span class="fa fa-stack"><i class="fa fa-star fa-stack-1x"></i></span>
{% else %}
<span class="fa fa-stack"><i class="fa fa-star fa-stack-1x"></i><i class="fa fa-star fa-stack-1x"></i></span>
{% endif %}
{% endfor %}
</div>
{# endif #}
</div>
<div class="caption">
<h4><a href="{{ product.href }} ">{{ product.name }} </a></h4>
{% if product.price %}
<p class="price">
{% if not product.special %}
{{ product.price }}
{% else %}
<span class="price-new">{{ product.special }}</span>
<span class="price-old">{{ product.price }}</span>
{% endif %}
{% if product.tax %}
<span class="price-tax">{{ text_tax }} {{ product.tax }}</span>
{% endif %}
</p>
{% endif %}
<!-- <div class="desc"><p>{{ product.description }}</p></div> -->
<button type="button" class="addtocart" title="{{ button_cart }} " onclick="cart.add('{{ product.product_id }} ');"><i class="fa fa-plus" aria-hidden="true"></i>{{ button_cart }} </button>
</div>
</div>
</div>
</div>
{% endfor %}
</div>
</div>
</div>
<span class="tabbestseller_default_width" style="display:none; visibility:hidden"></span>
</div>
{% endif %}
{% if latestproducts %}
<div id="tab-latest" class="tab-content">
<div class="box">
<div class="box-content">
{% set sliderFor = 5 %}
{% set productCount = latestproducts|length %}
{% if productCount >= sliderFor %}
<div class="customNavigation">
<a class="fa prev"> </a>
<a class="fa next"> </a>
</div>
{% endif %}
<div class="box-product {% if productCount >= sliderFor %}product-carousel{% else %} productbox-grid{% endif %}" id="{% if productCount >= sliderFor %}tablatest-carousel{% else %}tablatest-grid{% endif %}">
{% for product in latestproducts %}
<div class="{% if productCount >= sliderFor %}slider-item{% else %}product-items{% endif %}">
<div class="product-block product-thumb transition">
<div class="product-block-inner">
<div class="image">
{% if product.thumb_swap %}
<a href="{{ product.href }}">
<img src="{{ product.thumb }}" title="{{ product.name }}" alt="{{ product.name }}" class="img-responsive reg-image"/>
<img class="img-responsive hover-image" src="{{ product.thumb_swap }}" title="{{ product.name }}" alt="{{ product.name }}"/>
</a>
{% else %}
<a href="{{ product.href }}">
<img src="{{ product.thumb }}" title="{{ product.name }}" alt="{{ product.name }}" class="img-responsive"/></a>
{% endif %}
{% if not product.special %}
{% else %}
<span class="saleicon sale">Sale</span>
<span class="percentsaving">{{ product.percentsaving }}%</span>
{% endif %}
<div class="hover-button-group">
<div class="quickview" ><a href="{{ product.quick }}" data-toggle="tooltip" title="{{ button_quickview }} "><i class="fa fa-eye" aria-hidden="true"></i></a></div>
<button class="wishlist" type="button" data-toggle="tooltip" title="{{ button_wishlist }} " onclick="wishlist.add('{{ product.product_id }} ');"><i class="fa fa-heart"></i></button>
<button class="compare" type="button" data-toggle="tooltip" title="{{ button_compare }} " onclick="compare.add('{{ product.product_id }} ');"><i class="fa fa-retweet" aria-hidden="true"></i></button>
</div>
{# if product.rating #}
<div class="rating">
{% for i in 1..5 %}
{% if product.rating < i %}
<span class="fa fa-stack"><i class="fa fa-star fa-stack-1x"></i></span>
{% else %}
<span class="fa fa-stack"><i class="fa fa-star fa-stack-1x"></i><i class="fa fa-star fa-stack-1x"></i></span>
{% endif %}
{% endfor %}
</div>
{# endif #}
</div>
<div class="caption">
<h4><a href="{{ product.href }} ">{{ product.name }} </a></h4>
{% if product.price %}
<p class="price">
{% if not product.special %}
{{ product.price }}
{% else %}
<span class="price-new">{{ product.special }}</span>
<span class="price-old">{{ product.price }}</span>
{% endif %}
{% if product.tax %}
<span class="price-tax">{{ text_tax }} {{ product.tax }}</span>
{% endif %}
</p>
{% endif %}
<!-- <div class="desc"><p>{{ product.description }}</p></div> -->
<button type="button" class="addtocart" title="{{ button_cart }} " onclick="cart.add('{{ product.product_id }} ');"><i class="fa fa-plus" aria-hidden="true"></i>{{ button_cart }} </button>
</div>
</div>
</div>
</div>
{% endfor %}
</div>
</div>
</div>
<span class="tablatest_default_width" style="display:none; visibility:hidden"></span>
</div>
{% endif %}
{% if specialproducts %}
<div id="tab-special" class="tab-content">
<div class="box">
<div class="box-content">
{% set sliderFor = 5 %}
{% set productCount = specialproducts|length %}
{% if productCount >= sliderFor %}
<div class="customNavigation">
<a class="fa prev"> </a>
<a class="fa next"> </a>
</div>
{% endif %}
<div class="box-product {% if productCount >= sliderFor %}product-carousel{% else %} productbox-grid{% endif %}" id="{% if productCount >= sliderFor %}tabspecial-carousel{% else %}tabspecial-grid{% endif %}">
{% for product in specialproducts %}
<div class="{% if productCount >= sliderFor %}slider-item{% else %}product-items{% endif %}">
<div class="product-block product-thumb transition">
<div class="product-block-inner">
<div class="image">
{% if product.thumb_swap %}
<a href="{{ product.href }}">
<img src="{{ product.thumb }}" title="{{ product.name }}" alt="{{ product.name }}" class="img-responsive reg-image"/>
<img class="img-responsive hover-image" src="{{ product.thumb_swap }}" title="{{ product.name }}" alt="{{ product.name }}"/>
</a>
{% else %}
<a href="{{ product.href }}">
<img src="{{ product.thumb }}" title="{{ product.name }}" alt="{{ product.name }}" class="img-responsive"/></a>
{% endif %}
{% if not product.special %}
{% else %}
<span class="saleicon sale">Sale</span>
<span class="percentsaving">{{ product.percentsaving }}%</span>
{% endif %}
<div class="hover-button-group">
<div class="quickview" ><a href="{{ product.quick }}" data-toggle="tooltip" title="{{ button_quickview }} "><i class="fa fa-eye" aria-hidden="true"></i></a></div>
<button class="wishlist" type="button" data-toggle="tooltip" title="{{ button_wishlist }} " onclick="wishlist.add('{{ product.product_id }} ');"><i class="fa fa-heart"></i></button>
<button class="compare" type="button" data-toggle="tooltip" title="{{ button_compare }} " onclick="compare.add('{{ product.product_id }} ');"><i class="fa fa-retweet" aria-hidden="true"></i></button>
</div>
{# if product.rating #}
<div class="rating">
{% for i in 1..5 %}
{% if product.rating < i %}
<span class="fa fa-stack"><i class="fa fa-star fa-stack-1x"></i></span>
{% else %}
<span class="fa fa-stack"><i class="fa fa-star fa-stack-1x"></i><i class="fa fa-star fa-stack-1x"></i></span>
{% endif %}
{% endfor %}
</div>
{# endif #}
</div>
<div class="caption">
<h4><a href="{{ product.href }} ">{{ product.name }} </a></h4>
{% if product.price %}
<p class="price">
{% if not product.special %}
{{ product.price }}
{% else %}
<span class="price-new">{{ product.special }}</span>
<span class="price-old">{{ product.price }}</span>
{% endif %}
{% if product.tax %}
<span class="price-tax">{{ text_tax }} {{ product.tax }}</span>
{% endif %}
</p>
{% endif %}
<!-- <div class="desc"><p>{{ product.description }}</p></div> -->
<button type="button" class="addtocart" title="{{ button_cart }} " onclick="cart.add('{{ product.product_id }} ');"><i class="fa fa-plus" aria-hidden="true"></i>{{ button_cart }} </button>
</div>
</div>
</div>
</div>
{% endfor %}
</div>
</div>
</div>
<span class="tabspecial_default_width" style="display:none; visibility:hidden"></span>
</div>
{% endif %}
</div>
</div>
</div>
<script type="text/javascript">
$('#tabs a').tabs();
</script>
Problem: https://sheamona.com
No problem: https://humaykozmetik.com
no problem picture:
I would appreciate it if you could help me in this matter. Thank you to everyone in advance.