Just want to share solution how to add quick view button to display short description to category-view without any paid components or plugins. Might change from template to template I'm using JA Atoms. On your template/html/sublayauts/product.php, after product_s_desc section add: <!-- BEGIN: Short Description Popup Trigger -->
<div class="modal fade"
id="shortDescModal<?php echo $product->virtuemart_product_id; ?>"
tabindex="-1"
role="dialog"
aria-labelledby="myModalLabel<?php echo $product->virtuemart_product_id; ?>"
aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title"
id="myModalLabel<?php echo $product->virtuemart_product_id; ?>">
<?php echo $product->product_name; ?>
</h5>
<button type="button"
class="close"
data-dismiss="modal"
aria-label="Close"
style="background: none; border: none; padding: 0;">
<img src="<?php echo JURI::root(); ?>images/closebtn.png"
alt="Close"
style="width: 24px; height: 24px;" />
</button>
</div>
<div class="modal-body">
<!-- First Product Image -->
<div class="popup-prod-image text-center mb-3">
<?php
if (!empty($product->images[0])) {
echo $product->images[0]->displayMediaThumb('class="browseProductImage"', false);
}
?>
</div>
<!-- Full Short Description -->
<div class="popup-prod-desc mb-3">
<?php
echo !empty($product->product_s_desc)
? $product->product_s_desc
: JText::_('COM_VIRTUEMART_PRODUCT_NO_DESCRIPTION');
?>
</div>
<!-- View Product Button -->
<div class="popup-view-product text-center mb-3">
<a href="<?php echo JRoute::_($product->link); ?>" title="View Product">
<img src="<?php echo JURI::root(); ?>images/viewproduct.png"
alt="View Product"
style="width: auto; height: 40px; cursor: pointer;" />
</a>
</div>
<!-- Add to Cart Button -->
<div class="popup-prod-cart text-center">
<?php
echo shopFunctionsF::renderVmSubLayout('addtocart', [
'product' => $product,
'rowHeights' => isset($rowsHeight[$row]) ? $rowsHeight[$row] : '',
'position' => ['ontop', 'addtocart'],
]);
?>
</div>
</div>
<div class="modal-footer">
<button type="button"
class="btn btn-secondary"
data-dismiss="modal"
style="background: #f8f9fa; border: 1px solid #ced4da; padding: 8px 15px; color: #333; font-size: 14px; font-weight: bold;">
<?php echo JText::_('COM_VIRTUEMART_CLOSE'); ?>
</button>
</div>
</div>
</div>
</div>
<script>
document.addEventListener("DOMContentLoaded", function () {
// Handle form submissions for "Add to Cart"
const forms = document.querySelectorAll('form[action*="index.php?option=com_virtuemart&view=cart&task=add"]');
forms.forEach((form) => {
form.addEventListener("submit", function (event) {
event.preventDefault(); // Prevent default form submission
const formData = new FormData(form);
const productId = form.querySelector("input[name='virtuemart_product_id[]']").value;
console.log(`Submitting product ID: ${productId}`);
// Submit the form via AJAX
fetch(form.action, {
method: "POST",
body: formData,
})
.then((response) => {
if (!response.ok) {
throw new Error(`HTTP error! Status: ${response.status}`);
}
return response.json();
})
.then((data) => {
if (data.success || data.status === "success") {
console.log(`Product ${productId} successfully added to cart:`, data);
// Close the modal after successful addition
const modalId = `#shortDescModal${productId}`;
const modal = document.querySelector(modalId);
if (modal) {
if (typeof bootstrap !== "undefined" && bootstrap.Modal) {
// Bootstrap 5 Modal Handling
const bootstrapModal = bootstrap.Modal.getInstance(modal);
if (bootstrapModal) bootstrapModal.hide();
} else {
// Bootstrap 4 Modal Handling
$(modal).modal('hide');
}
} else {
console.error("Modal not found:", modalId);
}
// Redirect to the cart after success (optional)
setTimeout(() => {
window.location.href = "<?php echo JRoute::_('index.php?option=com_virtuemart&view=cart'); ?>";
}, 500); // Adjust delay as needed
} else {
alert("Failed to add product to cart. Please try again.");
console.error("Error response from server:", data);
}
})
.catch((error) => {
console.error("AJAX request failed:", error);
alert("An unexpected error occurred. Please try again.");
});
});
});
});
</script>
<!-- END: Short Description Popup Trigger -->
Optionally, to place it inline with price you may add div <div class="shortdesc-button-wrap">
<a href="#" class="btn btn-light vm-shortdesc-trigger"
data-toggle="modal"
data-target="#shortDescModal<?php echo $product->virtuemart_product_id; ?>"
role="button"
title="Product Quick View">
<img src="<?php echo JURI::root(); ?>images/sdescription.png"
alt="Product Quick View" />
</a>
</div>after price-details section
and add to custom.css (optional up to you)
.product-price-container {
display: flex;
align-items: center;
justify-content: space-between; /* Align price on the left and button on the right */
margin-top: 10px;
}
.shortdesc-button-wrap {
margin-left: auto; /* Push the button to the far right */
display: flex; /* Ensure proper alignment with price */
align-items: center; /* Vertically align with the price */
}
.shortdesc-button-wrap img {
width: 20px; /* Adjust the size of the icon */
height: 20px;
cursor: pointer;
transition: transform 0.2s ease-in-out;
}
.shortdesc-button-wrap img:hover {
transform: scale(1.1); /* Add a slight zoom effect on hover */
}
.shortdesc-button-wrap img:hover {
transform: scale(1.1); /* Add a slight zoom effect on hover */
}
.popup-view-product {
margin-top: 15px; /* Add some space above the button */
}
.popup-view-product .btn {
padding: 10px 20px;
font-size: 16px;
font-weight: bold;
text-transform: uppercase;
}
.popup-view-product .btn-primary {
background-color: #007bff;
border: none;
color: #fff;
transition: background-color 0.2s ease-in-out, transform 0.2s ease-in-out;
}
.popup-view-product .btn-primary:hover {
background-color: #0056b3;
transform: scale(1.05); /* Slight zoom effect */
}
.modal-title {
text-transform: uppercase; /* Convert text to uppercase */
color: #1F6E10; /* Change text color */
font-weight: bold; /* Optional: Make it bold */
font-size: 15px; /* Adjust size if needed */
margin: 0; /* Ensure proper spacing */
}
.popup-view-product img:hover {
transform: scale(1.05); /* Slight zoom */
}
Add you images closebtn.png, viewproduct.png and sdescription.png to your images folder.
Working perfectly for me.
(https://footymania.co.uk/images/scr/sdesc1.png)
(https://footymania.co.uk/images/scr/sdesc2.png)