Jump to content
vekia

[TUTORIAL] Homepage tabs in PrestShop 1.7

Recommended Posts

Standard classic theme in new PrestShop 1.7 does not have "homepage tabs" feature. 


In this guide i want to show you how to create homepage tabs in PrestaShop 1.7


The final effect will be similar to homepage tabs that were available in default-bootstrap template (click to see example)


 


this tutorial contains also free modules:


- homepage popuplar tab


- homepage bestsellers tab


- homepage new products tab


- homepage 'on sale' products tab


 


 


 


Effects of modification


prestashop17-homepage-tabs.png


  • Like 2

Share this post


Link to post
Share on other sites

Thank you Vekia, i tried your guide for my custom 1.7 theme but it is displaying it all over another without tabs, can you please explain how to implement it in custom theme without custom modules?

Share this post


Link to post
Share on other sites

Thank you Vekia, i tried your guide for my custom 1.7 theme but it is displaying it all over another without tabs, can you please explain how to implement it in custom theme without custom modules?

 

hello

guide enables feature called "homepage tabs". once you will have it, you need to use modules to build homepage tab items, for exmaple my free plugins:

  1. popular products: https://mypresta.eu/modules/front-office-features/homepage-tab-popular-products.html
  2. best sellers: https://mypresta.eu/modules/front-office-features/homepage-tab-best-sellers.html

Share this post


Link to post
Share on other sites

Hello

you mean that you had a problem with the modificaiton and cache clear helped you?

what kind of issue you have? ( you do not saw the changes probably, right?)

Share this post


Link to post
Share on other sites
6 hours ago, vekia said:

Hello

you mean that you had a problem with the modificaiton and cache clear helped you?

what kind of issue you have? ( you do not saw the changes probably, right?)

Hello Milos,

exactly without clear cache in prestashop and browser, the changes are not corrert.

It showed 3 product for row, and not 4, with 1 position clear.

And when I was go to homepage first time, I did't see the product miniatures, if i did't touch one tabs name.

But after i has clear caches, all modify have work well!

Thanks

  • Like 1

Share this post


Link to post
Share on other sites
On 1/17/2017 at 12:43 PM, vekia said:

another free module is ready for this free tutorial

here it is: homepage tab on sale products

 

does it really work on pretashop version 1.7.4? (and simple classic template)
After I tried to add this module and its hoods to my index.tpl, when I refresh the HOME page, the page becomes emtpy! (something are going wrong!)

Edited by Hessam (see edit history)

Share this post


Link to post
Share on other sites
On 13.4.2018 at 5:22 PM, vekia said:

Hello

you mean that you had a problem with the modificaiton and cache clear helped you?

what kind of issue you have? ( you do not saw the changes probably, right?)

 

Hello, i have an issue as well. without debug mode it is the same blank page, with degut enabled these are the errors.

It does not matter which of the 4 modules is enabled or denabled, this fault shows with each of them.

my presta is 1.7.4.1

 

