Jump to content
  • Checkout
  • Login
  • Get in touch

osCommerce

The e-commerce.

Create a product information popup


Ken Shea

Recommended Posts

OK, it's very true, I know enough HTML and CSS to be a danger to myself, that said, is it something to complicated to just do with some internet help.?

 

I looked and they said it was simple 😄

Link to comment
Share on other sites

The complexity will depend on what you are trying to achieve, where you on/in the system you are trying to acheive it and what information is available to the running code.

For example, you can create a basic popup dialog by just adding a bit of code your product description (see below for an example), however if you wanted the button to display the popup it to appear in a different section of the product page, you would probably need to modify one of the template files or possibly create a widgit which can be re-used and hence added anywhere on the page.   Also if you want to display other dynamic data from the database, that would require more effort, this is just for some additional static content.

Here's a really basic popup dialog which is triggered from a button in your description. Is basically displays further information which is contained in the description field.  Because the additional information is in a "dialog" element, it is not displayed by default. 

Couple of things,it is possible to add styling to all of the elements, I've skipped that for now.  Also the Javascript which is used to show and hide the dialog will need to be added to every description field which is inefficient.  I would be better to add it to the page.   There is a section to add js code in the theme, but this is currently executed before the dialog box is available so would  need to be delayed or added after the dialog box.

 

Goto ADMIN -> Products / Catalog -> Products (Brands / Categories) and choose a product.   Click edit, then goto the "Name and description" tab

for the main "Products description", click the "source" button to edit the HTML for the description

image.png.8b668f1943912f4063742a0f265b2003.png

 

Paste in the following sample description and Save
 

<p>This is the main description for this product and is visible all of the time.  Click the button below to popup additional information to the customer.</p>

<button class="button opendialog-button">Show Specifications</button>

<dialog class="productmodal" />
<h2><strong>Popup for Extra information here</strong></h2>

<p>Product Specifications</p>

<ul>
    <li>Fully metal exterior</li>
    <li>Easy to Clean</li>
    <li>Fun to use</li>
</ul>
<button class="button closedialog-button">Close</button>


<script type="text/javascript">
const productmodal= document.querySelector(".productmodal");
const openModal = document.querySelector(".opendialog-button");
const closeModal = document.querySelector(".closedialog-button");

openModal.addEventListener('click', (e) => {
  e.preventDefault();
  productmodal.showModal();
});

closeModal.addEventListener('click', (e) => {
  e.preventDefault();
  productmodal.close();
});
</script>

 

Go to the products description on the front end and you should see a new "Show Specification" button in the description. 

image.thumb.png.4b3485fe49042ddcf42313e9dbbb3cbf.png

 

image.thumb.png.eeb15b929cf82fa2d279dc73a60e6bcf.png

 

:)

 

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Unfortunately, your content contains terms that we do not allow. Please edit your content to remove the highlighted words below.
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...