Custom JS not loading on product page

by Tom   Last Updated July 16, 2018 21:09 PM

I have a custom API on my product pages that returns stock availability, but can't get the js to load and function. Have tried deploying static content, clearing cache, setup:upgrade etc with no luck.

I have added this code to

/vendor/magento/module-catalog/view/frontend/templates/product/view/type/default.phtml

<?php if ($block->displayProductStockStatus()): ?>
<div id="product-stock" class="CollapsiblePanel">
    <div id="availabilityPanelWrapper">
        <div id="availabilityPanelTab" class="CollapsiblePanelTab" tabindex="0" style="">View Availability</div>
    </div>
    <div id="productAvailability" class="CollapsiblePanelContent">
        <div id="productAvailabilityContent">
        <ul>
            <li>Please select the relevant options below to view availability</li>
        </ul>
        </div>
    </div>
</div>

And have my CSS and JS in layout/catalog_product_view.xml

<head>
    <link src="Magento_Catalog/product/view/Dataphiles/stocklevel.js"/>
    <css src="Magento_Catalog/product/view/Dataphiles/stocklevel.css"/>
</head>

Example product would be https://www.chevincycles.com/trek-2018-emonda-slr-8.html

If anyone has a solution it would be greatly appreciated



Answers 1


Step 1: Copy your vendor file code and add it at below location.

app/design/frontend/Vendor/theme/Magento_Catalog/templates/product/view/type/default.phtml

<?php if ($block->displayProductStockStatus()): ?>
<div id="product-stock" class="CollapsiblePanel">
    <div id="availabilityPanelWrapper">
        <div id="availabilityPanelTab" class="CollapsiblePanelTab" tabindex="0" style="">View Availability</div>
    </div>
    <div id="productAvailability" class="CollapsiblePanelContent">
        <div id="productAvailabilityContent">
        <ul>
            <li>Please select the relevant options below to view availability</li>
        </ul>
        </div>
    </div>
</div>

Step 2: Add your JS files in below location.

app/design/frontend/Vendor/theme/Magento_Catalog/web/js/stocklevel.js

Step 3: Add your CSS files in below location.

app/design/frontend/Vendor/theme/Magento_Catalog/web/js/stocklevel.css

Step 4: Add your XML file

app/design/frontend/Vendor/theme/Magento_Catalog/layout/catalog_product_view.xml

<head>
    <link src="js/stocklevel.js"/>
    <css src="css/stocklevel.css"/>
</head>

Don't forget to run

php bin/magento setup:static-content:deploy
php bin/magento cache:flush
Abhishek Panchal
Abhishek Panchal
July 16, 2018 20:47 PM

Related Questions




Add javascript in custom widget

Updated August 08, 2017 18:09 PM

How to add a custom javascript to theme in Magento 2?

Updated December 05, 2017 18:09 PM