In the sizing section of the product pages, I want to include a link which display the item's measurements in a new window.

You can check this page from netaporter to see what I mean. When you click the "View item's measurements" link (in the "Size & Fit information" section) a new window opens. On this new window the user can check the item's measurements in a table.

The URL for that link is unique for every product (the only difference is the product ID at the end):



How can I do the same in Magento 2?


Please upvote if this helps you ^_^ It's hard to answer your question perfectly because everyone's setup is different so reply to this if you can and i'll tweak it to find the best solution for you!

You don't need to give each product their unique product ID in the URL!

Go to the base of your Magento Project and find the skin folder This is my example you can name these folders anything!


Inside the Folder SeanCustomCss create the file measurements.css Inside the Folder SeanCustomJquery create the file measurements.js (We are going to use these later to build our your beautiful window)

OKAY! We are ready to begin! Go to the .phtml file where you want to place the button/link At the top of the page add (Your's will be what you named the files)

<link rel="stylesheet" type="text/css" href="/skin/dev/Sean/SeanCustomCss/header.css">
<script type="text/javascript" src="/skin/dev/Sean/SeanCustomJquery/header.js"></script>

Let's grab the current product next by: $Product = $this->getProduct();

In your JS file create a popup window that you want to use. Also create the function that makes the popup window and pass in the variable $Product.

Use your Css file you created to change how the window looks. Since you're mixing PHP with Javascript now within the same area make sure to use EXAMPLE:
<?php echo $Product.name ?>
To display the info. If you want to see all the attributes of the Product to display run var_dump($Product). ALL info you want (measurements, color) will be stored and saved in this $Product variable we created :D

Let me know if anything is unclear. I left the window building up to you and how you want it to look :) I didn't know your programming experience!

  • Correct, that's not my website. That is just an example of what I want to do. Jun 3 '16 at 21:05
  • Are you familiar with Jquery/Javascript and CSS? This should work and create exactly what you are looking for without having to create crazy new modules or anything like that. Jun 3 '16 at 21:42
  • I'm familiar with Jquery/Javascript and CSS. Do you know how to do it? Jun 3 '16 at 23:56

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.