0

I want to get product type in magento 2 minicart so as to apply some conditions over the look and feel of item in minicart.

The file is located here : /var/www/html/project/app/design/frontend/Solwin/freego_child/Magento_Checkout/web/template/minicart/item/default.html

<!--
/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */
-->
<li class="item product product-item" data-role="product-item">
    <div class="product">
        <!-- ko if: product_has_url -->
        <a data-bind="attr: {href: product_url, title: product_name}" tabindex="-1" class="product-item-photo">
            <!-- ko foreach: $parent.getRegion('itemImage') -->
                <!-- ko template: {name: getTemplate(), data: item.product_image} --><!-- /ko -->
            <!-- /ko -->
        </a>
        <!-- /ko -->
        <!-- ko ifnot: product_has_url -->
        <span class="product-item-photo">
            <!-- ko foreach: $parent.getRegion('itemImage') -->
                <!-- ko template: {name: getTemplate(), data: item.product_image} --><!-- /ko -->
            <!-- /ko -->
        </span>
        <!-- /ko -->

        <div class="product-item-details">
            <strong class="product-item-name">
                <!-- ko if: product_has_url -->
                <a data-bind="attr: {href: product_url}, html: product_name"></a>
                <!-- /ko -->
                <!-- ko ifnot: product_has_url -->
                    <!-- ko text: product_name --><!-- /ko -->
                <!-- /ko -->
            </strong>

            <!-- ko if: options.length -->
            <div class="product options" data-mage-init='{"collapsible":{"openedState": "active", "saveState": false}}'>
                <span data-role="title" class="toggle"><!-- ko i18n: 'See Details' --><!-- /ko --></span>

                <div data-role="content" class="content">
                    <strong class="subtitle"><!-- ko i18n: 'Options Details' --><!-- /ko --></strong>
                    <dl class="product options list">
                        <!-- ko foreach: { data: options, as: 'option' } -->
                        <dt class="label"><!-- ko text: option.label --><!-- /ko --></dt>
                        <dd class="values">
                            <!-- ko if: Array.isArray(option.value) -->
                                <span data-bind="html: option.value.join('<br>')"></span>
                            <!-- /ko -->
                            <!-- ko if: (!Array.isArray(option.value) && option.option_type == 'file') -->
                                <span data-bind="html: option.value"></span>
                            <!-- /ko -->
                            <!-- ko if: (!Array.isArray(option.value) && option.option_type != 'file') -->
                                <span data-bind="text: option.value"></span>
                            <!-- /ko -->
                        </dd>
                        <!-- /ko -->
                    </dl>
                </div>
            </div>
            <!-- /ko -->

            <div class="product-item-pricing">
                <!-- ko if: canApplyMsrp -->
                
                <div class="details-map">
                    <span class="label" data-bind="i18n: 'Price'"></span>
                    <span class="value" data-bind="i18n: 'See price before order confirmation.'"></span>
                </div>
                <!-- /ko -->
                <!-- ko ifnot: canApplyMsrp -->
                <!-- ko foreach: $parent.getRegion('priceSidebar') -->
                <!-- ko template: {name: getTemplate(), data: item.product_price, as: 'price'} --><!-- /ko -->
                <!-- /ko -->
                <!-- /ko -->
                
                <div class="details-qty qty">
                    <label class="label" data-bind="i18n: 'Qty', attr: {
                    for: 'cart-item-'+item_id+'-qty'}"></label>
                    <div class="more">+</div>
                        <input data-bind="attr: {
                        id: 'cart-item-'+item_id+'-qty',
                        'data-cart-item': item_id,
                        'data-item-qty': qty,
                        'data-cart-item-id': product_sku
                        }, value: qty"
                        type="number"
                        size="4"
                        class="item-qty cart-item-qty">
                    
                    <div class="less">-</div>
                    <button data-bind="attr: {
                    id: 'update-cart-item-'+item_id,
                    'data-cart-item': item_id,
                    title: $t('Update')
                    }"
                    class="update-cart-item"
                    style="display: none">
                        <span data-bind="i18n: 'Update'"></span>
                    </button>
                </div>
            </div>



            <div class="product actions">
                <!-- ko if: is_visible_in_site_visibility -->
                <div class="primary">
                    <a data-bind="attr: {href: configure_url, title: $t('Edit item')}" class="action edit">
                        <span data-bind="i18n: 'Edit'"></span>
                    </a>
                </div>
                <!-- /ko -->
                <div class="secondary">
                    <a href="#" data-bind="attr: {'data-cart-item': item_id, title: $t('Remove item')}"
                       class="action delete">
                        <span data-bind="i18n: 'Remove'"></span>
                    </a>
                </div>
            </div>
        </div>
    </div>
    <div class="message notice" if="$data.message">
        <div data-bind="text: $data.message"></div>
    </div>
