Tom's Web Consulting Squarespace Library

This is a monorepo of code for adding various effects to Squarespace v7.1 and v7.0 sites.

Make a Donation

Please consider making a donation.

Your donations help me to continue to help you realize your website goals! The donation amounts are suggested amounts. Any donation amount is greatly appreciated!

Did my code help you build a site for your client and make you some dough? How about a slice of the bread for Tom?

Need Help Installing or Customizing the Code?

I'm available for consulting.

Layout Overview

twcsl contains over 85 effects. Each effect has it's own version number, code, read me, and etc. Each effect is independant. In other words all the effects are not necessarily designed to all work together.

• v7.0 and v7.1 effects

• v7.0 only effects

  • effects for all v7.0 templates

  • template specific effects

• v7.1 only effects

• twcsl

Effects

• Add Button After Add to Cart Button of Product Detail Page

• Add Category Attribute to a Store Category Page

• Add Continue Shopping Message When Cart Has Items

• Add Form Block Section Labels

• Add Images to Product Detail Page Based on Tags Above Additional Info

• Add One Left Class to Product Detail Page

• Add Store Category Accordion

• Add Text Based on Tags After Matched Text to Product Description

• Cart Prices Change

• Cart Prices Sqs-Money-Native Add

• Change Add to Cart Adding Added Button Text

• Change Cart Continue Shopping Text

• Change Cart Empty Message

• Change Cart Title

• Change Form Block Post-Submit Redirect Based on a Radio Form Field Selected Option

• Change Form Block Post-Submit Redirect Based on a Select Form Field Selected Option

• Change Search Page Input Placeholder Text

• Change Unable to Add Item to Cart Alert for Only N Available

• Change Unable to Add Item to Cart Alert for Out of Stock Variants

• Change Unable to Add Item to Cart Alert for Unselected Variants

• Fix Image Block SS Encoded Query Component Links

• Hide Product Detail Add to Cart Tagged "hide atc"

• Move Product Detail Additional Info First N Blocks to End of Product Details

• Redirect to Url After Add to Cart Button Has Been Clicked and SS Indicates Item Has Been Added to Cart

• Replace Form Submit Button Submitting Text

• Responsive Image Map Template

• Set Store Product Detail Named Form Labeled Text Field Character Max Length

• Store Price Change

• Store Product Detail Variant Order Reverse

• v7.0

  • Add Content of a Page to Products Page

  • Add Store Category Page Description

  • Bedford Template Family

    • Blog Post Tag Url Change

  • Brine Template Family

    • Change Blog Listing Item Links to Source URL

    • Hide Product Detail Add to Cart, Price, and Quantity

    • Move or Copy Store Intro After Products List

  • Montauk Template Family

    • Change Unable to Add Item to Cart Alert

• v7.1

  • Add Buttons to Header

  • Add Categories Attribute to Event Detail Page

  • Add Image Tags Between Event List Items

  • Add Mindbody Login Register Link to Navigation

  • Add Store Category Page Description

  • Add Store Description

  • Auto Change Product Grid Image Opacity on Touch Screen Device

  • Auto Click User Items List Arrow Right

  • Change Blog Listing Item Image URL to Source URL

  • Change CTA Button Text and Url Based on Language

  • Change Default Image Aspect Ratios for Store Page

  • Change Image Card, Image to Text Width Ratios

  • Change Site Title Space Runs to Break Element

  • Change Store Product Detail Related Products Grid Column Number for Desktop

  • Change Store Product Grid Column Number

  • Change Variant Unavailable Alert for Product Blocks

  • Header Social Icon Discord Generic Icon to Discord Change

  • Header Social Icon URLs Change Based on Language

  • Hide Blog Post Tags

  • Hide Page Header and Footer

  • Hide Product Detail Price, Quantity, Add to Cart

  • Hide Store Product Detail Recommended Product Last

  • Make Navigation Folders Clickable

  • Mobile Menu Left Flyout

  • Move Add To Cart Button to Right of Quantity

  • Move Blog Listing Item Title Above Meta

  • Move Blog Post First Image to Top Area

  • Move Header CTA Element to Left Side

  • Move Image Block Card Button Under Image

  • Move Page Last Footer Section to First

  • Page Section Background Waves Overlay

  • Page Section Gallery Hover on Everything But

  • Page Section Video Scrubbing Animation

  • Page Sections Slide Toggle

  • Prepend Breadcrumb to Store Page Breadcrumbs

  • Remove Product Detail Quantity Field Outer Outline When Focused

  • Replace Blog "Header" Text with Category and or Tag

  • Replace Product Detail Add to Cart Button With Button that Redirects to a Url

  • Replace Variant Menu "select" Text

  • Reposition First Page Section Background so Header Does Not Hide It

  • Scroll to Top of Store Category Product Grid

  • Set Store Product Details to Display Flex

  • Site Wide Rounded Image Corners

  • Store Category Section Reveal

  • Store Product Detail Price Add Sqs-Money-Native for Variants

  • Store Product Detail Price Force Mutation on Quantity Change

  • Store Product Detail Price Total

  • Store Product Grid Images Hide

  • Use Nth Product Gallery Image as Background for Page

