To add categories under Product Name on Product Block, like this.
#1. First, use this code to Custom CSS
a.product-category-link {
border: 1px solid #000;
padding: 5px 20px;
margin-right: 10px;
border-radius: 50px;
font-size: 14px;
color: #000;
margin-bottom: 10px;
display: inline-block;
line-height: 20px;
}
#2. Use this code to Code Injection > Footer
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
jQuery(document).ready(function() {
function fetchAndDisplayCategories() {
var productBlocks = $('.product-block');
console.log('Found product blocks:', productBlocks.length);
productBlocks.each(function(index) {
var currentItem = $(this);
var link = currentItem.find('a.product-title');
var targetElement = currentItem.find('.product-title');
console.log('Processing product block', index + 1, 'of', productBlocks.length);
var href = link.attr('href');
console.log('Product href:', href);
var hasCategories = targetElement.siblings('.product-categories').length > 0 ||
targetElement.next('.product-categories').length > 0;
if (href && link.length && targetElement.length > 0 && !hasCategories) {
var delay = index * 500;
setTimeout(function() {
var cacheParam = '?format=json-pretty&nocache=' + new Date().getTime() + Math.random();
$.ajax({
url: href + cacheParam,
dataType: "json",
success: function(data) {
console.log('Got data for:', href);
const item = data.item;
const nestedCategories = data.nestedCategories;
if (item && item.categoryIds && nestedCategories && nestedCategories.itemCategories) {
console.log('Found categories for:', href, item.categoryIds);
var $categoriesContainer = $('<div class="product-categories"></div>');
item.categoryIds.forEach(function(categoryId) {
const category = nestedCategories.itemCategories.find(function(cat) {
return cat.id === categoryId;
});
if (category) {
console.log('Adding category:', category.displayName);
var $categoryLink = $('<a class="product-category-link"></a>')
.attr('href', category.fullUrl)
.text(category.displayName);
$categoriesContainer.append($categoryLink);
}
});
if ($categoriesContainer.children().length > 0) {
var currentHasCategories = targetElement.siblings('.product-categories').length > 0 ||
targetElement.next('.product-categories').length > 0;
if (!currentHasCategories) {
targetElement.after($categoriesContainer);
console.log('Categories added successfully for:', href);
}
}
} else {
console.log('No categories found for:', href);
}
},
error: function(xhr, status, error) {
console.log('Failed to fetch data from:', href, error);
}
});
}, delay);
} else {
console.log('Skipping product block:', index + 1, 'href:', href, 'already has categories:', hasCategories);
}
});
}
function waitForProductsAndRun() {
setTimeout(function() {
console.log('First attempt...');
fetchAndDisplayCategories();
}, 2000);
setTimeout(function() {
console.log('Second attempt...');
fetchAndDisplayCategories();
}, 4000);
setTimeout(function() {
console.log('Third attempt...');
fetchAndDisplayCategories();
}, 6000);
}
waitForProductsAndRun();
var observer = new MutationObserver(function(mutations) {
var shouldProcess = false;
mutations.forEach(function(mutation) {
if (mutation.type === 'childList' && mutation.addedNodes.length > 0) {
for (var i = 0; i < mutation.addedNodes.length; i++) {
var node = mutation.addedNodes[i];
if (node.nodeType === 1) {
if ($(node).find('.product-block').length > 0) {
shouldProcess = true;
break;
}
}
}
}
});
if (shouldProcess) {
setTimeout(function() {
console.log('Observer triggered...');
fetchAndDisplayCategories();
}, 1000);
}
});
observer.observe(document.body, {
childList: true,
subtree: true
});
});
</script>
