Sample of Creating Extensions with Widget for Editing and Outputting Additional Information about Product: Difference between revisions

Revision as of 15:19, 26 October 2022

First of all, refer to the article describing the process of creating an extension and its main parts - Creating Extension from Scratch.

In this article we will review on the sample the process of creating the extension with the widget for editing and outputting the additional information about the product.

Keep in mind that for keeping and displaying the additional information about products, you can use the functionality Properties, that allows to keep, edit and display the structural information about the product.

1. Creating the extension template.

Click on Generate button and download the archived extension template. Then unpack this zip file in the catalogue /lib/common/extensions.

2. Changing the product table.

We need to add the additional column to the product table while installing the extension and delete this column if the extension is uninstalled with the chosen option Drop extension data tables.

Open the file Setup.php in the editor and do the corresponding changes.

3. Creating the line massive, that will be used for the possible translation of the additional field title and name into other languages.

4. Displaying and saving the additional field while editing the product in the backend.

While creating the template we indicated only one hook, that will be used for displaying the information. Add the hook 'categories/productedit-beforesave' for its saving:

Here we can use the simplified hook description where it is expected that the file name matches the hook name:

Edit the template for displaying the field (categories.productedit.details-right-column.tpl):

Edit the template for saving the field (categories.productedit-beforesave.php):

5. Editing the widget for displaying the information on the frontend.

Edit the widget template (add-product-info.tpl):

Edit the main widget file (AddProductInfo.php):

Check the widget description function in the file Setup.php

6. Installation and checking.

Install the new extension in the backend (Modules->Extensions menu).

Activate the extension on the next page.

Check the new product field editing.

Add the widget to the theme for displaying on the frontend.

Open the active theme in Design and CMS->Themes. Choose the product page, click on Widget button and find the widget with the name that was indicated in the function getWidgets:

And drag it to the product page.

Save the theme and check the additional field display on the frontend.

P.S. You can download the extention by clicking on this link

@@ Line 5: / Line 5: @@
 Keep in mind that for keeping and displaying the additional information about products, you can use the functionality '''Properties''', that allows to keep, edit and display the structural information about the product.
-== Creating the extension template. ==
+== 1. Creating the extension template. ==
 [[File:Image 870.png|none|frame]]
 [[File:Image 869.png|none|frame]]
@@ Line 17: / Line 17: @@
 == 2. Changing the product table. ==
 We need to '''add''' the additional column to the product table while '''installing''' the extension and '''delete''' this column if the extension is '''uninstalled''' with the chosen option '''Drop extension data tables.'''
+'''Open''' the file '''Setup.php''' in the editor and '''do''' the corresponding changes.
+[[File:Image 871.png|none|frame]]
+== 3. Creating the line massive, that will be used for the possible translation of the additional field title and name into other languages. ==
+[[File:Image 879.png|none|frame]]
+== 4. Displaying and saving the additional field while editing the product in the backend. ==
+While creating the template we indicated only '''one''' hook, that will be used for displaying the information. '''Add''' the hook '''<nowiki/>'categories/productedit-beforesave'''' for its saving:
+[[File:Image 872.png|none|frame]]
+Here we can use the simplified hook '''description''' where it is expected that the '''file''' name '''matches''' the '''hook''' name:
+[[File:Image 873.png|none|frame]]
+'''Edit''' the template for displaying the field '''(categories.productedit.details-right-column.tpl)''':
+[[File:Image 874.png|none|frame]]
+'''Edit''' the template for saving the field '''(categories.productedit-beforesave.php)''':
+[[File:Image 875.png|none|frame]]
+== 5. Editing the widget for displaying the information on the frontend.  ==
+'''Edit''' the widget template '''(add-product-info.tpl)''':
+[[File:Image 876.png|none|frame]]
+'''Edit''' the main widget file '''(AddProductInfo.php)''':
+[[File:Image 877.png|none|frame]]
+'''Check''' the widget description function in the file '''Setup.php'''
+[[File:Image 878.png|none|frame]]
+== 6. Installation and checking. ==
+'''Install''' the new extension in the backend '''(Modules->Extensions menu)'''.
+[[File:Image 880.png|none|frame]]
+'''Activate''' the extension on the next page.
+[[File:Image 881.png|none|frame]]
+'''Check''' the new product field editing.
+[[File:Image 882.png|none|frame]]
+'''Add''' the widget to the theme for displaying on the frontend.
+Open the active theme in '''Design and CMS->Themes.''' Choose the '''product''' page, click on '''Widget''' button and find the widget with the '''name''' that was indicated in the function '''getWidgets:'''
+[[File:Image 883.png|none|frame]]
+And '''drag''' it to the product page.
+[[File:Image 884.png|none|frame]]
+'''Save''' the theme and '''check''' the additional field display on the frontend.
+[[File:Image 885.png|none|frame]]
+'''P.S.''' You can '''download''' the extention by clicking on this [https://drive.google.com/file/d/1i_U9Wojaauoyy-pFttUXZHLmmOfnlMNc/view?usp=sharing link]