商品画像の余白を元に戻せだなんだ

2022/4/11追記
下記のURLのように、表示される画像をあえてリサイズ画像（サムネイル）にしているサイトがほとんどかと思います。
なので逆に該当記述をコメントアウトして画像が差し替わるか確認してください。
表示する画像を余白のないオリジナル画像にしてから正方形で表示したい場合はcssを調整してください。
商品画像の表示向きがおかしい

 

1. 以下の内容でfirst.jsとして保存

// 商品詳細 
$(function(){
  (function(){
    if( !$('.goodsItems_10').length ) return;

    $('#gallery img').add('.mainPhoto+ul li p.photo img').each(function(){
      var src = $(this).attr('src');
      src = src.replace(/(item_[^\/]+?\/)/, '$1item_XL/');
      $(this).attr('src', src);
    });

    $('#gallery a').add('.mainPhoto+ul li p.photo a').each(function(){
      var href = $(this).attr('href');
      href = href.replace(/(item_[^\/]+?\/)/, '$1$1');
      $(this).attr('href', href);
    });
  })();
  (function() {
    $('#categoryGoodsListForm ul.itemList >li, #SearchGoodsListFrom ul.itemList >li, #campaignGoodsListForm ul.itemList >li').each(function() {
        var src = $('.photo a img', $(this)).attr('src');
        src = src.replace(/(images\/material\/)/, '$1item_XL/item_XL/’);
        $('.photo a img', $(this)).attr('src', src);
    });
  })();
});

2. FTPにてjs/moduleの下にファイルをアップロード

3. サイト管理にて、api.jsの前に以下のタグを張り付け

<script src="//【お客様アカウント】.xaas.jp/docs/js/module/first.js"></script>

仕上がりはこんな構成になる

<script src="//【お客様アカウント】.xaas.jp/docs/js/vendor/bundle.js"></script>
<script src="//【お客様アカウント】.xaas.jp/docs/js/module/first.js"></script>
<script src="https://ssl.xaas.jp/ex/js/api.js"></script>
<script src="//【お客様アカウント】.xaas.jp/docs/js/module/ex.js"></script>
<script src="//【お客様アカウント】.xaas.jp/docs/js/main.js"></script>

4. js/moduleの下のex.jsに以下を”追記”

function getItemCarousel(items, param) {
  var html = '';
  var column = getColumn(param.column);
  html += '<ul class=”carousel_' + param.deal + '">';
  items.forEach(function(item, i) {
    var iconlist = '';
    if ($.isArray(item.icon) && item.icon.length) {
      iconlist += '<span class=”ex_item_icon”>';
      item.icon.forEach(function(icon, i) {
        iconlist += '<img src=”' + icon.path + '” alt=”' + icon.replace_caption + '">';
      });
      iconlist += '</span>';
    }
    var index = (i + 1);
    var code = item.url.replace(/.+\/([^\/]+?)\/$/, '$1');
    var copy = (+param.catchcopy) ? '<span class=”ex_item_copy”>' + item.copy + '</span>' : '';
    var price = (item.price.discount_price) ? item.price.discount_price : item.price.sales_price;
    var img = item.image.replace(/^(.+?\/)([^\/]+?)$/, '$1item_XL/$2');

    var figcaption = '<figcaption>\
      <span class=”ex_item_name”>' + item.name + '</span>\
      <span class=”ex_item_price”>&yen;' + price + '<span>（税込）</span></span>' + copy + '\
      </figcaption>';
    var image = '<span class=”ex_item_image”><img src=”' + img + '” alt=”' + item.name + '"></span>';
    var figureInnter = (+param.position === 1) ? figcaption + image : image + figcaption;
    html += '<li class=”item_' + index + '">\
      <a href=”' + item.url + '">\
        <figure>\
           ' + iconlist + figureInnter + '\
        </figure>\
      </a>\
    </li>';
  });
  html += '</ul>\
  <div class=”slick_pager”></div>';
  return html;
}

function getItemList(items, param) {
  var html = '';
  var column = getColumn(param.column);
  param.column_sp = (param.column_sp) ? param.column_sp : 3;
  var spCol = getSpCol(param.column_sp);
  html += '<ul class=”row row_inline' + spCol + '">';
  items.forEach(function(item, i) {
    var iconlist = '';
    if ($.isArray(item.icon) && item.icon.length) {
      iconlist += '<span class=”ex_item_icon”>';
      item.icon.forEach(function(icon, i) {
        iconlist += '<img src=”' + icon.path + '” alt=”' + icon.replace_caption + '">';
      });
      iconlist += '</span>';
    }
    var index = (i + 1);
    var code = item.url.replace(/.+\/([^\/]+?)\/$/, '$1');
    var copy = (+param.catchcopy) ? '<span class=”ex_item_copy”>' + item.copy + '</span>' : '';
    var price = (item.price.discount_price) ? item.price.discount_price : item.price.sales_price;
    var img = item.image.replace(/^(.+?\/)([^\/]+?)$/, '$1item_XL/$2');

    var figcaption = '<figcaption>\
      <span class=”ex_item_name”>' + item.name + '</span>\
      <span class=”ex_item_price”>&yen;' + price + '<span>（税込）</span></span>' + copy + '\
      </figcaption>';
    var image = '<span class=”ex_item_image”><img src=”' + img + '” alt=”' + item.name + '"></span>';
    var figureInnter = (+param.position === 1) ? figcaption + image : image + figcaption;
    html += '<li class=”item_' + index + ' col ' + column + '">\
      <a href=”' + item.url + '">\
        <figure>\
           ' + iconlist + figureInnter + '\
        </figure>\
      </a>\
    </li>';
  });
  html += '</ul>';
  return html;
}