Results 1 to 4 of 4

Thread: [vB4] The Beginner's Guide to Creating vBulletin Products

    1. [vB4] The Beginner's Guide to Creating vBulletin Products

      [vB4] The Beginner's Guide to Creating vBulletin Products

      By: (Administrator) Tempus is offline 28th May 2015 14:18
      Rating: 
      Back in [vB4] Using Plugins for Template Edits, I showed you how to make a simple template edit on all your styles by using plugins and templates. Here, I will show you how to create your own, fully functioning addon by using one I have uploaded here - [vBMods] Show Facebook Page - Inline Popup, which will guide you through the process from start to finish.

      Note
      I will post all the code from my product as it is now. You will see variables, custom options etc inside the code I will be posting. I will explain where I got it from and when to add it.

      The VERY first thing you must do, is create a vBulletin Test Forum. This will be your one and only place to create/test/fix/update your product. Doing it on a live forum can create all sorts of problems and any products you have installed may break or cause problems. So, create a sub-domain or a new folder on your server. I will call mine - vb4testforum.vbulletin-mods.com. You can call yours whatever you like, as long as it is a seperate forum from your live one. Assuming you now have that set up, we will move on to the preperation work before making a product.


      Debug Mode
      Debug mode is one of the tools in your vBulletin forum that will allow you to see additional options, data etc which normally you wouldn't see. It is really important you do not play around with any settings in your forum that are shown due to debug mode unless you know what you are doing. There are two ways to put your test forum into debug mode.

      Option 1
      Using an FTP client, navigate to your config.php file - forum > includes > config.php and open it with notepad++ (install it if you don't already have it).
      Find this on the first line:
      Code:
      Only registered members can view code.
      Add this below the first line:
      Code:
      Only registered members can view code.
      Option 2
      Download and install this product: KX - Debug Mode. Go to AdminCp > Plugins & Products > Manage Products > Add/Import Products
      This will allow you to put your forum into debug mode using the forum options rather than file edits. Once you install the product, set the options. This is how I have mine set:


      Enable the debug mode in forums? - No
      Make the debug information visible to admins only? (Applies only for forum.) - Yes
      Enable the debug mode in administrator control panel? - Yes
      Enter the IDs of the administrators who can see debug information in administrator control panel.Sepparate by commas (,). - 1
      Enable the debug mode in moderator control panel? - No
      Enter the IDs of the moderators who can see debug information in moderator control panel.Sepparate by commas (,). - Blank
      If you enable this options, only administrators will be able to see template names in HTML comments. - Yes

      Now that you are in debug mode, we can make a start on creating the product.



      Creating the Product
      The first step is to create the product base by giving it a name and a few other options.

      Navigate to AdminCp > Plugins & Products > Manage Products > Add/Import Products
      Under the title "Add New Product", there are a few boxes for you to fill in. Put this into the boxes:

      Product ID - vbm_facebook_popup
      Title - [vBMods] Show Facebook Page - Inline Pop up
      Version - 1.0.0
      Description - Shows Facebook LIKE social plugin to visitors inside forum area after specific time.
      Product URL - http://vbulletin-mods.com/forum/misc.php?do=producthelp&pid=vbm_facebook_popup <--- Not needed unless you upload to a vBulletin site.
      Version Check URL - http://vbulletin-mods.com/forum/misc.php?do=productcheck&pid=vbm_facebook_popup <--- Not needed unless you upload to a vBulletin site.

      Click Save.

      Find your new product, choose Edit from the drop-down menu then click Go.
      Under the title"Add New Product Dependency", click on vBulletin Version. In the two boxes at the bottom, enter this:

      Compatibility Starts With Version
      - 4.x.x
      Incompatible With Version
      - 5.x.x

      Click Save.

      Your product base has now been created and will only allow forums running vB 4 to install the mod.


      Creating the Plugin(s)
      Navigate to AdminCp > Plugins & Products > Plugin Manager

      Group Custom Templates Plugin
      At the bottom of the page, click on Add New Plugin. Enter these values:

      Product - Select [vBMods] Show Facebook Page - Inline Pop Up from the drop-down menu
      Hook Location - template_groups
      Title - vBMods Templates
      Execution Order - 5
      Plugin PHP Code
      Code:
      Only registered members can view code.
      Plugin is Active - Yes

      Click Save.

      Information
      This plugin will group all templates that are created with the prefix "vbm_" and assigned to the [vBMods] Show Facebook Page - Inline Pop Up product. This helps to keep the style manager titdy as well as making it easy to find all the templates associated with the product.



      Rendering the CSS Plugin
      At the bottom of the page, click on Add New Plugin. Enter these values:

      Product - Select [vBMods] Show Facebook Page - Inline Pop Up from the drop-down menu
      Hook Location - parse_templates
      Title - Render The CSS
      Execution Order - 5
      Plugin PHP Code
      Code:
      Only registered members can view code.
      Plugin is Active - Yes

      Click Save.

      Information
      This plugin will first check if the product is active and then if the user viewing the page is a member of a group which will see the popup. Then it stores the CSS as a file (if this option is set in your vBulletin Options) and inserts it at the template hook specified. If your CSS is not stored as a file, then it is rendered from the CSS template we created and inserts it at the template hook specified. Storing CSS as files will help inprove your page load speed.



      Rendering the Javascript Plugin
      At the bottom of the page, click on Add New Plugin. Enter these values:

      Product - Select [vBMods] Show Facebook Page - Inline Pop Up from the drop-down menu
      Hook Location - parse_templates
      Title - Render The Javascript
      Execution Order - 5
      Plugin PHP Code
      Code:
      Only registered members can view code.
      Plugin is Active - Yes

      Click Save.

      Information
      This plugin is similar to the CSS plugin. It will first check if the product is active and then if the user viewing the page is a member of a group which will see the popup. If these two checks are passed, then it will create the "vbm_facebook_popup" template and inserts it at the template hook specified.



      Usergroup Permission Plugin
      At the bottom of the page, click on Add New Plugin. Enter these values:

      Product - Select [vBMods] Show Facebook Page - Inline Pop Up from the drop-down menu
      Hook Location - admin_options_processing
      Title - Show to which Usergroups
      Execution Order - 5
      Plugin PHP Code
      Code:
      Only registered members can view code.
      Plugin is Active - Yes

      Click Save.

      Information
      This plugin will save your ursergroup permission(s) from the product options when you select which usergroups will see this popup.



      Caching the Templates Plugin
      At the bottom of the page, click on Add New Plugin. Enter these values:

      Product - Select [vBMods] Show Facebook Page - Inline Pop Up from the drop-down menu
      Hook Location - cache_templates
      Title - Cache the Template(s)
      Execution Order - 5
      Plugin PHP Code
      Code:
      Only registered members can view code.
      Plugin is Active - Yes

      Click Save.

      Information
      This plugin will cache the specified template to enable your forum to load it quicker.



      Creating the Templates
      Navigate to AdminCp > Style & Templates > Style Manager
      You will now see a hidden style called "MASTER STYLE" at the top of the list. This is the style you will be using to add templates or make edits.

      Facebook Popup Javascript Template
      Select "Add New Template" from the drop-down menu. Enter these values:

      Product - Select [vBMods] Show Facebook Page - Inline Pop Up from the drop-down menu
      Style - Select MASTER STYLE from the drop-down menu
      Title - vbm_facebook_popup
      vbm_facebook_popup -
      Code:
      Only registered members can view code.
      Click Save.

      Information
      This is the template which will be used to render the javascript on your forum and show the popup.



      Facebook Popup CSS Template
      Select "Add New Template" from the drop-down menu. Enter these values:

      Product - Select [vBMods] Show Facebook Page - Inline Pop Up from the drop-down menu
      Style - Select MASTER STYLE from the drop-down menu
      Title - vbm_facebook_popup.css
      vbm_facebook_popup -
      Code:
      Only registered members can view code.
      Click Save.

      Information
      This is the template where the CSS is stored then rendered onto your forum.



      Creating the Settings Group
      Navigate to AdminCp > Settings > Options
      Click on Add New Setting Group on the left hand side of the page. This will create a settings group for your product. Enter these values:

      Varname - vbm_facebook_popup_settings
      Title
      - [vBMods] Show Facebook Page - Inline Pop Up
      Product
      - Select [vBMods] Show Facebook Page - Inline Pop Up from the drop-down menu
      Display Order
      - Leave it as it is, normally defaulted to 65535
      vBulletin Default
      - Yes
      Click Save.

      Information
      This is the settings group for your product where all your options will be stored that relate to your product.



      Creating the Settings

      Product is Active/Enabled Setting
      To the right of the title "[vBMods] Show Facebook Page - Inline Pop Up", click on [Add Setting]. Enter these values:

      Varname - vbm_facebook_popup_active
      Setting Group
      - Select [vBMods] Show Facebook Page - Inline Pop Up from the drop-down menu
      Product
      - Select [vBMods] Show Facebook Page - Inline Pop Up from the drop-down menu
      Title
      - Product is Active?
      Description
      - Set to "Yes" to enable the mod.
      Option Code
      - yesno
      Default
      - 1
      Data Validation Type
      - Free
      Validation PHP Code
      - Leave it empty
      Display Order
      - 10
      Blacklist
      - No
      vBulletin Default
      - Yes

      Click Save.

      Information
      This setting will allow you to turn your product on and off.



      Facebook Page ID Setting
      To the right of the title "[vBMods] Show Facebook Page - Inline Pop Up", click on [Add Setting]. Enter these values:

      Varname - vbm_facebook_popup_fbid
      Setting Group
      - Select [vBMods] Show Facebook Page - Inline Pop Up from the drop-down menu
      Product
      - Select [vBMods] Show Facebook Page - Inline Pop Up from the drop-down menu
      Title
      - Facebook ID
      Description
      - Enter your facebook page ID
      Option Code
      - Leave it empty
      Default
      - Leave it empty
      Data Validation Type
      - Free
      Validation PHP Code
      - Leave it empty
      Display Order
      - 20
      Blacklist
      - No
      vBulletin Default
      - Yes

      Click Save.

      Information
      This setting is where you will enter the ID of your Facebook Page.



      Facebook Popup Delay Time Setting
      To the right of the title "[vBMods] Show Facebook Page - Inline Pop Up", click on [Add Setting]. Enter these values:

      Varname - vbm_facebook_popup_delay
      Setting Group
      - Select [vBMods] Show Facebook Page - Inline Pop Up from the drop-down menu
      Product
      - Select [vBMods] Show Facebook Page - Inline Pop Up from the drop-down menu
      Title
      - Popup Delay Time
      Description
      - Enter a delay time before the popup is shown. <br>1000 = 1 second<br><b><u>Example:</u></b> 15000 = 15 seconds
      Option Code
      - Leave it empty
      Default
      - 1500
      Data Validation Type
      - Free
      Validation PHP Code
      - Leave it empty
      Display Order
      - 30
      Blacklist
      - No
      vBulletin Default
      - Yes

      Click Save.

      Information
      This setting allows you to define a set time that will pass when a page is loaded before the popup will be shown.



      Facebook Popup Every X Days Setting
      To the right of the title "[vBMods] Show Facebook Page - Inline Pop Up", click on [Add Setting]. Enter these values:

      Varname - vbm_facebook_popup_times
      Setting Group
      - Select [vBMods] Show Facebook Page - Inline Pop Up from the drop-down menu
      Product
      - Select [vBMods] Show Facebook Page - Inline Pop Up from the drop-down menu
      Title
      - Show Popup Every "X" Days
      Description
      - Choose how often the popup should show, in days.<br><b><u>Example:</u></b> 10 = show popup every 10 days.<br>Set to "0" to show on every page.
      Option Code
      - Leave it empty
      Default
      - 15
      Data Validation Type
      - Free
      Validation PHP Code
      - Leave it empty
      Display Order
      - 40
      Blacklist
      - No
      vBulletin Default
      - Yes

      Click Save.

      Information
      This setting allows you to set how often the popup will show to your members and/or visitors.


      Usergroups Who Will See the Popup Setting
      To the right of the title "[vBMods] Show Facebook Page - Inline Pop Up", click on [Add Setting]. Enter these values:

      Varname - vbm_facebook_popup_groups
      Setting Group
      - Select [vBMods] Show Facebook Page - Inline Pop Up from the drop-down menu
      Product
      - Select [vBMods] Show Facebook Page - Inline Pop Up from the drop-down menu
      Title
      - Usergroups Who Will See The Popup
      Description
      - Select which usergroups will see the popup.
      Option Code
      -
      Code:
      Only registered members can view code.

      Default
      - 1,3,4
      Data Validation Type
      - Free
      Validation PHP Code
      - Leave it empty
      Display Order
      - 50
      Blacklist
      - No
      vBulletin Default
      - Yes

      Click Save.

      Information
      This setting allows you to choose which usergroups will see the popup. Any group that is selected will see the popup every X days.




      Looking at the Product
      As I said at the start of this article, I have pasted the code from my own plugins/templates etc. Many of you will be wondering how I knew what variables to call, what code to add to the plugins, so here is a break down of what I do.


      1. Paste the code you want to add to your forum into the template where you want it to appear. I pasted all of the code in the above templates straight into the FORUMHOME template to check if it was functioning as it should.
      2. Once you know the code works, create your CSS template, paste the CSS code into it and save it. Then create the "Render the CSS" and "Cache the Template(s)" plugins and refresh your forum home page. If it works, move on to the next step.
      3. Create your javascript template, paste the javascript code into it and save it. Then create the "Render the JavaScript" plugin and refresh your forum home page. If it works, move on to the next step.
      4. Create your product.
      5. Assign the plugins to your product.
      6. Assign the templates to the product.
      7. Create your options.
      8. Add the options to your plugins.
      9. Test if all your options work as they should.
      10. Export your product and share it with others.


      Other people may have a different way of making products but the way above is how I do it to ensure it works and I find it easier to find bugs this way.



      Understanding the Variables & Options
      I will now explain how the options are set and the code you added to your plugins & templates.

      Render the CSS Plugin
      If we look at the code below, we can see some code in red and some in green.
      Code:
      Only registered members can view code.
      The red code is what we add to get our options and templates to work. The green code is what we found in the original vBulletin code (why makes things difficult and write new code when you can use existing code??) which we know works.

      The below code does 2 things. It first checks to see if the product is active (you created this option remember?) then checks if the user is in one of the usergroups who will see the popup (again, you created this option).
      Code:
      Only registered members can view code.
      This black text is the code you add to make your plugin pull your option data from the forum. The red text is the varname (unique identifier) you gave to your options.


      Render the Javascript Plugin
      Similar to the CSS Plugin, the JavaScript plugin has the same checks to run. The code in red is from the varnames you set when you created your options. The code in orange is the name of your template where you put the javascript code.
      Code:
      Only registered members can view code.
      The last 3 lines of code render the template and insert it at the headinclude_javascript hook.


      Usergroup Permission Plugin
      The code in red, is again from the varname you set when you created your options.
      Code:
      Only registered members can view code.
      This plugin saves which usergroups will see the popup when you select in them your options. The code in red, is from the varname you set when you created your options.


      Facebook JavaScript Popup Template
      Looking at the below code, you can see we use some vb:raw variables. These are used to render options, phrases etc into templates.
      Code:
      Only registered members can view code.
      The 3 red pieces of code are rendering the values of your options into the template.

      {vb:raw vboptions.vbm_facebook_popup_fbid} - Renders the ID of your facebook page.
      {vb:raw vboptions.vbm_facebook_popup_times} - Renders the amount of days between the popup showing.
      {vb:raw vboptions.vbm_facebook_popup_delay} - Renders the delay after page load before the popup shows.
  • #2
    Administrator Tempus's Avatar
    Click to Expand
    Join Date
    Oct 2011
    Posts
    5,285
    vB Version
    4.2.x
    Likes
    1,800
    Liked 1,807 Times in 1,018 Posts
    Gender
    Male
    Reserved
    The Small Print
    Our staff assume members have read the rules and will not accept ignorance as an excuse for not following the them.
    The breaking of any rule WILL lead to you being warned or even banned without notice so don't risk it!

    Developer

  • #3
    Member
    Click to Expand
    Join Date
    Nov 2012
    Posts
    55
    vB Version
    4.2.x
    Likes
    14
    Liked 22 Times in 10 Posts
    Gender
    Male
    nice tutorials but i think its not for noobs because 1 hack and so much coding involve

  • #4
    Banned
    Click to Expand
    Join Date
    Aug 2016
    Posts
    152
    vB Version
    4.2.x
    Likes
    17
    Liked 3 Times in 3 Posts
    Gender
    Male
    very good Tempus

  • Similar Threads

    1. creating a website
      By popeye11100 in forum Hosting Discussions
      Replies: 4
      Last Post: 7th Apr 2017, 11:54
    2. How to Install iVue2 TV Guide Kodi
      By System Bot in forum Kodi
      Replies: 0
      Last Post: 26th Sep 2016, 21:41
    3. Replies: 0
      Last Post: 19th Aug 2015, 23:50
    4. Rendering Templates and Registering Variables - A Short Guide
      By Tempus in forum vBulletin Article Depository
      Replies: 0
      Last Post: 29th Jan 2012, 12:52

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •