Snippets

[teppo]

A few days ago I stumbled upon this old module, which had been laying in the modules directory of one of my sites since 2017 in a half-finished state. I have no recollection why I left it like that, but figured it might be useful for someone, so here we go:

• https://github.com/teppokoivula/Snippets
• https://processwire.com/modules/snippets/

Snippets is a tool for injecting front-end code snippets (HTML/JS/CSS) into page content. The way it works is that you create a snippet — say, a Google Analytics tag — and then choose...

• which element it should be tied to (there are some pre-populated choices and custom regex option),
• whether it should be placed before/after said element or replace it entirely, and
• which pages the snippet should apply to.

The "apply to" option also has some ready to use options (such as "all pages" and "all non-admin pages") or you can select specific pages... or use a selector. Snippets are regular markup, with the exception that you can use values from current page (behind the scenes the module makes use of wirePopulateStringTags()).

Available hooks:

• Snippets::isApplicable, which receives the snippet object and current Page object as arguments and returns a boolean (true/false).
• Snippets::applySnippet, which receives the snippet object, page content (string), variables (an object derived from WireData), and an array of options for wirePopulateStringTags() as arguments and returns the modified page content string.

That's just about it. It's a pretty simple module, but perhaps someone will find this useful ?

[csaggo.com]

Thank you very much for this another great contribution. We are allready using it in a first live-project.

I have one small bug:
When editing snippets it will not save for me with an exception when i uncheck "enabled". When i save it enabled and then disable it from the list view all is working fine, so there is a workaround. 
the exception i got:

SQLSTATE[23000]: Integrity constraint violation: 1048 Column 'enabled' cannot be null
In /site/modules/Snippets/ProcessSnippets.module.php line 319

[teppo]

Glad to hear that the module is useful ?

Reported SQL issue should be fixed in version 1.0.1.

[wbmnfktr]

Woah... that's a nice find here. 

I planned building exactly that tomorrow (but way more primitive than this) for a project.

[wbmnfktr]

I just want to confirm that this module is awesome! And it does exactly what I needed.

I was able to move quite a few things from my templates into this module and even added this to a live-project today in order to be able to maintain JSON-LD/schema.org snippets much easier.

To be fair... you need most of the data in your pages and have to have quite a good structure to use the selector option in the module settings and such but... it works perfectly fine.

 

A quick outlook to those that want to play with this module:
If you need a special order for your snippets to load, you can tweak and change this with the snippet names.
AAA renders before DDD and don't use numbers as 110 comes before 90.
A name change later on won't help. ;)

So just in case you have different JS/CSS before </head> or something similar.

 

@teppo is there something on the way or planned in regards of PHP code within those snippets (if/else, ...) or to support variables from within _init.php and such?

[teppo]

1 hour ago, wbmnfktr said:

If you need a special order for your snippets to load, you can tweak and change this with the snippet names.
AAA renders before DDD and don't use numbers as 110 comes before 90.
A name change later on won't help. ?

So just in case you have different JS/CSS before </head> or something similar.

Seems like it would be worthwhile to add priorities to snippets ?

1 hour ago, wbmnfktr said:

@teppo is there something on the way or planned in regards of PHP code within those snippets (if/else, ...) or to support variables from within _init.php and such?

I have considered allowing the use of Hanna Code tags in snippets. Would that make sense for your use case?

I'm not against other approaches, but this would be one way to keep Snippets relatively simple, while still allowing for more advanced use cases. Maybe ?

[wbmnfktr]

5 minutes ago, teppo said:

Seems like it would be worthwhile to add priorities to snippets ?

I'd totally love that!

 

5 minutes ago, teppo said:

have considered allowing the use of Hanna Code tags in snippets. Would that make sense for your use case?

HANNA is almost everywhere I go... so in my case that would be a perfect match. And therefore I'd support that thought.

 

6 minutes ago, teppo said:

I'm not against other approaches, but this would be one way to keep Snippets relatively simple, while still allowing for more advanced use cases. Maybe ?

I'd be perfectly fine with those solutions as they are PW-native of some kind - at least in my setups. But sure... I'm open to other and even better options and solutions.

[teppo]

Priority numbers and PHP code support / Hanna Code integration are now logged as enhancements in the GitHub repository. I've got another project on my desk right now, but should have some time to work on these soon(ish) ?

[wbmnfktr]

That sounds perfectly fine to me. Thanks Teppo!

[wbmnfktr]

Hui... that was a show-stopper right here... while I was adding more scripts to the Snippets module on my personal site.

Got this error message:

Darn… Fatal Error: Uncaught Error: Call to a member function has() on string in site/modules/Snippets/Snippets.module.php:85

