I'm trying to change to a specific image in the product gallery when the user clicks a button to customize their item.

So far I have the following code:

    require( ['jquery', 'jquery/ui', 'mage/gallery/gallery'], function($){

    $( "label[for='options_1_text']" ).click(function() {
        var api = $(".fotorama").data('gallery');

    $( "input#options_1_text" ).keyup(function(){
        var customText = $( "input#options_1_text" )

        if ($( "#personalised-text-field" ).length > 0) {
            $( "#personalised-text-field" )
        } else {
            $( ".fotorama__stage__frame" )
                .append("<div class=\"personalised-wrap\"><span class=\"personalised-wrap__inner\"><span id=\"personalised-text-field\"></span></span></div>");
            $( "#personalised-text-field" )

My intention is that when the label is clicked, the gallery will show the first image which has customisations overlayed.


I've figured out how to now utilise the API on the product page, thanks to this answer: https://stackoverflow.com/a/38223656

I have adapted the code from the answer referenced above for reference if anyone else has this issue

require(['jquery', 'mage/gallery/gallery'], function($, gallery){
        $('[data-gallery-role=gallery-placeholder]').on('gallery:loaded', function () {

                $(this).on('fotorama:ready', function(){
                    var  api = $(this).data('gallery');
                    // Do stuff here


| improve this answer | |

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.