How to show all wishlist item in custom HTML without breaking any functionaility

Question

I have created wishlist HTML which contains an image, product name, price & add & delete button. I want to show all the wishlist on my HTML page.

<section class="wishlist">
        <div class="container">
          <h2 class="mb-5">My wishlist</h2>
          <div class="row wishlistRow py-3 px-3 mb-4">
            <div class="col-md-2 pl-0 mb-3">
              <img src="img/wish01.jpg" class="w-100" alt="">
            </div>
            <div class="col-md-10">
              <h5>Product Name</h5>
              <div class="row">
                <div class="col-md-6">
                  <span class="rupeeIcon"><i class="fas fa-rupee-sign"></i> 499</span>
                  <span class="oldPrice ml-3"><del>
                    <i class="fas fa-rupee-sign"></i> 599</del>
                  </span>
                </div>
                <div class="col-md-6 deleteBtn">
                  <button class="btn " tabindex="0"><i class="far fa-trash-alt"></i></button>
                </div>
              </div>
              <div class="row justify-content-md-end mb-md-4">
                <a href="cart.html" class="redBtn btn productBtns mb-2"><i class="fas fa-shopping-cart"></i> Add to cart</a>
              </div>
              <div class="row">
                <p class="rating"><i class="fas fa-star"></i> (4.5) <a href="#">167 Reviews</a></p>
              </div>
            </div>
          </div>
          <div class="row wishlistRow py-3 px-3 mb-4">
            <div class="col-md-2 pl-0 mb-3">
              <img src="img/wish01.jpg" class="w-100" alt="">
            </div>
            <div class="col-md-10">
              <h5>Product Name</h5>
              <div class="row">
                <div class="col-md-6">
                  <span class="rupeeIcon"><i class="fas fa-rupee-sign"></i> 499</span>
                  <span class="oldPrice ml-3"><del>
                    <i class="fas fa-rupee-sign"></i> 599</del>
                  </span>
                </div>
                <div class="col-md-6 deleteBtn">
                  <button class="btn " tabindex="0"><i class="far fa-trash-alt"></i></button>
                </div>
              </div>
              <div class="row justify-content-md-end mb-md-4">
                <a href="cart.html" class="redBtn btn productBtns mb-2"><i class="fas fa-shopping-cart"></i> Add to cart</a>
              </div>
              <div class="row">
                <p class="rating"><i class="fas fa-star"></i> (4.5) <a href="#">167 Reviews</a></p>
              </div>
            </div>
          </div>

        </div>
      </section>

Answer 1

add this lines in your layout file where you want wishlist product html

<referenceBlock name="head.components">
            <block class="Magento\Framework\View\Element\Js\Components" name="wishlist_head_components" template="Magento_Wishlist::js/components.phtml"/>
        </referenceBlock>
        <referenceContainer name="content">
            <block class="Magento\Wishlist\Block\Customer\Wishlist" name="customer.wishlist" template="Magento_Wishlist::view.phtml" cacheable="false">
                <block class="Magento\Theme\Block\Html\Pager" name="wishlist_item_pager"/>
                <block class="Magento\Wishlist\Block\Rss\Link" name="wishlist.rss.link" template="Magento_Wishlist::rss/wishlist.phtml"/>
                <block class="Magento\Wishlist\Block\Customer\Wishlist\Items" name="customer.wishlist.items" as="items" template="Magento_Wishlist::item/list.phtml" cacheable="false">
                    <block class="Magento\Wishlist\Block\Customer\Wishlist\Item\Column\Image" name="customer.wishlist.item.image" template="Magento_Wishlist::item/column/image.phtml" cacheable="false"/>
                    <block class="Magento\Wishlist\Block\Customer\Wishlist\Item\Column\Info" name="customer.wishlist.item.name" template="Magento_Wishlist::item/column/name.phtml" cacheable="false"/>
                    <block class="Magento\Wishlist\Block\Customer\Wishlist\Item\Column" name="customer.wishlist.item.review" template="Magento_Wishlist::item/column/review.phtml" cacheable="false"/>
                    <block class="Magento\Wishlist\Block\Customer\Wishlist\Item\Column\Cart" name="customer.wishlist.item.price" template="Magento_Wishlist::item/column/price.phtml" cacheable="false">
                        <block class="Magento\Catalog\Pricing\Render" name="product.price.render.wishlist">
                            <arguments>
                                <argument name="price_render" xsi:type="string">product.price.render.default</argument>
                                <argument name="price_type_code" xsi:type="string">wishlist_configured_price</argument>
                                <argument name="price_label" xsi:type="boolean">false</argument>
                                <argument name="zone" xsi:type="string">item_list</argument>
                            </arguments>
                        </block>
                        <block class="Magento\Wishlist\Block\Customer\Wishlist\Item\Options" name="customer.wishlist.item.options" cacheable="false"/>
                    </block>
                    <block class="Magento\Wishlist\Block\Customer\Wishlist\Item\Column\Actions" name="customer.wishlist.item.inner" template="Magento_Wishlist::item/column/actions.phtml" cacheable="false">
                        <arguments>
                            <argument name="css_class" xsi:type="string">product-item-inner</argument>
                        </arguments>
                        <block class="Magento\Wishlist\Block\Customer\Wishlist\Item\Column\Comment" name="customer.wishlist.item.comment" template="Magento_Wishlist::item/column/comment.phtml" cacheable="false">
                            <arguments>
                                <argument name="title" translate="true" xsi:type="string">Product Details and Comment</argument>
                            </arguments>
                        </block>
                        <block class="Magento\Wishlist\Block\Customer\Wishlist\Item\Column\Cart" name="customer.wishlist.item.cart" template="Magento_Wishlist::item/column/cart.phtml" cacheable="false">
                            <arguments>
                                <argument name="allowedQuantityViewModel" xsi:type="object">Magento\Wishlist\ViewModel\AllowedQuantity</argument>
                                <argument name="title" translate="true" xsi:type="string">Add to Cart</argument>
                            </arguments>
                        </block>

                        <block class="Magento\Wishlist\Block\Customer\Wishlist\Item\Column\Actions" name="customer.wishlist.item.actions" template="Magento_Wishlist::item/column/actions.phtml" cacheable="false">
                            <arguments>
                                <argument name="css_class" xsi:type="string">product-item-actions</argument>
                            </arguments>
                            <block class="Magento\Wishlist\Block\Customer\Wishlist\Item\Column\Edit" name="customer.wishlist.item.edit" template="Magento_Wishlist::item/column/edit.phtml" before="-" cacheable="false"/>
                            <block class="Magento\Wishlist\Block\Customer\Wishlist\Item\Column\Remove" name="customer.wishlist.item.remove" template="Magento_Wishlist::item/column/remove.phtml" cacheable="false"/>
                        </block>
                    </block>
                </block>
                <container name="customer.wishlist.buttons" as="control_buttons" label="Wishlist Control Buttons">
                    <block class="Magento\Wishlist\Block\Customer\Wishlist\Button" name="customer.wishlist.button.update" template="Magento_Wishlist::button/update.phtml" cacheable="false"/>
                    <block class="Magento\Wishlist\Block\Customer\Wishlist\Button" name="customer.wishlist.button.share" template="Magento_Wishlist::button/share.phtml" cacheable="false"/>
                    <block class="Magento\Wishlist\Block\Customer\Wishlist\Button" name="customer.wishlist.button.toCart" template="Magento_Wishlist::button/tocart.phtml" cacheable="false"/>
                </container>
            </block>
        </referenceContainer>

