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>
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>
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?