0

I want to add drop-down(selection) to front-end checkout page. The options must come from database because the data is from third-party and might change.

What i have so far: From magento devdocs i have understand i need to use "Dynamically defined forms" and knockoutJs 'options' => [..] for that. Is it correct?

I thought that maybe it is possible to run php script that gets the array like in backend selection can be done. But i do not know how can i get php methods value(returned array) in js page what is using magento devdocs example. Or can i use phtml or php in frontend instead to create drop-down?

  • in which section you want to add dropdown ?, shipping address or shipping method. – Technocracker Oct 5 '16 at 11:49
  • In shipping method section. Thanks to #Jignesh Khunt i found another user who had same problem but the question has not been answered link – user3748173 Oct 5 '16 at 13:49
2

Try this:

Create Following file in your module

file path : app/code/Vendor/Module/view/frontend/layout/checkout_index_index.xml

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" xsi:noNamespaceSchemaLocation="../../../../../../../lib/internal/Magento/Framework/View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceContainer name="content">
            <block class="Vendor\Module\Block\Shipping" name="checkout.dropdown" after="checkout.root" cacheable="true" template="Vendor_Module::shipping.phtml"></block>
        </referenceContainer> 
    </body>
</page>

Create file for your Block: Vendor\Module\Block\Shipping.php

Template file: app/code/Vendor/Module/view/frontend/templates/shipping.phtml

<div id="store-container-main" style="display: none">
    //Write your code here.
</div>

<script type="text/javascript">

    require(['jquery'], function ($) {

        var initMyLib = function () {
            if (jQuery('#checkout-shipping-method-load').length) {

                jQuery('.table-checkout-shipping-method').after("<tr class='row'><td colspan='4'>" + jQuery("#store-container-main").html() + "</td></tr>");
                jQuery("#store-container-main").html("");
            } else {
                setTimeout(initMyLib, 2000);
            }
        }
        initMyLib(); //-> initMyLib is undefined
    });
</script>
| improve this answer | |
  • Thanks @Jignesh Khunt. Could you please explain why the jquery code is necessary in the shipping.phtml file. – user3748173 Oct 8 '16 at 18:35
  • To add your html in shipping method section. – Technocracker Oct 8 '16 at 18:43

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.