Good morning all. I have a client that is requesting a “read more” button on his site in a few places due to long text. I am not a Corvid coder but decided to try to do it…quite unsuccessfully. Here is what the code looks like:
// For full API documentation, including code examples, visit Velo API Reference - Wix.com
let fullText; // variable to hold the full text
let shortText; // variable to hold the short version of the text
// how many characters to include in the shortened version
const shortTextLength = 40;
// read the full text and store it in the fullText variable
fullText = $w(“#button2”).text;
// grab the number of characters defined in shortTextLength and store them in the shortText variable
shortText = fullText.substr(0, shortTextLength) + “…”;
// set the contents of the text element to be the short text
$w(“#button2”).text = shortText;$w.onReady( function () {
});
It looks just like the example in the tutorial. Any help would be SO appreciated.
Thanks for the reply. I used that support article and the code looks exactly like the example but it still doesn’t work. I have created a support ticket but have not heard back.
Firstly, please add any code in your forum post in a code block.
Plus, note that if you have contacted Wix Support and put in a support ticket through them, then they will just refer you to this Wix Corvid Forum as they don’t deal with any code issues, which is what this forum is for.
Plus, I would suggest that you read the article carefully and fully understand the different sections for the full and short text and the show more button or the show more/show less toggle.
Also, the different code too for if you are using static text that is typed fully into the text box element on your page, or if you are using dynamic text which is coming from a dataset instead.
let fullText; // variable to hold the full text
let shortText; // variable to hold the short version of the text
$w.onReady(function () {
// how many characters to include in the shortened version
const shortTextLength = 40; // you can change this number
// read the full text and store it in the fullText variable
fullText = $w("#myTextElement").text;
// grab the number of characters defined in shortTextLength and store them in the shortText variable
shortText = fullText.substr(0, shortTextLength) + "...";
// set the contents of the text element to be the short text
$w("#myTextElement").text = shortText;
});
export function mybutton_click(event, $w) { //make sure you have added the onClick event in properties
// display the full text
$w("#myTextElement").text = fullText;
// collapse the button
$w("#myButton").collapse();
}
let fullText; // variable to hold the full text
let shortText; // variable to hold the short version of the text
$w.onReady(function () {
// how many characters to include in the shortened version
const shortTextLength = 40; // you can change this number
// read the full text and store it in the fullText variable
fullText = $w("#myTextElement").text;
// grab the number of characters defined in shortTextLength and store them in the shortText variable
shortText = fullText.substr(0, shortTextLength) + "...";
// set the contents of the text element to be the short text
$w("#myTextElement").text = shortText;
});
export function mybutton_click(event, $w) { //make sure you have added the onClick event in properties
// check the contents of the text element
if ($w("#myTextElement").text === shortText) {
// if currently displaying short text, display the full text
$w("#myTextElement").text = fullText;
$w("#myButton").label = "Show less";
} else {
// if currently displaying full text, display the short text
$w("#myTextElement").text = shortText;
$w("#myButton").label = "Show more";
}
}
Code for the “Show More/Show Less” Toggle Button with Dynamic Text:
let fullText; // variable to hold the full text
let shortText; // variable to hold the short version of the text
$w.onReady(function () {
$w("#dynamicDataset").onReady(function () {
// how many characters to include in the shortened version
const shortTextLength = 40;
// set the fullText variable to be the text from the collection
fullText = $w('#dynamicDataset').getCurrentItem().textField;
// if no text to display, collapse the text element and the button
if (!fullText) {
$w('#myTextElement').collapse();
$w('#myButton').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('#myTextElement').text = fullText;
$w('#myButton').collapse();
} else {
// create the shortened version of the text and display it in the text element
shortText = fullText.substr(0, shortTextLength) + "...";
$w('#myTextElement').text = shortText;
}
}
});
});
export function mybutton_click(event, $w) { //making sure that you have added the onClick event in properties
// check the contents of the text element
if ($w("#myTextElement").text === shortText) {
// if currently displaying short text, display the full text
$w("#myTextElement").text = fullText;
$w("#myButton").label = "Show less";
} else {
// if currently displaying full text, display the short text
$w("#myTextElement").text = shortText;
$w("#myButton").label = "Show more";
}
}
Good moring. I have tried using the code provided above on the client’s website and am not getting any errors. However, when I preview the page, ALL of the text disappears. I have set the short text length to 40 characters (it actually needs to be more) I am attaching photos of what I have done but am at a loss as to where to go next.
Compare them to the actual code from the tutorial itself and note what it is that is actually put in the code inside the red keylines on here.
If you have not noticed, you have put the button element id name in the full text and short text parts of the code, whereas it should have actually been the text box element id name that you have used.
As you can see in the code from the tutorial, where the red keylines are is where you need to add the id names for the button you have used, as well as the text box element.
If this is not the case and you are still getting an error, then please paste up in a code block, the full code that you have used and the element id names for your text box and button used on your page.
Hi there,
I need your help I installed the button show more but the button doesn’t follow the size for the text (if that makes sense), please see picture below :
Hey,
am I the only one who has a problem with making a Read More button in the Product page?
The product page seems to be a single element, and I can’t find a way to determine the element name of the text box that I need to work with.
Hello all, though this seems to be an old thread, I solved read more with a different approach and it works well.
Create one textbox for long text and another for short text (this gives you the flexibility of having a “summary” as short text and “description” as long text)
Add two buttons, one “Read More” and the other “Read Less”
Use onMouseIn event for both buttons to make respective textboxes and buttons visible or hidden
An added benefit for me was that on my mobile page, I kept only the “short text” visible, thus helping me with a clean look.
