Hey forum! My client has been asking for a lot of customization involving moving things around on the page, or adding new content. I've been able to resolve all their requests using code injection by creating new nodes or duplicating existing ones and attaching them to elements in the DOM. While it's working fine, I'm wondering if it's the best way to accomplish this in Squarespace 7.1.
I can't share the site password on the forum, as my client doesn't want to have their work out in the wild quite yet, even in a closed circle like this, but I can share a representative example, with three edits that all use code injection/custom CSS.
Category title moved from its usual location at the top of the content section to inside the products container
New text added, based on the category title
Custom "all" link, to a category called "all" - the actual "all" link is hidden using CSS
Please excuse the messy JS - I want to make sure it's worth keeping before making it elegant. This is the code for 1 & 2:
const artistDescriptions = {
"judycade": "it’s all about the daydream",
"kevinhearn": "a wild variety of characters from an imagined world",
"hughmarsh": "i like noize, organized or otherwize",
"kurtswinghammer": "This is Kurt's description.",
"martintielli": "ROCK n’ ROLL AND Pen ‘n Ink"
}
const artistTitleText = document.querySelector('.nested-category-title').textContent.trim();
const artistDescriptionKey = artistTitleText.replace(' ', '');
const artistDescriptionText = artistDescriptions[artistDescriptionKey];
console.log(artistDescriptions);
console.log(artistDescriptionText);
const productsContainer = document.querySelector('.products-flex-container');
const artistHeader = document.createElement('div');
artistHeader.classList.add('artistHeader');
const artistTitle = document.createElement('h2');
artistTitle.textContent = artistTitleText;
const artistDescription = document.createElement('p');
artistDescription.textContent = artistDescriptionText;
artistTitle.classList.add('artist-title');
artistHeader.append(artistTitle);
artistHeader.append(artistDescription);
productsContainer.prepend(artistHeader);
My questions:
Is this the best way to pull this off?
Is there a way to do this that makes it possible for the client to edit the content in 2?
Thanks for any advice.