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 335 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 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

• Store Product Detail Add to Cart Button After Added Callback

• Image Block Image Caption Second Add

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

• Change Cart Continue Shopping Text

• Element Hover Parent Class Toggle

• Scrolling Block Text Gradient

• Page

  • Blog

    • Post

      • Blog Page Post Excerpt Element

  • Page Collection Main Page Robots No Index

  • Cart

    • Cart Page Form Text Field Max Length

    • Cart Page Observe Changes

    • Cart Page Summary HTML Add

  • Store

    • Store Page Price Zero Remove

    • Store Page Form Text Field Max Length

    • Store Page Price Change Log

    • Store Page Price Change

    • Detail

      • Store Page Detail Price Variant Add

      • Store Page Detail Price Gte Afterpay Hide

      • Store Page Detail Add to Cart Button Text Change

      • Store Page Detail Sku Add

      • Store Page Detail Variant Selected Callback

      • Store Product Detail Add to Cart Button Url Redirect

    • Store Page Price Swap Sale Original

    • List

    • Store Page Image Aspect Ratio Change

    • Store Page Price and Sale Reverse

    • Store Page Price Hide When From

• Add to Cart Button Active Hours

• Blog Tag Page Tag Attribute Add

• Accordion Block Top Bottom Border Hide

• Store Product List Empty Text Add

• Text Block Formats Phrase Filter

• Text Block Links Open in New Window

• Add Form Block Section Labels

• Bookmarklet

  • Code Block Warning Toggle

  • Row Column Finder

  • Asset Library Uploads Image URLs

  • Dropbox Files Download URLs

  • Text Block Easy Links

  • Asset Library Selected Image URLs

• Payment Processor Icons

• Image Block Image Spinner

• Store Product Detail Related Product Sold Out Price Zero Remove

• Form Block Select Field Post-submit Redirect Change

• Replace Form Submit Button Submitting Text

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

• Store Product Detail One Left Class Add

• Element

  • Member Area

    • MALIDC Element Link Replace

    • MALIDC Close Button Add

    • Member Area Log In Dialog Change

    • MALIDC Join Quote

  • Product Quick View Observe Changes

  • Modal Lightbox Observe Changes

  • Product Custom Form Text Field Max Length

  • Customer Account Panel

    • Customer Account Panel Change

    • CAPC Account Settings Link

    • CAPC Greeting Change

  • Announcement Bar Observe Changes

  • Product Quick View Form Text Field Max Length

  • Element Text Change

  • Social Icon

    • Social Icon Twitter to X Change

  • ETC Year

  • Product Variant

    • Product Option First Variant Select Auto

• Search Page Input Aria-Label Attribute Add

• Change Cart Empty Message

• Store Product Detail Add Text After Description Matched Text Per Tag

• Product Custom Form Text Field Max Length

• Cart Prices Change

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

• Block Quote Source CSS Em Dash

• Form Block Track Field Block IDs

• Add Continue Shopping Message When Cart Has Items

• Cart Unit Prices

• Page Edit Keys

• Add Store Category Accordion

• Form Block Post-submit Redirect URL Email Parameter Add

• Image Map Responsive Template

• Change Search Page Input Placeholder Text

• Elements Manipulate

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

• Configurator Page Text and Image Blocks

• Cart Item Links Redirect

• Social Icon Discord Generic Icon to Discord Change

• Add Category Attribute to a Store Category Page

• Store Product Detail Add to Cart Text Change on Quantity Change

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

• Store Page Commerce Elements Hide

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

• Blog Non-Post Pages Meta Noindex Tag Add

• Calendar Block Event Change

• Change Cart Title

• Store Product Detail Slideshow Item Badge Add

• Page CSS Variable Scroll Ratio Add

• Store Product Detail Elements Tagged Hide

