Jump to content

Unique Category headers with descriptions — Commerce

Recommended Posts

Trying to add a short description under a filtered category for my clients store — see existing 7.0 site https://www.loomrugs.com/c-c 

If I add a new section on on the filtered page, it propagates throughout each rug style — client wants to add a short little descriptor for each type of rug style.

I've set up the 'all categories' page like that as I'm going to add a summary image randomiser to cycle through photos.

Site can be found here: https://loomrugsalter.squarespace.com 

 

Thanks!

Screen Shot 2022-11-08 at 3.15.30 pm.png

Screen Shot 2022-11-08 at 3.15.52 pm.png

Link to comment
  • Replies 3
  • Views 299
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

  • 4 weeks later...

It looks like you solved with @ creedon code?

<collections>
  
  <script>
  
    window.twc = {
    
      '8a8efe37' : {
      
        categoryDescriptionMap : {
          
         'Art Deco' : 'Highly unique handwoven pure wool pile rugs made in China around 1920’s Art Deco period.',
          'Berber' : 'New and vintage soft textured pile rugs from Morocco and other countries.',
          'CC Tapis' : 'Born in France. <br>Designed in Milan. <br>Produced in Nepal.  <br>CC-Tapis is an Italian company which produces contemporary hand-knotted rugs. These rugs are designed by some of the worlds best known innovative designers and hand crafted in the highlands of Nepal by expert Tibetan artisans. For more info: <a href="http://www.cc-tapis.com">www.cc-tapis.com</a>',
          'Contemporary Kilims' : 'Flat woven Kilims with modern designs.',
          'Contemporary Rugs' : 'Drawing on inspiration from antique, vintage and primitive patterns that have been around for centuries. Loom puts our own unique design philosophy into these creations to develop truly spectacular pieces that will stand the test of time.  We are able to work with our producers to achieve the highest quality in hand-knotted rugs of all materials from wool & silk to aloe vera & bamboo.',
          'Vintage & Antique Rugs' : 'Handpicked Vintage and Antique rugs from all around the world.',
          'Sari Silk Rugs' : 'The rugs that are made either with recycled Sari or new Silk.',
          'Old Yarn Rugs & Kilims' : 'Made up of many unraveled antique, old and vintage yarns. These rugs are carefully handcrafted in Turkey, the finished product is something truly unique and cannot be replicated.  The idea of these designs is to incorporate traditional Anatolian rug making techniques and traditions in a more contemporary style that is appropriate for any timeless space.',
          'Vintage & Antique Kilims' : 'Sourced one off Kilims and Cicim rugs from Turkey and neighbouring countries.',
          'Classic' : 'Selection of Traditional and Classic Rugs',
          'South West' : 'A collection of traditional rugs from America\'s Southwest',
          
          
          }
          
        }
        
      };

    let paragraphStyle = '';
    
    </script>
    
  <!-- do not change anything below, there be the borg here -->
  
  <style>
  
    .products.collection-content-wrapper .nested-category-children {
    
      padding-bottom : calc( 54px / 2 ); /* default divided */
      padding-top : calc( 54px / 2 ); /* default divided */
      
      }
      
    .tweak-products-category-title .products.collection-content-wrapper .nested-category-title.nested-category-title-padding {
    
      margin-bottom : calc( 37px / 2 ); /* default divided */
      padding-bottom : 0;
      
      }
      
    .tweak-products-category-title .products.collection-content-wrapper .nested-category-title.nested-category-title-padding::after {
    
      all : unset;
      
      }
      
    .tweak-products-category-title .products.collection-content-wrapper .nested-category-description {
    
      display : -webkit-box;
      display : -ms-flexbox;
      display : flex;
      
      -webkit-box-orient : horizontal;
      -webkit-box-direction : normal;
      -ms-flex-direction : row;
      flex-direction : row;
      
      margin-bottom : 0; /* default was 37px */
      padding-bottom : 0; /* default was 54px */
      position : relative;
      
      }
      
    .tweak-products-category-title .products.collection-content-wrapper .nested-category-description::after {
    
      border-bottom : 0px solid;
      bottom : 0;
      content : '';
      left : 0;
      opacity : 0.2;
      position : absolute;
      width : 100%;
      
      }
      
    @media screen and ( min-width : 576px ) {
    
      .tweak-products-header-text-alignment-middle .products.collection-content-wrapper .nested-category-description {
      
        -webkit-box-pack : center;
        -ms-flex-pack : center;
        justify-content : center;
        
        text-align : center;
        
        }
      }
      
    </style>
    
  <script>
  
    $( ( ) => {
    
      const paragraphStyles = {
      
        'Heading 1'   : '<h1>',
        'Heading 2'   : '<h2>',
        'Heading 3'   : '<h3>',
        'Heading 4'   : '<h4>',
        'Paragraph 1' : '<p class="sqsrte-large">',
        'Paragraph 2' : '<p>',
        'Paragraph 3' : '<p class="sqsrte-small">',
        'Monospace'   : '<pre>' +
        
          '<code>' +
          
            '</code>' +
            
          '</pre>',
          
        };
        
      if ( twcsl.page.store.detail.is ) return; // bail on detail
      
      if ( twcsl.page.store.list.hasTag ) return; // bail on tag
      
      const category = twcsl.page.store.list.category;
      
      // bail if no category url slug mapped
      
      if ( ! ( category in
      
        twc [ '8a8efe37' ].categoryDescriptionMap ) ) return;
        
      const description = twc [ '8a8efe37' ].categoryDescriptionMap [
      
        category ];
        
      if ( ! paragraphStyle ) paragraphStyle = 'Heading 3';
      
      $( '<div class="nested-category-description">' )
      
        .append ( paragraphStyles [ paragraphStyle ] )
        
        .find ( ':last' )
        
          .html ( description )
          
          .end ( )
          
        .insertAfter ( '.nested-category-title' );
        
      } );
      
    </script>
    
  </collections>

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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.