Jump to content

[MODULE] Block of categories on the homepage


Recommended Posts

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:

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.

 

frontoffice1_en.thumb.png.329cd1c68676044aec36b933109fe036.png

 

frontoffice_en.png.51abcda6f3a860ee1ce2747471d311e6.png

 

backoffice_en.png.67f15e3f00dedc200429faed37bd4eb3.png

 

 

Edited by zapalm
Modified for a better understanding. (see edit history)
  • Thanks 1

Share this post


Link to post
Share on other sites
  • 1 month later...
  • 3 months later...
  • 11 months later...

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 by zapalm
Make more detailed. (see edit history)

Share this post


Link to post
Share on other sites
  • 4 months later...

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.

  • Like 1

Share this post


Link to post
Share on other sites

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 by Dave L (see edit history)

Share this post


Link to post
Share on other sites
  • 3 months later...

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.

Share this post


Link to post
Share on other sites
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 by zapalm
Make more detailed. (see edit history)

Share this post


Link to post
Share on other sites
  • 3 weeks later...
  • 1 year later...
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?

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites
  • 4 weeks later...
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 by ps2k11
clarification (see edit history)

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites
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

Image1.jpg

  • Like 1

Share this post


Link to post
Share on other sites
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

Image1.jpg

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

regards

Share this post


Link to post
Share on other sites
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:

 

frontoffice1_en.thumb.png.329cd1c68676044aec36b933109fe036.png

 

frontoffice_en.png.51abcda6f3a860ee1ce2747471d311e6.png

 

backoffice_en.png.67f15e3f00dedc200429faed37bd4eb3.png

 

 

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 

 

Share this post


Link to post
Share on other sites
  • 1 month later...

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? :D What about financial support for me to do periodical updates? :D

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

  • Like 3

Share this post


Link to post
Share on other sites
  • 2 months later...

чтобы в версии 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 by Belena (see edit history)
  • Like 2

Share this post


Link to post
Share on other sites
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:

cat1.thumb.jpeg.9c73dd18043a147c9772da05370d9c35.jpeg

Now work ok.

Edit css for better presentation.

Thanks.

 

Edited by freiserk
Correct (see edit history)
  • Like 3

Share this post


Link to post
Share on other sites
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

Capture.PNG

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.

001cat.thumb.jpeg.287544f144e494227100c82b540769b9.jpeg

And result...

002cat.thumb.jpeg.48503587b9e1cbb09baec0ad4c0f5fcf.jpeg

Regards.

 

  • Like 1

Share this post


Link to post
Share on other sites
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.

001cat.thumb.jpeg.287544f144e494227100c82b540769b9.jpeg

And result...

002cat.thumb.jpeg.48503587b9e1cbb09baec0ad4c0f5fcf.jpeg

Regards.

 

Hi @freiserk 

This works!!

Thnks and Regards

Captura.PNG

  • Like 1

Share this post


Link to post
Share on other sites

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 by Meshi14 (see edit history)

Share this post


Link to post
Share on other sites
  • 1 month later...

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 by zapalm
Make more detailed. (see edit history)
  • Like 1

Share this post


Link to post
Share on other sites
  • 3 weeks later...

🤦🏻‍♂️

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 by zapalm
Fixed a typo (see edit history)

Share this post


Link to post
Share on other sites

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 by zapalm
Fixed a typo (see edit history)

Share this post


Link to post
Share on other sites
  • 1 month later...

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?

Share this post


Link to post
Share on other sites
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!

  • Like 1

Share this post


Link to post
Share on other sites
  • 2 weeks later...

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

  • Thanks 1

Share this post


Link to post
Share on other sites
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 :D Use it: "Internationalization / Translation".

Edited by zapalm
Make more detailed. (see edit history)

Share this post


Link to post
Share on other sites
  • 3 months later...

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 by ender666 (see edit history)

Share this post


Link to post
Share on other sites

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.

  • Thanks 1

Share this post


Link to post
Share on other sites
  • 2 months later...

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

Share this post


Link to post
Share on other sites
On 2/22/2015 at 8:56 PM, zapalm said:

backoffice_en.png.67f15e3f00dedc200429faed37bd4eb3.png

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.

☝️

Share this post


Link to post
Share on other sites
  • 1 month later...

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.

2020-04-22_181656.png.3fee798c62a028d1932caf35b5ca88e7.png

👇

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.

 

Share this post


Link to post
Share on other sites
  • 4 weeks later...
  • 1 month later...
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.

Share this post


Link to post
Share on other sites
  • 3 weeks later...

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

2.thumb.png.6b83dc08d9dde4035c9ac4d751da2054.png

 

1.thumb.png.a13d728662ad4ea5322c0fb7b61278bd.png

 

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

Share this post


Link to post
Share on other sites

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.

 

Share this post


Link to post
Share on other sites
  • 1 month later...

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?

Screenshot_2020-09-10.thumb.png.0bebdc09f8570be74f9f69c36299b6cf.png

Share this post


Link to post
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...

Important Information

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