0

I succesfull installed Magento2 Module Select2 Ui Component from https://github.com/weprovide/magento2-module-select2-uicomponent

I never had to use UI components. I want to active Select2 on frontend on my category page. Does anyone can help me with that ? Can I just add this Component by refercence to default.xml or default_head_blocks.xml in Magento_Theme/layout ?

    <select class="admin__control-select" data-bind="
    attr: {
        name: inputName,
        id: uid,
        disabled: disabled,
        'aria-describedby': noticeId
    },
    hasFocus: focused,
    optgroup: options,
    value: value,
    optionsCaption: caption,
    optionsValue: 'value',
    optionsText: 'label',
    select2: {}
" />

enter image description here

Thanks in advance!

0

You need to include select2.js on front-end using define or RequiredJs As sample

  • JS code

define

define(['jquery', 'Namespace_ModuleName/js/select2path'], function($){
     $('.control-select2').select2({});
});

requirejs on phtml file

require(['jquery', 'Namespace_ModuleName/js/select2path'],function($){
     $('.control-select2').select2({});
});
  • HTML code

     <select class="control-select2">
     <option>option1</option>
     </select>
    

let use WeProvide_Select2UiComponent module

  • HTML Code

      <select class="control-select2">
          <option>option1</option>
      </select>
    
  • Javascript Code

     require(['jquery', 'WeProvide_Select2UiComponent/js/select2','domReady!'],function($){
                $('.control-select2').select2({});
     });
    
  • I ve used "require(["jquery","jquery/ui","WeProvide_Select2UiComponent/js/select2","domReady!"],function($){ $('select').select2(); });" but nothing changes to select box. – maya5510 Aug 12 at 15:19
  • Did you check console error log? – HoangHieu Aug 12 at 16:40
  • I found something like this <item name="elementTmpl" xsi:type="string">Experius_FormSelectChosen/selectChosen</item> <item name="component" xsi:type="string">Experius_FormSelectChosen/js/component/select.chosen</item> How use this method ? – maya5510 Aug 12 at 16:52
  • It used for backend only, you can't apply this for Frontend. – HoangHieu Aug 13 at 2:53

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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