Magento 2: Get product custom attribute value in custom js

Question

Hi is it possible to get product custom attribute value in JS? I am getting the product id in JS but I am not able to get the product custom attribute value.

Any help would be appreciated. Thank you

Answer 1

You can place this JS code anywhere to product page:

<script type=""text/javascript"">
    var article_link = ""<?php echo $product->getArticleLink() ?>"";
</script>

Answer 2

Method # 02

1)Create .phtml file in your directory with code:

<script type="text/x-magento-init">
    {
        "*": {
            "Magento_Catalog/js/options": {
                "isSortable":  <?php echo (int)(!$block->getReadOnly() && !$block->canManageOptionDefaultOnly()) ?>
            }
        }
    }
   </script>

2)Create js file and paste this code :

define([
'jquery',
'mage/template',
'uiRegistry',
'jquery/ui',
'prototype'
], function (jQuery, mageTemplate, rg) {
'use strict';

return function (config) {
 if (config.isSortable) {
    //do something
 }
}
});

Answer 3

1)app/code/Vendor/Module/etc/frontend/di.xml

<?xml version="1.0" encoding="UTF-8"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
    <type name="Magento\Checkout\Model\CompositeConfigProvider">
        <arguments>
            <argument name="configProviders" xsi:type="array">
                <item name="checkout_config_custom_data" xsi:type="object">Anshu\Custom\Model\CustomConfigProvider</item>
            </argument>
        </arguments>
    </type>
</config>

2)app/code/Vendor/Module/Model/CustomConfigProvider.php

<?php
namespace Vendor\Module\Model;

use Magento\Checkout\Model\ConfigProviderInterface;

class CustomConfigProvider implements ConfigProviderInterface
{       
    public function getCustomAttribute()
    {
        //write code for getting custom product attribute here... 
    }
}

3)app/code/Vendor/Module/view/frontend/web/js/custom.js

define([
    'uiComponent',
    'jquery'
], function (Component, $) {
    'use strict';

    return Component.extend({
        defaults: {
            template: 'Vendor_Custom/custom'
        },

        getCustomData: function () {
            var customData = $.parseJSON(window.checkoutConfig.customData);

            return customData;
        }
    });
});

4)run the commands and check the output