Magento 2 - front-end selection from database

magento.stackexchange https://magento.stackexchange.com/questions/139485

Question

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?

Was it helpful?

Solution

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>
Licensed under: CC-BY-SA with attribution
Not affiliated with magento.stackexchange
scroll top