WIP: Image swatches & Image Gallery

Bugs
9

For a temporary solution i have created a dirty ChatGPT script:

In your (child) template create a file named ‘fix-bricks-swatch-thumbs.js’ and place this in: /assets/js/fix-bricks-swatch-thumbs.js
Copy-paste the below code:

(function($){
  'use strict';

  function cacheOriginal($img){
    if (!$img.attr('data-o_src'))     $img.attr('data-o_src', $img.attr('src') || '');
    if (!$img.attr('data-o_srcset'))  $img.attr('data-o_srcset', $img.attr('srcset') || '');
    if (!$img.attr('data-o_data_src'))    $img.attr('data-o_data_src', $img.attr('data-src') || '');
    if (!$img.attr('data-o_data_srcset')) $img.attr('data-o_data_srcset', $img.attr('data-srcset') || '');
  }

  function restoreOriginal($img){
    var oSrc     = $img.attr('data-o_src');
    var oSrcset  = $img.attr('data-o_srcset');
    var oDataSrc = $img.attr('data-o_data_src');
    var oDataSet = $img.attr('data-o_data_srcset');

    if (oSrc && $img.attr('src') !== oSrc) $img.attr('src', oSrc);
    if (typeof oSrcset !== 'undefined' && $img.attr('srcset') !== oSrcset) $img.attr('srcset', oSrcset);
    if (oDataSrc && $img.attr('data-src') !== oDataSrc) $img.attr('data-src', oDataSrc);
    if (typeof oDataSet !== 'undefined' && $img.attr('data-srcset') !== oDataSet) $img.attr('data-srcset', oDataSet);
  }

  function lockSwatchImages($scope){
    // Scope: the variations table only
    var $tbl = $scope && $scope.length ? $scope : $('table.variations');

    // Any images used as swatches inside the table
    var $swatchImgs = $tbl.find('td.value img, .variable-items-wrapper img');

    // Cache originals once
    $swatchImgs.each(function(){
      var $img = $(this);
      cacheOriginal($img);

      // Guard against any script that tries to change src/srcset later
      if (!$img.data('bs_observed')){
        var obs = new MutationObserver(function(mutations){
          mutations.forEach(function(m){
            if (m.type === 'attributes' && (m.attributeName === 'src' || m.attributeName === 'srcset')) {
              restoreOriginal($img);
            }
          });
        });
        obs.observe(this, { attributes: true, attributeFilter: ['src','srcset'] });
        $img.data('bs_observed', true);
      }
    });

    // Also restore on common events that plugins use
    var $form = $tbl.closest('form.variations_form');
    if ($form.length){
      $form.on('found_variation reset_image woocommerce_update_variation_values', function(){
        $tbl.find('td.value img, .variable-items-wrapper img').each(function(){
          restoreOriginal($(this));
        });
      });
    }

    // Optional: visual active state without swapping images
    $tbl.on('click', '.variable-item, [data-value], img', function(){
      var $cell = $(this).closest('td.value');
      $cell.find('.is-selected').removeClass('is-selected');
      $(this).closest('li, a, button, img').addClass('is-selected');
    });
  }

  $(function(){
    lockSwatchImages($('table.variations'));

    // If your theme replaces the table via AJAX, re-lock on DOM changes
    $(document).on('wc_variation_form', function(){
      lockSwatchImages($('table.variations'));
    });
  });

})(jQuery);

In your funtions.php place the following code:

add_action( 'wp_enqueue_scripts', function () {
  if ( is_product() ) {
    wp_enqueue_script(
      'fix-bricks-swatch-thumbs',
      get_stylesheet_directory_uri() . '/assets/js/fix-bricks-swatch-thumbs.js',
      ['jquery'],
      '1.0.0',
      true
    );
  }
}, 20 );

Now it works untill there is a native solution

newisieis

1 Like