Bouchta Posted August 19, 2015 Share Posted August 19, 2015 Hi, Im using PrestaShop version: 1.6.1.0 Current theme in use: vela_food In home page i have tabs that display Products of each category . I need to manage the tab to be like this [All categ] [All Manufacturers] [New Product] | | \/ \/ categorie1 with image Manufacturer1 with image categorie1 with image Manufacturer2 with image This is the code used by my theme <script type="text/javascript"> $(document).ready(function() { $(".tab_category_slider").hide(); $(".tab_category_slider:first").show(); $("ul.tab_cates li").click(function() { $("ul.tab_cates li").removeClass("active"); $(this).addClass("active"); $(".tab_category_slider").hide(); $(".tab_category_slider").removeClass("animate1 {$tab_effect}"); var activeTab = $(this).attr("rel"); $("#" + activeTab).addClass("animate1 {$tab_effect}"); $("#" + activeTab).fadeIn(); }); }); </script> <div class="tab-category-container-slider"> <div class="tab-category-slider"> {if $title} <div class ="cate_title"> <h2>{l s=$title mod='fieldtabcateslider'}</h2> </div> {/if} <ul class="tab_cates"> {$count=0} {foreach from=$category item=productCate name=fieldTabCategorySlider} <li rel="tab_{$productCate.id}" {if $count==0} class="active" {/if} > {$productCate.name}</li> {$count= $count+1} {/foreach} </ul> <div class="tab_cate_container"> {foreach from=$productCates item=productCate name=fieldTabCategorySlider} <div id="tab_{$productCate.id}" class="tab_category_slider"> <ul class="productTabCategorySlider"> {foreach from=$productCate.product item=product name=fieldTabCategorySlider} <li class="cate_item ajax_block_product"> <div class="item-inner"> <div class="left-block"> <a href="{$product.link|escape:'html'}" title="{$product.name|escape:html:'UTF-8'}" class="product_image"> {if $link->getImageLink($product.link_rewrite, $product.id_image, 'large_default', $product.id_product) != "0"} <span class="hover-image"><img class="replace-2x img-responsive" src="{$link->getImageLink($product.link_rewrite, $product.id_image, 'large_default', $product.id_product)}" alt="{if !empty($product.legend)}{$product.legend|escape:'html':'UTF-8'}{else}{$product.name|escape:'html':'UTF-8'}{/if}" title="{if !empty($product.legend)}{$product.legend|escape:'html':'UTF-8'}{else}{$product.name|escape:'html':'UTF-8'}{/if}" {if isset($largeSize)} width="{$largeSize.width}" height="{$largeSize.height}"{/if}/></span> {/if} <img src="{$link->getImageLink($product.link_rewrite, $product.id_image, 'large_default')|escape:'html'}" {if isset($largeSize)} width="{$largeSize.width}" height="{$largeSize.height}"{/if} alt="{$product.name|escape:html:'UTF-8'}" /> </a> {*{if isset($product.new) && $product.new == 1} <span class="new">New</span> {/if}*} {if isset($product.on_sale) && $product.on_sale && isset($product.show_price) && $product.show_price && !$PS_CATALOG_MODE} <span class="sale">{l s='Sale!' mod='fieldtabcateslider'}</span> {/if} <div class="button-container fly_3 clearfix"> {if isset($quick_view) && $quick_view} <a class="quick-view" href="{$product.link|escape:'html':'UTF-8'}" rel="{$product.link|escape:'html':'UTF-8'}"> <span class="wrap_bg"> <i class="icon-eye-open icon-0x icon-mar-lr2"></i> <span class="wrap_text">{l s='Quick view' mod='fieldtabcateslider'}</span> </span> </a> {/if} {if isset($comparator_max_item) && $comparator_max_item} <a class="add_to_compare" href="{$product.link|escape:'html':'UTF-8'}" data-id-product="{$product.id_product}">{l s=''} <span class="wrap_bg"> <i class="icon-plus icon-0x icon-mar-lr2"></i> <span class="wrap_text">{l s='add to compare' mod='fieldtabcateslider'}</span> </span> </a> {/if} <a class="addToWishlist wishlistProd_{$product.id_product|intval}" href="#" rel="nofollow" onclick="WishlistCart('wishlist_block_list', 'add', '{$product.id_product|intval}', false, 1); return false;"> <span class="wrap_bg"> <i class="icon-heart icon-0x icon-mar-lr2"></i> <span class="wrap_text">{l s='add to Wishlish' mod='fieldtabcateslider'}</span> </span> </a> {if ($product.id_product_attribute == 0 || (isset($add_prod_display) && ($add_prod_display == 1))) && $product.available_for_order && !isset($restricted_country_mode) && $product.minimal_quantity <= 1 && $product.customizable != 2 && !$PS_CATALOG_MODE} {if ($product.allow_oosp || $product.quantity > 0)} {if isset($static_token)} <a class="exclusive ajax_add_to_cart_button " href="{$link->getPageLink('cart',false, NULL, "add=1&id_product={$product.id_product|intval}&token={$static_token}", false)|escape:'html':'UTF-8'}" rel="nofollow" title="{l s='Add to cart'}" data-id-product="{$product.id_product|intval}"> <span class="wrap_bg"> <i class="icon-shopping-cart icon-0x icon-mar-lr2"></i> <span class="wrap_text">{l s='Add to cart' mod='fieldtabcateslider'}</span> </span> </a> {else} <a class="exclusive ajax_add_to_cart_button " href="{$link->getPageLink('cart',false, NULL, 'add=1&id_product={$product.id_product|intval}', false)|escape:'html':'UTF-8'}" rel="nofollow" title="{l s='Add to cart'}" data-id-product="{$product.id_product|intval}"> <span class="wrap_bg"> <i class="icon-shopping-cart icon-0x icon-mar-lr2"></i> <span class="wrap_text">{l s='Add to cart' mod='fieldtabcateslider'}</span> </span> </a> {/if} {else} <a class="exclusive ajax_add_to_cart_button field_out_of_stock" href="#"> <span class="wrap_bg"> <i class="icon-shopping-cart icon-0x icon-mar-lr2"></i> <span class="wrap_text">{l s='Out of stock' mod='fieldtabcateslider'}</span> </span> </a> {/if} {/if} </div> </div> <div class="right-block"> <h5 class="s_title_block"><a href="{$product.link|escape:'html'}" title="{$product.name|truncate:50:'...'|escape:'htmlall':'UTF-8'}">{$product.name|truncate:35:'...'|escape:'htmlall':'UTF-8'}</a></h5> {if $slideOptions.show_des ==1 } <div class="product_desc"><a href="{$product.link|escape:'html'}" title="{l s='More' mod='fieldfeatureproduct'}">{$product.description_short|strip_tags|truncate:65:'...'}</a></div> {/if} <div class="pr-rt"> {if (!$PS_CATALOG_MODE AND ((isset($product.show_price) && $product.show_price) || (isset($product.available_for_order) && $product.available_for_order)))} <div class="content_price"> {if isset($product.show_price) && $product.show_price && !isset($restricted_country_mode)} <span class="price product-price"> {if !$priceDisplay}{convertPrice price=$product.price}{else}{convertPrice price=$product.price_tax_exc}{/if} </span> {*<meta itemprop="priceCurrency" content="{$priceDisplay}" />*} {if isset($product.specific_prices) && $product.specific_prices && isset($product.specific_prices.reduction) && $product.specific_prices.reduction} <span class="old-price product-price"> {displayWtPrice p=$product.price_without_reduction} </span> {/if} {/if} </div> {/if} {hook h='displayProductListReviews' product=$product} </div> </div> </div> </li> {/foreach} </ul> </div> <script type="text/javascript"> $(".tab-category-container-slider #tab_{$productCate.id} .productTabCategorySlider").bxSlider({ slideWidth:{if $slideOptions.p_width != ''}{$slideOptions.p_width}{else}270{/if}, infiniteLoop: false, slideMargin: 30, minSlides: {if $slideOptions.min_item != ''}{$slideOptions.min_item}{else}1{/if}, maxSlides: {if $slideOptions.max_item != ''}{$slideOptions.max_item}{else}3{/if}, speed: {if $slideOptions.speed_slide != ''}{$slideOptions.speed_slide}{else}500{/if}, pause: {if $slideOptions.a_speed != ''}{$slideOptions.a_speed}{else}1000{/if}, controls: {if $slideOptions.show_arrow != 0}{$slideOptions.show_arrow}{else}false{/if}, pager: {if $slideOptions.show_ctr != 0}{$slideOptions.show_ctr}{else}false{/if}, }); {*var offset = $('.ctrlnam_js_tab').offset(); var offset_title = $('.ctrlnam_js_tab_title').offset(); var offset_left = offset.left - offset_title.left; var offset_width = $('.ctrlnam_js_tab').outerWidth(); $('.tab-category-container-slider a.bx-prev').css({ 'left': offset_left - 29 - $('.tab-category-container-slider a.bx-prev').outerWidth() }); $('.tab-category-container-slider a.bx-next').css({ 'left': offset_left + 29 + offset_width, 'right': 'auto' });*} </script> {/foreach} </div> <!-- .tab_container --> </div> </div> {addJsDefL name=min_item}{l s='Please select at least one product' js=1}{/addJsDefL} {addJsDefL name=max_item}{l s='You cannot add more than %d product(s) to the product comparison' sprintf=$comparator_max_item js=1}{/addJsDefL} {addJsDef comparator_max_item=$comparator_max_item} {addJsDef comparedProductsIds=$compared_products} {*<style type='text/css'> .cate_item { width:{$slideOptions.p_width}px !important; } @-moz-document url-prefix() { .cate_item { width:{$slideOptions.p_width}px !important; } } </style>*} Can any of help my please Thank you again and have nice day Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now