Jump to content

Impossible to add custom CSS and Javascript

Recommended Posts

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 ?

Capture d’écran 2021-02-07 à 16.00.32.png

Capture d’écran 2021-02-07 à 16.00.15.png

Link to comment

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.

Improve your online store with our extensions.
About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Buy me a coffee

Link to comment

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!

image.png

Link to comment

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.

Improve your online store with our extensions.
About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Buy me a coffee

Link to comment

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

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.