Hello - can anyone advise on the advice I was given (https://support.wix.com/en/article/wix-code-tutorial-creating-a-show-more-link) regarding my post here for truncating text?
To attempt this function, I'm using the following code:
#####
$w("#dataset1").onReady(function () { // how many characters to include in the shortened version const shortTextLength = 10; // set the fullText variable to be the text from the collection fullText = $w('#dataset1').getCurrentItem().fullAnswer; // if no text to display, collapse the text element and the button if (!fullText) { $w('#text1').collapse(); $w('#button4').collapse(); } else { // if the text has fewer or the same number of characters as shortTextLength characters, display it as is and collapse the "Show More" button if (fullText.length <= shortTextLength) { $w('#text1').text = fullText; $w('#button4').collapse(); } else { // create the shortened version of the text and display it in the text element shortText = fullText.substr(0, shortTextLength) + "..."; $w('#text1').text = shortText; } } });
############
The result is attached. Any advice? Do I have an error in coding somewhere?
shortTextLength is a numeric constant. I created another variable called shortText and then assigned it to the text element. Actually, that variable does not have to be created. This line would work too:
$w('#text1').text = fullText.substr(0, shortTextLength) + "...";
Best of luck with this. I'm going to be off line for up to 24 hours.
$w.onReady(function () { $w("#dataset1").onReady(function () { // how many characters to include in the shortened version const shortTextLength = 10; // set the fullText variable to be the text from the collection let fullText = $w('#dataset1').getCurrentItem().fullAnswer; // if no text to display, collapse the text element and the button if (!fullText) { $w('#text1').collapse(); $w('#button4').collapse(); } else { // if the text has fewer or the same number of characters as shortTextLength characters, display it as is and collapse the "Show More" button if (fullText.length <= shortTextLength) { $w('#text1').text = fullText; $w('#button4').collapse(); } else { // create the shortened version of the text and display it in the text element let shortText = fullText.substr(0, shortTextLength) + "..."; $w('#text1').text = shortText; } } }); });
Use let or var when you have a variable that is intended for information that is expected to change. Use const (as in constant) to store information that will never change. There is no need to keep declaring them, in fact, the Wix Editor should be warning you that the variable has already been declared.
Below is an example of this point:
// Declare variable
let shortTextLength = 1;
// other code executes
// re-assign the value of the variable
shortTextLength = 5;
Looks like you declared or initiated the variable shortTextLength appropriately but then you're calling it "shortText" in the line $w('#text1').text = shortText;
For the other one, you need to use some declarative statement like "let". By using "let", the variable is limited in scope to this onReady function.
let fullText = $w('#dataset1').getCurrentItem().fullAnswer;
Awesome thank you! I have added the opening and closing wrapper lines. It now tells me that 'fullText' and 'shorText' are not defined.
Am I defining them incorrectly with:
fullText = $w('#dataset1').getCurrentItem().fullAnswer;
and
const shortTextLength = 10;
For the second issue, it looks like you need to wrap the page onReady() around this. This is how it would look:
$w.onReady(function () { $w("#dataset1").onReady(function () { // how many characters to include in the shortened version const shortTextLength = 10; // set the fullText variable to be the text from the collection fullText = $w('#dataset1').getCurrentItem().fullAnswer; // if no text to display, collapse the text element and the button if (!fullText) { $w('#text1').collapse(); $w('#button4').collapse(); } else { // if the text has fewer or the same number of characters as shortTextLength characters, display it as is and collapse the "Show More" button if (fullText.length <= shortTextLength) { $w('#text1').text = fullText; $w('#button4').collapse(); } else { // create the shortened version of the text and display it in the text element shortText = fullText.substr(0, shortTextLength) + "..."; $w('#text1').text = shortText; } } }); });