Magento 2.2.3 I want to show how many quantity is already added for each product in category page

Question

I've added one field to show already added qty on the category page. I've made it the place next to the add to cart button. When I click the add to cart button, it increases the qty. But the problem happens when I reload the page. If I reload the page, it disappeared. Only clearing Cache, it shows again. Does FPC cause this problem?

This is the input field to show qty in category page.. For testing, I've set qty as 2: static value. but its not a problem because I can get it. /var/www/html/store/app/design/frontend/Vendor/default/Magento_Catalog/templates/product/list.phtml

`

                        $isInCart = $block->getLayout()->createBlock('Vendor\Module\Block\Catalog\Product\IsInCart')->isInCart($_product);

                        $productQty= "2";

                        if($isInCart){?>

                            <input type="button" value="-" data-id="<?php echo $_item->getId() ?>" id="subs_<?php echo $_item->getId() ?>" class="btn btn-default pull-left qtyminus" />

                            <input type="number"

                            name="qty"

                            id="qty_<?php echo $_item->getId() ?>"

                            style="width:50px;"

                            maxlength="12"

                            value="<?php echo $productQty; ?>"

                            title="<?php /* @escapeNotVerified */ echo __('Qty') ?>" class="input-text qty"

                            /> 

                        <?php }else{?>

                            <input type="button" value="-" data-id="<?php echo $_item->getId() ?>" id="subs_<?php echo $_item->getId() ?>" class="btn btn-default pull-left qtyminus" style="display:none;"/>   

                            <input type="number"

                            name="qty"

                            id="qty_<?php echo $_item->getId() ?>"

                            style="width:50px;display:none;"

                            maxlength="12"

                            value=""

                            title="<?php /* @escapeNotVerified */ echo __('Qty') ?>" class="input-text qty"

                            />

                        <?php } ?>`

And this is block controller

<?php
namespace Vendor\Module\Block\Catalog\Product;

use \Magento\Catalog\Api\Data\ProductInterface;
use \Magento\Checkout\Model\SessionFactory as CheckoutSession;
use \Magento\Framework\View\Element\Template;
use \Magento\Framework\View\Element\Template\Context;

/** Class provides method to check if given product is in cart
 * @universal
 */
class IsInCart extends Template
{

    /**
     * @var CheckoutSession
     */
    private $checkoutSession;
    /**
     * Di.
     * @param CheckoutSession $checkoutSession
     * @param \Magento\Framework\View\Element\Template\Context $context
     * @param array $data
     */
    public function __construct(
        CheckoutSession $checkoutSession,
        Context $context,
        array $data = []
    )
    {
        parent::__construct($context, $data);

        $this->checkoutSession = $checkoutSession;
    }

    /**
     * Method check if provided product is in cart of current customer.
     * Doesn't work dynamically.
     * TODO: There is a bug actually in magento connected with session and full page cache
     * TODO: More details: https://github.com/magento/magento2/issues/3294
     *
     * @param \Magento\Catalog\Api\Data\ProductInterface $product
     *
     * @return bool $inCart
     */
    public function isInCart(ProductInterface $product)
    {
        $productId = $product->getId();
        // $cartItems = $this->checkoutSession->getQuote()->getAllItems();
        // $itemsIds = array();
        // $productQty = "";
        // foreach ($cartItems as $cartItem) {
        //     $itemsIds[] = $cartItem->getProduct()->getId();
        //     $productQty= $cartItem->getQty();
        // }

        // return in_array($productId, $itemsIds);
        If ($this->checkoutSession->create()->getQuote()->hasProductId($productId)){
            return true;
        }else{
            return false;
        }
    }

}

Answer 1

You can't do this in the way you think.

Category page is a cacheble page.

The value you are trying to retrieve is not a cacheable one, so the only way to do this in .phtml would be to disable full_page cache, but I don't recommend it.

To do this in valid way, you need to create a javascript component, and use customer-data related to cart.

Here you got an example of how to make a component which retrieves holds data of cart.

Magento2: How to get Cart items collection on Product view page?

After that you need to use javascript to populate the value in all your products.