【クリエイターモード】テンプレートCompleteでSKU（バリエーション）ごとの画像を表示させることはできますか。 – makeshop よくある質問

デザインテンプレート【Complete】では、最新のデザインセットをショップに適用することで
バリエーションの項目ごと（SKU）の画像が表示されます。

2023.03.30
【リリース完了】SKU（オプション）ごとの画像登録に対応いたします
https://www.magazine.makeshop.jp/release-20230330-02/

2023年のSKUの画像表示機能のリリース以前よりご利用のショップ様におかれましては、
新しいデザインセットを追加して適用するか、またはソースを追記することでSKU（バリエーション）ごとの画像の表示が可能になります。

※編集の際はかならずデザインセットのコピーを保管してからソースを変更してください。

＜ソースの確認方法＞

デザインセットに【Complete】テンプレートをひとつ追加し、ショップに適用はせずに、必要なソース（HTMLとCSS）を参照してください。

＜ソースを追加する手順＞

【商品詳細】

（１）HTMLを追加

ショップデザイン / テンプレート選択・編集 / クリエイターモード / 商品詳細
「HTML」欄内にカーソルを一度置いた状態でキーボードの「Ctrl＋F」キーを押し、表示される検索窓に

sku-option-name

をコピー＆ペーストし、Enterキーを押して以下のソースを探してください。

<td class="sku-option-name">

このソースの前（上の行）に以下を追記（コピー＆ペースト）してください。

追記例）

<td class="sku-img">
	<{if $item.option_sku.list[i].image_S != ''}>
		<{if $item.option_sku.list[i.index_prev].image_S != $item.option_sku.list[i].image_S}>
			<img src="<{$item.option_sku.list[i].image_S}>" data-option-image="<{$item.option_sku.list[i].image_L}>" class="option-image">
		<{/if}>
	<{/if}>
</td>

（２）CSSを追加

ショップデザイン / テンプレート選択・編集 / クリエイターモード / 商品詳細
「CSS」欄の末尾に以下をコピー＆ペーストしてください。

/* SKU image */
.sku-img {
	vertical-align: middle;
}
.sku-img img {
	padding-right: 20px;
}
.option-image {
	max-width: 80px;
}
.option-image:hover {
	cursor: pointer;
}
@media screen and (max-width: 768px) {
	.option-image {
		max-width: 40px;
	}
}

（３）JavaScriptを追加

ショップデザイン / テンプレート選択・編集 / クリエイターモード / 商品詳細
「JavaScript」欄に、以下の内容を参照して必要な記述を追加し、保存してください。

（太字の部分を追加してください。）

$(function() {
    $('.gallery').slick({
        infinite: true,
        prevArrow: '<div class="slick-prev"></div>',
        nextArrow: '<div class="slick-next"></div>'
    });
    $('.choice-btn').slick({
        infinite: true,
        slidesToShow: 100,
        focusOnSelect: true,
        asNavFor: '.gallery'
    });
    $('.gallery').on('beforeChange', function(event, slick, currentSlide, nextSlide) {
        $('.choice-btn .slick-slide').removeClass('slick-current').eq(nextSlide).addClass('slick-current');
    });
    $('.modal-close, .modal-bg').on('click', function() {
        $('.modal-area').fadeOut();
    });
    $('img.option-image').on('click', function() {
        showOptionImage($(this).attr('data-option-image'));
    });
});
function MakeShop_afterItemOptionChange(data) {
    if (data.isSoldout) {
        $('.instock').removeClass('on').addClass('off');
        $('.outstock').removeClass('off').addClass('on');
    } else {
        $('.instock').removeClass('off').addClass('on');
        $('.outstock').removeClass('on').addClass('off');
    }
    showOptionImage(data.imageL);
}
function MakeShop_afterCartEntry(data) {
    if (data.result) {
        $('.cart-badge').text(data.totalQuantity).show();
        $('.modal-area').fadeIn();
    } else {
        data.method.modal(data.error.message);
    }
    return false;
}
function showOptionImage(url) {
    if (url == '') {
        return;
    }
    $('div.item-image ul.choice-btn img[src="' + url + '"]').trigger('click');
}

【買い物かご】

ショップデザイン / テンプレート選択・編集 / クリエイターモード /買い物カゴ

変更前：

<!--商品画像-->
<div class="cart-list-image">
    <a href="<{$cart.list[i].url}>"><img src="<{$cart.list[i].image_S}>" alt="<{$cart.list[i].name}>"></a>
</div>

を以下に変更（太字の部分を追加）し、保存してください。

変更後：

<!--商品画像-->
<div class="cart-list-image">
    <a href="<{$cart.list[i].url}>">
    <{if $cart.list[i].selected_option.image_L}>
        <img src="<{$cart.list[i].selected_option.image_L}>" alt="<{$cart.list[i].name}>">
    <{else}>
        <img src="<{$cart.list[i].image_S}>" alt="<{$cart.list[i].name}>">
    <{/if}>
    </a>
</div>

■マニュアル
バリエーションの登録・編集
https://manual.makeshop.jp/hc/ja/articles/18692070935321

■クリエイターモードタグ
SKU
https://reference.makeshop.jp/creator-mode/contents/detail/index.html#detail-sku

関連記事