【クリエイターモード】テンプレート&moreで、「バリエーションの項目ごと」に「お気に入り登録」ボタンを設置することは可能ですか。 – makeshop よくある質問

バリエーションの項目ごと（SKU）に「お気に入りに登録する」ボタンを設置することができます。

＜表示例＞

※初期値のソースを変更した一例です。
初期値のソースからカスタマイズされている場合は、この通りに表示されない可能性があり、
個別のデザインカスタマイズとなりますので、無償サポートの対象外となります。

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

欄内に一度カーソルを置いた状態で、キーボードのCtrlとFキーを同時に押し、表示される検索窓に

<a href="<{$item.favorite_entry_url}>">

と入力（コピー＆ペースト）し、キーボードのEnterキーを押して以下の記述を見つけてください。

<div class="favorite">
    <a href="<{$item.favorite_entry_url}>">
        <i class="material-icons"></i>
        <span></span>
    </a>
</div>

こちらが「お気に入りに登録する」のハートのアイコンを表示するHTMLです。

この記述を「バリエーションの設定がない場合に表示する」という条件文で囲んでください。

＜追記後＞

<{if $item.has_option}><{else}>
<div class="favorite">
    <a href="<{$item.favorite_entry_url}>">
        <i class="material-icons"></i>
        <span></span>
    </a>
</div>
<{/if}>

（２）SKU（バリエーションの項目ごと）のリスト内に、「お気に入りに登録する」リンクを追記します。

同じ画面の商品詳細「HTML」内で、Ctrl＋F で

$item.option_sku.list[i].cart_entry_url

を検索し、この記述の最後（３か所あるうちの３つ目）の後方の</li>
（SKUのリストの<li>～</li>の閉じ）を確認してください。

この</li>の前に、「お気に入りに登録」のHTMLを記述し保存してください。

＜追記後＞

	     <{/if}>
          </div>
	  <div class="sku-favorite"> <a href="<{$item.option_sku.list[i].favorite_entry_url}>"><i class="fas fa-heart"></i></a></div>
    </li>
</ul>

（３）同じ画面の商品詳細「HTML」

Ctrl＋F で

<{$module.head}>

を検索し、この記述の前に、アイコンフォント（fontawesome）を表示するための記述を追記してください。

＜追記後＞

<link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
<{$module.head}>

（４）同じ画面の商品詳細「CSS」
Ctrl＋F で

.item-select li

を検索し、以下の記述を見つけてください。

.item-select li {
  text-align: center;
  min-width: 60px;
  width: 14%;
}

この記述を変更して、追加したハートのアイコンがはみ出さないように調整してください。
アイコンの色の指定なども必要に応じて追記し、保存してください。

＜変更例＞

.item-select li {
  text-align: center;
  min-width: 50px;
  font-size:90%;
}
/* favorite icon */
.fa-heart::before {
  color: #f65372;
  font-size: 20px;
}

（５）スマートフォン表示で位置がずれる場合は、
同じ画面の商品詳細「CSS」
Ctrl＋F で

.item-select .sku-cart

を検索し、960行目より後方の以下の記述を削除または変更して調整し、保存してください。

  .item-select .sku-cart {
    width: 100%;
  }

↓

＜変更後＞

  .item-select .sku-cart {
    width: 85%;
  }

など

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

■makeshopサポート
クリエイターモードの基本的な書き方と真偽値を覚えよう
https://www.support.makeshop.jp/design/?p=12231

関連記事