Install the Comments feature

Last updated: June 16, 2021

Edit on GitHub

Install feature core

Prerequisites

Install the required features:

NAME	VERSION
Spryker Core	202311.0
Customer Account Management	202311.0

1) Install the required modules

Install the required modules using Composer:

composer require spryker-feature/comments: "202311.0" --update-with-dependencies

Verification

Make sure the following modules have been installed:

MODULE	EXPECTED DIRECTORY
Comment	vendor/spryker/comment
CommentDataImport	vendor/spryker/comment-data-import

2) Set up configuration

Add the following configuration to your project:

CONFIGURATION	SPECIFICATION	NAMESPACE
CommentConfig::getAvailableCommentTags()	Used to allow saving comment tags to the database.	Pyz\Shared\Comment
A regular expression (See below in `config/Shared/config_default.php`)	Used to close access for not logged customers.	None

src/Pyz/Zed/Comment/CommentConfig.php

<?php

namespace Pyz\Shared\Comment;

use Spryker\Shared\Comment\CommentConfig as SprykerCommentConfig;

class CommentConfig extends SprykerCommentConfig
{
	/**
	 * @return string[]
	 */
	public function getAvailableCommentTags(): array
	{
		return [
			'delivery',
			'important',
		];
	}
}

Verification

Make sure that when you add/remove comment tag (listed in config to comment is allowed.)

config/Shared/config_default.php

<?php

$config[CustomerConstants::CUSTOMER_SECURED_PATTERN] = '(^(/en|/de)?/comment($|/))';

Verification

Make sure that mysprykershop.com/comment with a guest user redirects to login page.

3) Set up database schema and transfer objects

Apply database changes and generate entity and transfer changes:

console propel:install
console transfer:generate

Verification

Make sure the following changes have been applied by checking your database:

DATABASE ENTITY	TYPE	EVENT
spy_comment	table	created
spy_comment_tag	table	created
spy_comment_thread	table	created
spy_comment_to_comment_tag	table	created

Verification

Make sure that the following changes in transfer objects:

TRANSFER	TYPE	EVENT	PATH
SpyCommentEntityTransfer	class	created	src/Generated/Shared/Transfer/SpyCommentEntityTransfer
SpyCommentTagEntityTransfer	class	created	src/Generated/Shared/Transfer/SpyCommentTagEntityTransfer
SpyCommentThreadEntityTransfer	class	created	src/Generated/Shared/Transfer/SpyCommentThreadEntityTransfer
SpyCommentToCommentTagEntityTransfer	class	created	src/Generated/Shared/Transfer/SpyCommentToCommentTagEntityTransfer
Comment	class	created	src/Generated/Shared/Transfer/Comment
CommentThread	class	created	src/Generated/Shared/Transfer/CommentThread
CommentTag	class	created	src/Generated/Shared/Transfer/CommentTag
CommentFilter	class	created	src/Generated/Shared/Transfer/CommentFilter
CommentRequest	class	created	src/Generated/Shared/Transfer/CommentRequest
CommentTagRequest	class	created	src/Generated/Shared/Transfer/CommentTagRequest
CommentThreadResponse	class	created	src/Generated/Shared/Transfer/CommentThreadResponse

4) Add translations

Append glossary according to your configuration:

src/data/import/glossary.csv

comment.validation.error.comment_not_found,Comment not found.,en_US
comment.validation.error.comment_not_found,Kommentar nicht gefunden.,de_DE
comment.validation.error.comment_thread_not_found,Comment Thread not found.,en_US
comment.validation.error.comment_thread_not_found,Kommentar Thread nicht gefunden.,de_DE
comment.validation.error.access_denied,Access denied.,en_US
comment.validation.error.access_denied,Zugriff verweigert.,en_US
comment.validation.error.comment_thread_already_exists,Comment Thread already exists.,de_DE
comment.validation.error.comment_thread_already_exists,Kommentar Thread existiert bereits.,de_DE
comment.validation.error.invalid_message_length,Invalid message length.,en_US
comment.validation.error.invalid_message_length,Ungültige Nachrichtenlänge.,de_DE
comment.validation.error.comment_tag_not_available,Comment tag not available.,en_US
comment.validation.error.comment_tag_not_available,Kommentar-Tag nicht verfügbar.,de_DE

Import data:

console data:import glossary

Verification

Make sure that, in the database, the configured data are added to the spy_glossary table.

5) Set up behavior

Set up comment workflow

Enable the following behaviors by registering the plugins:

PLUGIN	SPECIFICATION	PREREQUISITES	NAMESPACE
CommentDataImportPlugin	Imports Comments data.	None	Spryker\Zed\CommentDataImport\Communication\Plugin

src/Pyz/Zed/DataImport/DataImportDependencyProvider.php

<?php

namespace Pyz\Zed\DataImport;

use Spryker\Zed\CommentDataImport\Communication\Plugin\CommentDataImportPlugin;
use Spryker\Zed\DataImport\DataImportDependencyProvider as SprykerDataImportDependencyProvider;

class DataImportDependencyProvider extends SprykerDataImportDependencyProvider
{
	/**
	 * @return array
	 */
	protected function getDataImporterPlugins(): array
	{
		return [
			new CommentDataImportPlugin(),
		];
	}

Verification

Make sure that spy_comment, spy_comment_thread, and spy_comment_to_comment_tag are not empty.

Install feature frontend

Prerequisites

Install the following required features:

NAME	VERSION
Spryker Core	202311.0
Customer Account Management	202311.0

1) Install the required modules

