Hi,
I am new to WIX, and have been playing around with some of the features for Show More and Show Less toggle using Javascript. The code works perfectly fine when I am on the editor and click on ‘Preview’, but does not seem to work when I choose to view the site using the ‘Site Actions’ > ‘Preview Site’ option.
Here is the java script that I am using:
//Code
let fullText; // variable to hold the full text
let shortText; // variable to hold the short version of the text
let fullTextEfficiency; // variable to hold the full text
let shortTextEfficiency; // variable to hold the short version of the text
$w.onReady( function () {
// how many characters to include in the shortened version
const shortTextLength = 121;
// read the full text and store it in the fullText variable
fullText = $w(“#text20”).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(“#text20”).text = shortText;
const shortTextLengthEff = 173;
fullTextEfficiency = $w(“#text22”).text;
// grab the number of characters defined in shortTextLength and store them in the shortText variable
shortTextEfficiency = fullTextEfficiency.substr(0, shortTextLengthEff) + “…”;
// set the contents of the text element to be the short text
$w(“#text22”).text = shortTextEfficiency;
});
export function button1_click(event) {
if ($w(“#text20”).text === shortText) {
// if currently displaying short text, display the full text
$w(“#text20”).text = fullText;
$w(“#button1”).label = “Show less”;
} else {
// if currently displaying full text, display the short text
$w(“#text20”).text = shortText;
$w(“#button1”).label = “Show more”;
}
}
export function button7_click(event) {
if ($w(“#text22”).text === shortTextEfficiency) {
// if currently displaying short text, display the full text
$w(“#text22”).text = fullTextEfficiency;
$w(“#button7”).label = “Show less”;
} else {
// if currently displaying full text, display the short text
$w(“#text22”).text = shortTextEfficiency;
$w(“#button7”).label = “Show more”;
}
}
//Code
Can you please provide more details beyond “it does not seem to work”. Did you Publish the site? What happens? What does it look like?
Hi @yisrael-wix ,
I have not Published the site yet. I am still working on the sandbox.
When I view the site using the ‘Site Actions’ > ‘Preview Site’ option, I see the entire text visible along with the ‘Show more’ option. On clicking ‘Show More’, nothing actually happens.
In the javascript code, I have set the default length of the string to be shown onReady() and appended the entire text when ‘Show More’ is clicked.
This behaves as expected when I Preview the page while I am still on the Editor.
But once I move out of the editor and Preview Site, the ‘Show More’/‘Show Less’ do not function as expected.
@rasnaramdas If you haven’t published the site, how are you able to view it “out of the editor”?
Please post the editor URL of your site. Only authorized Wix personnel can get access to your site in the editor. Please include the name of the page involved.
@yisrael-wix Not sure if I am using the right terminology…
What I meant by viewing outside the editor is by clicking on the ‘Preview Site’ highlighted here. On this preview, the javascript does not work.
On clicking the ‘Edit Site’ highlighted, there are 3 options on the top right - Save, Preview, Publish. When I view the site by clicking ‘Preview’, the javascript works correctly.
Here is the link to the editor: https://editor.wix.com/html/editor/web/renderer/edit/09b0de87-be3c-4d30-8049-6abe7f7bd8d7?metaSiteId=7dc86944-3687-4db0-b51b-07d545550e4d&editorSessionId=34599993-9130-475e-8584-6b8f3fefb654&referralInfo=dashboard
The page where I have added the javascript is ‘Why Choose Us’.
@rasnaramdas OK - this is really cool. As far as I can tell, you’ve uncovered a bug in the editor. That’s right - I the editor. The Preview Now option that you chose actually opens the editor in an “external preview” mode. That is, you’re in the editor, but you don’t see it.
I don’t think you need to worry about this. Publish the site and you will see that when you run the published site everything works just fine.
I will report this bug to QA, but don’t worry, it doesn’t really affect your work.
Sounds good… Thanks @yisrael-wix ! So I can proceed with the assumption that what I see in the ‘editor Preview’ is what I would see on the Published Site… correct?
@rasnaramdas I tried it out with a clone of your site and it seemed OK so you should be good to go.
Have fun!
Hi - me again…
A ticket has been opened concerning this bug. Thank you for your feedback!
Great! Thanks for the quick responses! Much Appreciated.
