邮件群发-邮件群发软件|邮件批量发送工具|群发邮件平台|批量邮箱发送系统公司使用KnockoutJS在Magento 2中添加数量加减按钮
Knockout是一个遵循MVVM（模型 - 视图 - 视图 - 模型）模式的javascript库，用于创建前端。您可以使用Knockout JS轻松处理复杂的数据驱动接口，并且由于它是开源的，因此可以免费使用。
Knockout JS是轻量级的，主要用在Magento 2的结帐页面。但是Knockout JS在Magento 2中实现起来有点复杂，因此，本教程将教你如何在Magento 2产品页面上中实现Knockout JS。
Magento 2在产品页面上提供了一个简单的数量输入文本，为了使客户更容易操作，您可以在Magento 2中添加增量和减量按钮。我将使用自定义模块实现它，
开始吧！
配置模块
通过在app/code/Alwayly/AddQuantityIncrement/etc中创建module.xml文件来配置模块。在其中添加以下代码：
<?xml version="1.0"?> <config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd"> <module name="Alwayly_AddQuantityIncrement" setup_version="1.0.0"></module> </config>
模块注册
现在通过在app/code/Alwayly/AddQuantityIncrement中创建registration.php来注册模块，并在其中添加以下代码：
<?php \Magento\Framework\Component\ComponentRegistrar::register( \Magento\Framework\Component\ComponentRegistrar::MODULE, 'Alwayly_AddQuantityIncrement', __DIR__ );
复制addtocart.phtml
从magento安装的根目录转到vendor/magento/module-catalog/view/frontend/templates/product/view并将addtocart.phtml复制到您自己的模块pp/code /Alwayly/AddQuantityIncrement/view/frontend/templates/catalog/product/view。该addtocart.phtml文件将是这样的：
<?php
/**
* Copyright © 2013-2017 Magento, Inc. All rights reserved.
* See COPYING.txt for license details.
*/
// @codingStandardsIgnoreFile
/** @var $block \Magento\Catalog\Block\Product\View */
?>
<?php $_product = $block->getProduct(); ?>
<?php $buttonTitle = __('Add to Cart'); ?>
<?php if ($_product->isSaleable()): ?>
<div class="box-tocart">
<div class="fieldset">
<?php if ($block->shouldRenderQuantity()): ?>
<div class="field qty">
<label class="label" for="qty"><span><?php /* @escapeNotVerified */ echo __('Qty') ?></span></label>
<div class="control">
<input type="number"
name="qty"
id="qty"
maxlength="12"
value="<?php /* @escapeNotVerified */ echo $block->getProductDefaultQty() * 1 ?>"
title="<?php /* @escapeNotVerified */ echo __('Qty') ?>" class="input-text qty"
data-validate="<?php echo $block->escapeHtml(json_encode($block->getQuantityValidators())) ?>"
/>
</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>
<?php endif; ?>
<script type="text/x-magento-init">
{
"#product_addtocart_form": {
"Magento_Catalog/product/view/validation": {
"radioCheckboxClosest": ".nested"
}
}
}
</script>
<?php if (!$block->isRedirectToCartEnabled()) : ?>
<script type="text/x-magento-init">
{
"#product_addtocart_form": {
"catalogAddToCart": {
"bindSubmit": false
}
}
}
</script>
<?php endif; ?>
编辑addtocart.phtml
在addtocart.phtml中，创建一个UI组件并对其进行初始化。要做到这一点，首先在数量的input字段上方添加以下脚本：
<script type="text/x-magento-init">
{
"*": {
"Magento_Ui/js/core/app": {
"components": {
"qty_change": {
"component": "Alwayly_AddQuantityIncrement/js/view/product/view/qty_change",
"defaultQty": <?php echo $block->getProductDefaultQty() * 1 ?>
}
}
}
}
}
</script>
现在将组件qty_change与以下前端HTML连接：
<div class="control" data-bind="scope: 'qty_change'">
<button data-bind="click: decreaseQty">-</button>
<input data-bind="value: qty()"
type="number"
name="qty"
id="qty"
maxlength="12"
title="<?php echo __('Qty') ?>"
class="input-text qty"
data-validate="<?php echo $block->escapeHtml(json_encode($block->getQuantityValidators())) ?>"
/>
<button data-bind="click: increaseQty">+</button>
</div>
Data-bind 属性：使用我们的组件qty_change的Javascript函数连接HTML。
在上面的代码中，有两个按钮，我通过使用Javascript点击事件连接到组件，将用于减少/增加数量值。最终的addtocart.phtml文件如下所示：
<?php
/**
* Copyright © 2013-2017 Magento, Inc. All rights reserved.
* See COPYING.txt for license details.
*/
// @codingStandardsIgnoreFile
/** @var $block \Magento\Catalog\Block\Product\View */
?>
<?php $_product = $block->getProduct(); ?>
<?php $buttonTitle = __('Add to Cart'); ?>
<?php if ($_product->isSaleable()): ?>
<div class="box-tocart">
<div class="fieldset">
<?php if ($block->shouldRenderQuantity()): ?>
<div class="field qty">
<label class="label" for="qty"><span><?php /* @escapeNotVerified */ echo __('Qty') ?></span></label>
<script type="text/x-magento-init">
{
"*": {
"Magento_Ui/js/core/app": {
"components": {
"qty_change": {
"component": "Alwayly_AddQuantityIncrement/js/view/product/view/qty_change",
"defaultQty": <?php echo $block->getProductDefaultQty() * 1 ?>
}
}
}
}
}
</script>
<div class="control" data-bind="scope: 'qty_change'">
<button data-bind="click: decreaseQty">-</button>
<input data-bind="value: qty()"
type="number"
name="qty"
id="qty"
maxlength="12"
title="<?php echo __('Qty') ?>"
class="input-text qty"
data-validate="<?php echo $block->escapeHtml(json_encode($block->getQuantityValidators())) ?>"
/>
<button data-bind="click: increaseQty">+</button>
</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>
<?php endif; ?>
<script type="text/x-magento-init">
{
"#product_addtocart_form": {
"Magento_Catalog/product/view/validation": {
"radioCheckboxClosest": ".nested"
}
}
}
</script>
<?php if (!$block->isRedirectToCartEnabled()) : ?>
<script type="text/x-magento-init">
{
"#product_addtocart_form": {
"catalogAddToCart": {
"bindSubmit": false
}
}
}
</script>
<?php endif; ?>
创建qty_change.js
现在在app/code/Alwayly/AddQuantityIncrement/view/frontend/web/js/view/product/view中创建qty_change.js。在其中添加以下代码：
define([
'ko',
'uiComponent'
], function (ko, Component) {
'use strict';
return Component.extend({
initialize: function () {
//initialize parent Component
this._super();
this.qty = ko.observable(this.defaultQty);
},
decreaseQty: function() {
var newQty = this.qty() - 1;
if (newQty < 1)
{
newQty = 1;
}
this.qty(newQty);
},
increaseQty: function() {
var newQty = this.qty() + 1;
this.qty(newQty);
}
});
});
创建catalog_product_view.xml
最后，只需在app/code/Alwayly/AddQuantityIncrement/view/frontend/layout中创建catalog_product_view.xml即可。在其中添加以下代码：
<?xml version="1.0"?> <page layout="1column" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd"> <body> <referenceBlock name="product.info.addtocart"> <action method="setTemplate"> <argument name="template" xsi:type="string">Alwayly_AddQuantityIncrement::catalog/product/view/addtocart.phtml</argument> </action> </referenceBlock> <referenceBlock name="product.info.addtocart.additional"> <action method="setTemplate"> <argument name="template" xsi:type="string">Alwayly_AddQuantityIncrement::catalog/product/view/addtocart.phtml</argument> </action> </referenceBlock> </body> </page>
上面代码的目的是更改默认的addtocart.phtml模板。
运行命令
使用SSH终端转到magento安装的根目录，然后运行以下命令：
rm -rf var/di var/generation var/cache/* var/log/* var/page_cache/* php bin/magento module:enable Alwayly_AddQuantityIncrement php bin/magento setup:upgrade php bin/magento setup:di:compile php bin/magento indexer:reindex php bin/magento cache:clean php bin/magento cache:flush
现在转到产品页面，您将看到结果：
Note:我们已在Magento 2.3上测试了上述代码.
版权声明：本站内容源自互联网，如有内容侵犯了你的权益，请联系删除相关内容。
相关文章
