Never did get this to work, but I figured out it doesn't really matter - the hash is the same for all the cached images of the same size, so I just hardcoded it in.
$thisimagepath = $WEBPATH
. "media/catalog/product/cache/1/small_image/210x/"
. "9df78eab33525d08d6e5fb8d27136e95"
. strtolower($productrow['small_image']);
Not elegant, not future-proof... but working. (:
You have to created one requirejs-config.js file inside your theme like,
First Add owlcarousel.js file inside,
app/design/frontend/pakage_name/theme_name/Magento_Catalog/web/js
Add your css inside,
app/design/frontend/pakage_name/theme_name/Magento_Catalog/web/css
call css inside your tempalte file using,
<link rel="stylesheet" type="text/css" href="<?php echo $block->getViewFileUrl('Magento_Catalog::css/owlcarousel.css')?>">
or call css inside a layout file (best practice), depending on your needs :
- whole site :
default.xml for example app/design/frontend/pakage_name/theme_name/Magento_Catalog/layout/default.xml
- Home page :
cms_index_index.xml
<page ...>
<head>
<css src="Magento_Catalog::css/owlcarousel.css"/>
</head>
<body>...</body> </page>
Now create requirejs-config.js file
Magento_Catalog/requirejs-config.js
Define your slider,
var config = {
paths: {
'owlcarousel': "Magento_Catalog/js/owlcarousel"
},
shim: {
'owlcarousel': {
deps: ['jquery']
}
}
};
Now you can use owlcarousel under any phtml file,
<div id="owlslider" class="products list items product-items">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
<script>
(function () {
require(["jquery","owlcarousel"],function($) {
$(document).ready(function() {
$("#owlslider").owlCarousel({
navigation : true, // Show next and prev buttons
autoPlay: false, //Set AutoPlay to 3 seconds
items : 5
});
});
});
})();
</script>
Remove pub/static folder content and run php bin/magento setup:static-content:deploy command.
Best Answer
create a static block (CMS > Static Blocks) that contains your slider
Create a new widget instance (CMS > Widgets) and select your theme
Add Layout Update for page "Home Page" and reference "Page Header" (this is a container within the page header, below the main navigation)
Select static block from (1) in "Widget Options":
Save.
Clean cache.