0

how can I add script for Magento_Checkout/web/template/minicart/item/default.html file? I have to add data-bind="click: {}" to the product, but I don't know where I should place my function? I tried in minicart.js but it doesn't work.

Example.

<!-- ko if: product_has_url -->
    <div data-bind="attr: {title: product_name}, event: { click: function() { customFunc() } }" tabindex="-1" class="product-item-photo">
    </div>
<!-- /ko -->

I need to pass product data as a function parameter from this file, so it can't be global script.

SOLVED: https://magento.stackexchange.com/a/355474/103513

Improve this question

2 Answers 2

Reset to default
1

Please consider this might not be the optimal solution but here is a way

Extending the default template

app/design/frontend/VENDOR_THEME/default/Magento_Theme/layout/default_head_blocks.xml

You can specify your own custom css and js, they will be available for all website pages.

<?xml version="1.0"?>
<!--
/**
 * Copyright © 2016 Magento. All rights reserved.
 * See COPYING.txt for license details.
 */
-->
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>

        <link src="js/custom.js"/>

    </head>
</page>

Then your custom.js goes there

app/design/frontend/VENDOR_THEME/default/web/js/custom.js

Improve this answer
3
  • Ok, thanks. But as I understand it I will be able to embed regular javascript in this file, retrieving the element using document.querySelector rather than using knockout data-bind? oh ok, it'll be a global script. I understand
    – mrcl
    Commented May 4, 2022 at 8:10
  • I can't use it. I need to pass product data as a function parameter from this file.
    – mrcl
    Commented May 4, 2022 at 8:14
  • @mrcl Sadly my understanding of knockoutJS et data binding don't go that far so I won't be able to tell you more. May be already start by checking the product_has_url valye to be sure your div is actually embeded in the html code. Searching Magento_Checkout/web/template/minicart/item/default.html string in your code should allow you to find the js component used.
    – Claims
    Commented May 4, 2022 at 8:19
1

Ok I was able to do it this way.

So, you had to create a file (mixin) Magento_Checkout/js/view/cart-item-renderer-mixin and in it add these functions.

var config = {
    'config': {
        'mixins': {
            'Magento_Checkout/js/view/cart-item-renderer': {
                'Magento_Checkout/js/view/cart-item-renderer-mixin': true
            },
        }
    },
};

js

/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */

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

    return function (Component) {
        return Component.extend({ 
            // code here
        })
    }
});
Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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