Create global version of content meter to allow for custom text #368
Conversation
jwade1327
commented
Nov 7, 2024
jwade1327
commented
| $ function setTextVariables() { | ||
| // Set title based on views remaining | ||
| let dynamicTitle = "We hope you’ve enjoyed your articles." | ||
| if (views < viewLimit) dynamicTitle = `You have ${viewLimit - views} article views remaining.`; | ||
| if (viewLimit - views === 1) dynamicTitle = `You have 1 article view remaining.`; | ||
|
|
||
| return [ | ||
| dynamicTitle, | ||
| "Create a free account", | ||
| `Create a free <span class="content-meter__call-to-action--site-name">${config.siteName()}</span> account to continue reading. Already have an account? Enter your email to access the article.`, | ||
| "Continue", | ||
| ]; | ||
| } | ||
| $ const [title, collapsedTitle, callToAction, registerText] = setTextVariables(); |
There was a problem hiding this comment.
Rather than moving this whole component down just to change the text, you should be able to pass a function into this that takes parameters of views and viewLimit and do the same thing as setTextVariables is here with whatever the text is supposed to be for each step.
I'm guessing it will look something like this ({ views, viewLimit }) => mySuperCoolTextVariableFunction({ views, viewLimit }) which can then be array de-structured in place of setTextVariables if it exists so:
$ const [title, collapsedTitle, callToAction, registerText] = customFunction({ views, viewLimit }) || setTextVariables();
You may also want to include getAsArray to wrap the customFunction call in just to ensure you actually get an array back to destructure.
Let me know if you encounter any issues in attempting this or need some help figuring this out :)
There was a problem hiding this comment.
@jwade1327 - agreed with @Shinsina ; 95%+ of the time components should be moving down (to monorail or lower), not up...or in this case a lower-level component should become more configurable if it isn't already.
|
Replaced by: #369 |
