Oxygen Classic - Fix for WooCommerce Product Images & Tabs not loading in WooCommerce v10 and Oxygen Classic v4.9.1.

1-read-me.txt

The JavaScript in this Gist can be added to the JavaScript tab of a Code Block
to prevent this issue from happening until it's fixed in Oxygen's Core.

Please report any issues to support@oxygenbuilder.com.

product-images.js

/*
Add this to the JavaScript tab of a Code Block on the Single Product template
*/

jQuery(document).ready(function ($) {
    var $gallery = $(".woocommerce-product-gallery");

    $gallery.each(function () {
        var $wrapper = $(this);
        var $mainContainer = $wrapper.find(".woocommerce-product-gallery__image").first();
        var $main = $mainContainer.find("img");
        var $mainLink = $mainContainer.find("a");
        var $thumbs = $wrapper.find(".woocommerce-product-gallery__image").not(":first");

        // Show the gallery
        $wrapper.css("opacity", 1);

        // Track which index is currently active
        var currentIndex = 0;

        // Thumbnail click -> swap main image (no lightbox)
        $thumbs.on("click", function (e) {
            e.preventDefault();

            var $img = $(this).find("img");

            $main
                .attr("src", $img.attr("src"))
                .attr("srcset", $img.attr("srcset"))
                .attr("sizes", $img.attr("sizes"))
                .attr("alt", $img.attr("alt"))
                .data("large_image", $img.data("large_image"))
                .data("large_image_width", $img.data("large_image_width"))
                .data("large_image_height", $img.data("large_image_height"));

            // also update the main link's href
            $mainLink.attr("href", $img.data("large_image") || $img.attr("src"));

            // update the currentIndex to match this thumbnail
            currentIndex = $thumbs.index(this) + 1; // +1 because main = 0
        });

        // Main image click -> open Photoswipe lightbox
        $mainLink.on("click", function (e) {
            e.preventDefault();

            var $links = $wrapper.find(".woocommerce-product-gallery__image a"),
                items = [];

            $links.each(function () {
                var $link = $(this).find("img");
                items.push({
                    src: $link.data("large_image") || $(this).attr("href"),
                    w: $link.data("large_image_width") || $link[0].naturalWidth,
                    h: $link.data("large_image_height") || $link[0].naturalHeight,
                    title: $link.attr("alt") || ""
                });
            });

            var pswpElement = document.querySelectorAll(".pswp")[0];
            var options = {
                index: currentIndex, // start at currently active main image
                bgOpacity: 0.8,
                showHideOpacity: true
            };

            var gallery = new PhotoSwipe(pswpElement, PhotoSwipeUI_Default, items, options);
            gallery.init();
        });
    });
});

product-tabs.js

/*
Add this to the JavaScript tab of a Code Block on the Single Product template
*/

jQuery(document).ready(function ($) {
    var $tabWrappers = $(".woocommerce-tabs.wc-tabs-wrapper");

    $tabWrappers.each(function () {
        var $wrapper = $(this);
        var $tabs = $wrapper.find("ul.wc-tabs li a");
        var $panels = $wrapper.find(".wc-tab");

        // Hide all panels except the first
        $panels.hide().attr("aria-hidden", "true");
        $panels.first().show().attr("aria-hidden", "false");
        $tabs.attr("aria-selected", "false").attr("tabindex", "-1");
        $tabs.first().attr("aria-selected", "true").attr("tabindex", "0").parent().addClass("active");

        // Handle tab click
        $tabs.on("click", function (e) {
            e.preventDefault();

            var $this = $(this);
            var target = $this.attr("href");

            // Update tabs
            $tabs.parent().removeClass("active");
            $tabs.attr("aria-selected", "false").attr("tabindex", "-1");

            $this.parent().addClass("active");
            $this.attr("aria-selected", "true").attr("tabindex", "0");

            // Update panels
            $panels.hide().attr("aria-hidden", "true");
            $(target).show().attr("aria-hidden", "false");
        });

        // Optional: keyboard arrow navigation
        $tabs.on("keydown", function (e) {
            var $current = $(this);
            var $all = $tabs;
            var index = $all.index($current);
            var nextIndex;

            if (e.key === "ArrowRight" || e.key === "ArrowDown") {
                nextIndex = (index + 1) % $all.length;
            } else if (e.key === "ArrowLeft" || e.key === "ArrowUp") {
                nextIndex = (index - 1 + $all.length) % $all.length;
            } else {
                return;
            }

            e.preventDefault();
            $all.eq(nextIndex).focus().click();
        });
    });
});