View source for Sample of Creating Extensions with Widget for Editing and Outputting Additional Information about Product

{{#seo:|title=Sample of Creating Extensions with Widget for Editing and Outputting Additional Information about Product}}
{{#seo:|description=This page describes the sample of creating extensions with widget for editing and outputting additional information about product on the osCommerce version 4.x.}}
{{#seo:|keywords=Extension, Widget, Edit, Output, Additional, Information, Product}}
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. ==
[[File:Image 870.png|none|frame]]
[[File:Image 869.png|none|frame]]
[[File:Image 868.png|none|frame]]


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

[[File:Image 867.png|none|frame]]

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