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>
1 Answer 1
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.
-
This method works. I tried to replace
mageInitwithdata-mage-mage-initattribute but that didn't work. Where did you find this piece of code?Nahid– Nahid2018年06月23日 12:29:48 +00:00Commented 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
phtmlorhtmlfiles. There is documentation for it now... devdocs.magento.com/guides/v2.2/ui_comp_guide/concepts/…Holly– Holly2018年07月31日 10:30:37 +00:00Commented Jul 31, 2018 at 10:30
Explore related questions
See similar questions with these tags.