Allow multiple instances

Allow multiple instances Expose additional max-width, margin-top, margin-bottom settings Toggle FAQ Rich Schema
carolinerusso · Mar 30, 2022 · ae23d43 · ae23d43
1 parent 896ee87
commit ae23d43
Showing 1 changed file with 69 additions and 15 deletions.
diff --git a/FAQ/sections/faq.liquid b/FAQ/sections/faq.liquid
@@ -1,3 +1,9 @@
+{%- comment -%}
+Section published at https://sections.design/blogs/shopify/faq-rich-snippets-section
+Get the latest version: https://github.com/mirceapiturca/Sections/tree/master/FAQ
+{%- endcomment -%}
+
+
 {%- comment -%} ---------------- THE CSS ---------------- {%- endcomment -%}
 
 {%- assign id = '#shopify-section-' | append: section.id -%}
@@ -30,12 +36,24 @@
   .overflow-hidden { overflow: hidden }
   .cursor-pointer { cursor: pointer }
 
-  .faq-title {
+  {{ id }} .faq-container {
+    max-width: {{ section.settings.max_width }};
+    margin: {{ section.settings.margin_top }}rem auto {{ section.settings.margin_bottom }}rem
+  }
+  
+  {{ id }} .faq-title {
     border-bottom: 1px solid  var(--border-color);
     font-size: var(--title-font-size);
     color: var(--question-color);
   }
   
+  {{ id }} .faq-panel {
+    will-change: height;
+    border-bottom: 1px solid var(--border-color);
+    background-color: var(--panel-bg);
+    color: var(--answer-color);
+  }
+  
   .faq-button {
     font: inherit;
     background: transparent;
@@ -58,13 +76,6 @@
     transform: rotate(90deg);
   }
   
-  .faq-panel {
-    will-change: height;
-    border-bottom: 1px solid var(--border-color);
-    background-color: var(--panel-bg);
-    color: var(--answer-color);
-  }
-  
   .faq-panel * {
     color: inherit;
   }
@@ -78,6 +89,7 @@
 {%- comment -%} ---------------- THE MARKUP ---------------- {%- endcomment -%}
 
 
+<div class="faq-container">
 {%- for block in section.blocks -%}
   {%- if block.settings.title != blank and block.settings.content != blank  -%}
 
@@ -105,10 +117,12 @@
 
   {%- endif -%}
 {%- endfor -%}
+</div>
 
 
 {%- comment -%} -------------- THE RICH SCHEMA ------------- {%- endcomment -%}
 
+{%- if section.settings.enable_rich_schema -%}
 <script type="application/ld+json">
 {
   "@context": "https://schema.org",
@@ -129,6 +143,7 @@
   ]
 }
 </script>
+{%- endif -%}
 
 
 {%- comment -%} ---------------- THE CONFIG ---------------- {%- endcomment -%}
@@ -150,6 +165,46 @@
   "tag": "article",
 
   "settings": [
+    {
+      "type": "header",
+      "content": "Rich schema"
+    },
+    {
+      "type": "checkbox",
+      "id": "enable_rich_schema",
+      "default": true,
+      "label": "Enable FAQ rich schema?"
+    },
+    {
+      "type": "header",
+      "content": "Dimensions"
+    },
+    {
+      "type": "text",
+      "id": "max_width",
+      "label": "Max width",
+      "default": "64rem"
+    },
+    {
+      "type": "range",
+      "id": "margin_top",
+      "min": 0,
+      "max": 10,
+      "step": 0.1,
+      "unit": "rem",
+      "label": "Margin top",
+      "default": 1
+    },
+    {
+      "type": "range",
+      "id": "margin_bottom",
+      "min": 0,
+      "max": 10,
+      "step": 0.1,
+      "unit": "rem",
+      "label": "Margin bottom",
+      "default": 1
+    },
     {
       "type": "header",
       "content": "Colors"
@@ -266,7 +321,7 @@
 
 {%- if request.design_mode -%}
 <script>
-  (function FAQThemeEditor(SD) {
+  (function FAQThemeEditor(SectionsDesign) {
     'use strict';
     
     document.addEventListener('shopify:section:load', sectionLoad);
@@ -275,21 +330,20 @@
     
     function sectionLoad(evt) {
       var sectionId = evt.detail.sectionId;
-      var section =  SD.faq[sectionId];
+      var section =  SectionsDesign.faq[sectionId];
+      
       if (!section) return;
-      SD.faq[sectionId] = section.init(sectionId);     
+      SectionsDesign.faq[sectionId] = section.init(sectionId);     
     }
     
     function blockToggle(evt) {
-      var section = SD.faq[evt.detail.sectionId];
+      var section = SectionsDesign.faq[evt.detail.sectionId];
       if (!section) return;
       
       var block = section.blocks[evt.detail.blockId];
       if (!block) return;
       
-      (evt.type === 'shopify:block:select')
-        ? block.select() 
-        : block.deselect();
+      evt.type === 'shopify:block:select' ? block.select() : block.deselect();
     }
       
   })(window.SectionsDesign = window.SectionsDesign || {});