[MODULE] Block of categories on the homepage

[zapalm 33]

This free module allows to add block that displays categories on the homepage.

The module for PrestaShop 1.3, 1.4, 1.5, 1.6, 1.7.

Installation - normal (without core modifications).

Sources:

• Module's homepage (full description and download).
• Last stable release (permanent link to zip-file).
• GitHub repository (important: by this variant of download you should know how to create a release by yourself before using the module in PrestaShop!).

How to help the project grow and get updates:

• Review and rate the module on its homepage on the comments tab.
• Translate description of the module and it's interface captions (by using GitHub or just attach translation files in a message in this forum).
• React to my helpful answers on this forum.
• Become the patron or support me by Flattr to help me work more for supporting and improving this project.
• Report an issue on GitHub.
• Give the star to the project on GitHub.
• Contribute to the code on GitHub.

 

 

 

 

 

Edited February 27, 2020 by zapalm
Modified for a better understanding. (see edit history)

[zapalm 33]

The module updated to 1.2.0.

Now it supports PrestaShop 1.5-1.6.

But with PS1.5 may be problems with styling.

The download link is the same. See the full changelog on my site

Edited May 5, 2019 by zapalm
Make more detailed. (see edit history)

[Acidomalefico 2]

Eccellent! sorry as I can install it in "displayTopColumn", under the slide?

Edited August 8, 2015 by Acidomalefico (see edit history)

[zapalm 33]

Eccellent! sorry as I can install it in "displayTopColumn", under the slide?

 

hi.

why you need it?

[zapalm 33]

The module minor update.

'Max' property of the 'prestashop versions compliance' setting was removed.

It means that the module can be installed on any version beginning from PS 1.3.0.0.

The download link is the same. See the full changelog on my site

Edited May 5, 2019 by zapalm
Make more detailed. (see edit history)

[Dave L 119]

Hi

 

Big thank you for this module and for your efforts. May I ask how I can duplicate this module. I would like to use another tab for a 2nd category.

 

Appreciated.

[Dave L 119]

Hi

 

Big thank you for this module and for your efforts. May I ask how I can duplicate this module. I would like to use another tab for a 2nd category.

 

Appreciated.

OK so to quote myself, I managed to duplicate the module. The only issue I have now is the ? in place of the images.

The image address is:  /c/33-category_default/image.jpg

 

Appreciate advice.

 

EDIT: Never mind. I have it working now. I had to upload the specific images manually.

Edited December 5, 2016 by Dave L (see edit history)

[Dave L 119]

where is the module name? I have upload the moudle zip file via browser, but find no where to install it, should I extract and upload to the website?

 

You can upload the .zip using the Add New Module feature in the BO Modules and Services page or manual upload to your /modules directory and then install from your BO.

[zapalm 33]

Quote

where is the module name? I have upload the moudle zip file via browser, but find no where to install it, should I extract and upload to the website?

The name is Categories on the homepage.

If you have downloaded from GitHub you should understand how to build a release from the downloaded version.

No needs to download from GitHub. Use permanent link to download.

Edited May 5, 2019 by zapalm
Make more detailed. (see edit history)

[CodeSnipper 0]

