Category list component | CMS | GrapesJS

[peter69]

Hello everyone!

I have been using the CMS module to modify the home page. In the extras section there is a component called "products" which displays products depending on the category that is selected.

So, I was wondering what is the best way to create a component to list categories with their respective images.

Thank you very much for any help you can give me,

Best regards!

========================
laravel: 9.2
aimeos-laravel: ~2022.04
PHP: 8.1.6
Environment: Ubuntu 20.04.4 LTS

[aimeos]

If you want to add a new block to the CMS components, you have to add some JS for the CMS:
https://github.com/aimeos/ai-cms-grapes ... #L342-L351

This is for being able to select the category dynamically in the CMS module:
https://github.com/aimeos/ai-cms-grapes ... #L548-L656

Add the JS code to your extension (custom.js) like this (same for Aimeos.CMSContent.GrapesJS.components.categories):

Code: Select all

Aimeos.CMSContent.GrapesJS.blocks.categories = {
	category: 'Extra',
	label: 'Categories',
	attributes: { class: 'fa fa-hierarchy' },
	content: `<categories>
		<div class="category" data-gjs-name="Category"></div>
		<div class="category" data-gjs-name="Category"></div>
		<div class="category" data-gjs-name="Category"></div>
	</categories>`
};

Then, you need to create a HTML client subpart like this that renders the data, e.g. named "Categories":
https://github.com/aimeos/ai-cms-grapes ... andard.php

More about implementing subparts is available here:
https://aimeos.org/docs/latest/frontend ... -subparts/

Finally, configure your new subpart to be used:

Code: Select all

client/html/cms/page/subparts = ['contact', 'cataloglist', 'categories']

How to add the configuration is described here:
https://aimeos.org/docs/latest/laravel/ ... figuration

[peter69]

Hello Sir,

Thank you very much for your help,

I am a bit confused about the subparts, I have read the documentation but I am not very clear.

In this case, in which directory of my theme should I create the subpart?

Also, can I add javascript to the subpart, for example to display the categories in a carousel?

Best regards

[aimeos]

In this case, in which directory of my theme should I create the subpart?

In your extension, store the subpart in ./src/Client/Html/Cms/Page/<yourpart>/Standard.php, just like the Cataloglist subpart:
https://github.com/aimeos/ai-cms-grapes ... ataloglist

Also, can I add javascript to the subpart, for example to display the categories in a carousel?

You can add own CSS/JS code to the copy of these files in your own extension:
https://github.com/aimeos/ai-cms-grapes ... ml/default

[peter69]

Thank you very much for your reply. I am going to do some tests.