Integrating in Hyva Theme (Magento)

[ciancastillo]

Hi, I integrated swiper to our Hyva theme (a Magento theme) and is having problem with the currently active swiper-slide (just when you click the configurable product option for the first time, if there are other options, clicking them will solve the issue. The thumbnail is selected correctly but the main image is not). Attached is the code and the video of how this is happening.

Please help. Thank you!

Video: https://youtu.be/KcDAKC9tlNM

<?php
/**
 * Hyvä Themes - https://hyva.io
 * Copyright © Hyvä Themes 2020-present. All rights reserved.
 * This product is licensed per Magento install
 * See https://hyva.io/license
 */

declare(strict_types=1);

use Hyva\Theme\Model\ViewModelRegistry;
use Hyva\Theme\ViewModel\HeroiconsOutline;
use Magento\Catalog\Block\Product\View\Gallery;
use Magento\Catalog\Helper\Image;
use Magento\Framework\Escaper;

/** @var Escaper $escaper */
/** @var Gallery $block */
/** @var ViewModelRegistry $viewModels */

/** @var HeroiconsOutline $heroicons */
$heroicons = $viewModels->require(HeroiconsOutline::class);

$images = $block->getGalleryImages()->getItems();
$mainImage = current(array_filter($images, [$block, 'isMainImage']));

if (!empty($images) && empty($mainImage)) {
    $mainImage = reset($images);
}

/** @var Image $helper */
$helper = $block->getData('imageHelper');
$mainImageData = $mainImage ?
    $mainImage->getData('medium_image_url') :
    $helper->getDefaultPlaceholderUrl('image');

$smallWidth = $block->getImageAttribute('product_page_image_small', 'width', 90);
$smallHeight = $block->getImageAttribute('product_page_image_small', 'height', 90);
$mediumWidth = $block->getImageAttribute('product_page_image_medium', 'width', 700);
$mediumHeight = $block->getImageAttribute('product_page_image_medium', 'height', 700);

$productName = $block->getProduct()->getName();

$uniqueId = '-' . uniqid();
?>

<div id="gallery"
     x-data="initGallery()"
     x-init="initActive()"
     x-bind="eventListeners"
     class="order-1 w-full lg:w-1/2 md:h-auto"
    >
    <div :class="{'w-full h-full fixed block top-0 left-0 bg-white z-50 flex': fullscreen}">
        <div class="absolute top-0 right-0 pt-4 pr-4">
            <button @click="fullscreen = false"
                    type="button"
                    class="hidden text-gray-400 hover:text-gray-500 focus:outline-none focus:text-gray-500
                        transition ease-in-out duration-150"
                    :class="{ 'hidden': !fullscreen, 'block': fullscreen }"
                    aria-label="Close"
            >
                <?= $heroicons->xHtml(); ?>
            </button>
        </div>
        <div class="grid grid-cols-1 xl:grid-cols-[90px,1fr] gap-2.5 mb-6 items-start">
            <div class="relative w-full -mt-2 md:mt-0"
                 x-transition:enter="ease-out duration-500"
                 x-transition:enter-start="opacity-0"
                 x-transition:enter-end="opacity-100"
            >
                <div class="relative">
                    <img
                        alt="main product photo"
                        title="<?= $escaper->escapeHtmlAttr($productName) ?>"
                        class="hidden md:block object-contain object-center w-full h-auto"
                        :class="'opacity-0'"
                        src="<?= /* @noEscape */ $mainImageData ?>"
                        width="<?= /* @noEscape */ $mediumWidth ?>"
                        height="<?= /* @noEscape */ $mediumHeight ?>"
                        itemprop="image"
                    />

                    <div class="swiper-container md:absolute top-0 left-0 w-full">
                        <div class="swiper-wrapper" id="swiper-wrapper<?= $escaper->escapeHtml($uniqueId) ?>">
                            <template x-for="(image, index) in images" :key="index">
                                <div class="swiper-slide" :class="{'swiper-slide-active': index, '': !index}">
                                    <img
                                        :alt="image.caption || '<?= $escaper->escapeJs($productName) ?>'"
                                        :title="image.caption || '<?= $escaper->escapeJs($productName) ?>'"
                                        @click="fullscreen = true"
                                        class="inset-0 object-contain object-center w-full m-auto"
                                        :class="{ 'cursor-pointer': !fullscreen }"
                                        width="<?= /* @noEscape */ $mediumWidth ?>"
                                        height="<?= /* @noEscape */ $mediumHeight ?>"
                                        :loading="active!==index ? 'lazy' : 'eager'"
                                        :src="fullscreen ? image.full : image.img"
                                        x-transition.opacity.duration.500ms x-show="active===index"
                                        @click="swiper.slideNext(500)"
                                    />
                                </div>
                            </template>
                        </div>
                        <div class="swiper-pagination"></div>
                    </div>

                    <div class="absolute inset-0 hidden w-full h-full bg-white nonmobile"
                         :class="{ 'hidden': activeVideoType !== 'youtube' }"
                         x-transition.opacity.duration.500ms x-show="
                             images[active].type === 'video' && activeVideoType === 'youtube'
                         "
                    >
                        <div id="youtube-player" class="w-full h-full"></div>
                    </div>
                    <div class="absolute inset-0 hidden w-full h-full bg-white"
                         :class="{ 'hidden': activeVideoType !== 'vimeo' }"
                         x-transition.opacity.duration.500ms x-show="
                             images[active].type === 'video' && activeVideoType === 'vimeo'
                         "
                    >
                        <div id="vimeo-player" class="w-full h-full"></div>
                    </div>

                </div>
            </div>
        
            <div
                id="thumbs"
                class="hidden xl:flex flex-wrap xl:order-first"
                :class="{ 'fixed justify-center bottom-0 left-0 right-0 mx-6': fullscreen }"
                style="min-height: 100px;"
            >

                <div class="overflow-hidden">
                    <div class="transition-transform duration-500 ease-in-out">
                        <template x-for="(image, index) in images" :key="index">
                            <div class="thumb pb-2 mr-2 xl:mr-0 last:mr-0">
                                <a href="#" @click.prevent="setActive(index);"
                                   class="block border border-gray-300 hover:border-primary"
                                   :class="{'border-primary': active === index}"
                                >
                                    <img :src="image.thumb"
                                         :alt="image.caption || '<?= $escaper->escapeJs($productName) ?>'"
                                         :title="image.caption || '<?= $escaper->escapeJs($productName) ?>'"
                                         width="<?= /* @noEscape */ $smallWidth ?>"
                                         height="<?= /* @noEscape */ $smallHeight ?>"
                                    />
                                </a>
                            </div>
                        </template>
                    </div>
                </div>

            </div>
        </div>
    </div>
