Add custom fields to product page

In this article I will show you a step-by-step example how to create a custom fields to my product page.

To better understand, let's take an example;

Some good examples of custom fields would be:

Book Type

  • About the Book
  • Product Details
  • ISBN
  • Dimensions
  • Language
  • Publication Date

Other Product Types

  • Screenshots
  • Licenses
  • and many more...

You can place anything in the custom fields that you want to tell potential customers about your product. Please follow the below steps to add custom fields to your product(s):

Step 1 — Log into the Joomla administration area
Step 2 — Navigate to “App you are using” in the Tools menu >> Models & Fields

You can see list of all models ( representation of database tables ), to which you can add customized fields.

There are models that are not available if you don't have any other Joobi Apps installed e.g. "downloads" requires jDload.

model-view

Step 3 — Locate Products and simply click on the Fields column "Fields (0)".

You can see a list of all fields you have created for the specified model. It will show empty if you have not created any fields yet.

product-fields-list

Name: the name which will appear either as the title of the form element or the column header.

Column: the name of the column in the database's table.

Type: the type of field you have created.

Order: please note that the ordering might not be exactly the ordering in the view itself as the field can be added in many different views and in many different area in each of those views.

Update All: Define if all the views should be updated when the field is modified.  For instance if you want to change the name of the field throughout all the views. Usually you keep the Update All as Yes. However you could turn it to No if you wish to customized each view.


Step 4 — Click New to create a Field

fields-new

Each Field Type will show different available options you can configure.

field-data

4.1 — Define a name for your field. Optionally you can specify a column name.
4.2 — A description is always advisable as it will inform the user on what the field is used for a and show be completed. The description will appear as the tool-tips on the form.
4.3 — Define the type of fields you want to created.
4.4 — Finish all the necessary information on the left column regarding the default value for the field, the different access level, searchable and required. Those are usually application throughout all the views identically.

Below are the overview of each options in the right column:

View

Product page: This view will show the field in the product page of your store
Product Edit: This view will show the field in the product edition in the backend or vendor area.
Product Listing: This view will show the field in the product listing in the backend.

Type
Show: This type of view will show the information you provided in the field.
Form: This type of view allow you to enter/edit information.
Listing: This Type of view will display your fields in the backend product listing.

Areas
Product page area: This is the area where your fields will display in the product page.
Product Edit area: This is the area where your fields will show when you create/edit a product in the backend or vendor area.

This are the available default areas;
Fields: By default the fields is assigned in the area above the description.
Above Review: This area is positioned just above the review area.

Click this to view the areas in the product page.

Edit Details

Product page edit details: This is the section where you can customize how the field is specifically rendered in that view. You can customize the field to order, change the parent, assign areas, set attributes and many more.

Product Edit edit details: This is the section where you can customize how the field is specifically rendered in that view in your backend or vendor area. You can customize the field to order, change the parent, assign areas, set attributes and many more.

Edit View

Product page edit view: This section let you access all the view elements in the product page.
Product Edit edit view: This section let you access the all the view elements in the product creation in the backend.

You can define Editor Type for Text Area and Translated Area under Form Paraments >> Editor Type, if you want to be able to insert images, videos, html and more..
User editor is the default editor set in your Joomla global configuration.

Step 5 — After you read and understand step 4, now let's enable a view.

In the Available column, click the check/X icon to assign the product to the view.

field-edit-view

Step 6 —To make this tutorial not very overwhelming we will just use the default fields for now. In the Area column, select Fields for both product page and product edit.

Step 7 — Click [ Save ] to save your changes.

Step 8 — Now go to jMarket >> Catalog >> New

Step 9 — In the product edition page, you will see the tab called "Fields".

You can also assign your created fields to show in the "General tab, Delivery Tab..."

Fill in all the required information to create your products, which are indicated by a red asterisk (*).

product-edit-fields

Step 10 — Click [ Save ] to save your changes.

Step 11 — Repeat step 1- 10 to add new other fields like "ISBN, Published Date, Language, etc.."

Step 12 — Now go to your store product page to see the result.

product-page-fields

  • Tuesday, 13 August 2013