Question

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

update custom attribute value

No correct solution

OTHER TIPS

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>
Licensed under: CC-BY-SA with attribution
Not affiliated with magento.stackexchange
scroll top