Ever wondered how to completely customize a membership feature, including their respective Streaming Widget, Form and more in order to offer a new service for your members. In this tutorial we will show you how you can customize from scratch a membership feature, streaming widget and form to offer members a new option.
SCENARIO: You want to offer your members an automobile membership feature, which includes adding, searching, selling and filtering different types of cars.
So where do we start. In order to customize a Membership feature that also includes modifying it's form, we first have to create our customize form and tell the newly customized feature to use it. After this, we need to add a streaming widget that searches for the specific data of this new customized feature and lastly associate the feature with the membership levels we want to be able to use this feature. So in a nutshell:
Create customized Automobile Form
- Customize a Membership Feature and associate it with the membership levels that will use it.
- Customize a Streaming Widget
With this points in mind, we need to look for a Membership Feature that is similar to what we want to accomplish, saving time at the end. For a feature that will offer our Members an option to add, search, sell Automobiles, the best option would be the Membership Feature Properties. Since we will be customizing the Membership Feature Properties, we would also need to customize the Streaming Properties Widget since it correlates to the Feature Properties.
So let's begin..
Create customized Automobile Form
1. On our backend, we first go to Toolbox -> Form Manager and select the Post - Properties Form which we will use as base:
2. Now click on the Copy Form button
3. When the Copy Form Dialog opens, change the Form Variable Name and Form Nickname options accordingly. Also remember to change all other settings that show the Properties value, like the Tab Name in the Member Profile Settings section or the Default H1 in the Search Results Settings section. After all changes have been made, save.
4. Select the newly created Post - Automobile Form:
5. At the beginning the Post - Automobile will have all the fields from your Post - Properties, but based on this, start adding, modifying or deleting the fields you want until the form has only the needed fields for your Automobile Form. The image below is just an example of some of the options that were modified to adjust it to what I needed. The most important parts of adding or changing the fields is that you set the correct Field Label and Variable name. So in the image you will see, in the 3rd field, the Field Label is Car Model and the Variable Name is car_model.
Now there is only one required variable name that needs to have the group_name value in order to work correctly and this would be the Variable Name for the Label Name you choose as the name of the Automobile post. In this particular case, in the image below, on the 2nd field I have as label Car Name and the Variable Name is group_name. The system uses group_name to set the actual name of that post. So instead of the system showing you something like "Photo Gallery #87" it will actually show the value in this field.
Customize a Membership Feature
1. After you have added all the fields you want to use on the form we can now go to the Membership Feature. So click on Members -> Membership Features and click on the Copy button on the Property Feature.
2. Now click on the Edit button on the newly copied Property feature (Should be the first feature on the list and we will now change the Feature Name to "Automobile", the URL Permalink to "automobile" and the Form to Use to "automobile_listing" (The variable name we set to the Automobile form when we copied it).
3. Now we need to add this new feature to a membership level to test. So go to Members -> Membership Levels and click on the Edit Settings button on a membership level you wish to edit and after the Edit Membership Level window opens, scroll down to the Select Feature Access section and enable the Automobile Feature and then save the Settings (You can also press CTRL+S to save):
4. Now let's test if up to this point everything is working. For the test we will divide this task into 2 parts, one will be checking if the changes are showing correctly, the other one is to add several sample cars and see if they appear correctly. For the first test, we will login as one of the members that are in the Membership Level you added the Automobile feature to. If you see the following then you are doing great:
5. For the 2nd test we will now add several sample automobiles to it. Add between 5 to 10. This will serve us later on to test the Streaming Widget with this new membership feature. So after adding a couple of samples, we should end up with something similar to this on our Member's Account:
Customize a Streaming Widget
Up to this point we should have a complete customized form for our Automobile feature and a membership feature working as Automobile. We now need to customize a streaming widget for it. For this case, since we based our initial automobile feature on the properties feature, we will also use the streaming widget properties for this case. So go to Toolbox -> Widget Manager and search for Streaming - Properties. Customize it and edit it. We will edit the variables that will make sure that the streaming widget gets the information from the Automobile feature. This variables are all found at the top of the code and are:
$featureName - This is the name of the feature we want to associate with the streaming widget. In this case it is the Automobile Feature.
$streamName - This is the name that will show when the streaming widget is rendered on the page.
As you can see from the image above, I edited both, the $featureName and $streamName. I also edited the name of the Widget so it has the correct name and not a duplicate one. The name now is Streaming - Automobile. Now save and we continue to the last step, which is simply pasting the streaming widget name on the home page. For this we go to Contents -> Add/Edit Web Pages, and we Edit the Home page (The one that has the url as /home).
Now we paste the following code inside the home page:
[widget=Streaming - Automobile]
The end result should look something like this:
After saving and going to the Homepage, we should see the following:
With this, we end up with a Basic course on how we can customize a form, a membership feature and a streaming widget for a specific product we would like to offer.