Filtering by Category: JSONT

Products Pages


NOTE: January 24, 2018 - this guide is outdated and likely does not work on Squarespace any longer. Stay tuned for an update  

Everyone's always wondering about where they can get their hands on products.list, products.item, and products.conf.  I've written some bare-bones markup for each, so that you have a place to start each time you want to build a custom products page.  There are a few notes at the bottom for reference.


products.list

<div id="productList">
  {.repeated section items}
    <a href="{fullUrl}" class="product">
      <div>
        <!-- Display product image -->
          {.main-image?}
            <div class="product-image">
              <img {@|image-meta} />
            </div>
          {.end}

        <!-- product information, like price and title -->
        <div class="product-meta">
          {.section title}
            <p class="product-title">{@}</p>
          {.end}
          <p class="product-price">{@|product-price}</p> 
        </div>

        <!-- this will place the 'SOLD OUT' or 'SALE' flag on the product appropriately -->
        {@|product-status}

      </div>
    </a>
  {.end}
</div>

products.item

{.section item}
  <div id="productWrapper">
    
    <!-- This displays all images/videos associated with the product. Style this accordingly. -->
    <div id="productSlideshow">
      {.repeated section items}
        {.image?}
          <img {@|image-meta} />
        {.end}
        {.video?}
          {@|video}
        {.end}
      {.end}
    </div>

    <!-- This shows the status (sold out/on sale), price, and description (excerpt) text -->
    <div id="productDetails">
      {@|product-status}

      <h1 class="product-title">{title}</h1>

      {@|product-price}

      {.excerpt?}
        <div class="product-excerpt">
          {excerpt}
        </div>
      {.end}

      {@|product-checkout}
    </div>

    <!-- This displays any text/blocks added to the Additional Info tab -->
    {.section body}
    <div class="product-description">
      {@}
    </div>

  </div>
{.end}

products.conf

{
  "title" : "Products",
  "ordering" : "chronological",
  "icon" : "products",
  "pageSize" : 999,
  "addText" : "Add Product",
  "view" : "product-table",
  "acceptTypes" : ["store_item"]
}

notes

You can name these files whatever you want, as long as they all match.  For example, custom-products.list, custom-products.item, custom-products.conf.  That way they're all synced up to each other.

If you choose to name them products.*, you'll overwrite the system collection.  This means that Squarespace automatically provides you with a Products page type, but you'll end up using your own markup. For this reason, I advocate a custom naming convention in case you need to use the system collection later.

Finally, here's a list of helpers and formatters specific to the products page:

  • {@|product-price} - displays price of the product
  • {@|product-status} - displays status text if the product is marked as on sale or sold out
  • {@|product-checkout} - displays the Add to Cart button (includes Variant drop down and Quantity input)
No Comments

All about the Equal Predicate


I came across this interesting question on Answers today and I thought I'd write a brief overview of the Equal Predicate as well as share a quirky discovery here.

In JSONT, the Equal Predicate tests if one argument equals another argument, and returns true or false.  If true, the markup (or code) inside the JSONT is rendered.  

There are three parts to the Equal Predicate:

  1. The predicate itself ".equal?"
  2. The first argument
  3. The second argument

Here's some pseudo code:

{.equal? argument1 argument2}
  <!-- HTML or whatever -->
{.end}

If argument one equals argument two, then the test condition is true and anything inside will be outputted. Here's a quick example:

{.equal? collection.typeName "blog"}
  <h1>Welcome to my Blog page.</h1>
{.end}

 If you check out the JSONT of this page and do a search for typeName, you'll see that its associated value is "blog."  This is a Squarespace thing.  There are different types of pages (collections as they are known) in Squarespace - things like blog, gallery, page, products, events, and album are several examples.

So in the above test, I'm basically asking "is this a blog page? If yes, render an <h1> that says Welcome to my Blog page.  If no, ignore everything in the condition and don't render any code."

Pretty powerful stuff!

Now, there's a catch with this nifty little Equal Predicate.  That catch is:

The first character after the predicate (.equal?) signifies the delimiter for the arguments.

What does that mean in plain english? Take a look at the following example with a test for a specific category.  In this example, we're assuming you're wanting to output some HTML on a specific category filter page. (Example: http://www.bcarroll.us/?category=JSONT )

{.section categoryFilter}
  {.equal? categoryFilter "My Awesome Category"}
    <h2>You're looking at the category "My Awesome Category"</h2>
  {.end}
{.end}

The above code will break!  But why?? Well, because the first character after .equal? is a space. And so, JSONT is saying "okay, all spaces from here on out will tell me that a new argument is next."  And since "My Awesome Category" has two spaces in the whole string, it will treat that one argument as three separate arguments! Oh nooooooo

Well, it's not that big of a deal, because you can use any character to signify the argument delimiter! Here's the above code, written using a new character as the delimiter - namely, the colon! : : : : : : : ) : ) :)

Check it:

{.section categoryFilter}
  {.equal?:categoryFilter:"My Awesome Category"}
    <h2>You're looking at the category "My Awesome Category"</h2>
  {.end}
{.end}

This code will work because the delimiter is set to be a : instead of a space, and the spaces in the string "My Awesome Category" will render as space characters correctly. So now, if you're on the blog list view of the category My Awesome Category, you'll see a super awesome <h2> waiting to tell you which category you're looking at.

Woohoo, good fun. Until next time...

No Comments