ショップデザイン / テンプレート選択・編集 / クリエイターモード / 商品詳細
バリエーション専用画像(有料オプション)を導入する際の、サンプルソースです。
使用するタグ
$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 376 |
<{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 |
バリエーション選択時、専用画像をサーバから取得し表示を切り替える処理 (オプション契約中でない場合、画像は取得されない) |