Magento 2: How to update custom attribute value in cart page
-
14-03-2021 - |
正しい解決策はありません
他のヒント
Here is JS script I've written for similar task. The main idea here is a post request with changed item data you have to send to default endpoint in Magento(see getServiceUrl() method). It works for sure for registered customers, please don't forget check guest customers.
- Put code below into
Vendor_Module/view/frontend/web/js/cart/options.js
and replace<YOUR INPUT SELECTOR>
with real CSS selector
define([
'jquery',
'Magento_Checkout/js/model/quote',
'mage/dataPost'], function ($, quote, dataPost) {
'use strict';
$.widget('cart.optionUpdate', {
/**
* Widget initialization
* @private
*/
_init: function () {
var self = this, value, itemId, itemData, actionDelete, qtyField,
$optionInput = $('<YOUR INPUT SELECTOR>');
$optionInput.on('change', function (event) {
if ($(this).val()) {
value = $(this).val();
actionDelete = $(this).parents('.cart.item').find('.action.action-delete').first();
qtyField = $(this).parents('.cart.item').find('input[data-role=cart-item-qty]').first();
if (actionDelete) {
itemData = actionDelete.data();
if (itemData.post && itemData.post.data && itemData.post.data.id) {
itemId = itemData.post.data.id;
if (itemId) {
self.updateItemOption({
itemId: itemId,
optionId: self.getOptionId(this),
optionValue: value,
qty: qtyField.val()
});
}
}
}
$(this).val();
}
});
},
/**
* Send update request for modified cart item
* @param {itemId, qty, optionId, optionValue} itemData
*/
updateItemOption: function (itemData) {
if (!itemData.itemId || !itemData.qty || !itemData.optionId || !itemData.optionValue) {
console.log("Invalid item data provided");
return;
}
var data = {
item: itemData.itemId,
qty: itemData.qty,
product: this.getProductId(itemData.itemId)
};
data['options['+itemData.optionId+']'] = itemData.optionValue;
dataPost().postData({
action: this.getServiceUrl(itemData.itemId),
data: data
});
},
/**
* Returns service URL depending on customer login status
* @returns {string}
*/
getServiceUrl: function (itemId) {
return "/checkout/cart/updateItemOptions/id/" + itemId;
},
/**
* Get selected option ID
* @param selectedValueElem
* @returns {*}
*/
getOptionId: function (selectedValueElem) {
var idMatchResult = $(selectedValueElem).attr('name').match(/options_group_[a-z0-9]+_\[(\d+)/i);
if (idMatchResult && idMatchResult[1]) {
return idMatchResult[1];
}
return null;
},
/**
* @param itemId
* @returns int
*/
getProductId: function (itemId) {
var quoteItems = window.checkoutConfig.quoteItemData, productId = 0;
$.each(quoteItems, function (index, item) {
if (item.item_id == itemId) {
productId = item.product_id;
}
});
return productId;
}
});
return $.cart.optionUpdate;
});
- Create template
Vendor_Module/view/frontend/templates/cart/item/options.phtml
with code:
<script type="text/x-magento-init">
{
"*": {
"Vendor_Module/js/cart/options": {}
}
}
</script>
所属していません magento.stackexchange