Alter Posted November 8, 2022 Share Posted November 8, 2022 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! Link to comment
tuanphan Posted November 10, 2022 Share Posted November 10, 2022 Can you share link to some categories page? We can check easier 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
Alter Posted December 4, 2022 Author Share Posted December 4, 2022 Here's a link to a collection page. https://www.loomrugs.com/contemporary-rugs If we select any single product page the <previous/next> will link to the entire product list. Ideally it could be from each collection. Cheers Link to comment
tuanphan Posted December 9, 2022 Share Posted December 9, 2022 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
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment