0

I have add accordion widget to Onestep Checkout following this guide http://devdocs.magento.com/guides/v2.0/javascript-dev-guide/widgets/widget_accordion.html but it does not works

    <div id="shipping" class="checkout-shipping-address">
    <div class="step-title" data-role="collapsible">
        <div data-role="trigger">
            <i class="fa fa-home"></i>
             <span>Indirizzo di Spedizione</span>
        </div>
    </div>
    <div id="checkout-step-shipping"
         class="step-content"
         data-role="content">

        <!-- ko if: (!quoteIsVirtual) -->
            <!-- ko foreach: getRegion('customer-email') -->
                <!-- ko template: getTemplate() --><!-- /ko -->
            <!--/ko-->
        <!--/ko-->

        <!-- ko foreach: getRegion('address-list') -->
        <!-- ko template: getTemplate() --><!-- /ko -->
        <!--/ko-->

        <!-- ko foreach: getRegion('address-list-additional-addresses') -->
        <!-- ko template: getTemplate() --><!-- /ko -->
        <!--/ko-->

        <!-- Address form pop up -->
        <!-- ko if: (!isFormInline) -->
        <button type="button"
                data-bind="click: showFormPopUp, visible: !isNewAddressAdded()"
                class="action action-show-popup">
            <span data-bind="i18n: 'New Address'"></span></button>
        <div id="opc-new-shipping-address" data-bind="visible: isFormPopUpVisible()">
            <!-- ko template: 'Mageplaza_Osc/container/address/shipping/form' --><!-- /ko -->
        </div>
        <!-- /ko -->

        <!-- ko foreach: getRegion('before-form') -->
        <!-- ko template: getTemplate() --><!-- /ko -->
        <!--/ko-->

        <!-- Inline address form -->
        <!-- ko if: (isFormInline) -->
        <!-- ko template: 'Mageplaza_Osc/container/address/shipping/form' --><!-- /ko -->
        <!-- /ko -->

        <!-- ko if: (!isCustomerLoggedIn() && !quoteIsVirtual) -->
            <!-- ko foreach: getRegion('customer-email') -->
                <!-- ko template: 'Mageplaza_Osc/container/address/billing/create' --><!-- /ko -->
            <!--/ko-->
        <!--/ko-->

        <div class="mp-clear"></div>

        <!-- ko scope: 'checkout.steps.shipping-step.billingAddress' -->
            <!-- ko template: 'Mageplaza_Osc/container/address/billing/checkbox' --><!-- /ko -->
        <!--/ko-->

        <div class="mp-clear"></div>
    </div>
</div>
<script>
        require([
            'jquery',
            'accordion'], function ($) {
            $("#shipping").accordion();
        });
    </script>
0

Not sure what your issue is, do you have any console errors?

Try replacing your JS with this:

require([
    'jquery',
    'accordion',
    'domReady!'], function ($, accordion, doc) {
            $("#shipping").accordion();
});

This will ensure it's only initialised once the dom is ready.

  • thanks a lot but it does not works anymore. No console errors – Altravista Oct 18 '17 at 13:59
  • Is your code definitely being rendered, if you add a console log above the require call does it show? – Ben Crook Oct 18 '17 at 14:00
  • no console does not print log. really strange – Altravista Oct 18 '17 at 14:11
  • It sounds like your code may be cached, have you tried deploying static content again, clearing Magento and your browser cache. – Ben Crook Oct 19 '17 at 6:33
  • i'm working on dev mode script is correctly printed in html and updated. another strange thing is that also a requirejs custom script in javascript does not work but if i copy and past it on console it works fine. also tried with domReady! on define – Altravista Oct 19 '17 at 13:05

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.