4

I want to get Cart items collection on product page.

customer-data.js

define([
    'jquery', 
    'ko',
    'uiComponent',
    'Magento_Customer/js/customer-data'
], function ($, ko, Component, customerData) {
    'use strict';

    return Component.extend({
        /** @inheritdoc */
        initialize: function () {
            this._super();
            this.items = customerData.get('cart')().items //get cart items
            console.log(this.items);
        }
    });
});

product.phtml

<div class="col-md-12" data-bind="scope: 'section'" style="padding: 0;">
    <!-- ko template: getTemplate() --> 
        <!-- ko if: items() -->
            <a class="action primary checkout" style="text-align: center;margin-top: 5px;" href="#"> Product ID</a>
        <!-- /ko -->
    <!-- /ko -->
</div>

<script type="text/x-magento-init">
    {
        "*": {
            "Magento_Ui/js/core/app": {
                "components": {
                    "section": {
                        "component": "Codism_Customblock/js/customer-data"
                    }
                }
            }
        }
    }
</script>

Help me.

3
  • Please add code what you have tried. Jan 22, 2020 at 11:40
  • If you explain your question I will answer more detailed. Jan 22, 2020 at 12:07
  • Please check my code @SiarheyUchukhlebau Jan 27, 2020 at 9:39

1 Answer 1

6

On the product page you can use a customer data in js:

require('Magento_Customer/js/customer-data').get('cart')().items

This is a preferred way because if you load that items on the backend (php) it will not work with a full page cache.

list of items on the product view page


Update with example code:

Note: full code available in example module on GitHub

Here is my example based on your code:

Adding block to the product page (for test purposes it will be place just right in the content area)

app/code/MageWorx/CustomProductPage/view/frontend/layout/catalog_product_view.xml

<?xml version="1.0"?>

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceContainer name="content">
            <block class="Magento\Framework\View\Element\Template"
                   name="custom.product.info.cart.items"
                   template="MageWorx_CustomProductPage::cart_items.phtml"/>
        </referenceContainer>
    </body>
</page>

Creating template with our component and configuration:

app/code/MageWorx/CustomProductPage/view/frontend/templates/cart_items.phtml

<div class="col-md-12" data-bind="scope: 'cart-items-section'" style="padding: 0;" id="cart-items-section">
    <!-- ko template: getTemplate() --><!-- /ko -->
</div>

<script type="text/x-magento-init">
    {
        "*": {
            "Magento_Ui/js/core/app": {
                "components": {
                    "cart-items-section": {
                        "component": "MageWorx_CustomProductPage/js/cart-items"
                    }
                }
            }
        }
    }
</script>

Creating a component itself (.js part, e.g. MageWorx_CustomProductPage/js/cart-items):

app/code/MageWorx/CustomProductPage/view/frontend/web/js/cart-items.js

define([
    'jquery',
    'ko',
    'uiComponent',
    'Magento_Customer/js/customer-data',
    'uiRegistry'
], function ($, ko, Component, customerData, registry) {
    'use strict';

    return Component.extend({
        defaults: {
            template: 'MageWorx_CustomProductPage/product/cart-items'
        },

        observableProperties: [
            'items'
        ],

        /** @inheritdoc */
        initialize: function () {
            this._super();

            var self = this;

            customerData.get('cart').subscribe(
                function (cartData) {
                    console.log(cartData);
                    self.items(cartData.items);
                }
            );

            this.items(customerData.get('cart')().items); //get cart items
            console.log(this.items());
        },

        initObservable: function () {
            this._super();
            this.observe(this.observableProperties);

            return this;
        }
    });
});

Here is some clarifications:

  1. We use custom template named MageWorx_CustomProductPage/product/cart-items to render items.
  2. We use customer data as a source for items.
  3. Items property is observable part of our component (see observableProperties prop. and initObservable function), where all items from customer data will be stored.
  4. Each time when the customer data updated we synchronize our items property with the items in cart (see customerData.get('cart').subscribe part of init function body).

Adding main template:

app/code/MageWorx/CustomProductPage/view/frontend/web/template/product/cart-items.html

<div style="float: left" data-bind="visible: items().length">
    <h3 data-bind="i18n: 'Cart items template'"></h3>
    <ul>
    <!-- ko foreach: items -->
        <li>
            <!-- ko template: 'MageWorx_CustomProductPage/product/item' --><!-- /ko -->
        </li>
    <!-- /ko -->
    </ul>
</div>
<div style="float: left" data-bind="visible: !items().length">
    <!-- ko i18n: 'There no items in your cart' --><!-- /ko -->
</div>

Adding a sub-template responsible for render of an each item from a cart:

app/code/MageWorx/CustomProductPage/view/frontend/web/template/product/item.html

<h3><!-- ko i18n: 'Item id: ' --><!-- /ko --><!-- ko text: item_id --><!-- /ko --></h3>
<span data-bind="text: product_name"></span>
<img data-bind="attr: {src: product_image.src, alt: product_image.alt}"/>
<span data-bind="html: product_price"></span>

Result with 1 item:

result with 1 item in cart

Result when adding second item:

result with 2 items

Result when all items removed through mini-cart on same page:

result without items

PS: do not forget to remove the console.log() from code when all will be done.

13
  • I will check and update you. Thanks! Jan 22, 2020 at 13:12
  • The code is working...Please let me how to get cart array in phtml file. Jan 27, 2020 at 7:11
  • @MasudShaikh please, add .phtml file to your question Jan 27, 2020 at 7:58
  • Please check my .phtml and .js file Jan 27, 2020 at 9:20
  • I got cart items in console.log file but how to print in .phtml file Jan 27, 2020 at 9:22

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.