0

Magento 2 How to update custom attribute value in cart page - Kindly find the below screen shot.

update custom attribute value

0

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.

  1. 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;
});
  1. 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>
| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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