3

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();



    });
});

0

Try using the fotorama api:

var api = $([data-gallery-role=gallery-placeholder]).data('gallery');

https://devdocs.magento.com/guides/v2.4/javascript-dev-guide/widgets/widget_gallery.html#gallery_seek https://fotorama.io/docs/4/api/

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.