Install the required modules using Composer:

composer require spryker-feature/comments: "^201907.0" --update-with-dependencies

Verification

Make sure the following modules have been installed:

MODULE	EXPECTED DIRECTORY
CommentWidget	vendor/spryker-shop/comment-widget
CommentWidgetExtension	vendor/spryker-shop/comment-widget-extension

2) Add translations

Append glossary according to your configuration:

src/data/import/glossary.csv

comment_widget.comments_to_cart,Comments to Cart,en_US
comment_widget.comments_to_cart,Kommentare zum Warenkorb,de_DE
comment_widget.form.add_comment,Add,en_US
comment_widget.form.add_comment,Hinzufügen,de_DE
comment_widget.form.update_comment,Update,en_US
comment_widget.form.update_comment,Aktualisieren,de_DE
comment_widget.form.remove_comment,Remove,en_US
comment_widget.form.remove_comment,Entfernen,de_DE
comment_widget.form.you,You,en_US
comment_widget.form.you,Sie,de_DE
comment_widget.form.attach,Attach,en_US
comment_widget.form.attach,Anhängen,de_DE
comment_widget.form.unattach,Unattach,en_US
comment_widget.form.unattach, Anhang entfernen,de_DE
comment_widget.form.all,All,en_US
comment_widget.form.all,Alles,de_DE
comment_widget.form.attached,Attached,en_US
comment_widget.form.attached,Angehängt,de_DE
comment_widget.form.button_default,Button,en_US
comment_widget.form.button_default,Schaltfläche,de_DE
comment_widget.form.edited,edited,en_US
comment_widget.form.edited,bearbeitet,de_DE
comment_widget.form.tags,Tags,en_US
comment_widget.form.tags,Tags,de_DE
comment_widget.form.placeholder.add_comment,Add a comment,en_US
comment_widget.form.placeholder.add_comment,Kommentar hinzufügen,de_DE
comment_widget.tags.all,All,en_US
comment_widget.tags.all,Alles,de_DE
comment_widget.tags.delivery,Delivery,en_US
comment_widget.tags.delivery,Lieferung,de_DE
comment_widget.tags.important,Important,en_US
comment_widget.tags.important,Wichtig,de_DE

Import data:

console data:import glossary

Verification

Make sure that, in the database, the configured data are added to the spy_glossary table.

3) Enable controllers

Route List

PROVIDER	NAMESPACE
CommentWidgetRouteProviderPlugin	SprykerShop\Yves\CommentWidget\Plugin\Router

src/Pyz/Yves/Router/RouterDependencyProvider.php

<?php

namespace Pyz\Yves\Router;

use Spryker\Yves\Router\RouterDependencyProvider as SprykerRouterDependencyProvider;
use SprykerShop\Yves\CommentWidget\Plugin\Router\CommentWidgetRouteProviderPlugin;

class RouterDependencyProvider extends SprykerRouterDependencyProvider
{
    /**
     * @return \Spryker\Yves\RouterExtension\Dependency\Plugin\RouteProviderPluginInterface[]
     */
    protected function getRouteProvider(): array
    {
        return [
            new CommentWidgetRouteProviderPlugin(),
        ];
    }
}

Verification

Verify the CommentWidgetRouteProviderPlugin, log in as a customer and open the link: mysprykershop.com/comment/0adafdf4-cb26-477d-850d-b26412fbd382/tag/add?returnUrl=/cart
Make sure that the error flash message was shown.

4) Set up widgets

PLUGIN	SPECIFICATION	PREREQUISITES	NAMESPACE
CommentThreadWidget	Displays comments.	None	SprykerShop\Yves\CommentWidget\Widget

src/Pyz/Yves/ShopApplication/ShopApplicationDependencyProvider.php

<?php

namespace Pyz\Yves\ShopApplication;

use SprykerShop\Yves\CommentWidget\Widget\CommentThreadWidget;
use SprykerShop\Yves\ShopApplication\ShopApplicationDependencyProvider as SprykerShopApplicationDependencyProvider;

class ShopApplicationDependencyProvider extends SprykerShopApplicationDependencyProvider
{
	/**
	 * @return string[]
	 */
	protected function getGlobalWidgets(): array
	{
		return [
			CommentThreadWidget::class,
		];
	}
}

Run the following command to enable Javascript and CSS changes:

console frontend:yves:build

Verification

Make sure that the following widget was registered:

MODULE	TEST
CommentThreadWidget	You can check availability in twig `{% widget 'CommentThreadWidget' args \[...\] only %}{% endwidget %}`

Was this article helpful?

Tell us what could be better

Name (Optional)

Email (Optional) Invalid email format.

Type your thoughts here

We appreciate the time you took to share the feedback
and will consider it as soon as possible.

Install the Comments feature

Install feature core

Prerequisites

1) Install the required modules

2) Set up configuration

3) Set up database schema and transfer objects

4) Add translations

5) Set up behavior

Set up comment workflow

Install feature frontend

Prerequisites

1) Install the required modules

2) Add translations

3) Enable controllers

Route List

4) Set up widgets

Thank you!