i have looked into the files mentioned in the error message, but as i am not a programmer, i did not find anything that looked suspicious. :(

 

Please help :(

 

(1/1) SmartyException
Source: Missing name

in smarty_template_source.php line 167
at Smarty_Template_Source::load(object(SmartyDevTemplate))
in smarty_internal_template.php line 160
at Smarty_Internal_Template->__construct(null, object(SmartyDev), null, 'homeonsaletab|1|2|2|1', null, null, null)
in Smarty.class.php line 955
at Smarty->createTemplate(null, 'homeonsaletab|1|2|2|1', null, object(Smarty_Data))
in Module.php line 2302
at ModuleCore->getCurrentSubTemplate(null, 'homeonsaletab|1|2|2|1', null)
in Module.php line 2347
at ModuleCore->isCached('modules/homeonsaletab/views/templates/hook/homeonsaletab.tpl', 'homeonsaletab|1|2|2|1')
in homeonsaletab.php line 287
at homeonsaletab->hookdisplayHomeTabContent(array('cookie' => object(Cookie), 'cart' => object(Cart), 'altern' => 1))
in Hook.php line 924
at HookCore::coreCallHook(object(homeonsaletab), 'hookdisplayHomeTabContent', array('cookie' => object(Cookie), 'cart' => object(Cart), 'altern' => 1))
in Hook.php line 328
at HookCore::callHookOn(object(homeonsaletab), 'displayHomeTabContent', array('cookie' => object(Cookie), 'cart' => object(Cart), 'altern' => 1))
in Hook.php line 860
at HookCore::exec('displayHomeTabContent')
in 34190b1d96fe69e0ffc93b708bacedc74b5500a3_2.file.index.tpl.php line 47
at Block_11293529065b59298c1e6143_93801928->callBlock(object(SmartyDevTemplate))
in smarty_internal_runtime_inheritance.php line 247
at Smarty_Internal_Runtime_Inheritance->callBlock(object(Block_11293529065b59298c1e6143_93801928), object(SmartyDevTemplate))
in smarty_internal_runtime_inheritance.php line 183
at Smarty_Internal_Runtime_Inheritance->process(object(SmartyDevTemplate), object(Block_11293529065b59298c1e6143_93801928))
in smarty_internal_runtime_inheritance.php line 157
at Smarty_Internal_Runtime_Inheritance->instanceBlock(object(SmartyDevTemplate), 'Block_11293529065b59298c1e6143_93801928', 'page_content', 0)
in 34190b1d96fe69e0ffc93b708bacedc74b5500a3_2.file.index.tpl.php line 91
at Block_6430015485b59298c1e5128_54375821->callBlock(object(SmartyDevTemplate))
in smarty_internal_runtime_inheritance.php line 247
at Smarty_Internal_Runtime_Inheritance->callBlock(object(Block_6430015485b59298c1e5128_54375821), object(SmartyDevTemplate))
in smarty_internal_runtime_inheritance.php line 183
at Smarty_Internal_Runtime_Inheritance->process(object(SmartyDevTemplate), object(Block_6430015485b59298c1e5128_54375821), object(Block_12489235745b59298c1f6ec1_71714490))
in smarty_internal_runtime_inheritance.php line 185
at Smarty_Internal_Runtime_Inheritance->process(object(SmartyDevTemplate), object(Block_12489235745b59298c1f6ec1_71714490))
in smarty_internal_runtime_inheritance.php line 157
at Smarty_Internal_Runtime_Inheritance->instanceBlock(object(SmartyDevTemplate), 'Block_12489235745b59298c1f6ec1_71714490', 'page_content_container', 1)
in 2e1b980545b29c8c7651205dca98143b9d11fb09_2.file.page.tpl.php line 181
at Block_12249287225b59298c1f3779_02997390->callBlock(object(SmartyDevTemplate))
in smarty_internal_runtime_inheritance.php line 247
at Smarty_Internal_Runtime_Inheritance->callBlock(object(Block_12249287225b59298c1f3779_02997390), object(SmartyDevTemplate))
in smarty_internal_runtime_inheritance.php line 183
at Smarty_Internal_Runtime_Inheritance->process(object(SmartyDevTemplate), object(Block_12249287225b59298c1f3779_02997390), object(Block_807171135b59298c1ff562_05278601))
in smarty_internal_runtime_inheritance.php line 185
at Smarty_Internal_Runtime_Inheritance->process(object(SmartyDevTemplate), object(Block_807171135b59298c1ff562_05278601))
in smarty_internal_runtime_inheritance.php line 157
at Smarty_Internal_Runtime_Inheritance->instanceBlock(object(SmartyDevTemplate), 'Block_807171135b59298c1ff562_05278601', 'content', 2)
in 6602ac0a0c63c90fa53e4cf6ca24d87a47adbac0_2.file.layout-full-width.tpl.php line 101
at Block_15915742565b59298c1fe743_59243324->callBlock(object(SmartyDevTemplate))
in smarty_internal_runtime_inheritance.php line 247
at Smarty_Internal_Runtime_Inheritance->callBlock(object(Block_15915742565b59298c1fe743_59243324), object(SmartyDevTemplate))
in smarty_internal_runtime_inheritance.php line 183
at Smarty_Internal_Runtime_Inheritance->process(object(SmartyDevTemplate), object(Block_15915742565b59298c1fe743_59243324), object(Block_9135087485b59298c20db00_59054026))
in smarty_internal_runtime_inheritance.php line 185
at Smarty_Internal_Runtime_Inheritance->process(object(SmartyDevTemplate), object(Block_9135087485b59298c20db00_59054026))
in smarty_internal_runtime_inheritance.php line 157
at Smarty_Internal_Runtime_Inheritance->instanceBlock(object(SmartyDevTemplate), 'Block_9135087485b59298c20db00_59054026', 'content_wrapper')
in 1a43c9a5a50eed668146646c6bf0f9329b2b21dc_2.file.layout-both-columns.tpl.php line 87
at content_5b59298c215d29_72190935(object(SmartyDevTemplate))
in smarty_template_resource_base.php line 123
at Smarty_Template_Resource_Base->getRenderedTemplateCode(object(SmartyDevTemplate))
in smarty_template_compiled.php line 114
at Smarty_Template_Compiled->render(object(SmartyDevTemplate))
in smarty_internal_template.php line 206
at Smarty_Internal_Template->render()
in smarty_internal_template.php line 365
at Smarty_Internal_Template->_subTemplateRender('layouts/layout-both-columns.tpl', null, 'layouts/layout-full-width.tpl', 0, 31536000, array(), 2, false, null, null)
in smarty_internal_runtime_inheritance.php line 127
at Smarty_Internal_Runtime_Inheritance->endChild(object(SmartyDevTemplate), 'layouts/layout-both-columns.tpl')
in 6602ac0a0c63c90fa53e4cf6ca24d87a47adbac0_2.file.layout-full-width.tpl.php line 42
at content_5b59298c2007d2_28154643(object(SmartyDevTemplate))
in smarty_template_resource_base.php line 123
at Smarty_Template_Resource_Base->getRenderedTemplateCode(object(SmartyDevTemplate))
in smarty_template_compiled.php line 114
at Smarty_Template_Compiled->render(object(SmartyDevTemplate))
in smarty_internal_template.php line 206
at Smarty_Internal_Template->render()
in smarty_internal_template.php line 365
at Smarty_Internal_Template->_subTemplateRender('layouts/layout-full-width.tpl', null, 'layouts/layout-full-width.tpl', 0, 31536000, array(), 2, false, null, null)
in smarty_internal_runtime_inheritance.php line 127
at Smarty_Internal_Runtime_Inheritance->endChild(object(SmartyDevTemplate), 'layouts/layout-full-width.tpl')
in 2e1b980545b29c8c7651205dca98143b9d11fb09_2.file.page.tpl.php line 33
at content_5b59298c1f9b92_34854007(object(SmartyDevTemplate))
in smarty_template_resource_base.php line 123
at Smarty_Template_Resource_Base->getRenderedTemplateCode(object(SmartyDevTemplate))
in smarty_template_compiled.php line 114
at Smarty_Template_Compiled->render(object(SmartyDevTemplate))
in smarty_internal_template.php line 206
at Smarty_Internal_Template->render()
in smarty_internal_template.php line 365
at Smarty_Internal_Template->_subTemplateRender('page.tpl', null, 'layouts/layout-full-width.tpl', 0, 31536000, array(), 2, false, null, null)
in smarty_internal_runtime_inheritance.php line 127
at Smarty_Internal_Runtime_Inheritance->endChild(object(SmartyDevTemplate), 'page.tpl')
in 34190b1d96fe69e0ffc93b708bacedc74b5500a3_2.file.index.tpl.php line 30
at content_5b59298c1efaf2_27996461(object(SmartyDevTemplate))
in smarty_template_resource_base.php line 123
at Smarty_Template_Resource_Base->getRenderedTemplateCode(object(SmartyDevTemplate))
in smarty_template_compiled.php line 114
at Smarty_Template_Compiled->render(object(SmartyDevTemplate))
in smarty_internal_template.php line 206
at Smarty_Internal_Template->render(false, 0)
in smarty_internal_templatebase.php line 232
at Smarty_Internal_TemplateBase->_execute(object(SmartyDevTemplate), null, 'layouts/layout-full-width.tpl', null, 0)
in smarty_internal_templatebase.php line 116
at Smarty_Internal_TemplateBase->fetch('index.tpl', null, 'layouts/layout-full-width.tpl', null, false, true, false)
in SmartyDev.php line 41
at SmartyDev->fetch('index.tpl', null, 'layouts/layout-full-width.tpl')
in FrontController.php line 679
at FrontControllerCore->smartyOutputContent('index.tpl')
in FrontController.php line 663
at FrontControllerCore->display()
in Controller.php line 275
at ControllerCore->run()
in Dispatcher.php line 428
at DispatcherCore->dispatch()
in index.php line 28

 

Edited by backamblock (see edit history)

Share this post


Link to post
Share on other sites

Why in the active tab name, the background color is not show when I open my website. After, if I select one time any tabs, the background of active tab, background is show. See screenshot

Any solution?    My website miofantasy.it

Thanks

5b869122012a6_wheniopenwebsite.JPG.9e9fe894ea9843d067d1947cb65863d3.JPG5b86913605696_afterthatIselectanytabs.JPG.38d83e9044cca6c1a4679ae737da00d4.JPG

Share this post


Link to post
Share on other sites

Hi,

Add the following CSS in the themes/classic/assets/css/custom.css (At the end of the file)

#index #home-page-tabs .nav-item.active a {
    background: #F42772;
    color: #ffffff;
    border-bottom-color: #d710e5!important;
    font-size: 118%;
}

#index #home-page-tabs .nav-item.active a {
    color: #fff;
}

