こんにちは、makeshopデザイン質問掲示板担当です。
いつもmakeshopをご利用いただきありがとうございます。

クリエイターモードのデザイン編集に苦手意識のあるショップ様へ
今回は商品詳細ページの編集方法を解説します。

内容によっては、サンプルソースの用意があり、コピー＆ペーストでかんたんに対応できるものもありますので、ぜひチャレンジしてみてください。また、操作過程の動画もありますので、視聴しながら操作をお試しいただけます。

前回と同様に各機能のタグ（変数）がすべて入った汎用性の高いデザインセット【Complete】の商品詳細ページの編集方法をご紹介します。

・サブ画像のサムネイルの高さを揃えたい
・「商品説明3」「商品説明4」を表示したい
・「カートに入れる」ボタンをクリックしたら、買い物かご画面へ遷移させたい
・カテゴリー別にデザインしたい

サブ画像のサムネイルの高さを揃えたい

（例）サブ画像の高さがバラバラなので、きれいに揃えて見栄えを良くしたい

⇒登録している画像サイズが異なる場合でも、実際にページへ表示する際の縦・横のサイズを指定することにより揃えることができます。CSSを追記しましょう。

最後尾に以下を追記してください。

（記述例）

.slick-initialized .slick-slide {
    aspect-ratio: 1;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.gallery li img {
    display: block;
    height: auto;
    max-height: 100%;
    max-width: 100%;
    width: auto;
}

.choice-btn li img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

「商品説明3」「商品説明4」を表示したい

（例）商品の魅力をたくさん伝えたいので、既存の商品情報（商品説明、商品説明2）とは別の掲載枠で商品情報をさらに表示したい

⇒「商品説明」は4枠あり、テンプレートの初期では「商品説明」「商品説明2」が表示されるようにデザインされています。残りの「商品説明3」「商品説明4」は記述を追加することにより商品説明ページへ表示させることができます。

※「商品説明3」と「商品説明4」は以下よりあらかじめ内容を登録しましょう。

商品管理 / 商品一覧 / 商品登録 もしくは 商品編集

HTML欄の表示したい位置に以下の記述を追加します。
（記述例）

<!--商品説明3-->
<{if $item.description3}>
  <div class="item-description border-top">
    <{$item.description3}>
  </div>
<{/if}>
<!--商品説明4-->
<{if $item.description4}>
  <div class="item-description border-top">
    <{$item.description4}>
  </div>
<{/if}>

例えば「商品説明2」の後ろに「商品説明3」「商品説明4」を表示させたい場合は、以下の位置に追記してください。

まずは、「商品説明2」の記述を探します。（※変数タグ<{$item.description2}>で探します）

初期ソースでは、HTML欄529から533行目付近に以下の記述があります。
※初期ソースのアップデートにより記述位置が変更になることがあります。

<{if $item.description2}>
    <div class="item-description border-top">
        <{$item.description2}>
    </div>
<{/if}>

上記の後ろに、「商品説明3」「商品説明4」を表示する記述を追加してください。

＜追記後の状態＞

<{if $item.description2}>
    <div class="item-description border-top">
        <{$item.description2}>
    </div>
<{/if}>

<!--商品説明3-->
    <{if $item.description3}>
        <div class="item-description border-top">
            <{$item.description3}>
        </div>
    <{/if}>

<!--商品説明4-->
    <{if $item.description4}>
        <div class="item-description border-top">
            <{$item.description4}>
        </div>
    <{/if}>

「カートに入れる」ボタンをクリックしたら、買い物かご画面へ遷移させたい

（例）「カートに入れる」ボタンを押下すると、『カートを見る』『ご購入手続きへ進む』が表示されるのですが、直接買い物かご画面へ遷移させたい

以下の記述を削除してください。

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;
}

カテゴリー別にデザインしたい

（例）特定のカテゴリーに所属している商品だけに情報を表示したい
※「基本カテゴリ」の設定を参照して、表示を出し分けします

例えば、特定のカテゴリーに所属している商品だけ使えるクーポンがあることを「この商品について問い合わせる」の前に表示したい場合

（1）カテゴリーを識別するための「カテゴリID」が必要になります。

該当カテゴリーのカテゴリIDを確認します。

商品管理 / カテゴリ設定

（2）商品詳細ページに該当のカテゴリーにだけ表示する内容を追記します。

HTML欄　520行目付近
※初期ソースのアップデートにより記述位置が変更になることがあります。

<p class="item-contact"><a href="<{$item.contact_url}>">この商品について問い合わせる</a></p>

上記の前に以下を追記します。

（記述例）

<{if $item.base_category.code == 'カテゴリID'}>
    ○○のカテゴリーに所属している商品ページにだけ表示します。
<{/if}>

 

 

---

 

テキストだけでなく、画像リンクを表示することもできます！

（1）画像を用意します。

（2）画像をファイルサーバへアップロードします。

（3）該当カテゴリーのカテゴリIDを確認します。

商品管理 / カテゴリ設定

（4）商品詳細ページに該当のカテゴリーにだけ表示する内容を追記します。

HTML欄　520行目付近
※初期ソースのアップデートにより記述位置が変更になることがあります。

<p class="item-contact"><a href="<{$item.contact_url}>">この商品について問い合わせる</a></p>

上記の前に以下を追記します。

（記述例）

<{if $item.base_category.code == 'カテゴリID'}>
    <a href="リンク先のURL" target="_blank"><img src="画像のURL（パス）" alt="画像名"></a>
<{/if}>

 

 

いかがでしたでしょうか。
コツをつかめば、サクッと編集できちゃいます！

それではまた！