After small editing, module works in 1.7.1. Has some errors on install, but installation is succesful. I think it should have new file structure (according to this: http://developers.prestashop.com/module/05-CreatingAPrestaShop17Module/).

homecategoriez-1.7.1.zip

[obeidullah 0]

On 4/7/2017 at 5:45 PM, CodeSnipper said:

After small editing, module works in 1.7.1. Has some errors on install, but installation is succesful. I think it should have new file structure (according to this: http://developers.prestashop.com/module/05-CreatingAPrestaShop17Module/).

homecategoriez-1.7.1.zip

I have tested it on 1.7.4 but it does not install. Could somebody help make it work on latest 1.7.4?

[zapalm 33]

Hello.

CodeSnipper,

To add PrestaShop 1.7 not small changes are required

So, today I worked several hours to add support PrestaShop 1.7.

Now everybody can download new version. See the first topic for the download link to zip-file.

Become the patron to help me work more for supporting and expanding this module.

Join to GitHub and:

• Report an issue.
• Translate description of the module and it's interface captions.
• Give me feedback.
• Contribute to the code.

[ps2k11 11]

On 7/21/2018 at 9:41 AM, zapalm said:

Hello.

CodeSnipper,

To add PrestaShop 1.7 not small changes are required

So, today I worked several hours to add support PrestaShop 1.7.

Now everybody can download new version. See the first topic for the download link to zip-file.

Become the patron to help me work more for supporting and expanding this module.

Join to GitHub and:

• Report an issue.
• Translate description of the module and it's interface captions.
• Give me feedback.
• Contribute to the code.

 

Works but no pictures for categories. Does not find pics

Edited August 17, 2018 by ps2k11
clarification (see edit history)

[zapalm 33]

If you really want to help you, then you should describe fully your problem including PS version, your theme and attach helping pictures, page source, debug info.

[ps2k11 11]

9 hours ago, zapalm said:

If you really want to help you, then you should describe fully your problem including PS version, your theme and attach helping pictures, page source, debug info.

 

classic theme ps 1.7.4.2. basically no pictures found in popular categories but categories have cover photo

[ps2k11 11]

Any idea ? or I just have to forget about version 1.7

[aixos 80]

On 18/8/2018 at 2:20 PM, ps2k11 said:

 

classic theme ps 1.7.4.2. basically no pictures found in popular categories but categories have cover photo

How can it be done so that the correct image appears?
prestashop 1.7.4.2

regards

[aixos 80]

On 22/2/2015 at 11:56 AM, zapalm said:

This module allows to add block that displays categories on the homepage.

The module for PrestaShop 1.3, 1.4, 1.5, 1.6, 1.7.

Installation - normal (without core modifications).

Sources:

• Module's homepage (full description and download).
• GitHub repository.
• Last stable release (permanent link to zip-file).
• Become the patron to help me work more for supporting and expanding this module.

 

 

 

 

 

Hi

this module I have not managed in prestashop 1.7.4.2 to see the photos like this example of yours.
It would be very interesting to have the categories with the photo and to make the link also the subcategories with your photo, and when doing link in the subcategories go to the products
It would be perfect
Well, if someone solves it, it will be a good module
regards 

 

[zapalm 33]

I have received several messages with the request to update the module to work with PS 1.7.4. I know about this problem.

Everybody must understand that I can work for free only in my time for rest (my free time). So, I prioritize - to work with free module or to rest!

Frankly , I expected people to at least like my posts about module's releases. Do you see at least a one like? What about financial support for me to do periodical updates?

So! Become the patron to help me work more for supporting and expanding this free module (now there are about 30 modules and tools).

[Soyons Solidaire 249]

Hello thanks you for this sharing that works

[Belena 2]

чтобы в версии 1.7.5 было видно изображение, надо в homecategoriez \ views \ templates \ homecategoriez -boilerplate.tpl
  {assign var = 'imageLink' value = $ link-> getCatImageLink ($ category-> link_rewrite, $ category-> id_image, 'category_default') | escape: 'html': 'UTF-8'} 
и {if $ category-> id_image}
                        <img
                            src = "{$ imageLink}"
                            width = "{$ pic_size.width}"
                            height = "{$ pic_size.height} "
                            alt =" {$ category-> name | escape: html: 'UTF-8'} "
                            title =" {$ category-> name | escape: html:

                   {elso}
                        <img
                            src = "{$ urls.img_cat_url | escape: 'html': 'UTF-8'} {$ language.iso_code | escape: 'html': 'UTF-8'}. jpg"
                            width = " {$ pic_size .width} "
                            height =" {$ pic_size.height} "
                            title =" {ls = 'Нет изображения' mod = 'tablecombz'} "
                        >
                    {/ if}
 

Edited January 12, 2019 by Belena (see edit history)

[freiserk 14]

En 12/1/2019 a las 10:40 AM, Belena dijo:

чтобы в версии 1.7.5 было видно изображение, надо в homecategoriez \ views \ templates \ homecategoriez -boilerplate.tpl
  {assign var = 'imageLink' value = $ link-> getCatImageLink ($ category-> link_rewrite, $ category-> id_image, 'category_default') | escape: 'html': 'UTF-8'} 
и {if $ category-> id_image}
                        <img
                            src = "{$ imageLink}"
                            width = "{$ pic_size.width}"
                            height = "{$ pic_size.height} "
                            alt =" {$ category-> name | escape: html: 'UTF-8'} "
                            title =" {$ category-> name | escape: html:

                   {elso}
                        <img
                            src = "{$ urls.img_cat_url | escape: 'html': 'UTF-8'} {$ language.iso_code | escape: 'html': 'UTF-8'}. jpg"
                            width = " {$ pic_size .width} "
                            height =" {$ pic_size.height} "
                            title =" {ls = 'Нет изображения' mod = 'tablecombz'} "
                        >
                    {/ if}
 

Hi Belena, many thanks, but i have error:

SmartyCompilerException
Syntax error in template "file:/Users/.../175/modules/homecategoriez/views/templates/homecategoriez-boilerplate.tpl" on line 16 "{assign var='imageLink' value=$link->getCatImageLink ($category->link_rewrite, $category->id_image, 'category_default') | escape:'html':'UTF-8'}" - Unexpected "|"

Thnks again.

This code is ok:

{assign var='imageLink' value=$link->getCatImageLink ($category->link_rewrite, $category->id_image, 'category_default')|escape:'html':'UTF-8'}  
 					{if $category->id_image} 
                        <img
                            src="{$imageLink}"
                            width="{$pic_size.width}"
                            height="{$pic_size.height}"
                            alt="{$category->name|escape:html:'UTF-8'}"
                            title="{$category->name|escape:html:'UTF-8'}">
                    {else}
                        <img
                            src="{$urls.img_cat_url|escape:'html':'UTF-8'}{$language.iso_code|escape:'html':'UTF-8'}.jpg"
                            width="{$pic_size.width}"
                            height="{$pic_size.height}"
                            title="{l s='No image' mod='tablecombz'}">
                    {/if}

Result:

Now work ok.

Edit css for better presentation.

Thanks.

 

Edited January 13, 2019 by freiserk
Correct (see edit history)

[zapalm 33]

Friends, if you really want to participate in improving the code, use the appropriate tool: GitHub. After code review and testing I will create release, accessible for download for everyone.

Edited May 5, 2019 by zapalm
Make more detailed. (see edit history)

[Meshi14 1]

Hi @freiserk I was modify the homecategoriez -boilerplate.tpl like you and @Belena comment, but I continue without see my categories.

and also I can't modify the columns number to show. I´m using the v1.7.5

Any idea ?

Regards

[freiserk 14]

hace 20 horas, Meshi14 dijo:

Hi @freiserk I was modify the homecategoriez -boilerplate.tpl like you and @Belena comment, but I continue without see my categories.

and also I can't modify the columns number to show. I´m using the v1.7.5

Any idea ?

Regards

Hi, i make another test...

{assign var='imageLink' value=$link->getCatImageLink($category->link_rewrite, $category->id_image, 'category_default')|escape:'html':'UTF-8'}
            <li class="col-xs-12 col-sm-6 col-lg-2">
                <a href="{$categoryLink}" title="{$category->name|escape:html:'UTF-8'}">
                    
                        {if $category->id_image} 
                        <img
                            src="{$imageLink}"
                            width="{$pic_size.width}"
                            height="{$pic_size.height}"
                            alt="{$category->name|escape:html:'UTF-8'}"
                            title="{$category->name|escape:html:'UTF-8'}">
                    {else}
                        <img
                            src="{$urls.img_cat_url|escape:'html':'UTF-8'}{$language.iso_code|escape:'html':'UTF-8'}.jpg"
                            width="{$pic_size.width}"
                            height="{$pic_size.height}"
                            title="{l s='No image' mod='tablecombz'}">
                    {/if}
                
                </a>

This code for replace.

And result...

Regards.

 

[Meshi14 1]

hace 27 minutos, freiserk dijo:

Hi, i make another test...

{assign var='imageLink' value=$link->getCatImageLink($category->link_rewrite, $category->id_image, 'category_default')|escape:'html':'UTF-8'}
            <li class="col-xs-12 col-sm-6 col-lg-2">
                <a href="{$categoryLink}" title="{$category->name|escape:html:'UTF-8'}">
                    
                        {if $category->id_image} 
                        <img
                            src="{$imageLink}"
                            width="{$pic_size.width}"
                            height="{$pic_size.height}"
                            alt="{$category->name|escape:html:'UTF-8'}"
                            title="{$category->name|escape:html:'UTF-8'}">
                    {else}
                        <img
                            src="{$urls.img_cat_url|escape:'html':'UTF-8'}{$language.iso_code|escape:'html':'UTF-8'}.jpg"
                            width="{$pic_size.width}"
                            height="{$pic_size.height}"
                            title="{l s='No image' mod='tablecombz'}">
                    {/if}
                
                </a>

This code for replace.

And result...

Regards.

 

Hi @freiserk 

This works!!

Thnks and Regards

[thats 1]

Hi, its really cool module but do any of you guys know how to limit it to show only first X categories ?

[Soyons Solidaire 249]

15 hours ago, Meshi14 said:

Hi @freiserk 

This works!!

Thnks and Regards

 

Hi, you can put the edit file Thanks you.
 

[Meshi14 1]

Hi @Soyons zen 

This is the file with the changes 😊

{**
 * Home Categories Block: module for PrestaShop.
 *
 * @author    Maksim T. <zapalm>
 * @copyright 2012 Maksim T.
 * @link      https://prestashop.modulez.ru/en/frontend-features/31-block-of-categories-on-the-homepage.html The module's homepage
 * @license   https://opensource.org/licenses/afl-3.0.php Academic Free License (AFL 3.0)
 *}

<!-- MODULE homecategoriez -->
<div id="homecategoriez">
    <h4>{l s='Popular categories' mod='homecategoriez'}</h4>
    <ul class="row">
        {foreach from=$categories item=category name=homeCategory}
            {assign var='categoryLink' value=$link->getcategoryLink($category->id_category, $category->link_rewrite)}
            {assign var='imageLink' value=$link->getCatImageLink($category->link_rewrite, $category->id_image, 'category_default')|escape:'html':'UTF-8'}
            <li class="col-xs-12 col-sm-6 col-lg-2">
                <a href="{$categoryLink}" title="{$category->name|escape:html:'UTF-8'}">
                        {if $category->id_image} 
                        <img
                            src="{$imageLink}"
                            width="{$pic_size.width}"
                            height="{$pic_size.height}"
                            alt="{$category->name|escape:html:'UTF-8'}"
                            title="{$category->name|escape:html:'UTF-8'}">
                    {else}
                        <img
                            src="{$urls.img_cat_url|escape:'html':'UTF-8'}{$language.iso_code|escape:'html':'UTF-8'}.jpg"
                            width="{$pic_size.width}"
                            height="{$pic_size.height}"
                            title="{l s='No image' mod='tablecombz'}">
                    {/if}
                </a>
                <h5 class="category-title">
                    <a href="{$categoryLink}" title="{$category->name|escape:html:'UTF-8'}">
                        {$category->name|escape:html:'UTF-8'}
                    </a>
                </h5>
                <p class="category-description">
                    <a href="{$categoryLink}" title="{$category->name|escape:html:'UTF-8'}">
                        {$category->description|strip_tags|stripslashes|escape:html:'UTF-8'}
                    </a>
                </p>
            </li>
        {foreachelse}
            {l s='No categories' mod='homecategoriez'}
        {/foreach}
    </ul>
</div>
<!-- /MODULE homecategoriez -->

 

Edited January 17, 2019 by Meshi14 (see edit history)

[zapalm 33]

The problem with displaying a category image in PrestaShop 1.7.4 and newer was fixed.

The download link is the same. See the full changelog on my site.

Do not hesitate to create a pull request if even it's hard for you to apply all contributing rules. Feel free to complete ;)

[Soyons Solidaire 249]

Hi on GitHub repository file is not fixed ?
 
 

Edited February 20, 2019 by Soyons zen (see edit history)

[zapalm 33]

This module source code is hosted and updated on GitHub only. Every release I am create the build and upload it on the homepage for a simply use. In this release I have created Composer dependencies. So, If you don't understand, just download the build release by suggested link as usual!

Edited February 21, 2019 by zapalm
Make more detailed. (see edit history)

[Soyons Solidaire 249]

Thanks You 😛

[zapalm 33]

I will be very glad if users of this module will rate it by adding the comment on its homepage. 👍🏻

[amanuensis 0]

Is this module compatible with Prestashop 1.7.5.1?

[malxazparfumer 4]

On 4/11/2015 at 8:39 PM, zapalm said:

the module updated to 1.2.0.

now it supports PrestaShop 1.5-1.6.

but with PS1.5 may be problems with styling.

 

download last stable release (permanent link to zip-file).

this module is can work with 1.7.5.0 ?

 

1

 

[zapalm 33]

🤦🏻‍♂️

If a developer said "a module works on PrestaShop 1.7", it is supposed to that a module will work on different versions of 1.7, i.e.: 1.7.0.0, 1.7.1.1, and so on. Because of free module, everybody can install the module to make sure it really works, since you are interested in it. Every update of the module, I am also update the first post to actualize the information:

On 2/22/2015 at 8:56 PM, zapalm said:

The module for PrestaShop 1.3, 1.4, 1.5, 1.6, 1.7.

 

Edited June 10, 2019 by zapalm
Fixed a typo (see edit history)

[zapalm 33]

Today I accidentally discovered a problem with the download link on the homepage. From the last release at 2019-02-20, a link was provided for downloading the previous version of the module. No one noticed, and did not tell me about it in these several month Now, the link is updated. But on this forum the link was correct. I have also check all links in this topic and updated them to refer to my first post with actual sources

How to help the project grow and get updates:

• Review and rate the module on its homepage on the comments tab.
• Translate description of the module and it's interface captions (by using GitHub or just attach translation files in a message in this forum).
• React to my helpful answers on this forum.

Edited May 5, 2019 by zapalm
Fixed a typo (see edit history)

[MrSoulPC915 12]

Hello and thank you for your module, I'm just looking to display the categories on my shop homepage.

However, I have a problem, when I drag the module folder into the Prestashop "modules" folder (1.7.5.2), I have an error 500 on the Module Manager page of the backoffice.

If I try to use the backoffice installation function by sending the zip file, it tells me: This file doesn't seem to be a valid module.zip file.

Any idea what might jam?

[zapalm 33]

Hello.

If you download the module from GitHub you should know how to create a release before using the module in PrestaShop!

Edited June 9, 2019 by zapalm
Written in more detail. (see edit history)

[MrSoulPC915 12]

11 hours ago, zapalm said:

Hello.

If you download the module from GitHub you should know how to create a release before using the module in PrestaShop!

Indeed, I had directly downloaded the GitHub zip without compiling it.
The zip indicated on the first message of this topic works perfectly.

Thank you!

[abdullahn10 2]

Hello zapalm, thank you for this nice module.

I want to change the text "Popular categories" but I couldn't to it in the module settings. Because of this, I forked you repository and created a new release after doing the changes. When I want to install the created zip, presta says that the zip format is not valid. What can I do or is there a possibility to change the text easily?

My release: https://github.com/abdullahn10/homecategoriez/releases

[zapalm 33]

12 hours ago, abdullahn10 said:

I want to change the text "Popular categories" but I couldn't to it in the module settings.

In PrestaShop there is the translation tool  Use it: "Internationalization / Translation".

Edited June 23, 2019 by zapalm
Make more detailed. (see edit history)

[abdullahn10 2]

That was a tip I've been waiting for, very easy  thank you

[zapalm 33]

@abdullahn10, you can help translate the description of the module and it's interface captions. You can create a pull request on GitHub with new translation file to German or just to attach de.php file here.

Edited June 28, 2019 by zapalm
Fixed a typo (see edit history)

[ender666 12]

how to choose other images than Category default? Those are wide images (870x217), how to use medium_default or thumb  from /img/c/ directory? 

And there is no category description visible like on your screenshot..

prestashop 1.6.1.21

thank you.

Edited September 29, 2019 by ender666 (see edit history)

[zapalm 33]

Create this new feature request on GitHub/Issues of this module repository. When I will have free time for this task, I will create an update. Or may be some one another programmer will create an update.

[stevencage 4]

Hi, thank you so much for the development of this module. I just want to know is it passable to move the module to the top of the home page, like on top of the image slider. I'm using PS1.7.6.1.  Thanks again.

[zapalm 33]

Hello.

As usual, you can manage a position on a page by using "Design / Positions" tool in PS 1.7.

 

[stevencage 4]

work like a charm, thank you so much.

[Atanasz 0]

Hi, I just installed the module on 1.7.4 version but there is a bug. The picture is overlies text.

 

Edited February 19, 2020 by Atanasz
It is not the module bug. It is the Presta bug. (see edit history)

[zapalm 33]

Hello.

The demo with this module is on PS 1.7.4 too. And as you see there is no problem. I think you have some non-default theme with some CSS problem. Your image from the attachment do not works.

[Soyons Solidaire 249]

Thank for the sharing 

[Aldeag 19]

Hello: does it work under Prestashop 1.7.6.3 ?

I get the message that the zip format is not valid.

I unzip and zip again or upload via FTP and don´t see in modules...

[zapalm 33]

On 2/22/2015 at 8:56 PM, zapalm said:

• GitHub repository (by this variant of download you should know how to create a release by yourself before using the module in PrestaShop!).

☝️

Edited February 27, 2020 by zapalm
Modified for a better understanding. (see edit history)

[Aldeag 19]

Right. I´m sorry I didn´t read all the whole post but it is already explained in some of them.

Now I got it installed and seems working OK.

But I don´t find or don´t understand how to add multiple categories because I can only choose between them and not in all of them I see all it´s products

[zapalm 33]

On 2/22/2015 at 8:56 PM, zapalm said:

As you can see in the picture, only one category can be selected.

On 9/30/2019 at 9:54 AM, zapalm said:

Create this new feature request on GitHub/Issues of this module repository. When I will have free time for this task, I will create an update. Or may be some one another programmer will create an update.

☝️

On 10/17/2018 at 3:11 PM, zapalm said:

Everybody must understand that I can work for free only in my time for rest (my free time). So, I prioritize - to work with free module or to rest!

☝️

On 5/5/2019 at 2:14 PM, zapalm said:

How to help the project grow and get updates:

• Review and rate the module on its homepage on the comments tab.
• Translate description of the module and it's interface captions (by using GitHub or just attach translation files in a message in this forum).
• React to my helpful answers on this forum.

☝️

[Jose Orozco 0]

Muchas Gracias..

[Jose Orozco 0]

hI..

 

the images look like this .

 

What should be done to make it look like this?

 

What kind of images should I use (Height, width)?

[zapalm 33]

Hello.

The module uses category_default image type. But already for new versions of PS current styles of the module are not fully comparable with the new theme of PS 1.7.

👇

On 9/30/2019 at 9:54 AM, zapalm said:

Create this new feature request on GitHub/Issues of this module repository. When I will have free time for this task, I will create an update. Or may be some one another programmer will create an update.

 

[MARISACAL 0]

PLEASE HOW CAN I GET THERE TABS AND BY CLICKING THE IMAGES (SUB-CATEGORIES) TO CHANGE, PLEASE HELP

[zapalm 33]

On 5/19/2020 at 1:21 AM, MARISACAL said:

PLEASE HOW CAN I GET THERE TABS AND BY CLICKING THE IMAGES (SUB-CATEGORIES) TO CHANGE, PLEASE HELP

If I understand you correctly, you ask about your specifics, for which the module needs to be modified accordingly. If you need free help in programming, then contact somebody in a proper forum topic and ask about your task. Maybe someone interested can help you for free. I always consider a good idea of a new feature that will be useful to most online stores for development. But I am not sure that your feature may be needed by most.

[stevencage 4]

hi, sorry but just have a problem with the categories name messing up the layout as you can see from the picture below

 

 

can I arrange the categories as tidy as the second pic but with different length of  name as the first pic? Thanks a lot.

[zapalm 33]

Hello.

You need to improve CSS styles for your version of PrestaShop: https://github.com/zapalm/homecategoriez/tree/master/views/css

I think an adjust of a block height is needed.

Or 👇

On 9/30/2019 at 9:54 AM, zapalm said:

Create this new feature request on GitHub/Issues of this module repository. When I will have free time for this task, I will create an update. Or may be some one another programmer will create an update.

 

[stevencage 4]

many thanks, css height does the trick.

[raverink 0]

Hi,

Thanks for giving us this tool. It 's exactly wheat i need if I can fix just one thing.

I I changed the image settings, because I want to display two categories and want them to appear bigger and next to each other. But now the images are overlapping each other as you can see in attached file.

Do you know how I can fix this?