1

I am adding categoty and its subcategory using catalog->category. Adding Category But Not visible in frontend. When I was inspect in browser it will be visible but not display in dropdown section.

1
  • Do you include the category in menu?
    – Mitali
    Oct 16, 2019 at 14:21

1 Answer 1

0

I Use admin form Category select drop down at frontend

app/code/VendorName/ModuleName/etc

module.xml

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
    <module name="VendorName_ModuleName" setup_version="1.0.0">
    </module>
</config>

we will add registration.php

app/code/VendorName/ModuleName

registration.php

<?php
\Magento\Framework\Component\ComponentRegistrar::register(
    \Magento\Framework\Component\ComponentRegistrar::MODULE,
    'VendorName_ModuleName',
    __DIR__
);

now create route file for frontend

app/code/VendorName/ModuleName/etc/frontend

routes.xml

<?xml version="1.0" ?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:App/etc/routes.xsd">
    <router id="standard">
        <route frontName="test" id="test">
            <module name="VendorName_ModuleName"/>
        </route>
    </router>
</config>

now create block which provide cetegory Option

app\code\VendorName\ModuleName\Block

Test.php

<?php

namespace VendorName\ModuleName\Block;

class Test extends \Magento\Framework\View\Element\Template
{
    protected $formKey;
    protected $_scopeConfig;
    protected $_urlBuilder;

    public function __construct(
        \Magento\Backend\Block\Template\Context $context,
        \Magento\Framework\View\Model\PageLayout\Config\BuilderInterface $pageLayoutBuilder,
        \Magento\Framework\ObjectManagerInterface $objectManager,
        array $data = []
    ) {
        $this->_objectManager = $objectManager;
        $this->formKey = $context->getFormKey();
        parent::__construct($context, $data);
    }

    public function _prepareLayout()
    {
        return parent::_prepareLayout();
    }
    public function getCategoriesTree()
    {
        $categories = $this->_objectManager->create(
            'Magento\Catalog\Ui\Component\Product\Form\Categories\Options'
        )->toOptionArray();
        return json_encode($categories);
    }
}

Now create Controller and action file

app\code\VendorName\ModuleName\Controller\Test

Index.php

<?php
namespace VendorName\ModuleName\Controller\Test;

class Index extends \Magento\Framework\App\Action\Action
{
    protected $pageFactory;

    public function __construct(
        \Magento\Framework\App\Action\Context $context,
        \Magento\Customer\Model\Session $customerSession,
        \Magento\Framework\View\Result\PageFactory $pageFactory) {
        $this->pageFactory = $pageFactory;
        $this->session = $customerSession;
        return parent::__construct($context);
    }

    public function execute()
    {
        return $this->pageFactory->create();
    }
}

now create layout file

app\code\VendorName\ModuleName\view\frontend\layout

test_test_index.xml

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <update handle="customer_account"/>
    <body>
        <referenceBlock name="page.main.title">
            <action method="setPageTitle">
                <argument translate="true" name="title" xsi:type="string">Ui Multi Select</argument>
            </action>
        </referenceBlock>
        <referenceContainer name="content">
            <block class="VendorName\ModuleName\Block\Test" name="ui_multiselect" template="test.phtml" cacheable="false"/>
        </referenceContainer>
    </body>
</page>

now create template file

app\code\VendorName\ModuleName\view\frontend\templates

test.phtml

<form action="<?php echo $block->getUrl('multiselect/manage/save', ['_secure' => $this->getRequest()->isSecure()]) ?>" enctype="multipart/form-data" method="post"  data-mage-init='{"validation":{}}'>
    <fieldset class="fieldset">
        <div class="field required">
            <label class="label"><?php echo __('Select Category') ?>:</label>
            <div class="show-select" data-bind="scope: 'customCategory'">
                <!-- ko template: getTemplate() --><!-- /ko -->
            </div>
            <script type="text/x-magento-init">
                {
                    "*": {
                        "Magento_Ui/js/core/app": {
                            "components": {
                                "customCategory": {
                                    "component": "Magento_Ui/js/form/element/ui-select",
                                    "template" : "VendorName_ModuleName/ui-select",
                                    "filterOptions": true,
                                    "levelsVisibility": "3",
                                    "multiple": true,
                                    "showCheckbox": true,
                                    "options": <?php echo $block->getCategoriesTree()?>
                                }
                            }
                        }
                    }
                }
            </script>
        </div>
    </fieldset>
</form>

now we create template for this drop- down select

app\code\VendorName\ModuleName\view\frontend\web\template

ui-select.html

<!-- ko ifnot: disableLabel -->
<label class="admin__form-field-label" data-bind="attr: {for: uid}
">
    <span translate="label"></span>
</label>
<!-- /ko -->
<div class="admin__action-multiselect-wrap action-select-wrap" tabindex="0" data-bind="
attr: {
    id: uid
},
css: {
    _active: listVisible,
    'admin__action-multiselect-tree': isTree()
},
event: {
    focusin: onFocusIn,
    focusout: onFocusOut,
    keydown: keydownSwitcher
},
outerClick: outerClick.bind($data)
">
    <!-- ko ifnot: chipsEnabled -->
    <div class="action-select admin__action-multiselect" data-role="advanced-select" data-bind="
    css: {_active: multiselectFocus},
    click: function(data, event) {
        toggleListVisible(data, event)
    }
