In this tutorial we are going to show you how to create a new type of product to give your customer a more unique experience.

For instance, if you have two product types you can show/hide fields or tabs base on the type selected so that each product types are unique and more personalize.

Step 1—Copy the view you want to customize

In this example, we are going to use the product_edit_item view "product edit page" to easily understand the entire process.

  • Navigate to jDesign > Views
  • Locate the view you want to customize ex. "product_edit_item" view
  • Once you locate the view, copy and edit the identifier. Ensure the identifier of the copied view can be easily identified and unique to that view.

edit type 1

  • You must also change the Alias to the name that you can easily recognize.

edit type 2

  • Click [Save] to save your changes

Step 2—Modify existing controllers

You need to locate the controllers associated to the type you are going to create. Please check this article to learn how to create and/or modify existing controllers.

Step 3—Create your own product listing (Optional)

By creating your own custom item listing, when you click "save" button after creating an item you will be redirected to this page. It will list all items that belongs to the same type.

  • From the admin panel, navigate to Views and search for "product listing item"
  • Once you locate the view, copy and edit the identifier. Ensure the identifier of the copied view can be easily identified and inique.
  • You must change the Alias to the name that you can easily recognize.
  • Click [Save] to save your changes

product listing item

  • Then go to jDesign > Controllers
  • Makes sure to copy the controllers where the view is being used like. For example, the "product_edit_item" view is used in the following page;

product.save: when you save a product it will redirect to the product listing

  • Modify the controller to the name that corresponds to your new custom type or anything easy to remember. Do not remove the default controller, simply add -new name to the existing one e.g "product-services"

type custom listing

Step 3—Create a menu that corresponds to the new custom type

Please visit this article to learn how to create your own menu within the Joobi applications.

Result

The new Services type of product is displayed below.

custom type new


Friendly Reminder:

Joobi support does not guarantee any kind of support when you break your installed Joobi application due to the above customizations.