Magento 2 - Where are data-bind attributes defined?

Question

In the file vendor\magento\module-checkout\view\frontend\web\template\minicart\item\default.html there is this code:

<li class="item product product-item" data-role="product-item">
    <div class="product">
        <!-- ko if: product_has_url -->
        <a data-bind="attr: {href: product_url, title: product_name}" tabindex="-1" class="product-item-photo">
            <!-- ko foreach: $parent.getRegion('itemImage') -->
                <!-- ko template: {name: getTemplate(), data: item.product_image} --><!-- /ko -->
            <!-- /ko -->
        </a>

Where is product_url and product_name defined?

How does it know where to get the data from?

Dominic Pixie · Accepted Answer · 2020-08-24 18:49:39Z

The principal is called private content

The customer data library is used store private data in local storage, invalidate private data using customizable rules, and synchronize data with the backend.

https://github.com/magento/magento2/blob/2.3.5/app/code/Magento/Checkout/CustomerData/Cart.php#L94

https://github.com/magento/magento2/blob/2.3.5/app/code/Magento/Checkout/CustomerData/DefaultItem.php#L97

https://github.com/magento/magento2/blob/2.3.5/app/code/Magento/Checkout/view/frontend/web/js/view/minicart.js#L178

https://github.com/magento/magento2/blob/2.3.5/app/code/Magento/Checkout/view/frontend/web/template/minicart/content.html#L69-L78

https://github.com/magento/magento2/blob/2.3.5/app/code/Magento/Checkout/view/frontend/web/template/minicart/item/default.html#L10

I've picked out a few values hopefully you should start to recognize and you can see how they are set

But in summary knockout fetches the values from php. Sort of how you have discovered but not quite what you understand.

Black · Accepted Answer · 2020-08-24 15:51:02Z

I searched for the layout file where the template vendor\magento\module-checkout\view\frontend\web\template\minicart\item\default.html is getting called, to figure out the block class.

I found one reference in the layout file vendor\magento\module-checkout\view\frontend\layout\checkout_cart_item_renderers.xml:

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <update handle="checkout_item_price_renderers"/>
    <body>
        <referenceBlock name="checkout.cart.item.renderers">
            <block class="Magento\Checkout\Block\Cart\Item\Renderer" name="checkout.cart.item.renderers.default" as="default" template="Magento_Checkout::cart/item/default.phtml">
                <block class="Magento\Checkout\Block\Cart\Item\Renderer\Actions" name="checkout.cart.item.renderers.default.actions" as="actions">
                    <block class="Magento\Checkout\Block\Cart\Item\Renderer\Actions\Edit" name="checkout.cart.item.renderers.default.actions.edit" template="Magento_Checkout::cart/item/renderer/actions/edit.phtml"/>
                    <block class="Magento\Checkout\Block\Cart\Item\Renderer\Actions\Remove" name="checkout.cart.item.renderers.default.actions.remove" template="Magento_Checkout::cart/item/renderer/actions/remove.phtml"/>
                </block>
            </block>

As you can see it uses the block class Magento\Checkout\Block\Cart\Item\Renderer, where the methods getProductName() and getProductUrl() are defined. So calling product_name in knockoutjs, leads to the fucntion getProductName getting called. Not sure where the logic about this is located though.

/**
 * Retrieve URL to item Product
 *
 * @return string
 */
public function getProductUrl()
{
    if ($this->_productUrl !== null) {
        return $this->_productUrl;
    }
    if ($this->getItem()->getRedirectUrl()) {
        return $this->getItem()->getRedirectUrl();
    }

    $product = $this->getProduct();
    $option = $this->getItem()->getOptionByCode('product_type');
    if ($option) {
        $product = $option->getProduct();
    }

    return $product->getUrlModel()->getUrl($product);
}

/**
 * Get item product name
 *
 * @return string
 */
public function getProductName()
{
    if ($this->hasProductName()) {
        return $this->getData('product_name');
    }
    return $this->getProduct()->getName();
}

Stack Exchange Network

Magento 2 - Where are data-bind attributes defined?

2 Answers 2

Your Answer

Hot Network Questions

Magento 2 - Where are data-bind attributes defined?

2 Answers 2

Your Answer

Sign up or log in

Post as a guest

Related

Hot Network Questions