Seglinglin Posted February 7, 2021 Share Posted February 7, 2021 Site URL: https://remitaniel.squarespace.com/ Hello! I am trying to add custom CSS and JavaScript to a page of my website. I am using the template Dario 7.1 (unable to turn off Ajax loading in the Design > Site styles). If I add a <script> tag into an HTML code block of my page, "Script disabled" appear in the Edit mode. On View mode, the script does nothing. If I add the script within a <script> tag into the site footer (Settings > Advanced > Code injection > Footer), the script content seems to not be executed, in Edit and View mode. If I add the script within a <script> tag into the page <head> (Page parameters > Advanced > Code injection), the script content seems to not be executed, in Edit and View mode.. With the CSS, if I add it within an HTML code block or in the the page <head>, it is displayed in the Edit mode, but some of it is ignored in View mode (the font mainly). Do you have any idea what I am doing wrong ? Link to comment
paul2009 Posted February 7, 2021 Share Posted February 7, 2021 CSS should be added to Design > Custom CSS. If adding script, it's best not to test it whilst logged in to Squarespace. To test your code, open another browser window and browse to your site without the /config element of the URL. It's best to do this from a Private or Incognito window so that you can ensure you aren't logged in to Squarespace. Depending on the script, it may need to be added to the header or footer using Code Injection (depending on whether the page content needs to load first) or with a Code Block. About me: I've been a SQSP User for 18 yrs. I was invited to join the Circle when it launched in 2016. I have been a Circle Leader since 2017. I don't work for Squarespace. I value honesty, transparency, diversity and good design ♥. Work: I founded and run SF.DIGITAL, building Squarespace Extensions to supercharge your commerce website. Content: Views and opinions are my own. Links in my posts may refer to SF.DIGITAL products or may be affiliate links. Forum advice is free. You can thank me by clicking one of the feedback emojis below. Coffee is optional. Link to comment
Seglinglin Posted February 7, 2021 Author Share Posted February 7, 2021 I opened my website in a private navigation window in Chrome and Firefox: the scripts (in code blocks or code injection) seem not to be loaded (even a small console.log("hello") does nothing). When I add my custom CSS to the whole website, it messes up with the whole website and I'd rather not do that. I really don't understand why it doesn't work 😢 Thank you very much for your help! Link to comment
Seglinglin Posted February 7, 2021 Author Share Posted February 7, 2021 Also, even with custom CSS in Design, the right font is not displayed. This is also not the case with inline CSS (<div style="...">) Link to comment
paul2009 Posted February 7, 2021 Share Posted February 7, 2021 Is your site still in trial or is it on a paid plan? Sites on paid plans must be on a business or commerce plan to use code. If this isn't the issue, please add your code and then share the public password so that we can take a look. About me: I've been a SQSP User for 18 yrs. I was invited to join the Circle when it launched in 2016. I have been a Circle Leader since 2017. I don't work for Squarespace. I value honesty, transparency, diversity and good design ♥. Work: I founded and run SF.DIGITAL, building Squarespace Extensions to supercharge your commerce website. Content: Views and opinions are my own. Links in my posts may refer to SF.DIGITAL products or may be affiliate links. Forum advice is free. You can thank me by clicking one of the feedback emojis below. Coffee is optional. Link to comment
Seglinglin Posted February 8, 2021 Author Share Posted February 8, 2021 My site is on a business plan and currently still private. I am trying to create a custom form that is linked to a google spreadsheet. I know that you don't have to use custom code to create those kinds of form, but I want the fields to autocomplete and other kinds of special behaviors. CSS inserted into the page <head> : body { margin: 5% auto 0 auto; width: 90%; max-width: 1125px; } h1, h2, h3, h4, h5 { font-family: de-walpergens-pica, serif; } #wyn { font-family: de-walpergens-pica, serif; margin-top: -10px; } HTML in a code block : <div> <form> <input id="autoname" type="text" name="name" class="question" autocomplete="off" required/> <label for="autoname"><span id="wyn">What's your name?</span></label> <input id="submit1" type="submit" value="Submit!" /> <div id="form"></div> </form> </div> JavaScript inserted into the page <head> : <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <script> // Client ID and API key from the Developer Console const SPREADSHEET_ID = "...."; const API_KEY = "....."; const CLIENT_ID = "......"; const CLIENT_KEY = "....."; const SCOPES = "https://www.googleapis.com/auth/spreadsheets.readonly https://www.googleapis.com/auth/spreadsheets"; const DISCOVERY_DOCS = ["https://sheets.googleapis.com/$discovery/rest?version=v4"]; const name = $( "#autoname" ); let data = {}; let pools = {}; let names = []; /** * On load, called to load the auth2 library and API client library. */ function handleClientLoad() { gapi.load('client:auth2', initClient); } /** * Initializes the API client library and sets up sign-in state * listeners. */ function initClient() { gapi.client.init({ apiKey: API_KEY, clientId: CLIENT_ID, discoveryDocs: DISCOVERY_DOCS, scope: SCOPES }).then(() => { // Listen for sign-in state changes. gapi.auth2.getAuthInstance().isSignedIn.listen(updateSigninStatus); // Handle the initial sign-in state. updateSigninStatus(gapi.auth2.getAuthInstance().isSignedIn.get()); }, (error) => { console.log(JSON.stringify(error, null, 2)); }); } /** * Called when the signed in status changes, to update the UI * appropriately. After a sign-in, the API is called. */ function updateSigninStatus(isSignedIn) { if (isSignedIn) { getData(); } } function getData() { gapi.client.sheets.spreadsheets.values.get({ spreadsheetId: SPREADSHEET_ID, range: 'Sheet1', }).then(response => { const range = response.result; if (range.values.length > 0) { for (let i = 1; i < range.values.length; i++) { const row = range.values[i]; // "First name + Last name" let name = `${row[2]} ${row[3]}`; names.push(name); data[name] = row; } // the autocomplete module with the names name.autocomplete({ source: names }); } else { console.log('No data found.'); } }, function(response) { console.log('Error: ' + response.result.error.message); }) } </script> <script async defer src="https://apis.google.com/js/api.js" onload="this.onload=function(){};handleClientLoad()" onreadystatechange="if (this.readyState === 'complete') this.onload()"> </script> One of the problem I identified is that, as the request is posted from the client browser, the absence of third party cookies blocked the request from Squarespace to the google sheets API, creating an error that block all execution of the code. Thanks a lot for your help and patience! 🙏 Link to comment
Recommended Posts
Archived
This topic is now archived and is closed to further replies.