Skip to content

Why does my code affect certain parts of the site but not the Mini cart?

Im completely new to Magento and im working on a school project and added two buttons on my product pages with some code. These buttons work well they let people put products in the mini-cart without any problems. Here is the code i used

var config = {
    map: {
        '*': {
            'qty-counter': 'Magento_Catalog/js/qty-counter'
        }
    }
};

addtocart.phtml

<div class="box-tocart">
    <div class="fieldset">
        <?php if ($block->shouldRenderQuantity()): ?>
        <div class="field qty">
            <label class="label" for="qty"><span><?php /* @escapeNotVerified */ echo __('Quantity:') ?></span></label>
            <div id="custom-qty" class="control" data-bind="scope: 'qty-counter'">
                <!-- ko template: getTemplate() --><!-- /ko -->
                <script type="text/x-magento-init">
                    {
                        "#custom-qty": {
                            "Magento_Ui/js/core/app": {
                                "components": {
                                    "qty-counter": {
                                        "component": "qty-counter",
                                        "config": {
                                            "qty": <?php echo $block->getProductDefaultQty() * 1 ?>,
                                            "dataValidate": <?php echo json_encode($block->getQuantityValidators()) ?>
                                        }
                                    }
                                 }
                            }
                        }
                    }
                </script>
            </div>
        </div>
        <?php endif; ?>
        <div class="actions">
            <button type="submit"
                    title="<?php /* @escapeNotVerified */ echo $buttonTitle ?>"
                    class="action primary tocart"
                    id="product-addtocart-button">
                <span><?php /* @escapeNotVerified */ echo $buttonTitle ?></span>
            </button>
            <?php echo $block->getChildHtml('', true) ?>
        </div>
    </div>
</div>

qty-counter.js

'use strict';
define([
    'ko',
    'uiElement'
], function (ko, Element) {
    return Element.extend({
        defaults: {
            template: 'Magento_Catalog/input-counter'
        },
        initObservable: function () {
            this._super()
                .observe('qty');
            return this;
        },
        getDataValidator: function() {
            return JSON.stringify(this.dataValidate);
        },
        decreaseQty: function() {
            var qty;
            if (this.qty() > 1) {
                qty = this.qty() - 1;
            } else {
                qty = 1;
            }
            this.qty(qty);
        },
        increaseQty: function() {
            var qty = this.qty() + 1;
            this.qty(qty);
        }
    });
});

input-counter.html

<div class="input-group">
    <span class="input-group__addon">
        <button click="decreaseQty" class="input-group__button input-group__button--decrease">
            <span class="input-group__icon input-group__icon--decrease"></span>
        </button>
    </span>
    <input data-bind="value: qty(), attr: {'data-validate': getDataValidator(), 'title': $t('Qty')}"
           type="number"
           name="qty"
           id="qty"
           maxlength="12"
           class="input-group__input" />
    <span class="input-group__addon">
        <button click="increaseQty" class="input-group__button input-group__button--increase">
            <span class="input-group__icon input-group__icon--increase"></span>
        </button>
    </span>
</div>

enter image description here

But, when i try to put the same buttons inside the mini cart, i cant really see them at all. Its like they just dont show up, no matter what i do.

Just to clearify, i try to add some code inside Magento_Checkout, just to display it but nothing happen.

This is some code that i add to the Magento_Checkout

default.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="MagentoFrameworkViewElementTemplate" name="custom.text" template="Magento_Checkout::test.phtml"/>
    </referenceContainer>
</body>

test.phtml

<div id="custom.text">
<p>Just a test to see if it works</p>

qty-minicart.js

define([
       'uiComponent',
       'ko'
   ], function (Component, ko) {
'use strict';
return Component.extend({
                            defaults: {
                                template: 'Magento_Checkout/web/template/minicart/item/default',
                                qty: ko.observable(1)
                            },
                            initialize: function () {
                                this._super();

                            },
                            increaseQty: function () {
                                this.qty(this.qty() + 1);
                            },
                            decreaseQty: function () {
                                if (this.qty() > 1) {
                                    this.qty(this.qty() - 1);
                                }
                            }
                        });

});

default.html

<!--

/**

  • Copyright © Magento, Inc. All rights reserved.
  • See COPYING.txt for license details.
    */
    –>
    <div class="product-item-details">
        <strong class="product-item-name">
            <!-- ko if: product_has_url -->
            <a data-bind="attr: {href: product_url}, html: $parent.getProductNameUnsanitizedHtml(product_name)"></a>
            <!-- /ko -->
            <!-- ko ifnot: product_has_url -->
            <span data-bind="html: $parent.getProductNameUnsanitizedHtml(product_name)"></span>
            <!-- /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: $parents[1].getOptionValueUnsanitizedHtml(option.value.join('<br>'))"></span>
                        <!-- /ko -->
                        <!-- ko if: (!Array.isArray(option.value) && ['file', 'html'].includes(option.option_type)) -->
                        <span data-bind="html: $parents[1].getOptionValueUnsanitizedHtml(option.value)"></span>
                        <!-- /ko -->
                        <!-- ko if: (!Array.isArray(option.value) && !['file', 'html'].includes(option.option_type)) -->
                        <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 -->
            <h1>dfjsdkfgjkldsfsd</h1>
            <div class="details-qty qty">
                <label class="label" data-bind="i18n: 'Qty', attr: {
                       for: 'cart-item-'+item_id+'-qty'}"></label>
                <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"
                       min="0"
                       size="4"
                       class="item-qty cart-item-qty">
                <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>

enter image description here

I’ve asked some friends to help, but no one could help. This project is for my class, and I really want to get it right.

Does anyone know why this is happening? Or how to make the buttons show up in the mini cart too?