Answer 2

In order to display Wishlist Products collection on the site, store admin will need the data about Wishlist Products Collection, will provide you three steps to get Wishlist Products Collection in Magento 2.

Step 1: Create WishlistProducts block To get Wishlist Products Collection, firstly, you need to create a WishlistProducts block. To do that, follow the path VendorName/ModuleName/Block/WishlistProducts.php and add the below code:

<?php
namespace VendorName\ModuleName\Productslider\Block;

use Magento\Catalog\Block\Product\Context;
use Magento\Catalog\Model\Product\Visibility;
use Magento\Catalog\Model\ResourceModel\Product\CollectionFactory;
use Magento\Framework\App\Http\Context as HttpContext;
use Magento\Framework\Stdlib\DateTime\DateTime;
use Magento\Wishlist\Model\ResourceModel\Item\CollectionFactory as WishlistCollectionFactory;
use Mageplaza\Productslider\Helper\Data;
/**
 * Class FeaturedProducts
 * @package Mageplaza\Productslider\Block
 */
class WishlistProducts extends AbstractSlider
{
    /**
     * @var WishlistCollectionFactory
     */
    protected $_wishlistCollectionFactory;
    /**
     * WishlistProducts constructor.
     * @param Context $context
     * @param CollectionFactory $productCollectionFactory
     * @param Visibility $catalogProductVisibility
     * @param DateTime $dateTime
     * @param Data $helperData
     * @param HttpContext $httpContext
     * @param WishlistCollectionFactory $wishlistCollectionFactory
     * @param array $data
     */
    public function __construct(
        Context $context,
        CollectionFactory $productCollectionFactory,
        Visibility $catalogProductVisibility,
        DateTime $dateTime,
        Data $helperData,
        HttpContext $httpContext,
        WishlistCollectionFactory $wishlistCollectionFactory,
        array $data = []
    ) {
        $this->_wishlistCollectionFactory = $wishlistCollectionFactory;
        parent::__construct($context, $productCollectionFactory, $catalogProductVisibility, $dateTime, $helperData, $httpContext, $data);
    }
    /**
     * @inheritdoc
     */
    public function getProductCollection()
    {
        $collection = [];
        if ($this->_customer->isLoggedIn()) {
            $wishlist = $this->_wishlistCollectionFactory->create()
                ->addCustomerIdFilter($this->_customer->getCustomerId());
            $productIds = null;
            foreach ($wishlist as $product) {
                $productIds[] = $product->getProductId();
            }
            $collection = $this->_productCollectionFactory->create()->addIdFilter($productIds);
            $collection = $this->_addProductAttributesAndPrices($collection)->addStoreFilter($this->getStoreId())->setPageSize($this->getProductsCount());
        }
        return $collection;
    }
}

Step 2: Insert in phtml file After having the collection in the block, now you can follow this snippet to get product collection from the block VendorName/ModuleName/view/frontend/templates/list.phtml

Then, please insert the following code in the phtml file.

<?php
$collection = $block->getProductCollection();
foreach ($collection as $_product) {
    echo $product->getName() . ' - ' . $product->getProductUrl() . '<br />';
} //add your html inside this and get your functions too like addToCart() method etc... 

Step 3: Flush Cache & Test result.