</li>

And the code for minicart.phtml is

<?php
/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */

/** @var $block \Magento\Checkout\Block\Cart\Sidebar */
/** @var \Magento\Framework\View\Helper\SecureHtmlRenderer $secureRenderer */
?>

<div data-block="minicart" class="minicart-wrapper">
    <a class="action showcart" href="<?= $block->escapeUrl($block->getShoppingCartUrl()) ?>"
       data-bind="scope: 'minicart_content'">
        <span class="text"><?= $block->escapeHtml(__('My Cart')) ?></span>
        <span class="counter qty empty"
              data-bind="css: { empty: !!getCartParam('summary_count') == false && !isLoading() },
               blockLoader: isLoading">
            <span class="counter-number"><!-- ko text: getCartParam('summary_count') --><!-- /ko --></span>
            <span class="counter-label">
            <!-- ko if: getCartParam('summary_count') -->
                <!-- ko text: getCartParam('summary_count') --><!-- /ko -->
                <!-- ko i18n: 'items' --><!-- /ko -->
            <!-- /ko -->
            </span>
        </span>
    </a>
    <?php if ($block->getIsNeedToDisplaySideBar()):?>
        <div class="block block-minicart"
             data-role="dropdownDialog"
             data-mage-init='{"dropdownDialog":{
                "appendTo":"[data-block=minicart]",
                "triggerTarget":".showcart",
                "timeout": "2000",
                "closeOnMouseLeave": false,
                "closeOnEscape": true,
                "triggerClass":"active",
                "parentClass":"active",
                "buttons":[]}}'>
            <div id="minicart-content-wrapper" data-bind="scope: 'minicart_content'">
                <!-- ko template: getTemplate() --><!-- /ko -->
            </div>
            <?= $block->getChildHtml('minicart.addons') ?>
        </div>
    <?php else: ?>
        <?php $scriptString = <<<script
            require(['jquery'], function ($) {
                $('a.action.showcart').click(function() {
                    $(document.body).trigger('processStart');
                });
            });
script;
        ?>
        <?= /* @noEscape */ $secureRenderer->renderTag('script', [], $scriptString, false); ?>
    <?php endif ?>
    <?= /* @noEscape */ $secureRenderer->renderTag('script', [], 'window.checkout = ' .
     /* @noEscape */ $block->getSerializedConfig(), false); ?>
    <script type="text/x-magento-init">
    {
        "[data-block='minicart']": {
            "Magento_Ui/js/core/app": <?= /* @noEscape */ $block->getJsLayout() ?>
        },
        "*": {
            "Magento_Ui/js/block-loader": "<?= $block->escapeJs(
                $block->escapeUrl($block->getViewFileUrl('images/loader-1.gif'))
            ) ?>"
        }
    }
    </script>
</div>

<script type="text/javascript">
     require(['jquery'], function($){ 
        $(document).ready(function(){
            $("[data-block='minicart']").on("dropdowndialogopen", (e) => {
                e.preventDefault();
                $(".block-minicart").hide();
                //$(".block-minicart").slideDown("slow");       
                $(".block-minicart").show("slide", { direction: "right" }, 500);          
            });
            $("[data-block='minicart']").on("dropdowndialogclose", (e) => {
                e.preventDefault();
                $(".mage-dropdown-dialog").show();
                //$('.block-minicart').slideUp("slow");
                $('.block-minicart').hide("slide", { direction: "right" }, 500);
            });


            $('body').on("click",".more, .less",function(){
                var obj = $(this);
                var currentQty = obj.siblings('.cart-item-qty').val();
                var iid = obj.siblings('.update-cart-item').attr('data-cart-item');

                if(obj.hasClass('more')){
                    var newAdd = parseInt(currentQty)+parseInt(1);
                    obj.siblings('.cart-item-qty').val(newAdd);
                    obj.siblings('.cart-item-qty').attr('data-item-qty',newAdd);
                    //$('#update-cart-item-'+iid).click();
                    //$('.update-cart-item').show();
                    $('.update-cart-item').trigger('click');
                } else {
                    if(parseInt(currentQty) > 1){
                        var newAdd = parseInt(currentQty)-parseInt(1);
                        obj.siblings('.cart-item-qty').val(newAdd); 
                        obj.siblings('.cart-item-qty').attr('data-item-qty',newAdd);
                        //$('#update-cart-item-'+iid).click();
                        //$('.update-cart-item').show();
                        $('.update-cart-item').trigger('click');
                    }
                }
            });

        });
 });
</script>

1 Answer 1

0

At default.html, you can get product type by product_type.

<!-- ko text: product_type --><!-- /ko -->

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.