0

I am trying to make this work in Magento, but Magento changes the html and my boss hates it when I want to change anything using cPanel. So I need an option using the dashboard in Magento

<table width="100%">
    <tbody>
        <tr>
           <td>Stock replacement: Bolt in press on bearing</td>
        </tr>
        <tr>
           <td><a href="#" onclick="document.getElementById('showme').style.display = 'table-row'; return false;"><li>How To Measure</li></a></td>
        </tr>
        <tr id="showme" style="display: none">
           <td><embed src="https://dutchmanaxles.com/images/ordering/SR_defined_POB.pdf" type="application/pdf" width="100%" height="600px" /></td>
        </tr>
    </tbody>
</table>
0

In case you are using Magento 2, I would suggest to use requireJs

<table width="100%">
<tbody>
    <tr>
       <td>Stock replacement: Bolt in press on bearing</td>
    </tr>
    <tr>
       <td><a href="#" id="showEmbed"><li>How To Measure</li></a></td>
    </tr>
    <tr id="showme" style="display: none">
       <td><embed src="https://dutchmanaxles.com/images/ordering/SR_defined_POB.pdf" type="application/pdf" width="100%" height="600px" /></td>
    </tr>
</tbody>
</table>
<script type="text/javascript">
  require(['jquery'],function($){
    $('#showEmbed').on('click',function(e){
      e.preventDefault();
      $('#showme').toggle();
    })
  })
</script>

Ideally I would move JS content to separate JS file and initialize whole functionality via x-magento-init script or directly bind JS functionality on element via data-mage-init ( both variants are described in Magento DevDocs: Calling and initializing JavaScript )

In case you want to just show embedded content, change jQuery toggle function to show

6
  • That worked!! Now how can i make the window that opens up longer? right now it is only 149.6px tall? dutchmanaxles.com/contact-dutchman-axles.html is where i shoved it for now, but i cant keep it there for very long Dec 18 '18 at 15:00
  • and i cant get it to show on properly on mobile. Dec 18 '18 at 15:06
  • First of all, I could not find code mentioned here on link you've provided. Second of all, your problem will be connected now with HTML rendering and not Magento itself. I guess problem with displaying on mobile is, that you are using HTML tables. About height of embed element, I can't say for sure.
    – Erik
    Dec 18 '18 at 23:07
  • should i use div rather than tables? can i set it up exactly the way it is now with div? Dec 19 '18 at 22:55
  • From my point of view yes. If you want, you can check lots of articles online which explains problems with table layouts ( i.e. this one ) But keep in mind, if you replace table layout with divs, you will have to add styling. ( divs won't look like table by default )
    – Erik
    Dec 20 '18 at 14:24
0

Try Below code:

<table width="100%">
    <tbody>
        <tr>
           <td>Stock replacement: Bolt in press on bearing</td>
        </tr>
        <tr>
           <td><button onclick="myFunction();">How To Measure</button></td>
        </tr>
        <tr id="showme" style="display: none">
           <td><embed src="https://www.gstatic.com/webp/gallery3/1.png" width="100%" height="600px" /></td>
        </tr>
    </tbody>
</table>
<script>
function myFunction() {
alert("Hello");
  var x = document.getElementById("showme");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}
</script>
3
0

Personnally, i prefer the data-mage-init way, like described in Core.

You can use it anywhere in Magento .phtml files :

/vendor/magento/module-gift-message/view/frontend/templates/inline.phtml around line 30 :

<button class="action action-gift"
        data-mage-init='{"toggleAdvanced": {"selectorsToggleClass":"hidden", "toggleContainers":"#allow-gift-messages-for-order-container"}}'>
    <span><?= /* @escapeNotVerified */ __('Gift Message') ?></span>
</button>
<div id="allow-gift-messages-for-order-container" class="gift-messages-order hidden">

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.