I have using Magento 2.4. I am trying to apply custom pagination in Wishlist my account section. Currently magento have default pagination based on page.
Initially I need to show first 9 product, then bottom show "View More" button, when we click on "View More" button then next 9 product will show.
If any have idea regarding pagination for Wishlist in my account section then share your idea.
I have added custom Pagination on wishlist page instead of using php I have used javascipt for this and apply pagination on wishlist and ordered products collectively.
app/design/frontend/Smartwave/porto_child/Magento_Wishlist/templates/item/list.phtml
<?php
/** @var \Magento\Wishlist\Block\Customer\Wishlist\Items $block */
$blockObj = $block->getLayout()->createBlock('CustomModule\CustomWishlist\Block\CustomWishlist');
$columns = $block->getColumns();
$allProducts = $blockObj->getAllProducts();
$searchedProducts = $blockObj->getAllProducts();
$isSearchResultsVisible = false;
?>
<div class="toolbar toolbar-custom">
<div class="sorter">
<label for="product-sorter" class="custom-sorter-label">Sort by:</label>
<select id="product-sorter" class="custom-sorter-select">
<option value="freq_ordered">Frequently Ordered</option>
<option value="date_old_new">Date Ordered:Old-New</option>
<option value="date_new_old">Date Ordered:New-Old</option>
<option value="sort_az">Sort:A-Z</option>
<option value="sort_za">Sort:Z-A</option>
</select>
<span onclick="clearFilters()"><a class="clear-filter-a custom-filter">Clear Filters</a></span>
</div>
<div class="pager">
<!-- Add the product limit selector here -->
<div class="limiter">
<label for="product-limiter">Show:</label>
<select id="product-limiter">
<option value="12">12</option>
<option value="20">20</option>
<option value="50">50</option>
</select>
</div>
</div>
</div>
<div class="products-grid wishlist">
<?php if (count($block->getItems())) : ?>
<div class="wishlist-search-results" id="search-results">
<?php if ($isSearchResultsVisible) : ?>
<ol class="product-items">
<?php foreach ($block->getItems() as $item) : ?>
<li data-row="product-item" class="product-item"
id="item_<?= $block->escapeHtmlAttr($item->getId()) ?>">
<?php foreach ($columns as $column) : ?>
<div class="product-item-info" data-container="product-grid">
<?php $column->setItem($item)->toHtml(); ?>
</div>
<?php endforeach; ?>
</li>
<?php endforeach; ?>
</ol>
<?php endif; ?>
</div>
<?php endif; ?>
</div>
<div class="toolbar toolbar-custom">
<div class="pager">
<div class="pages">
<div id="pagination" class="custom-wishlist-pagination items">
<a href="#" id="prev-page" class="custom-wishlist-previous">Previous</a>
<span id="page-numbers" class="page-num"></span>
<a href="#" id="next-page" class="custom-wishlist-next">Next</a>
</div>
</div>
</div>
</div>
<script>
require(['jquery'], function ($) {
var limit = 12;
var totalPages = 0;
var currentPage = parseInt(<?= (int)$block->getRequest()->getParam('p', 1) ?>);
var formKey = '';
$.ajax({
url: '<?= $block->getUrl('customwishlist/ajax/form') ?>',
type: 'GET', // Change type to 'GET'
dataType: 'json',
success: function (data) {
if (data.success) {
formKey = data.form_key;
// Continue executing your code here or call the main function that requires formKey
} else {
console.log('Error fetching form key');
}
},
error: function (jqXHR, textStatus, errorThrown) {
console.log('AJAX error:' + textStatus);
console.log('AJAX request failed. Response Text: ' + jqXHR.responseText);
}
});
function loadPage(page, sorter) {
$('#loader').show(); // display the loader
$.ajax({
url: '<?= $block->getUrl('customwishlist/index/products') ?>',
data: { p: page, limit: limit, sorter: sorter },
success: function (data) {
if (!data.success) {
alert(data.message);
return;
}
var productList = $('#default-product-listings .product-items');
productList.empty();
$.each(data.products, function (i, product) {
var item = $('<li>').addClass('product-item');
var itemContent = $('<div>').addClass('product-item-info');
// Add product image
var productImage = $('<a>').addClass('product-item-photo').attr('href', product.url);
var imageContainer = $('<span>').addClass('product-image-container');
var imageWrapper = $('<span>').addClass('product-image-wrapper');
var image = $('<img>').attr('src', product.image).attr('alt', product.name);
imageWrapper.append(image);
imageContainer.append(imageWrapper);
productImage.append(imageContainer);
itemContent.append(productImage);
// Add product details
var productDetails = $('<div>').addClass('product-item-details');
var productName = $('<strong>').addClass('product-item-name');
var productNameLink = $('<a>').attr('href', product.url).text(product.name);
productName.append(productNameLink);
productDetails.append(productName);
// Add price
var priceBox = $('<div>').addClass('price-box');
var regularPrice = $('<span>').addClass('regular-price').attr('id', 'product-price-' + product.product_id);
var price = $('<span>').addClass('price').html(parseFloat(product.price.replace(/[^\d.-]/g, '')).toFixed(2));
regularPrice.append(price);
priceBox.append(regularPrice);
productDetails.append(priceBox);
itemContent.append(productDetails);
// Add quantity changer buttons
var quantityChanger = $('<div>').addClass('quantity-changer');
var decrementButton = $('<button>').addClass('decrement-qty').attr('type', 'button').text('-');
var quantityInput = $('<input>').attr('type', 'number').attr('name', 'qty').attr('min', '1').attr('value', '1').attr('title', 'Qty').addClass('input-text qty').attr('data-validate', '{"required-number":true}');
var incrementButton = $('<button>').addClass('increment-qty').attr('type', 'button').text('+');
quantityChanger.append(decrementButton, quantityInput, incrementButton);
itemContent.append(quantityChanger);
// Add add to cart form
var addToCartForm = $('<form>').attr('data-role', 'tocart-form').attr('action', '<?= $block->escapeUrl($block->getUrl('checkout/cart/add')) ?>').attr('method', 'post');
var formKeyInput = $('<input>').attr('type', 'hidden').attr('name', 'form_key').val(formKey);
var productIdInput = $('<input>').attr('type', 'hidden').attr('name', 'product').val(product.product_id);
var addToCartButton = $('<button>').addClass('action tocart primary').attr('title', 'Add to Cart').attr('type', 'submit').text('Add to Cart');
addToCartForm.append(formKeyInput, productIdInput, addToCartButton);
itemContent.append(addToCartForm);
item.append(itemContent);
productList.append(item);
});
totalPages = Math.ceil(data.total / limit);
var pagination = $('#pagination');
pagination.empty();
if (currentPage > 1) {
var previousLink = $('<a>').addClass('action previous').text('Previous').attr('href', '<?= $block->getUrl('wishlist') ?>?p=' + (currentPage - 1));
pagination.append(previousLink);
}
for (var i = 1; i <= totalPages; i++) {
var link = $('<a>').addClass('item').text(i).attr('href', '<?= $block->getUrl('wishlist') ?>?p=' + i);
if (i === currentPage) {
link.addClass('current');
}
pagination.append(link);
}
if (currentPage < totalPages) {
var nextLink = $('<a>').addClass('action next').text('Next').attr('href', '<?= $block->getUrl('wishlist') ?>?p=' + (currentPage + 1));
pagination.append(nextLink);
}
currentPage = page;
var newUrl = window.location.href.split('?')[0] + '?p=' + page;
history.pushState(null, null, newUrl);
$('html, body').animate({ scrollTop: 0 }, 'slow');
$('#loader').hide(); // hide the loader after successful data load
}
});
}
$(document).on('click', '.increment-qty', function () {
var qtyInput = $(this).siblings('.qty');
var qty = parseInt(qtyInput.val());
qtyInput.val(qty + 1);
});
$(document).on('click', '.decrement-qty', function () {
var qtyInput = $(this).siblings('.qty');
var qty = parseInt(qtyInput.val());
if (qty > 1) {
qtyInput.val(qty - 1);
}
});
$('#product-limiter').on('change', function () {
limit = parseInt($(this).val());
loadPage(1);
});
$('#product-sorter').on('change', function () {
var sorter = $(this).val();
loadPage(currentPage, sorter);
});
var sorter = $('#product-sorter').val();
loadPage(currentPage, sorter);
loadPage(currentPage);
});
</script>
