Update Version 1.1.1

JaJuMa-GmbH · Sep 14, 2022 · 4e35d54 · 4e35d54
1 parent 6dbbf10
commit 4e35d54
Show file tree

Hide file tree

Showing 5 changed files with 83 additions and 19 deletions.
diff --git a/README.md b/README.md
@@ -15,8 +15,8 @@ Compatible with
 
 * Add 1 - x question groups
 * Add 1 - x questions and answers in each question group
-* Choose if question groups are shown as open or closed as default on page load on desktop (always closed on mobile)
-* Option to show/hide Question Group Title
+* Choose if question groups are shown as open or closed on desktop / on mobile
+* Option to show/hide Question Group Title on desktop / on mobile
 * Option to keep only one question open
 * Choose icons for open/close questions
 * Option to add JSON-LD structured data for FAQs
@@ -67,7 +67,7 @@ The code is licensed under the [MIT License (MIT)](https://github.com/JaJuMa-Gmb
 
 ## Other [Magento 2 Extensions](ttps://www.jajuma.de/en/jajuma-develop/magento-extensions) by [JaJuMa](https://www.jajuma.de/)
 
-* :framed_picture: Performance & UX:<br>[Ultimate Image Optimizer for Magento 2](https://www.jajuma.de/en/jajuma-develop/extensions/ultimate-image-optimizer-extension-for-magento-2)<br>
+  * :framed_picture: Performance & UX:<br>[Ultimate Image Optimizer for Magento 2](https://www.jajuma.de/en/jajuma-develop/extensions/ultimate-image-optimizer-extension-for-magento-2)<br>
   AVIF & WebP Images, Lazy Loading, High-Resolution / Retina images
 
   * :framed_picture: Performance & UX:<br>[WebP Optimized Images for Magento 2](https://www.jajuma.de/en/jajuma-develop/extensions/webp-optimized-images-extension-for-magento-2#portfolio-content)<br>

diff --git a/composer.json b/composer.json
@@ -2,7 +2,7 @@
     "name": "jajuma/hyva-faq",
     "description": "FAQ Widget for Hyvä Themes",
     "type": "magento2-module",
-    "version": "1.1.0",
+    "version": "1.1.1",
     "license": "MIT",
     "authors": [
         {

diff --git a/etc/adminhtml/system.xml b/etc/adminhtml/system.xml
@@ -100,7 +100,7 @@
 				                224.517V336H106.692V115.336H74L91.2077 64H158.026V174.716ZM272.988 109.567L286.407
 				                69.7565H239.485L226.132 109.567H272.988ZM235.338 64H294.409L277.112
 				                115.336H218.13L235.338 64Z"></path></svg> Hyvä Theme Demo</a>
-				                <div style="float: right;">Installed Version: <b>1.1.0</b></div>
+				                <div style="float: right;">Installed Version: <b>1.1.1</b></div>
 				             </div>
                         </div>
                             <hr>
@@ -131,7 +131,7 @@
                                     <a href="https://www.jajuma.de/en/jajuma-develop/extensions/customer-satisfaction-feedback-extension-for-magento-2"
                                        target="_blank">Customer Satisfaction Feedback</a>
                                     <a href="https://www.jajuma.de/en/jajuma-develop/extensions/customer-navigation-manager-extension-for-magento-2"
-                                       target="_blank">Free: Customer Navigation Manager</a>
+                                       target="_blank"><b>Free:</b> Customer Navigation Manager</a>
                                     <a href="https://www.jajuma.de/en/jajuma-develop/extensions/font-awesome-icons-for-hyva-themes-extension"
                                        target="_blank"><b>Free:</b> Awesome Hyvä</a>
                                     <a href="https://www.jajuma.de/en/jajuma-develop/extensions/dynamic-shipping-tax-extension-for-magento-2"

diff --git a/etc/widget.xml b/etc/widget.xml
@@ -29,8 +29,36 @@
                     </option>
                 </options>
             </parameter>
-            <parameter name="display_question_group_title" xsi:type="select" required="true" sort_order="10">
-                <label>Display Question Group Title</label>
+            <parameter name="display_desktop_question_group_title" xsi:type="select" required="true" sort_order="10">
+                <label>Display Question Group Title on Desktop View</label>
+                <depends>
+                    <parameter name="is_show_question_on_desktop" value="1"/>
+                </depends>
+                <options>
+                    <option name="yes" value="1" selected="true">
+                        <label translate="true">Yes</label>
+                    </option>
+                    <option name="no" value="0">
+                        <label translate="true">No</label>
+                    </option>
+                </options>
+            </parameter>
+            <parameter name="is_show_question_on_mobile" xsi:type="select" required="true" sort_order="10">
+                <label>Question Groups open on Mobile View</label>
+                <options>
+                    <option name="yes" value="1" selected="true">
+                        <label translate="true">Yes</label>
+                    </option>
+                    <option name="no" value="0">
+                        <label translate="true">No</label>
+                    </option>
+                </options>
+            </parameter>
+            <parameter name="display_mobile_question_group_title" xsi:type="select" required="true" sort_order="10">
+                <label>Display Question Group Title on Mobile View</label>
+                <depends>
+                    <parameter name="is_show_question_on_mobile" value="1"/>
+                </depends>
                 <options>
                     <option name="yes" value="1" selected="true">
                         <label translate="true">Yes</label>

diff --git a/view/frontend/templates/faq.phtml b/view/frontend/templates/faq.phtml
@@ -21,7 +21,9 @@ $heroicons = $viewModels->require(HeroiconsSolid::class);
 
 $questionGroups = $block->getConditions();
 $isShowQuestionOnDesktop = $block->getData('is_show_question_on_desktop');
-$displayQuestionGroupTitle = $block->getData('display_question_group_title');
+$displayQuestionGroupTitle = $block->getData('display_desktop_question_group_title');
+$isShowQuestionOnMobile = $block->getData('is_show_question_on_mobile');
+$displayMobileQuestionGroupTitle = $block->getData('display_mobile_question_group_title');
 $keepOnlyOneQuestionOpen = $block->getData('keep_only_one_question_open');
 $openCloseIcons = $block->getData('open_close_icons');
 $identifyNumber = rand(100,1000);
@@ -30,6 +32,26 @@ $jsonLdArray = [];
 $heroIconsData = $block->getHeroicons($openCloseIcons, $isShowQuestionOnDesktop);
 $typeIcons = $heroIconsData['type'];
 $icons = $heroIconsData['icons'];
+// desktop
+if ($isShowQuestionOnDesktop) {
+    if  ($displayQuestionGroupTitle) {
+        $desktopHeaderStyle = 'md:block';
+    } else {
+        $desktopHeaderStyle = 'md:hidden';
+    }
+} else {
+    $desktopHeaderStyle = 'md:block';
+}
+//mobile
+if ($isShowQuestionOnMobile) {
+    if  ($displayMobileQuestionGroupTitle) {
+        $mobileHeaderStyle = 'block';
+    } else {
+        $mobileHeaderStyle = 'hidden';
+    }
+} else {
+    $mobileHeaderStyle = 'block';
+}
 ?>
 
 <?php if ($isEnabled && count($questionGroups)): ?>
@@ -52,20 +74,18 @@ $icons = $heroIconsData['icons'];
         <?php endif; ?>
         @media only screen and (max-width: 767px) {
             .accordion-widget > .accordion-item-body {
-                display: none;
+                display: <?= $isShowQuestionOnMobile ? 'block' : 'none' ?>;
             }
         }
     </style>
 
     <?php foreach ($questionGroups as $groupId => $questionGroup): ?>
         <div class="accordion-widget accordion-item mb-5 border" id="question-groups-<?= $groupId ?>">
-            <?php if ($displayQuestionGroupTitle == 1) :?>
-                <div class="accordion-item-header-<?= $identifyNumber ?> cursor-pointer px-8 py-4 pr-16	font-bold relative <?php if($isShowQuestionOnDesktop): ?>active <?php endif; ?>" data-index="<?= $questionIndex;?>">
-                    <strong><?= __($questionGroup['group_name']) ?></strong>
-                    <span class="icon transition-all duration-300 transform absolute right-8 top-4 <?= $typeIcons ?>">
-                    </span>
-                </div>
-            <?php endif;?>
+            <div class="accordion-item-header-<?= $identifyNumber ?> cursor-pointer px-8 py-4 pr-16	font-bold relative <?= $mobileHeaderStyle.' '.$desktopHeaderStyle ?>" data-index="<?= $questionIndex;?>">
+                <strong><?= __($questionGroup['group_name']) ?></strong>
+                <span class="icon transition-all duration-300 transform absolute right-8 top-4 <?= $typeIcons ?>">
+                </span>
+            </div>
             <div class="accordion-item-body overflow-hidden" style="background: #f5f4f1;" id="content-group-<?= $groupId ?>">
                 <div class="accordion-item-body-content p-4 pb-0 overflow-hidden">
                     <?php foreach ($questionGroup['question_lists'] as $questionId => $question): ?>
@@ -174,8 +194,24 @@ $icons = $heroIconsData['icons'];
         }
 
         document.querySelectorAll(".accordion-item-header-<?= $identifyNumber ?>").forEach(accordionItemHeader => {
-            if(window.innerWidth < 768 && accordionItemHeader.classList.contains("active")) {
-                accordionItemHeader.classList.toggle("active");
+            if(!accordionItemHeader.classList.contains("accordion-item-header-question")) {
+                if  (window.innerWidth < 768) {
+                    <?php if($isShowQuestionOnMobile): ?>
+                        accordionItemHeader.classList.add("active");
+                        <?php if ($openCloseIcons == 1) :?>
+                            var icon = accordionItemHeader.querySelector('.icon');
+                            icon.classList.toggle('rotate-180');
+                        <?php endif;?>
+                    <?php endif; ?>
+                } else {
+                    <?php if($isShowQuestionOnDesktop): ?>
+                        accordionItemHeader.classList.add("active");
+                        <?php if ($openCloseIcons == 1) :?>
+                            var icon = accordionItemHeader.querySelector('.icon');
+                            icon.classList.toggle('rotate-180');
+                        <?php endif;?>
+                    <?php endif; ?>
+                }
             }
 
             accordionItemHeader.addEventListener("click", event => {