Ken Shea Posted June 5, 2023 Posted June 5, 2023 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 😄 Quote
CHD-UK Posted June 6, 2023 Posted June 6, 2023 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  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.    Ken Shea 1 Quote
Ken Shea Posted June 6, 2023 Author Posted June 6, 2023 Well, that was exceedingly easy and I can think of a number of ways that will be used. Thanks is too easy Andy, but thank you Quote
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.