Comments feature integration

Last updated: June 16, 2021

Edit on GitHub

This document describes how to integrate the Comments into a Spryker project.

Install feature core

Follow the steps below to install the Comments feature core.

Prerequisites

To start feature integration, overview and install the necessary features:

NAME	VERSION	INTEGRATION GUIDE
Spryker Core	202204.0	Spryker Core feature integration
Customer Account Management	202204.0	Customer Account Management feature integration

1) Install the required modules using Composer

Install the required modules:

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

Verification

Make sure that the following modules were 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

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 or remove a comment tag listed in the 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 the 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 that the following changes were 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

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 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

Follow the steps below to install the Comments feature frontend.

Prerequisites

To start feature integration, integrate the required features:

NAME	VERSION	INTEGRATION GUIDE
Spryker Core	202204.0	Spryker Core feature integration
Customer Account Management	202204.0	Customer Account Management feature integration

1) Install the required modules using Composer

Install the required modules:

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

Verification

Make sure that the following modules were 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 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 is 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,
		];
	}
}

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.

Comments feature integration

Install feature core

Prerequisites

1) Install the required modules using Composer

2) Set up configuration

3) Set up database schema and transfer objects

4) Add translations

5) Set up comment workflow

Install feature frontend

Prerequisites

1) Install the required modules using Composer

2) Add translations

3) Enable controllers: Route List

4) Set up widgets

Thank you!