2

I can not figure out how can i add jQuery-ui accordion to the checkout page block that this sample module, what is made by @sohelrana09, creates?

.../web/template/checkout/shipping/additional-block.html

<div data-bind="visible: canVisibleBlock">
    <div id="accordion">
        <h3>Section 1</h3>
        <div><p>Mauris mauris ante</p></div>
        <h3>Section 2</h3>
        <div><p>Sed non urna.</p></div>
    </div>
    <script>
        require([
            'jquery', 'jquery/ui'],function ($, accordion) {
      $(document).ready(function(){//
  });
setTimeout(function(){
$(window).load(function(){ 
            $("#accordion").accordion({
                heightStyle: "content"
            });
    });}, 2000);
});    
    </script>
</div>

Reading Magento 2 documentation i know that magento 2 does not contain jQuery ui styles locally. Because of that i created custom css where i dropped accordion styling .css fail content. I added stylesheet to checkout_index_index.xml file head section.

I can not use require(['jQuery','tabs'].. in script section of html file because it gets the css file though the jQuery page url that does not use https. I also have found this magento.stackexchange post but don't know if and how it would help me.

What i added to .../frontend/layout/checkout_index_index.xml file:

<head>
    <css src="SR_AdditionalShippingBlock::css/accordion.css"/>
</head>
Improve this question

1 Answer 1

Reset to default
3

working solution:

<div data-bind="visible: canVisibleBlock, mageInit: {'accordion':{'openedState': 'active', 'collapsible': true, 'active': [1,4], 'multipleCollapsible': true}} ">
    <div data-role="collapsible"  >
        <div data-role="title">Show hidden</div>
        <div data-role="content">
            The Magento collapsible widget converts a header/content pair into an accordion, where the content is collapsed or expanded on the header click.
            Unlike the accordion widget is that collapsible is initialized for one title/content pair, while accordion can be initialized for a set of title/contents pairs.
        </div>
    </div>
    <div data-role="collapsible"  >
        <div data-role="title">Show hidden</div>
        <div data-role="content">
            The Magento collapsible widget converts a header/content pair into an accordion, where the content is collapsed or expanded on the header click.
            Unlike the accordion widget is that collapsible is initialized for one title/content pair, while accordion can be initialized for a set of title/contents pairs.
        </div>
    </div>
</div>
<br/>

PS: I don't know exactly what mageInit does and have not found anything about it when i searched. Probably it is data-mage-init.

Improve this answer
2
  • This method works. I tried to replace mageInit with data-mage-mage-init attribute but that didn't work. Where did you find this piece of code?
    – Nahid
    Jun 23, 2018 at 12:29
  • Interesting, I see it's used throughout the core, anywhere that's bound to a Magento_Ui component in either phtml or html files. There is documentation for it now... devdocs.magento.com/guides/v2.2/ui_comp_guide/concepts/…
    – Holly
    Jul 31, 2018 at 10:30

Your Answer

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

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