└バリエーション専用画像サンプルソース – オンラインマニュアル

ショップデザイン / テンプレート選択・編集 / クリエイターモード / 商品詳細

バリエーション専用画像（有料オプション）を導入する際の、サンプルソースです。

使用するタグ

$item.is_option_image

バリエーションの表示形式が"バリエーション専用画像を表示する" かどうか

商品詳細（HTML）

57～68

57
58
59
60
61
62
63
64
65
66
67
68

<div class="detail">
<!--商品画像-->
<div class="item-image">
    <{if !$item.multi_image.has_item && $item.is_option_image}>
    <div class="main-image clearfix"><img src="/view/images/common/noimage.png" alt="" class="item-image"></div>
    <{/if}>

<{if $item.multi_image.has_item}>
<{if $item.multi_image.has_item || $item.is_option_image}>
<ul class="gallery">
<{section name=i loop=$item.multi_image.list}>
<li><img src="<{$item.multi_image.list[i].image_L}>" class="item-image" alt=""></li>

283～377

283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375

376
377

<{if $item.has_option}>
<!--オプションがある場合-->
<{if $item.is_option_image}>
<!-- オプション画像ごとの表示 -->
<div class="option-image-wrap">
<!-- オプション1の一覧 -->
<p><{$item.option_sku.option1_label}></p>
<div class="option-image-option1">
<{section name=i loop=$item.option_sku.list}>

<{if $item.option_sku.list[i.index_prev].name1 != $item.option_sku.list[i].name1}>
<a href="<{$item.option_sku.list[i].information_url}>" data-option-image-name1="<{$item.option_sku.list[i].name1}>">
<{if $item.option_sku.list[i].image_S != '' }>
<img src="<{$item.option_sku.list[i].image_S}>" class="option-image" loading="lazy">
<{else}>
<img src="/view/images/common/noimage.png" class="option-image" loading="lazy">
<{/if}>
</a>
<{/if}>
<{/section}>
</div>

<!-- オプション2の一覧 -->
<p><{$item.option_sku.option2_label}></p>
<div class="option-image-option2">
<{section name=i loop=$item.option_sku.list}>
<div data-option-image-name1="<{$item.option_sku.list[i].name1}>"
class="option-image-option2-item <{if $item.option_sku.list[i].is_soldout}>option-image-soldout<{/if}>"
>

<div><{$item.option_sku.list[i].name2}></div>

<!-- 金額 -->
<{if $item.is_subscription_only}>
<p class="price">￥<{$item.option_sku.list[i].subscription_price|number_format}><span>（税込）</span></p>
<{elseif $item.is_subscription}>
<p class="price">定期：￥<{$item.option_sku.list[i].subscription_price|number_format}><span>（税込）</span></p>
<p class="price">￥<{$item.option_sku.list[i].price|number_format}><span>（税込）</span></p>
<{else}>
<p class="price">￥<{$item.option_sku.list[i].price|number_format}><span>（税込）</span></p>
<{/if}>

<!-- 在庫 -->
<{if $item.option_sku.list[i].is_soldout}>
<p class="item-stock item-stock-sku">品切れ</p>
<{elseif $item.option_sku.list[i].is_stock_unlimited}>
<p class="item-stock item-stock-sku">在庫あり</p>
<{elseif $item.option_sku.list[i].is_small_stock}>
<p class="item-stock item-stock-sku">残りわずか<span class="item-stock-count">／あと<{$item.option_sku.list[i].stock_quantity}>個</span></p>
<{else}>
<p class="item-stock item-stock-sku"><span class="item-stock-count">あと<{$item.option_sku.list[i].stock_quantity}>個</span></p>
<{/if}>