• v7.1

  • Memberspace Observe Log in Status

  • Mobile Menu Flyout

  • Site Style Animation Flex Center

  • Blog Page List Masonry Design Date Badge

  • Move Image Block Card Button Under Image

  • Page

    • Blog

      • Post

        • Blog Page Post Meta Copy

      • Blog Page Blog Post Settings Time Slider Replace

      • List

        • Blog Page List Post Image URL to Source URL

      • Blog Page Post Date Go To Add

    • Events

      • Events Page Event Settings Time Slider Replace

      • Event

        • Events Page Event Thumbnail Add

    • Store

      • Detail

        • Store Page Detail Price Force Mutation on Quantity Change

        • Store Page Detail Details Reorder Desktop

        • Store Page Detail Price Total

        • Store Page Detail Product Dimensions

        • Store Product Detail Variant Title Selected Add

        • Store Page Detail Simple Layout Gallery Thumbnail Below Scroll to Grid

        • Store Page Detail Footer Sections Move

        • Store Product Detail Variant Color Swatch Add

        • Store Page Detail Variant Display Button Vertical

        • Store Page Detail Additional Info Add Footer Boilerplate

        • Store Page Detail Variant Display Button Readability Fix

      • Store Page Tags Text Add

      • Store Page Elements Tagged Hide

      • List

        • Store Page List Tag Date Hide

        • SPLACR Date Progression Redirect

        • Store Page List Categories Mega

        • Store Page List Out of Stock Badge

        • Store Page List Category All Products Hide

        • Store Page List All Category Redirect

        • Store Page List Category Section Reveal

        • Store Page List Categories Description Add

        • SPLACR Simple Redirect

      • Store Page Tag Rating

      • Store Page Price Remove Decimal for Prices Greater Than or Equal to N

      • Store Page Product Element Hide

  • Remove Product Detail Quantity Field Outer Outline When Focused

  • Portfolio Page Project Collection Type Class Add

  • Page Site Title Change

  • Store Product Detail Title Text to Link

  • Gallery Block Carousel Arrows Top Center

  • Change Variant Unavailable Alert for Product Blocks

  • Store Product Grid Images Hide

  • Text Block Text Class Add

  • Portfolio Page Grid Image Aspect Ratio Change

  • Site Wide Image Borders

  • Page Section Image Scrubbing Animation

  • Section

    • Blocks Tabbed

    • Page Sections Slide Toggle

    • Gallery

      • Gallery Section Image Order Random

      • Gallery Section Right Arrow Auto Click

      • Gallery Section Text Block Overlay

    • Section Date Hide

    • Blank

      • Section Blank Attribute Id Add or Change

    • Page Section First Blank Hide

    • Section Info

    • Auto Layout

      • Section Auto Layout Right Arrow Auto Click

  • Store Product Grid Quick View Button Link Add

  • Blog Post Categories and Tags Add

  • Prepend Breadcrumb to Store Page Breadcrumbs

  • Change Site Title Space Runs to Break Element

  • Header Social Icon Bandcamp Generic Icon to Bandcamp Change

  • Footer Sections Move to Page

  • Header Navigation Link Text Replace With Image

  • Store Page Improperly Encoded Ampersand Fix

  • PSISA Viewport Middle

  • Blog Page List Meta Copy

  • Bookmarklet

    • Gallery Sections Image URLs

  • Header Branding And Navigation Center Actions Left Add

  • CTA Button Text and Url Change Based on Language

  • Gallery Section Item Description Key Class Add

  • Store Category All List Hide

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

  • Page Section Background Image Repeat

  • Make Navigation Folders Clickable

  • Header Social Icon URLs Change Based on Language

  • Hide Store Product Detail Recommended Product Last

  • Portfolio Page Hover Background Autoplay

  • Element

    • Element Animate

    • Member Area

    • Element Border

    • Image

    • Header

      • Header Site Title Add

  • Change Store Product Grid Column Number

  • Store Product Detail Move Footer Section Nth Content to Additional Info

  • Add Image Tags Between Event List Items

  • Gallery Section Reel Arrows Top Center

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

  • Blocks Boilerplate

  • Scroll to Top of Store Category Product Grid

  • Hide Blog Post Tags

  • Blog Page Section Text Replace With Category or Tag, or Both

  • Header Social Icon Whatsapp Generic Icon to Whatsapp Change

  • Calendar Block Event Multiday Class Add

  • Store Product List Badges

  • Gallery Section Reel Style Buttons to Slideshow Simple

  • Move Header CTA Element to Left Side

  • Set Store Product Details to Display Flex

  • Store Product Details Display Flex Desktop

  • Site Title Each Word Span Tag Add

  • Move Blog Listing Item Title Above Meta

  • Store Categories Cache

  • Replace Variant Menu "select" Text

  • Header Cart Icon Hide When Zero

  • Blog List Image Aspect Ratio Change

  • Event Content End Buttons Move to Meta

  • Hide Page Header and Footer

  • Event Meta Data Make Sticky

  • Page Section First Blocks Full Bleed

  • Blog Page List Item Background Color

  • Store Product Detail Add to Cart Button Right of Quantity

  • Store Product Detail Gallery Thumbnails Pill Segmented

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

  • Page Section Gallery Hover on Everything But

  • Page Section Background Transparent

  • Calendar Event Block Event Past Class Add

  • Store Product Detail Related Product Four

  • Store Product Details Natural Order Desktop

  • Calendar Block Link Replace With Excerpt Link

  • Blog Post Title Each Word Span Tag Add

  • Store Product Detail Add To Cart Show After Date Time

  • Header Height Add as CSS Variable

  • Store Tag Page Description Add

  • Store Product List Sale Badge

  • Page Section Auto Layout Simple List Format Class Add

  • Page Section Second Blocks Full Bleed

  • Page Section Background Waves Overlay

  • Calendar Block Multi Day Event First Day Class Add

  • Move Page Last Footer Section to First

  • Auto Change Product Grid Image Opacity on Touch Screen Device

  • Event Detail Page Categories Attribute Add

  • Move Blog Post First Image to Top Area

  • Change Image Card, Image to Text Width Ratios

  • Page Section Nth Blocks Full Bleed Template

  • Page Section Background Color Change on Scroll

  • Auto Layout Simple List Image Link Add

  • Calendar Block End Time Remove

  • Store Category Theme Change

  • Fluid Engine Page Section Upgrade Button Hide

  • Store Listing Add to Cart Buttons

  • Calendar Block Single Day Event Class Add

  • Page Section First CSS Variable Padding-Top Add

  • Store Product Detail Related Product Three

  • Header

    • Header CTA Buttons Each Word Span Tag Add

    • Header Menu Mobile Outline

    • Header Navigation Mindbody Login or Register Links Add

    • Header Buttons Add

  • Calendar Block Week at a Time

  • Store Product Meta New

  • Portfolio Project Link Remove

  • Block

    • Image

      • Image Blocks Random

    • Button

      • Button Block Replace Random

    • Summary

      • Events

        • Summary Block Events Date Text Change

  • Add Store Description