</div>
<script>
    function initGallery () {
        return {
            "active": 0,
            "videoData": {},
            "activeVideoType": false,
            "autoplayVideo": false,
            "loopVideo": true,
            "relatedVideos": false,
            "vimeoPlayer": null,
            "fullscreen": false,
            "initialImages": <?= /* @noEscape */ $block->getGalleryImagesJson() ?>,
            "images": <?= /* @noEscape */ $block->getGalleryImagesJson() ?>,
            "appendOnReceiveImages": <?=
                $block->getVar('gallery_switch_strategy', 'Magento_ConfigurableProduct') === 'append' ? 'true' : 'false'
            ?>,
            receiveImages(images) {
                if (this.appendOnReceiveImages) {
                    const initialUrls = this.initialImages.map(image => image.full);
                    const newImages = images.filter(image => ! initialUrls.includes(image.full));
                    this.images = [].concat(this.initialImages, newImages);
                    this.setActive(newImages.length ? this.initialImages.length : 0);
                } else {
                    this.images = images;
                    this.setActive(0);
                }
            },
            resetGallery() {
                this.images = this.initialImages;
                this.setActive(0);
            },
            initActive() {

                this.swiper = new Swiper('.swiper-container', {
                    slidesPerView: 1,
                    loop: false,
                    observer: true,
                    observeParents: true,
                    rebuildOnUpdate: true,
                    preventClicks: true,
                    preventClicksPropagation: true,
                    pagination: {
                        el: '.swiper-pagination',
                        clickable: true,
                        type: 'fraction',
                    }
                }); 
    
                let active = this.images.findIndex(function(image) {
                    return image.isMain === true
                });
                if (active === -1) {
                    active = 0;
                }

                this.swiper.on('slideChange', () => {
                    this.active = this.swiper.activeIndex;
                });

                this.setActive(active);

            },
            setActive(index) {
                this.active = index;
                this.swiper.slideTo(index);
                if (window.youtubePlayer) {
                    window.youtubePlayer.stopVideo();
                }
                if (this.vimeoPlayer) {
                    this.vimeoPlayer.contentWindow.postMessage(JSON.stringify({"method": "pause"}), "*");
                }
                if (this.images[index].type === 'video') {
                    this.activateVideo();
                }
            },
            activateVideo() {
                const videoData = this.getVideoData();

                if (!videoData) { return }

                this.activeVideoType = videoData.type;

                if (videoData.type === "youtube") {
                    if (!window.youtubePlayer) {
                        this.initYoutubeAPI(videoData);
                    } else {
                        window.youtubePlayer.loadVideoById(videoData.id);
                    }

                } else if (videoData.type === "vimeo") {
                    this.initVimeoVideo(videoData);
                }
            },
            getVideoData() {
                const videoUrl = this.images[this.active] && this.images[this.active].videoUrl;

                if (!videoUrl) { return }

                let id,
                    type,
                    youtubeRegex,
                    vimeoRegex,
                    useYoutubeNoCookie = false;

                if (videoUrl.match(/youtube\.com|youtu\.be|youtube-nocookie.com/)) {
                    id = videoUrl.replace(/^\/(embed\/|v\/)?/, '').replace(/\/.*/, '');
                    type = 'youtube';

                    youtubeRegex = /^.*(?:(?:youtu\.be\/|v\/|vi\/|u\/\w\/|embed\/)|(?:(?:watch)?\?v(?:i)?=|\&v(?:i)?=))([^#\&\?]*).*/;
                    id = videoUrl.match(youtubeRegex)[1];

                    if (videoUrl.match(/youtube-nocookie.com/)) {
                        useYoutubeNoCookie = true;
                    }
                } else if (videoUrl.match(/vimeo\.com/)) {
                    type = 'vimeo';
                    vimeoRegex = new RegExp(['https?:\\/\\/(?:www\\.|player\\.)?vimeo.com\\/(?:channels\\/(?:\\w+\\/)',
                        '?|groups\\/([^\\/]*)\\/videos\\/|album\\/(\\d+)\\/video\\/|video\\/|)(\\d+)(?:$|\\/|\\?)'
                    ].join(''));
                    id = videoUrl.match(vimeoRegex)[3];
                }

                return id ? {
                    id: id, type: type, useYoutubeNoCookie: useYoutubeNoCookie
                } : false;
            },
            initYoutubeAPI(videoData) {
                if (document.getElementById('loadYoutubeAPI')) {
                    return;
                }
                const params = {};
                const loadYoutubeAPI = document.createElement('script');
                loadYoutubeAPI.src = 'https://www.youtube.com/iframe_api';
                loadYoutubeAPI.id = 'loadYoutubeAPI';
                const firstScriptTag = document.getElementsByTagName('script')[0];
                firstScriptTag.parentNode.insertBefore(loadYoutubeAPI, firstScriptTag);

                const host = (videoData.useYoutubeNoCookie) ?
                    'https://www.youtube-nocookie.com' :
                    'https://www.youtube.com';

                if (this.autoplayVideo) {
                    params.autoplay = this.autoplayVideo;
                }
                if (!this.relatedVideos) {
                    params.rel = 0;
                }
                const fireYoutubeAPI = document.createElement('script');
                fireYoutubeAPI.innerHTML = `function onYouTubeIframeAPIReady() {
                    window.youtubePlayer = new YT.Player('youtube-player', {
                        host: '${host}',
                        videoId: '${videoData.id}',
                        playerVars: ${JSON.stringify(params)},
                    });
                }`;
                firstScriptTag.parentNode.insertBefore(fireYoutubeAPI, firstScriptTag);
            },
            initVimeoVideo(videoData) {
                let
                    additionalParams = '',
                    src;

                const timestamp = new Date().getTime();
                const vimeoContainer = document.getElementById("vimeo-player");
                const videoId = videoData.id;

                if (!vimeoContainer || !videoId) return;

                if (this.autoplayVideo) {
                    additionalParams += '&autoplay=1';
                }

                if (this.loopVideo) {
                    additionalParams += '&loop=1';
                }
                src = 'https://player.vimeo.com/video/' +
                    videoId + '?api=1&player_id=vimeo' +
                    videoId +
                    timestamp +
                    additionalParams;
                vimeoContainer.innerHTML =
                    `<iframe id="${'vimeo' + videoId + timestamp}"
                        src="${src}"
                        width="640" height="360"
                        webkitallowfullscreen
                        mozallowfullscreen
                        allowfullscreen
                        referrerPolicy="origin"
                        allow="autoplay"
                        class="object-center w-full h-full object-fit"
                     />`;

                this.vimeoPlayer = vimeoContainer.childNodes[0];
            },
            eventListeners: {
                ['@keydown.window.escape']() {
                    this.fullscreen = false
                },
                ['@update-gallery.window'](event) {
                    this.receiveImages(event.detail);
                },
                ['@reset-gallery.window'](event) {
                    this.resetGallery();
                }
            }
        }
     }
</script>