<!-- カートに入れるボタン -->
<{if $item.is_subscription_only}>
<{if !$item.option_sku.list[i].is_soldout}>
<div class="modal-open">
<a href="<{$item.option_sku.list[i].cart_entry_subscription_url}>" class="option-image-btn">定期購入する</a>
</div>
<{/if}>
<{elseif $item.is_subscription}>
<{if !$item.option_sku.list[i].is_soldout}>
<div class="modal-open">
<a href="<{$item.option_sku.list[i].cart_entry_url}>" class="option-image-btn">カートに入れる</a>
</div>
<div class="modal-open">
<a href="<{$item.option_sku.list[i].cart_entry_subscription_url}>" class="option-image-subscription-btn">定期購入する</a>
</div>
<{/if}>
<{else}>
<{if $item.option_sku.list[i].is_soldout}>
<{if $item.is_restock_enabled}>
<div><a href="<{$item.option_sku.list[i].restock_url}>" class="option-image-btn option-image-restock-btn">再入荷お知らせ</a></div>
<{/if}>
<{else}>
<div class="modal-open">
<a href="<{$item.option_sku.list[i].cart_entry_url}>" class="option-image-btn">カートに入れる</a>
</div>
<{/if}>
<{/if}>
</div><!-- option-image-option2-item -->
<{/section}>
</div><!-- option-image-option2 -->

<div class="option-image-checkout-wrap">
<a href="#option-image-checkout" class="option-image-checkout-button">買い物カゴに入れる</a>
<{if !$item.is_subscription_only && $item.is_subscription}>
<a href="#option-image-checkout" class="option-image-checkout-button subscription">定期購入する</a>
<{/if}>
<a href="#option-image-checkout" class="option-image-restock-button" style="display:none;">再入荷お知らせ</a>
</div>

</div><!-- option-image-wrap -->

<{elseif $item.is_option_sku}>
<!-- SKUごとの表示 -->

補足事項

行	補足事項
60	$item.is_option_image・・・バリエーションの表示形式が"バリエーション専用画像を表示する" かどうか
61	バリエーション専用画像が登録されていない場合、メイン画像に "no image"表示
65	メイン画像部分のスライド用HTMLタグ表示条件にバリエーション専用画像の表示形式を追加（メイン画像のスライド用HTMLタグ）
285	バリエーション専用画像の表示形式時のブロックを追加
376	if → elseif に変更

商品詳細（CSS）

80～184

80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184

/* オプションごとの画像 */    
.option-image-option1 {    
margin-bottom: 30px;    
margin-top: 8px;    
}    
    
.option-image-option1 img {    
margin: 5px;    
border: solid 2px #eee;    
width: 40px;    
height: 40px;    
object-fit: cover;    
border-radius: 50%;    
max-width: 40px;    
}    
    
.option-image-option1 img.buy {    
border: solid 2px #000;    
}    
    
.option-image-option2 {    
display: flex;    
margin-bottom: 30px;    
margin-top: 8px;    
flex-wrap: wrap;    
gap: 10px 8px;    
}    
    
.option-image-option2-item {    
display: none;    
border: solid 2px #eee;    
padding: 6px 12px;    
cursor: pointer;    
max-width: 100px;    
}    
    
@media screen and (max-width: 768px) {    
.option-image-option2-item {    
max-width: 88px;    
}    
}    
    
.option-image-option2-item.buy {    
border: solid 2px #000;    
}    
    
.price {    
margin: 8px 0;    
font-size: 12px;    
}    
    
.option-image-option2-item .option-image-btn,    
.option-image-option2-item .option-image-subscription-btn {    
display: none;    
}    
    
.option-image-soldout {    
background: #eee;    
position: relative;    
overflow: hidden;    
}    
    
.option-image-soldout::before {    
content: "";    
position: absolute;    
top: 0;    
left: 0;    
width: 141.5%;    
height: 1.5px;    
background-color: #999;    
transform: rotate(45deg);    
transform-origin: top left;    
pointer-events: none;    
z-index: 10;    
}    
    
.option-image-checkout-button {    
width: 300px;    
display: inline-block;    
text-align: center;    
border-radius: 3px;    
margin-bottom: 5px;    
padding: 8px 0;    
font-weight: bold;    
font-size: 13px;    
background-color: #e90;    
}    
    
