Is there a way to fire a fotorama click event from a template file?
What I am trying to do is have the functionality where, when the user selects an options from the dropdown from the catalog-product-view
page, it fires a click event that will select a photo associated with that item.
Code:
app/design/frontend/Vendor/Module/Magento_Catalog/templates/view/option/wrapper.phtml
<?php
$required = '';
if ($block->hasRequiredOptions()) {
$required = ' data-hasrequired="' . __('* Required Fields') . '"';
}
?>
<div class="product-options-wrapper" id="product-options-wrapper"<?php
/* @escapeNotVerified */ echo $required; ?>>
<div class="fieldset" tabindex="0">
<?php echo $block->getChildHtml('', true);?>
</div>
</div>
<script type="text/javascript">
require([
'jquery',
'fotorama/fotorama',
'underscore',
'matchMedia',
'mage/template',
'text!mage/gallery/gallery.html',
'uiClass',
'mage/translate'
], function ($, fotorama, _, mediaCheck, template, galleryTpl, Class, $t) {
'use strict';
$(".specific-select select").on('change', function() {
// gets value of option
var thisvalue = $(this).find("option:selected").text();
var slug = thisvalue.split(" ").join("-");
slug = slug.substring(0, slug.length - 1).toLowerCase();
/* want to simulate the click event on the fotorama slider here */
document.querySelector('img[alt~=slug]').click();
});
});
Best Answer
Try using the fotorama api:
https://devdocs.magento.com/guides/v2.4/javascript-dev-guide/widgets/widget_gallery.html#gallery_seek https://fotorama.io/docs/4/api/