---

The rest of this document covers twcsl.js.

twcsl.js

twcsl.js is a Javascript library of common properties and methods useful for building effects in Squarespace sites.

Version 0.1d15

Quick Install

Add the following to Settings > Advanced > Code Injection > HEADER.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://d1j8mu9lowy9zf.cloudfront.net/twcsl/0.1d15/twcsl.js"></script>

Example

You want to build an effect that does something when you are on a store category product grid page. You can use twcsl to test if you are on such a page with the following.

if ( twcsl.storePage.hasCategory ) console.log ( 'has category' );

Methods

• getFirstPageSection

  • getFirstPageSection ( )

    • Returns jQuery object.

• getFormFieldLabel

  • getFormFieldLabel ( field )

    • Field is a jQuery object.
    • Returns form field label as entered in SS form editor interface.

• getFormNth

  • getFormNth ( [nth form on page] )

    • Default is the first form on the page.
    • Returns jQuery object or undefined for no form.

• getUrlParser

  • getUrlParser ( url )

    • Returns an anchor element.

• scrollEffect

  • scrollEffect ( callback [, easingFunction, invertScale ] )

    • Calculates the scroll postion as a ratio that is passed to your callback.

      easingFunction ( string ), default is linear

      invertScale ( boolean ), default is false

Properties

• blogPage ( object )

  • categories ( array, for detail page only )

  • category ( string )

  • categoryUrlSlug ( string )

  • categoryUrlSlugs ( array, for detail page only )

  • hasCategory ( boolean )

  • hasTag ( boolean )

  • isBlogPage ( boolean )

  • isList ( boolean )

  • isPost ( boolean )

  • tag ( string )

  • tags ( array, for detail page only )

  • tagUrlSlug ( string )

  • tagUrlSlugs ( array, for detail page only )

  • urlSlug ( string )

• eventsPage ( object )

  • categories ( array, for detail page only )

  • category ( string )

  • categoryUrlSlug ( string )

  • categoryUrlSlugs ( array, for detail page only )

  • hasCategory ( boolean )

  • hasTag ( boolean )

  • isEvent ( boolean )

  • isEventPage ( boolean )

  • tag ( string )

  • tags ( array, for detail page only )

  • tagUrlSlug ( string )

  • tagUrlSlugs ( array, for detail page only )

  • urlSlug ( string )

• is70 ( boolean )

• is71 ( boolean )

• isCart ( boolean )

• isSearch ( boolean )

• navigator ( object )

  • hasTouchScreen ( boolean )

• ssVersion ( string )

• storePage ( object )

  • category ( string )

  • categoryUrlSlug ( string )

  • classTags ( array, for detail page only )

  • hasCategory ( boolean )

  • hasTag ( boolean )

  • isDetail ( boolean )

  • isStorePage ( boolean )

  • tag ( string )

  • tagUrlSlug ( string )

  • urlSlug ( string )

• version ( string, twcsl version )

Changes

• 2021-09-03

  • fixed bad blogPage isList check
  • fixes for blogPage for various v7.0 templates
  • bumped version to 0.1d15

• 2021-08-31

  • added blogPage.isList
  • added effects outline
  • changed eventPage.isDetail to eventsPage.isEvent
  • changed eventPage to eventsPage
  • checked Five and Montauk family template support
  • bumped version to 0.1d14

• 2021-08-06

  • changed blogPage.isDetail to isPost
  • bumped version to 0.1d13

• 2021-07-28

  • fix for getFormFieldLabel not being exposed
  • bumped version to 0.1d12

• 2021-07-25

  • fix for firstPageSection, changed to method getFirstPageSection
  • bumped version to 0.1d11

• 2021-07-25

  • fix for getUrlParser not defined
  • bumped version to 0.1d10

• 2021-07-24

  • added getUrlParser method
  • added getFormFieldLabel method
  • checked Avenue template support
  • consolidated nearly identical code into _getClassEventlistFilterText function
  • bumped version to 0.1d9

• 2021-06-27

  • added firstPageSection
  • added storePage.classCategories
  • added blogPage
  • bumped version to 0.1d8

• 2021-06-07

  • fix for _urlSlug undefined error on non-collection pages
  • added isCart and isSearch properties
  • bumped version to 0.1d7

• 2021-06-04

  • reworked what was being labeled as category and tag, in many cases what was being return was not what the user enters in SS but classes or url search parameters as generated by SS
  • fix for is70 check
  • bumped version to 0.1d6

• 2021-06-02

  • fix storePage.category being erroneously populated
  • bumped version to 0.1d5

• 2021-06-01

  • added eventPage property
  • bumped version to 0.1d4

• 2021-05-31

  • fix for library not initializing
  • bumped version to 0.1d3

• 2021-05-29

  • added tags property for storePage
  • bumped version to 0.1d2

• 2021-05-26

  • added version property for twcsl
  • filled out the documentation a bit
  • added getFormNth method
  • changed order of parameters for scrollEffect method
  • bumped version to 0.1d1

• 2021-05-22

  • initial version