">
        <div class="admin__action-multiselect-text" data-role="selected-option" data-bind="text: setCaption()">
        </div>
        <!-- ko foreach: { data: getSelected(), as: 'option'}  -->
        <input type="hidden" name="category_id" data-bind="
            attr: {
                id: 'wk-cat-hide'+value,
                value: value
            }
        ">
        <!-- /ko -->
    </div>
    <!-- /ko -->
    <!-- ko if: chipsEnabled -->
    <div class="action-select admin__action-multiselect" data-role="advanced-select" data-bind="
    css: {_active: multiselectFocus},
    click: function(data, event) {
        toggleListVisible(data, event)
    }
">
        <div class="admin__action-multiselect-text" data-bind="
        visible: !hasData(),
        i18n: selectedPlaceholders.defaultPlaceholder
">
        </div>
        <!-- ko foreach: { data: getSelected(), as: 'option'}  -->
        <span class="admin__action-multiselect-crumb">
            <span data-bind="text: label">
            </span>
            <button class="action-close" type="button" data-action="remove-selected-item" tabindex="-1" data-bind="click: $parent.removeSelected.bind($parent, value)
        ">
                <span class="action-close-text" translate="'Close'"></span>
            </button>
        </span>
        <!-- /ko -->
    </div>
    <!-- /ko -->
    <div class="action-menu" data-bind="css: { _active: listVisible }
">
        <!-- ko if: filterOptions -->
        <div class="admin__action-multiselect-search-wrap">
            <input class="admin__control-text admin__action-multiselect-search" data-role="advanced-select-text" type="text" data-bind="
        event: {
            keydown: filterOptionsKeydown
        },
        attr: {id: uid+2},
        valueUpdate: 'afterkeydown',
        value: filterInputValue,
        hasFocus: filterOptionsFocus
        ">
            <label class="admin__action-multiselect-search-label" data-action="advanced-select-search" data-bind="attr: {for: uid+2}
    ">
            </label>
            <div if="itemsQuantity" data-bind="text: itemsQuantity" class="admin__action-multiselect-search-count">
            </div>
        </div>
        <!-- /ko -->
        <ul class="admin__action-multiselect-menu-inner _root" data-bind="
        event: {
            mousemove: function(data, event){onMousemove($data, event)}
        }
    ">
            <!-- ko foreach: { data: options, as: 'option'}  -->
            <li class="admin__action-multiselect-menu-inner-item _root" data-bind="css: { _parent: $data.optgroup }" data-role="option-group">
                <div class="action-menu-item" data-bind="
                css: {
                    _selected: $parent.isSelected(option.value),
                    _hover: $parent.isHovered(option, $element),
                    _expended: $parent.getLevelVisibility($data),
                    _unclickable: $parent.isLabelDecoration($data),
                    _last: $parent.addLastElement($data),
                    '_with-checkbox': $parent.showCheckbox
                },
                click: function(data, event){
                    $parent.toggleOptionSelected($data, event);
                },
                clickBubble: false
        ">
                    <!-- ko if: $data.optgroup && $parent.showOpenLevelsActionIcon-->
                    <div class="admin__action-multiselect-dropdown" data-bind="
                    click: function(event){
                        $parent.openChildLevel($data, $element, event);
                    },
                    clickBubble: false
                 ">
                    </div>
                    <!-- /ko-->
                    <!--ko if: $parent.showCheckbox-->
                    <input class="admin__control-checkbox" type="checkbox" tabindex="-1" data-bind="attr: { 'checked': $parent.isSelected(option.value) }">
                    <!-- /ko-->
                    <label class="admin__action-multiselect-label">
                        <span data-bind="text: option.label"></span>
                        <span if="$parent.getPath(option)" class="admin__action-multiselect-item-path" data-bind="text: $parent.getPath(option)"></span>
                    </label>
                </div>
                <!-- ko if: $data.optgroup -->
                <!-- ko template: {name: $parent.optgroupTmpl, data: {root: $parent, current: $data}} -->
                <!-- /ko -->
                <!-- /ko-->
            </li>
            <!-- /ko -->
        </ul>
        <!-- ko if: $data.closeBtn -->
        <div class="admin__action-multiselect-actions-wrap">
            <button class="action-default" data-action="close-advanced-select" type="button" data-bind="click: outerClick">
                <span translate="closeBtnLabel"></span>
            </button>
        </div>
        <!-- /ko -->
    </div>
</div>

Now run commands

php bin/magento s:up
php bin/magento s:s:d -f
php bin/magento c:f
php bin/magento c:c 

After creating all the above steps, you called the URL as http://domainname.com/test/test/index

here you have not see proper becuse you have to add adminhtml css to your frontend after you see like this.

enter image description here Source click here

I Hope This Helps You.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.