• Fix Image Block SS Encoded Query Component Links

• Store Product Detail Page Add Images Based on Tags

• Store Product Detail Variant Order Reverse

• Product Block Quick View After Anchor Tag

• Blog Category Page Category Attribute Add

• Store Product Detail Variant Sold Out Remove

• Header

  • Header Site Title Link Not Homepage Change

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

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

• v7.0

  • Page

    • Store

      • List

        • Store Page List Category Description Add

  • Bedford Template Family

    • Blog Post Tag Url Change

    • Store Page List Category Description Add

  • Cover Page Action Navigation Link Add

  • Product Block Improperly Encoded Ampersand Fix

  • Momentum Template

    • Page

      • Gallery

        • Gallery Page Previous Next Links Add

  • Montauk Template Family

    • Store Product Detail Back to Url Change

    • Change Unable to Add Item to Cart Alert

  • York Template Family

    • Project Page Image Clickthrough Add

  • Wells Template

    • Blog Header After Title

  • Add Content of a Page to Products Page

  • Store Product Details Reorder

  • Brine Template Family

    • Change Blog Listing Item Links to Source URL

    • Site Tagline Link

    • Move or Copy Store Intro After Products List

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

    • Site Tagline HTML

  • Member Area Sign In and up Dialog Change

• Event Back to All Events Link Change

• Block

  • Form

    • Form Block Wrapper Observe Changes

    • Form Block Fields From Search Parameters

    • Form Block Multi-Column

    • Form Block Text Field Max Length

  • Code

    • Code Block Social Links External

  • Product

    • Product Block Form Text Field Max Length

  • Summary

    • Events

      • Summary Block Events End Time Remove

---

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.3.3

Install Options

• There are two options for installing twcsl on your site depending on if your site is on a paid plan or in a trial period. Use only one of the install options. Be sure to save the changes you make when given the opportunity.

  • Paid Plan Install Steps

    • Step 1

      In your web browser visit the following URL.

      https://d1j8mu9lowy9zf.cloudfront.net/twcsl/0.3.3/twcsl-min.js
      

      The twcsl-min.js file will be downloaded to your computer.

    • Step 2

      In Pages > Not Linked add a Link page and link to the twcsl-min.js file.

    • Step 3

      Add the following to Website > Pages > Website Tools > Code Injection > HEADER.

      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
      <script src="/s/twcsl-min.js"></script>

    • The paid plan install steps are finished.

  • Trial Period Install Steps

    • Step 1

      Add the following to Website > Pages > Website Tools > Code Injection > HEADER.

      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

    • Step 2

      In your web browser visit the following URL.

      https://d1j8mu9lowy9zf.cloudfront.net/twcsl/0.3.3/twcsl.min.html
      

      The twcsl.min.html file will display in your browser.

    • Step 3

      Copy the entire contents of the page and add it to Website > Pages > Website Tools > Code Injection > HEADER after the previously installed code. jQuery must be before the twcsl code.

    • The trial period install steps are finished.

    • Once your site is out of the trial period you may want to switch over to the paid plan install. Just reverse the trial period install steps and then follow the paid plan install steps.

Example

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

if ( twcsl.page.store.list.hasCategory ) console.log ( 'has category' );

Methods

• 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.

• getPageSectionNth

  • getPageSectionNth ( [nth section on page] )

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

• getUrlParser

  • getUrlParser ( url )

    • Returns an anchor element.

• isElementInPage

  • isElementInPage ( element )

    • Element is a jQuery object.
    • Returns boolean.

