Product Quick View

[joozen]

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:

Code Select Expand

<!-- 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

Code Select Expand

  <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)

Code Select Expand

.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.

[best4uall]

Find your perfect match for tonight's adventure in Your Town

[goeher]

Dating for Sex.
 
Best Porn Game