Demos Buy Now

News Ticker For Magento 2

News Ticker is an amazing module which allows you to display moving text in your store. Display important news titles, recent updates or information about offers & discounts. The admin can create various news and then add news to the news ticker groups. Customizes the scrolling speed of the news ticker. You can even change the direction of the news ticker. The module has lots of customization options.

Features

  • Color customization for news text and background.
  • Set the news ticker width and scrolling speed.
  • Easily add the widget of the News Ticker.
  • Add more than one widget of News Ticker.
  • Each widget will work according to their group property.
  • The user can pause and resume the scrolling animation.
  • Create, update or remove any number of news text.
  • Add, edit or delete various news ticker groups.
  • Two types of animation effects are available – linear and swing.
  • No need to install the flash plugin to use this module.
  • News ticker direction can be set to either left or right.
  • Enable or disable any news or a group from the back-end.
  • Add group information – group title, group code, and group name
  • Supports multiple languages and translations.

Installation

Customers will get a zip folder and they have to extract the contents of this zip folder on their system. The extracted folder has an src folder, inside the src folder you have the app folder. You need to transfer this app folder into the Magento2 root directory on the server as shown below.

After the successful installation, you have to run these commands in the Magento2 root directory.

First command- php bin/magento setup:upgrade

Second Command – php bin/magento setup:di:compile

Third Command – php bin/magento setup:static-content:deploy

After running the commands, you have to flush the cache from Magento admin panel by navigating through->System->Cache management as shown below.

Multilingual Support

For the multilingual support, the admin will navigate through Store->Configuration->General ->Locale Options and select the locale as German (the language into which admin want to translate his store content).

Language Translation

If the user wants to translate their module from English to German then they need to follow the path app/code/Webkul/NewsTicker/i18n in their unzipped Magento2 News Ticker folder and will get a CSV file with name “en_US.csv”. Now they will rename that CSV as “de_DE.csv” and translate all right side content after the comma in the German language. After editing the CSV, save it and then upload it to the path app/code/Webkul/NewsTicker/i18n where they have installed Magento2 on the server. The module will get translated into the German Language. It supports both RTL and LTR languages.

The user can edit the CSV like the image below.

News Ticker Configuration

After the installation of the module, the admin will see News Ticker menu. Inside News Ticker menu you will find – Manage News and Manage Groups menu options.

News Ticker Manage News

After clicking the Manage News menu option, the admin can view, add, edit or delete the news.

Add News – To create a news for the news ticker, click Add News button.

Actions – Use this option to delete, enable or disable any news from the list.

Filters – To find any specific news from the list, use this option.

Edit – For editing or updating any news, click Edit.

Add News

Now, on clicking on Add News, the news form opens as per screenshot. The admin can enter the news in the text box and can also enable the status of the news added.

News Information:

News – Enter the content of this news.

Text Color – Set the text color for this news.

Sort Order –  Set the order of this news.

Status – Set the status as Enabled to use this news, else select Disabled.

Click Save News button to save your changes.

News Ticker Manage Group

After clicking the Manage Group option, following page will open. From here the admin can view all the news ticker groups. Information such as Group Title, Name, Code, Display Type, Speed, News IDs, and Status are visible.

Add Group – To create a new group, click Add Group button.

Actions – Use this option to Enable, Disable or Delete a group from the list.

Filters – To find any group from the list, use this option.

Edit – For updating an existing group, click Edit.

Add Group

To create a news ticker group, the admin needs to provide the following information. After providing the group information go to Group News and select the news from the list.

Here the admin will enter –

  • Group Name – Enter the name for the group that will contain various similar news
  • Group Title – Set the group’s title
  • Group Code – Set the group code
  • Direction – Set the news ticker animation direction to Left or Right
  • Display Type – Set the animation display type as Swing or Linear
  • Background Color – Set the background color of the news
  • Group Width – Set the width of the news group
  • Group Speed – Set the animation speed of the group
  • Status – Set the status of the news as Enabled or Disabled

Group News

Now the admin needs to select the news for the group. Use the checkbox to select the news items for the group. The selected news will be visible in the news ticker. Click Save Group button to apply your changes made.

Adding News Ticker CMS Block Code

After you have added the group, you can customize the page you want to show the news ticker in. In Admin panel go to Content->pages and the list of pages will appear. From any page, admin can click on edit option to edit the content section for customizing the front page news ticker.

Go to Content section and enter the news ticker block code as appears in the screenshot below.

This is a sample code for a news ticker.

{{block class=”Webkul\NewsTicker\Block\Group\Group” group_code=”group1″ template=”Webkul_NewsTicker::group.phtml”}}

Adding News Ticker Widget

To add a news ticker widget the admin will navigate to Content>Pages. Here, add a new page or use an existing one to add the news ticker.

Now, to add the news ticker click Add New Page button on the top right-hand corner or use an already created page. This brings up the section to add a new page. Here, enter the Page Title and then go to the Content section. Enter the content heading and within the editor click the add widget button.

Clicking the widget brings up the section to add the widget. For the Widget Type select the News Ticker widget from the drop-down option. For the Widget Options select the News Group that you want to display at the front-end. Now, click the Insert Widget button.

After inserting the widget, click the Save button at the top-right hand side and you are done configuring the News Ticker at your required page.

Front-End View of News Ticker

Here is the sample News Ticker appearing on the homepage. The background color has been set to light greenish color. Also, different text colors have been set for the multiple group news items.

Thank you for viewing this blog. If you have any issues, please visit webkul.uvdesk.com

Current Product Version - 2.0.2

Supported Framework Version - 2.0.x, 2.1.x

. . .

Comment

Add Your Comment

Be the first to comment.

css.php
Hire Us!
Brief us about your requirements and we'll get back to you.
Woo! Hooy!
We have just recieved your project brief and our expert will contact you shortly.
Send Again
Close

Index