1

If I have a configurable product and I select color red, then how can I get the alert- id of that virtual product that has been selected?

I would need to do this each time when a new color is selected on the Wishlist page to get the id of the new selected virtual product.

custom.js

define([
    'jquery',
    'mage/mage',
    'mage/url'
], function ($,_, url) {
    'use strict';
    $.widget('ajaxcart.customWishlist', {
        options: {
            bindSubmit: true,
            addToCart: '[data-role=to-cart]',
            dataAttribute: 'item-id',
            dataAttributeId: 'product-id',          
            dataAttributeUrl: 'url',
            TypeAttribute: 'product-type',
            nameFormat: 'Size[{0}]',
            colorFormat: 'Color[{0}]',
            size: '',
            color: '',
            producttype: '',
            productId: '',
            url: '',
            configUrl: '',
            checkoutUrl: ''
        },
        /**
         * Uses Magento's validation widget for the form object.
         * @private
         */
        _create: function () {

            if (this.options.bindSubmit) {
                this._bindSubmit();
            }
        },
        _bindSubmit: function () {
            var self = this;

            this.element.on('click', "#wishlist-cartsubmit", $.proxy(this._beforeAddToCart, this))
        },
        submitHandler: function (elem) {
            var self = this;

            var size = this.options.size;
            var color = this.options.color;
            var producttype = this.options.producttype;

            if (producttype === 'configurable')
            {
                var productid = this.options.productId;
                var configlink = this.options.configUrl;

                var checkouturl = this.options.checkoutUrl;
                $.ajax({
                    url: configlink,
                    type: "POST",
                    datatype: "json",
                    data: {product: productid, size: size, color: color},
                    success: function (response) {
                         window.location =  checkouturl;


                    }
                });
            }
            if (producttype === 'simple') {

                var urllink = this.options.url;
                console.log(urllink);
                var obj = urllink;
                var action = obj.action;
                var dataobj = obj.data;
                var itemid = dataobj.item;
                var qty = dataobj.qty;
                var uenc = dataobj.uenc;
                 var checkouturl = this.options.checkoutUrl;
                var formKey = jQuery("input[name='form_key']").val();
                $.ajax({
                    url: action,
                    data: {item: itemid, qty: qty, uenc: uenc, form_key: formKey},
                    type: 'post',
                    dataType: 'json',
                    success: function (response) {
                      window.location = checkouturl;

                    }

                });
            }

        },
        _beforeAddToCart: function (event) {
            var self = this;
            var elem = $(event.currentTarget),
                    productType = elem.data(this.options.TypeAttribute);

            this.options.producttype = productType;
            if (productType == "configurable")
            {
                alert("config");
                var productId = elem.data(this.options.dataAttributeId)
                this.options.productId = productId;

                //var itemId = elem.data(this.options.dataAttribute),
                       // sizeName = $.validator.format(this.options.nameFormat, itemId),
                        //sizeValue = elem.parents().find('[name="' + sizeName + '"]').val();

                //this.options.size = sizeValue;
                var item = elem.data(this.options.dataAttribute),
                        colorName = $.validator.format(this.options.colorFormat, item),                        
                        colorValue = elem.parents().find('[name="' + colorName + '"]').val();


                this.options.color = colorValue;
            }
            if (productType == "simple")
            {
                var dataurl = elem.data(this.options.dataAttributeUrl)
                this.options.url = dataurl;
                alert(this.options.url);
            }
            self.submitHandler($(this));
        }

    });
    return $.ajaxcart.customWishlist;
});

Thanks!

1

You can add following js Code in bottom of this file app/design/frontend/[your_theme_package]/[your_theme]/Magento_ConfigurableProduct/templates/product/view/type/options/configurable.phtml

require(["jquery"], function(jQuery) {
  jQuery(".product-options-wrapper select[id^='attribute']").last().on('change', function() {
      setTimeout(function (){
        simpleId=jQuery("input[name=selected_configurable_option]").val();
        alert(simpleId);
      }, 500); 
  }); });

And Clear cache and check. Please look at this screenshot. It works for me. enter image description here

  • But i want this alert in wishlist page ....If any idea – Mano M Jan 3 '18 at 10:19

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.