0

I have an html file for checkout where I want to show the widget which is coming from the database . Instead of displaying the widget it shows widget code. I have attached screenshot of the same. Thank you for the help in advance.enter image description here

<div class="store-container-inner" data-bind="visible: canVisibleBlock(), variable: isVisibleStoreContainer">
<label class="pickup-store-label" ><span id="pickup-store" data-bind="i18n: 'Select Store'"></span></label>
<select name="pickup_store"
        class="required-entry"
        datascope="shippingAddress.pickup_store"
        data-validate="{required:true}"
        data-bind="
                  options: getStoreOption(),
                  optionsValue: 'value',
                  optionsText: 'label',
                  optionsCaption: $t('Select a Store To Pickup'),
                  value: storeOptionValue,
                  event: {change: changeStore(storeOptionValue)}">
</select><br>
<!-- ko if: isVisibleStoreInformation -->
<div id="show-address">
    <div class="shipping-information-content">
        <div class="store-name">
            <strong data-bind="i18n: 'Store Name'"></strong>
            <span data-bind="i18n: storeAddress().name"></span>
        </div>
        <div class="store-address">
            <strong data-bind="i18n: 'Store Address'"></strong>
            <address>
                <span data-bind="i18n: storeAddress().street"></span>
                <br/>
                <span data-bind="i18n: storeAddress().city+','"></span>
                <span data-bind="i18n: storeAddress().zipcode"></span>
                <br/>
                <span data-bind="i18n: storeAddress().state+','"></span>
                <span data-bind="i18n: storeAddress().country"></span>
                <br/>
                <span data-bind="i18n: storeAddress().telephone"></span>
                <span data-bind="i18n: storeAddress().latitude"></span>
            </address>            
            <div class="store-map-url">
                <button type="button" class="action action-auth-toggle" data-trigger="store-description">
                    <span data-bind="i18n: 'More about store >>'"></span>
                </button>
                <!-- ko if: storeAddress().storemapurl -->
                <a target="_blank" class="" data-bind="attr: {href: storeAddress().storemapurl}"><span data-bind="i18n: 'View Store on Google Map >>'"></span></a>
                <!-- /ko -->
            </div>
            <div data-bind="mageInit: {
                'Magento_Ui/js/modal/modal':{
                    'type': 'popup',
                    'modalClass': 'store-dropdown',
                    'trigger': '[data-trigger=store-description]',
                    responsive: true,
                    innerScroll: true,
                    'responsive': true,
                    'buttons': []
                }}">
                <div class="store-popup-address">
                    <div class="store-popup-image">
                        <img data-bind="attr: {'src': storeAddress().image, 'alt': storeAddress().name }"  alt="" width="130" height="130"/>
                    </div>
                    <div class="store-popup-name">
                        <div class="store-title" data-bind="html: storeAddress().name"></div>
                        <div class="store-email"><strong><span data-bind="i18n: storeAddress().email"></span></strong></div>
                        <address>
                            <span data-bind="i18n: storeAddress().street"></span>
                            <br/>
                            <span data-bind="i18n: storeAddress().city+','"></span>
                            <span data-bind="i18n: storeAddress().zipcode"></span>
                            <br/>
                            <span data-bind="i18n: storeAddress().state+','"></span>
                            <span data-bind="i18n: storeAddress().country"></span>
                            <br/>
                            <a data-bind="attr: {'href': 'tel:' + storeAddress().telephone}, text: storeAddress().telephone" href="tel:storeAddress().telephone"><span data-bind="i18n: storeAddress().telephone"></span></a>
                            <br/>
                            <a data-bind="attr: {'href': storeAddress().websiteUrl}" target="_blank"><span>Website</span></a>
                            <span> | </span>
                            <a data-bind="attr: {'href': storeAddress().facebookUrl}" target="_blank"><span>Facebook</span></a>
                            <span> | </span>
                            <a data-bind="attr: {'href': storeAddress().twitterUrl}" target="_blank"><span>Twitter</span></a>
                        </address>
                    </div>
                </div>
                <div class="store-popup-description">
                    <div data-bind="html: storeAddress().description"></div>
                    <!-- ko if: storeAddress().storemapurl -->
                    <div class="store-map-url">
                        <a target="_blank" class="action primary" data-bind="attr: {href: storeAddress().storemapurl}"><span data-bind="i18n: 'View Store on Google Map'"></span></a>
                    </div>
                    <!-- /ko -->
                </div>
            </div>
        </div>
    </div>
</div>
<!-- /ko -->

This is the html file through which i am displaying the data.

4
  • Please show your phtml file code.
    – Msquare
    Apr 20, 2021 at 4:19
  • @Msquare I have used the html show the data
    – Max
    Apr 20, 2021 at 4:27
  • html file is connect with which phtml file ?
    – Msquare
    Apr 20, 2021 at 4:32
  • @Msquare Its not connected to any phtml file. I am fetching it directly from the databse.
    – Max
    Apr 20, 2021 at 4:35

2 Answers 2

0

For Display Type = All Product Widget

{{widget type="Magento\Catalog\Block\Product\Widget\NewWidget" 
display_type="all_products" products_count="5" template="product/widget/new/content/new_grid.phtml"}}

and

<?php echo $this->getLayout()->createBlock("Magento\Catalog\Block\Product\Widget\NewWidget")->setDisplayType("all_products")->setProductsCount("5")->setTemplate("product/widget/new/content/new_grid.phtml")->toHtml(); ?>

For Display Type = New Product Widget

{{widget type="Magento\Catalog\Block\Product\Widget\NewWidget" display_type="new_products" products_count="5" template="product/widget/new/content/new_grid.phtml"}}

and

<?php echo $this->getLayout()->createBlock("Magento\Catalog\Block\Product\Widget\NewWidget")->setDisplayType("new_products")->setProductsCount("5")->setTemplate("product/widget/new/content/new_grid.phtml")->toHtml(); ?>
1
  • render it on html and data is coming form the database
    – Max
    Apr 20, 2021 at 4:33
0

You can get dynamic content like a widget or block in an HTML template by the below steps:
STEP 1: Create a new XML file in theme named checkout_index_index.xml

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<body>
    <referenceContainer name="content">
        <block class="Magento\Framework\View\Element\Template" name="custom_text" template="Magento_Theme::block/custom_text.phtml" cacheable="false" />
    </referenceContainer>
</body>
</page>

STEP 2 : create a PHTML file in the below location: app/design/frontend/{theme_package}/{theme_name}/Magento_Theme/templates/block/custom_text.phtml

<?php $dynamicText = 'Hello There'; // you can call any block widget or dynamic text here ?>
<?php // Like in your case for call widget you can use this code
      $dynamicText = $this->getLayout()->createBlock("Magento\Catalog\Block\Product\Widget\NewWidget")->setDisplayType("all_products")->setProductsCount("5")->setTemplate("product/widget/new/content/new_grid.phtml")->toHtml(); ?>
    
<script type="text/javascript">
    window.dynamicText = "<?php echo $dynamicText ?>";
</script>

STEP 3 : Add below code in .html file else any where in .html in checkout:

<span data-bind="html: dynamicText "></span>

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.