.option-image-checkout-button.subscription {    
color: #fff;    
background-color: #09e;    
}    
    
.option-image-restock-button {    
width: 300px;    
display: inline-block;    
text-align: center;    
border-radius: 3px;    
padding: 8px 0;    
font-weight: bold;    
font-size: 13px;    
background-color: #666;    
color: #fff;    
}

商品詳細（JavaScript）

27～79

1
:
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79

$(function() {	
	:
	$('.option-image-option1 a').on('click', function() {
	initOptionImage($(this));
	});
	
	$('.option-image-option2-item').on('click', function() {
	$('.option-image-option2-item').removeClass('buy');
	
	if ($(this).hasClass('option-image-soldout')) {
	var restockButton = $(this).find('.option-image-restock-btn');
	if (restockButton.length != 0) {
	$(this).addClass('buy');
	$('.option-image-checkout-button').hide();
	$('.option-image-restock-button').show();
	}
	} else {
	$(this).addClass('buy');
	$('.option-image-checkout-button').show();
	$('.option-image-restock-button').hide();
	}
	});
	
	$('a[href="#option-image-checkout"]').on('click', function(){
	var cartButtonSelector = $(this).hasClass('subscription') ? '.option-image-subscription-btn' : '.option-image-btn';
	var cartButton = $('.option-image-option2-item.buy').find(cartButtonSelector);
	if (cartButton.length == 0) {
	alert('オプションを選択してください');
	return false;
	}
	
	cartButton[0].click();
	
	return false;
	});
	
	var optionImageOption1List = $('.option-image-option1 a');
	if (optionImageOption1List.length != 0) {
	initOptionImage(optionImageOption1List.eq(0));
	}
});	
	
function initOptionImage(currentOption1)	
	{
	$('.option-image-option1 img').removeClass('buy');
	currentOption1.find('img').addClass('buy');
	
	$('.option-image-option2-item').hide().removeClass('buy');
	var option1Name = currentOption1.attr('data-option-image-name1');
	$('.option-image-option2-item[data-option-image-name1="' + option1Name + '"]').show();
	
	$('.option-image-checkout-button').show();
	$('.option-image-restock-button').hide();
}

133～161

133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161

function MakeShop_afterItemOptionInformation(data) {	
	const $img = $('<img>', {
	src: '/view/images/common/noimage.png',
	alt: '',
	class: 'item-image'
	});
	
	$('.main-image').remove();
	if (!data.optionRelatedImageList.length) {
	$('div.item-image').prepend('<div class="main-image clearfix"></div>');
	$('.main-image').append($img);
	} else {
	$('div.main-image').remove();
	}
	
	for (var i = $('.gallery').slick('getSlick').slideCount - 1; 0 <= i; i--) {
	$('.gallery').slick('slickRemove', i);
	}
	
	for (var i = $('.choice-btn').slick('getSlick').slideCount - 1; 0 <= i; i--) {
	$('.choice-btn').slick('slickRemove', i);
	}
	
	for (const image of data.optionRelatedImageList) {
	$('.gallery').slick('slickAdd', '<li><img src="' + image.imageL + '" class="item-image" alt=""></li>');
	$('.choice-btn').slick('slickAdd', '<li><img src="' + image.imageL + '" class="item-image" alt=""></li>');
	}
}

補足事項

行	補足事項
27	バリエーション（カラーなど画像が切り替わる方）選択時の処理
31	バリエーション（サイズなど画像が切り替わらない方）選択時の処理
48	選択したバリエーションをカートに投入する処理
67	バリエーション専用画像の切り替え処理※初回表示のみ
133	バリエーション選択時、専用画像をサーバから取得し表示を切り替える処理（オプション契約中でない場合、画像は取得されない）

商品詳細（HTML）

商品詳細（CSS）

商品詳細（JavaScript）

関連記事