WZ-3524: Added functionality to display facets in drawer

Author: smit-kandiya

Block/BaseBlock.php

@@ -311,6 +311,11 @@ public function getConfigs()
                'sessions' => '/wtrack/analytics/session',
             ],
          ],
+         'filters' => [
+            'configs' => [
+               'displayAsDrawer' => ($this->storeSearchConfig->leftFacetsHasToDisplayAsDrawer() == '1') ? true : false,
+            ],
+         ],
         ];
 
         return $configs;

Services/Store/StoreSearchConfig.php

@@ -21,6 +21,7 @@ class StoreSearchConfig
 
     const WIZZY_SEARCH_FACETS_CONFIGURATION = self::WIZZY_SEARCH_CONFIGURATION . "/search_results_facets_configuration";
     const WIZZY_FACETS = self::WIZZY_SEARCH_FACETS_CONFIGURATION . "/facets_configuration";
+    const WIZZY_FACETS_DISPLAY_AS_DRAWER = self::WIZZY_SEARCH_FACETS_CONFIGURATION . "/left_facets_has_to_display_in_drawer";
     const WIZZY_FACET_CATEGORY_DISPLAY = self::WIZZY_SEARCH_FACETS_CONFIGURATION . "/category_facet_display_method";
     const WIZZY_LEFT_FACETS_COLLAPSIBLE = self::WIZZY_SEARCH_FACETS_CONFIGURATION . "/left_facets_has_to_collapsible";
     const WIZZY_LEFT_FACETS_DEFAULT_COLLAPSIBLE_BEHAVIOUR =
@@ -102,6 +103,12 @@ public function getFacetsConfiguration()
         return json_decode($facetsConfig, true);
     }
 
+    public function leftFacetsHasToDisplayAsDrawer()
+    {
+        return $this->configManager->getStoreConfig(self::WIZZY_FACETS_DISPLAY_AS_DRAWER, $this->storeId);
+    }
+
+
     public function getCategoryDisplayMethod()
     {
         return $this->configManager->getStoreConfig(self::WIZZY_FACET_CATEGORY_DISPLAY, $this->storeId);

etc/adminhtml/system.xml

@@ -580,6 +580,17 @@
                     </comment>
                 </field>
 
+                <field id="left_facets_has_to_display_in_drawer" translate="label" type="select" sortOrder="2" showInDefault="0" showInWebsite="0" showInStore="1">
+                    <label>Display Inside Drawer?</label>
+                    <source_model>Magento\Config\Model\Config\Source\Yesno</source_model>
+                    <comment>
+                        <![CDATA[
+                            Choose Yes if you would like to display facets under drawer.
+                        ]]>
+                    </comment>
+                    <validate>required-entry</validate>
+                </field>
+
                 <field id="category_facet_display_method" translate="label" type="select" sortOrder="2" showInDefault="0" showInWebsite="0" showInStore="1">
                     <label>Categories Rendering Method</label>
                     <source_model>Wizzy\Search\Model\Admin\Source\CategoriesRenderSelection</source_model>

view/frontend/templates/search/wrapper.phtml

@@ -7,7 +7,8 @@ $addMoveToTopWidget = $configs['search']['configs']['pagination']['moveToTopWidg
    <div class="wizzy-search-wrapper {{#inOnCategoryPage}}wizzy-category-page{{/inOnCategoryPage}}
         {{#hasFacets}}has-facets{{/hasFacets}}
         {{#hasLeftFacets}}has-left-facets{{/hasLeftFacets}}
-        {{#hasTopFacets}}has-top-facets{{/hasTopFacets}}">
+        {{#hasTopFacets}}has-top-facets{{/hasTopFacets}}
+        {{#displayFacetsInDrawer}}has-facets-in-drawer facets-drawer-on-{{facetDrawerPosition}}{{/displayFacetsInDrawer}}">
 
       <div class="wizzy-search-summary-wrapper">
          {{#summary}}
@@ -47,7 +48,16 @@ $addMoveToTopWidget = $configs['search']['configs']['pagination']['moveToTopWidg
          <div class="wizzy-search-results-container">
 
             <div class="wizzy-search-filters-top">
-
+            {{#displayFacetsInDrawer}}
+                    <div class="wizzy-search-filters-drawer">
+                        <div class="wizzy-search-filters-drawer-button">
+                            <a href="#" class="wizzy-filters-desktop-entry">
+                                <span class="wizzy-filters-button"></span>
+                                <span>Filters</span>
+                            </a>
+                        </div>
+                    </div>
+            {{/displayFacetsInDrawer}}
                <div class="search-filters-top-wrapper">
                    <div class="wizzy-search-filters-list-top">
                        {{#topFacets}}