#0 wire/core/Wire.php (420): Snippets->___isApplicable()
#1 wire/core/WireHooks.php (951): Wire->_callMethod()
#2 wire/core/Wire.php (485): WireHooks->runHooks()
#3 site/modules/Snippets/Snippets.module.php(50): Wire->__call()
#4 wire/core/Wire.php (417): Snippets->hookPageRender()
#5 wire/core/WireHooks.php (1062): Wire->_callMethod()
#6 wire/core/Wire.php (485): WireHooks->runHooks()
#7 wire/modules/Process/ProcessPageView.module (225): Wire->__call()
#8 /wire/modules/Process/Proc (line 85 of site/modules/Snippets/Snippets.module.php)

This error message was shown because: you are logged in as a Superuser. Error has been logged.

While adding a simple JSON-LD to the homepage (ID 1) from within the selection tool.

Fixed it for the moment by deleting the module, its database table and cleaning everything up with the Missing module dialogue within ProcessWire. 

Reinstalled the module afterwards and tried another single page... no luck. Still the same error.

 

[teppo]

Thanks for the report, @wbmnfktr. The page list option was misbehaving, this is fixed now in the latest version of the module (1.0.2).

[wbmnfktr]

It's working perfectly fine now.
Thanks, @teppo!

[wbmnfktr]

It's me again... this time with a weird finding.

There are 2 snippets with schema.org markup and some {{page.variables}} within them.

The first one (schema-restaurant) should be placed before </head> for pages with a specific template.

The second one (schema-sitepage) should be placed at the same spot (before </head>) on all non-admin pages.

Expectation:
schema-restaurant would be rendered on all restaurant pages based on the template selector.
schema-sitepage would be rendered on all pages across that website which are accessible in the frontend for users/guests.

Reality:
schema-restaurant gets rendered on all restaurant pages based on the template selector.
schema-sitepage gets rendered only on restaurant pages based on the template selector from schema-restaurant.

What I tried:
I deleted all snippets, added them again one after another, changed the position of the snippets, tried different snippet names and yet the seconds snippet won't render on all non-admin pages. I have to disable the first one (schema-restaurant) in order to see my schema-sitepage snippet.

 

UPDATE 2021/08/29:
Fixed in latest version.

Thanks, @teppo

[stanoliver]

Hi @teppo! How can I show the "view" of a specific snippet only to user which is logged in?

[teppo]

Hey @stanoliver. Are you trying to render the snippet on the front-end only for logged-in users? If so, I've just added an option for that to the latest version of the module (1.4.0). Users to render the snippet for (all, logged in, or non-logged in) can now be selected via snippet settings.

Let me know if I misunderstood your question, though ?

[stanoliver]

@teppoYes, in my specific case I just ask for a way to render the snippet on the front-end only for logged-in users. Thanks!

I have already installed the latest version (1.4.0) and all works fine except two little things I could not accomplish yet (maybe because I do not understand or maybe not yet possible):

1. I forgot to mention: "render all, logged in, or non-logged in is great" but it would be awesome to have "logged in user with a specific role", too.

2. Problem: I have placed a snippet (just a little button with simple css and simple javascript) and when

logged in as full admin => Button with default admin uikit styles and javascript modal works perfectly fine for me

logged in as user => Button misses css styles and javascript modal not working (just some "dead" text visible)

[teppo]

On 12/16/2021 at 12:32 AM, stanoliver said:

1. I forgot to mention: "render all, logged in, or non-logged in is great" but it would be awesome to have "logged in user with a specific role", too.

Version 1.5.0 of the module adds support for selecting users by selector. This should help here.

Alternatively it's possible to hook into Snippets::isApplicable() and programmatically define if a specific snippet should be applied.

Note that I've also added a warning about page caching: in case (page) content is cached for authenticated users, snippet content may also get cached, which in turn may end up displaying the snippet to even those users it was not intended for. This is not an issue unless you're caching authenticated requests — something that is generally speaking not recommended either way.

On 12/16/2021 at 12:32 AM, stanoliver said:

2. Problem: I have placed a snippet (just a little button with simple css and simple javascript) and when

logged in as full admin => Button with default admin uikit styles and javascript modal works perfectly fine for me

logged in as user => Button misses css styles and javascript modal not working (just some "dead" text visible)

When you say "default admin uikit styles", do you mean that this button is only loaded in the admin? Usually admin styles wouldn't be loaded on the front-end of your site at all. If this occurs in admin, it might be some kind of issue with permissions / loaded modules. Very hard to say without understanding the full context here.

Anyway, I would definitely check for JS errors and missing styles first. From what I can tell at this point, this does not sound like an issue with the Snippets module, but rather something else on your site.

[stanoliver]

Thanks a lot @teppoand a Happy New Year to you and the community!  I will try out version 1.5.0 of the module soon but I am pretty sure it will rock anyways. To my second point about the missing stylings I also started to think it may is another problem not related to your module at all.