Designers Guide to Craft CMS Plugins

Transcript

1. Designers Guide
   To Craft CMS Plugins
   @madebyshape
   @madebymayo
   

   View Slide

2. Shape
   

   View Slide

3. View Slide

4. UI Designer
   Front End Developer
   

   View Slide

5. Pro Googler
   UI Designer
   Front End Developer
   

   View Slide

6. * https://github.com/madebyshape
   Select 2
   Points Commerce Widgets Comments Rating
   Fyre
   Soon
   Tracking
   Private
   Code Redeem
   Private
   

   View Slide

7. Where to start?
   

   View Slide

8. View Slide

9. View Slide

10. View Slide

11. Write a spec
    

    View Slide

12. Controllers
    Used for passing data submitted from
    form’s to your services.
    Allow you to create, update& delete
    database tables,
    Allows you to input / output data from
    your front end templates e.g. {{ var }}
    Allows your plugin to be configurable
    by the user.
    Where all your functions and bulk of
    your plugin will go.
    Containers for the data so it can be
    passed between services etc.
    Settings
    Models
    Records Services
    Variables
    

    View Slide

13. FieldTypes
    Twig Extensions
    Widgets
    

    View Slide

14. View Slide

15. Adds, deletes & updates the
    events and entries to the
    database tables.
    Controllers Models
    Records
    Services
    Variables
    Points
    Allows admins to create & delete
    point events (e.g. Signed Up to
    Newsletter) and entries (e.g.
    Scott Signed Up to Newsletter)
    via a form in the Craft CMS
    Sets the data layout. E.g.
    'Events’ have Event, Event Handle
    & Points. To be either stored
    via a record or manipulated via
    a service.
    All the logic for creating the
    events and entries is done
    inside functions in the
    services. Interacted by a
    Controller or Variable.
    e.g. {{ craft.points.addEntry({ eventHandle: 'SignedUpToNewsletter' }) }}
    

    View Slide

16. View Slide

17. Start to code
    

    View Slide

18. Docs
    https://craftcms.com/docs/plugins/
    Learn Yii
    https://larry.pub/index.php
    Mijingo
    https://mijingo.com/products/screencasts/craft-plugin-development/
    Cocktail Recipes
    https://github.com/amacneil/cocktailrecipes
    Entry Count
    https://github.com/putyourlightson/craft-entry-count
    Craft CMS Slack
    

    View Slide

19. “Backwards Engineer”
    

    View Slide

20. Example Plugin
    Stores data in a custom table, and outputs
    selected rows with a variable.
    https://github.com/madebyshape/example-plugin
    

    View Slide

21. Wish I Knew...
    

    View Slide

22. Start with FieldTypes & Widgets
    If you want to create your rst plugin, these
    two types I found are the easiest way of getting
    started with plugins.
    

    View Slide

23. Naming of core plugin les and functions
    Main les and functions start with the plugin
    name, then what the le type is...
    PluginName_WhatItDoesModel.php
    PluginName_WhatItDoesRecord.php
    PluginName_WhatItDoesController.php
    

    View Slide

24. Debugging
    Similar to console.log() in jQuery, you can
    log messages in to your pluginname.log le in
    /craft/storage/logs/
    * Reduces the hair loss when debugging ‘Array to string conversion’ issues
    PluginNamePlugin::log(’Mmm Donuts’);
    

    View Slide

25. Using Craft CMS Form Fields
    In settings & eldtypes you can extend a form
    eld such as a elementSelect eld by knowing
    it’s name and attributes.
    {% import "_includes/forms" as forms %}
    {{ forms.textField({
    label: 'New Code Group',
    name: 'codeGroup',
    }) }}
    /craft/app/templates/_includes/forms/
    

    View Slide

26. http://craftcms.stackexchange.com/questions/
    6599/activerecord-de neattributes
    Knowing AttributeTypes
    When de ning models & records you need
    to state what ‘type’ it is, e.g. a Integer, Date etc.
    Knowing how to format these helps!
    'eventDate' => array(AttributeType::DateTime)
    

    View Slide

27. Use readily available settings
    Each plugin has it’s own ‘settings’ column
    available in craft_plugins. If only using simple
    settings, avoid creating your own plugin settings
    table, and use this.
    

    View Slide

28. Finishing Touches
    

    View Slide

29. 1. Create a shiny icon for your plugin*
    2. Update the releases.json le
    3. Create documentation
    * Very Important. Should be done before any coding starts tbh :)
    

    View Slide

30. Thanks
    @madebyshape
    @madebymayo
    

    View Slide