Refresh the cache from the admin & also the browser cache & check again. 

Hope it will fix the issue.

Share this post


Link to post
Share on other sites
2 hours ago, Knowband Plugins said:

Hi,

Add the following CSS in the themes/classic/assets/css/custom.css (At the end of the file)


#index #home-page-tabs .nav-item.active a {
    background: #F42772;
    color: #ffffff;
    border-bottom-color: #d710e5!important;
    font-size: 118%;
}

#index #home-page-tabs .nav-item.active a {
    color: #fff;
}

Refresh the cache from the admin & also the browser cache & check again. 

Hope it will fix the issue.

Thank you very much!   It Work!

Share this post


Link to post
Share on other sites

Hi Vekia,

Thanks for an article and free modules.

I did the modifications in below files and install the modules as per article.

I can see the tabs on the home page below default "POPULAR PRODUCTS". Attached Image

I have 2 designs on one page first with default products without tabs and another is with different tabs.

Please check my website URL => https://hrms-systems.com/presta-store/en/

I was expecting one design with products listing in different tabs.

Any idea?

Modified Files List

themes/classic/templates/index.tpl
themes/classic/assets/js/custom.js
themes/classic/assets/css/theme.css
themes/classic/assets/css/custom.css

Screenshot from 2018-09-03 09-06-54.png