• isElementInViewport

  • isElementInViewport ( element )

    • Element is a jQuery object.
    • Returns boolean.

• 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

• go

  • go ( callback )

    An initialize method if you want to write code using twcsl that works on both v7.1 and v7.0.

    • callback is a function name

• urlToCssClassName

  • urlToCssClassName ( url )

    • Url is a string.
    • Returns a string. If the first character of the url is a number, dash, or or underscore character x- is added to the beginning of the class name.

Properties and their Methods

• navigator ( object )

  • hasTouchScreen ( boolean )

• page ( object )

  • album ( object )

    • is ( boolean )

    • urlSlug ( string )

  • blog ( object )

    • is ( boolean )

    • list ( object )

      • category ( string )

      • categoryUrlSlug ( string )

      • hasCategory ( boolean )

      • hasTag ( boolean )

      • is ( boolean )

      • tag ( string )

      • tagUrlSlug ( string )

    • post ( object )

      • categories ( array )

      • categoryUrlSlugs ( array )

      • is ( boolean )

      • tags ( array )

      • tagUrlSlugs ( array )

    • urlSlug ( string )

  • cart ( object )

    • is ( boolean )

  • cover ( object )

    • is ( boolean )

    • urlSlug ( string )

  • events ( object )

    • event ( object )

      • categories ( array )

      • categoryUrlSlugs ( array )

      • is ( boolean )

      • tags ( array )

      • tagUrlSlugs ( array )

    • is ( boolean )

    • list ( object )

      • category ( string )

      • categoryUrlSlug ( string )

      • hasCategory ( boolean )

      • hasTag ( boolean )

      • is ( boolean )

      • tag ( string )

      • tagUrlSlug ( string )

    • urlSlug ( string )

  • gallery ( object )

    • is ( boolean )

    • urlSlug ( string )

  • index ( object )

    • is ( boolean )

    • urlSlug ( string )

  • portfolio ( object )

    • is ( boolean )

    • list ( object )

      • is ( boolean )

    • subPage ( object )

      • is ( boolean )

    • urlSlug ( string )

  • search ( object )

    • is ( boolean )

  • store ( object )

    • detail ( object )

      • classCategories ( array, v7.0 only )

      • classTags ( array )

      • get ( object, get methods )

        • stockQuantity ( method )

          • stockQuantity ( )

            • Returns number.

      • is ( boolean )

    • is ( boolean )

    • list ( object )

      • categories ( string, v7.1 only )

      • category ( string )

      • categoryUrlSlug ( string )

      • hasCategory ( boolean )

      • hasTag ( boolean )

      • is ( boolean )

      • tag ( string )

      • tagUrlSlug ( string )

    • urlSlug ( string )

  • videos ( object )

    • is ( boolean )

    • urlSlug ( string )

• ss ( object )

  • is70 ( boolean )

  • is71 ( boolean )

  • version ( string )

• version ( string, twcsl version )

Changes

• 2023-12-07

  • fix for twcsl.scrollEffect ratio calculation
  • bumped version to 0.3.3

• 2023-03-05

  • fix for twcsl.page.blog.hasCategory not recognizing category url slugs in the ?category=myCategory format on v7.1 sites
  • bumped version to 0.3.2

• 2023-03-04

  • fix for blog tag not returning tag
  • bumped version to 0.3.1

• 2023-02-18

  • added twcsl.page.store.list.categories for v7.1 hierarchical categories
  • add urlToCssClassName method
  • add isElementInPage method
  • fix for twcsl.page.store.list.categoryUrlSlug for v7.1 not returning hierarchical slugs
  • bumped version to 0.3.0

• 2022-05-03

  • fix for value not defined in _getPageFilterSlug private method
  • bumped version to 0.2.2

• 2022-04-15

  • restore getUrlParser method
  • added twcsl.page.store.detail.get.stockQuantity method
  • bumped version to 0.2.1

• 2022-03-25

  • cart and search pages are under the page object instead of being top level is flags
  • added page types album, cover, gallery, index, portfolio, and videos
  • massive restructuring, the overall functionality of v0.1d19 is preserved
  • bumped version to 0.2d0

• 2022-01-28

  • fix for initialization code break for v7.1
  • bumped version to 0.1d19

• 2022-01-21

  • make ajax compatible for v7.0
  • bumped version to 0.1d18

• 2022-01-10

  • reworked categoryUrlSlug, categoryUrlSlugs, tagUrlSlug, and tagUrlSlugs code to return a slug more like what is seen in the SS user interface. format is /aSlugHere and category=aSlugHere depending on filtered list access method
  • fix hasCategory and hasTag not working when page is homepage ( / )
  • fixes for SS Dec. 20th 2021 structure/CSS changes
  • bumped version to 0.1d17

• 2021-12-07

  • added isElementInViewport method
  • bumped version to 0.1d16

• 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