magento 211 自定义 js

requirejs-config.js

var config = {
    map: {
        '*': {
            compareList:            'Magento_Catalog/js/list',
            relatedProducts:        'Magento_Catalog/js/related-products',
            upsellProducts:          'Magento_Catalog/js/upsell-products',
            productListToolbarForm:  'Magento_Catalog/js/product/list/toolbar',
            catalogGallery:          'Magento_Catalog/js/gallery',
            priceBox:                'Magento_Catalog/js/price-box',
            priceOptionDate:        'Magento_Catalog/js/price-option-date',
            priceOptionFile:        'Magento_Catalog/js/price-option-file',
            priceOptions:            'Magento_Catalog/js/price-options',
            priceUtils:              'Magento_Catalog/js/price-utils',
            catalogAddToCart:        'Magento_Catalog/js/catalog-add-to-cart',
            hjtDemo:                'Magento_Catalog/js/hjtdemo'
        }
    }

};

attribute.phtml

<?php
$_helper  =  $this ->helper( 'Magento\Catalog\Helper\Output' );
$_product  =  $block ->getProduct();
$_call  =  $block ->getAtCall();
$_code  =  $block ->getAtCode();
$_className  =  $block ->getCssClass();
$_attributeLabel  =  $block ->getAtLabel();
$_attributeType  =  $block ->getAtType();
$_attributeAddAttribute  =  $block ->getAddAttribute();

$renderLabel  =  true ;
// if defined as 'none' in layout, do not render
if  ( $_attributeLabel  ==  'none' ) {
      $renderLabel  =  false ;
}

if  ( $_attributeLabel  &&  $_attributeLabel  ==  'default' ) {
      $_attributeLabel  =  $_product ->getResource()->getAttribute( $_code )->getStoreLabel();
}
if  ( $_attributeType  &&  $_attributeType  ==  'text' ) {
      $_attributeValue  = ( $_helper ->productAttribute( $_product ,  $_product -> $_call (),  $_code )) ?  $_product ->getAttributeText( $_code ) :  '' ;
}  else  {
      $_attributeValue  =  $_helper ->productAttribute( $_product ,  $_product -> $_call (),  $_code );
}
?>

<div class="maincontainer" data-mage-init='{"hjtDemo":{}}' >
    <input type="button" value="BUTTOM" />
</div>

<?php if  ( $_attributeValue ):  ?>
< div  class= "product attribute  <?=  /*  @escapeNotVerified  */  $_className  ?> " >
      <?php if  ( $renderLabel ):  ?> < strong  class= "type" > <?=  /*  @escapeNotVerified  */  $_attributeLabel  ?> </ strong > <?php endif ;  ?>
      < div  class= "value"  <?=  /*  @escapeNotVerified  */  $_attributeAddAttribute  ?> > <?=  /*  @escapeNotVerified  */  $_attributeValue  ?> </ div >
</ div >

<?php endif; ?>

<script type="text/x-magento-init">
    {
        ".maincontainer": {
            "hjtDemo": {}
        }
    }
</script>

vendor\magento\module-catalog\view\frontend\web\hjtdemo.js

define([
    'jquery',
    'jquery/ui'
], function ($) {
    'use strict';

    $.widget('mage.hjtDemo', {
        //默认参数
        options: {
        },
        //初始化，控件生命周期内只运行一次
        _init: function () {
            $(this.element[0]).find('input:button').on('click', function (jevent) {
                alert("按钮!");
            });
        },
       
    });

    return $.mage.hjtDemo;
});