Updated {{content}} helper partial template name

no issue
refs e3a0bb535f

Previously, {{content}} helper was updated use default or custom template to show a CTA when trying to use helper without access to content.

While the change was expected to not affect any existing themes as `{{content}}` helper is not supposed to be used on member sites without `access` check, we found quite a few themes use a pattern of using `content.hbs` with `{{content}}` helper inside them as default, which causes infinite loop in how content helper works in certain cases.

Whilst this followed the pattern of the other helpers using a partial with the same name, there are 2 key differences:

- this partial template pattern is being introduced way after the inception of themes with a fairly generic name “content”
- this partial template isn’t used to render the helper all the time - just the CTA part under certain circumstances.

This change updates the template name to `content-cta.hbs` to which makes it less likely to clash, and makes more sense as to what it is.
This commit is contained in:
Rish 2021-02-09 12:16:43 +05:30 committed by Rishabh Garg
parent c3b7612849
commit 1272968848
4 changed files with 77 additions and 1 deletions

View File

@ -4,6 +4,8 @@
// Turns content html into a safestring so that the user doesn't have to // Turns content html into a safestring so that the user doesn't have to
// escape it or tell handlebars to leave it alone with a triple-brace. // escape it or tell handlebars to leave it alone with a triple-brace.
// //
// Shows default or custom CTA when trying to see content without access
//
// Enables tag-safe truncation of content by characters or words. // Enables tag-safe truncation of content by characters or words.
// //
// Dev flag feature: In case of restricted content access for member-only posts, shows CTA box // Dev flag feature: In case of restricted content access for member-only posts, shows CTA box
@ -20,7 +22,7 @@ function restrictedCta(options) {
accentColor: (options.data.site && options.data.site.accent_color) || '#3db0ef' accentColor: (options.data.site && options.data.site.accent_color) || '#3db0ef'
}); });
const data = createFrame(options.data); const data = createFrame(options.data);
return templates.execute('content', this, {data}); return templates.execute('content-cta', this, {data});
} }
module.exports = function content(options = {}) { module.exports = function content(options = {}) {

View File

@ -1,9 +1,21 @@
const should = require('should'); const should = require('should');
const hbs = require('../../../core/frontend/services/themes/engine');
const configUtils = require('../../utils/configUtils');
const path = require('path');
const runHelper = data => helpers.navigation.call({}, data);
// Stuff we are testing // Stuff we are testing
const helpers = require('../../../core/frontend/helpers'); const helpers = require('../../../core/frontend/helpers');
describe('{{content}} helper', function () { describe('{{content}} helper', function () {
before(function (done) {
hbs.express4({partialsDir: [configUtils.config.get('paths').helperTemplates]});
hbs.cachePartials(function () {
done();
});
});
it('renders empty string when null', function () { it('renders empty string when null', function () {
const html = null; const html = null;
const rendered = helpers.content.call({html: html}); const rendered = helpers.content.call({html: html});
@ -65,3 +77,55 @@ describe('{{content}} helper', function () {
rendered.string.should.equal('<p>Hello <strong>Wo</strong></p>'); rendered.string.should.equal('<p>Hello <strong>Wo</strong></p>');
}); });
}); });
describe('{{content}} helper with no access', function () {
let optionsData;
before(function (done) {
hbs.express4({partialsDir: [configUtils.config.get('paths').helperTemplates]});
hbs.cachePartials(function () {
done();
});
});
beforeEach(function () {
optionsData = {
data: {
site: {
accent_color: '#abcdef'
}
}
};
});
it('can render default template', function () {
const html = 'Hello World';
const rendered = helpers.content.call({html: html, access: false}, optionsData);
rendered.string.should.containEql('gh-post-upgrade-cta');
rendered.string.should.containEql('gh-post-upgrade-cta-content');
rendered.string.should.containEql('"background-color: #abcdef"');
should.exist(rendered);
});
});
describe('{{content}} helper with no access', function () {
let optionsData;
before(function (done) {
hbs.express4({partialsDir: [path.resolve(__dirname, './test_tpl')]});
hbs.cachePartials(function () {
done();
});
});
it('can render custom template', function () {
const html = 'Hello World';
const rendered = helpers.content.call({html: html, access: false}, optionsData);
rendered.string.should.not.containEql('gh-post-upgrade-cta');
rendered.string.should.containEql('custom-post-upgrade-cta');
rendered.string.should.containEql('custom-post-upgrade-cta-content');
should.exist(rendered);
});
});

View File

@ -0,0 +1,10 @@
<aside class="custom-post-upgrade-cta">
<div class="custom-post-upgrade-cta-content" style="background-color: {{accentColor}}">
{{#if @member}}
<a class="gh-btn" data-portal="account/plans" style="color:{{accentColor}}">Account upgrade link</a>
{{else}}
<a class="gh-btn" data-portal="signup" style="color:{{accentColor}}">Subscribe now</a>
<p><small>Already have an account? <a data-portal="signin">Sign in</a></small></p>
{{/if}}
</div>
</aside>