Edited by zohaib82 (see edit history)

Share this post


Link to post
Share on other sites

I got the solution, want to share with the community.

We need to unhook the default module name "Featured Products" and clear cache from performance area in back-office.

If we want to change title to show in all capital letters, we need to edit below files and change value as shown in below code.

modules/homefeatured/views/templates/hook/tab.tpl
modules/homebestsellerstab/views/templates/hook/tab.tpl
modules/homenewtab/views/templates/hook/tab.tpl

<li class="nav-item"><a data-toggle="tab" href="#homefeatured" class="homefeatured nav-link">{l s='POPULAR' mod='homefeatured'}</a></li>

 

Share this post


Link to post
Share on other sites

Hi 

I have it working in Version 1.7.4.4 all tabs working correctly. However the tabs display immediately above the footer and below all other page content. See attached image.

In previous versions of Prestashop it was possible to use the 'standard tabs' below the slide, but above other homepage content. 

How can I get the tabs to display below the home page slider, an above the rest of the page?

Thanks

Baz

hometabs.JPG

Share this post


Link to post
Share on other sites
On 1/3/2017 at 1:45 PM, vekia said:

Standard classic theme in new PrestShop 1.7 does not have "homepage tabs" feature. 

- homepage popuplar tab

- homepage bestsellers tab

- homepage new products tab

- homepage 'on sale' products tab

Effects of modification

prestashop17-homepage-tabs.png

 

Hi Vekia;

thanks for your sharing but I don't understand; is there a hometabs module for 1.7? what are these separately?

- homepage popuplar tab, - homepage bestsellers tab, - homepage new products tab, - homepage 'on sale' products tab

I want home featured, new products and price drops?

 

Edited by selin (see edit history)

Share this post


Link to post
Share on other sites

also,

this screen on the hompage

Featured products tab - v1.2.0 -MyPresta.eu

image.png.dbcde69a03d4b61e750c21b9296584d0.png

Share this post


Link to post
Share on other sites

Hi Vekia 😊

Is it possible to associate products with the same tag in common to a tab?

example: there are 10 products that are in different categories but have the same TAG in common. Is it possible to show them all in a tab on the homepage?

On 1/10/2017 at 9:01 PM, vekia said:

 

hello

guide enables feature called "homepage tabs". once you will have it, you need to use modules to build homepage tab items, for exmaple my free plugins:

  1. popular products: https://mypresta.eu/modules/front-office-features/homepage-tab-popular-products.html
  2. best sellers: https://mypresta.eu/modules/front-office-features/homepage-tab-best-sellers.html

 

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


×
×
  • Create New...

Important Information

Cookies ensure the smooth running of our services. Using these, you accept the use of cookies. Learn More