バージョン選択

フォーラム

メニュー

オンライン状況

63 人のユーザが現在オンラインです。 (44 人のユーザが フォーラム を参照しています。)
登録ユーザ: 0
ゲスト: 63
もっと...

サイト内検索

質問 > フロント機能 > EC-CUBE2.17でBootstrap4を利用したいのですが…

フロント機能

新規スレッドを追加する

スレッド表示 | 新しいものから 前のトピック | 次のトピック | 下へ
投稿者 スレッド
yushi
投稿日時: 2020/5/5 0:12
対応状況: 確認中
半人前
登録日: 2018/5/13
居住地:
投稿: 14
EC-CUBE2.17でBootstrap4を利用したいのですが…
▼テンプレート
[EC-CUBE] EC-CUBE2.17、新規インストール
[onamae.com] SD11プラン
[OS] Windows10
[PHP] 使用しているPHPのバージョン 5.6.40
[データベース] 使用しているDB名 Mysql、バージョン 5.6.14
[ブラウザ] 使用しているブラウザ名、chrome バージョン: 81.0.4044.129
[導入プラグインの有無] 無
[カスタマイズの有無] Bootstrap4を利用してレスポンシブにしたいと思っています。
[現象] 再現手順や、どのような現象が発生しているかなど、具体的に

お世話になっております。
Bootstrap4.2.1のcssとjsをダウンロードし、html/user_data/packages/テンプレート名/cssフォルダに入れました。
data/Smarty/templates/テンプレート名/site_frame.tplのヘッダに
<link rel="stylesheet" href="<!–{$TPL_URLPATH}–>css/bootstrap.min.css" type="text/css" media="all" />
<script type="text/javascript" src="<!–{$TPL_URLPATH}–>js/bootstrap.min.js"></script>

を追加しました。
Smarty→frontparts→blockのパーツにBootstrapのコンポーネントを(例えばcardやbutton)挿入しても動作しません。
どうか、ご教授いただけますよう、よろしくお願いいたします。
468
投稿日時: 2020/5/5 10:47
対応状況: −−−
登録日: 2008/10/26
居住地:
投稿: 3217
Re: EC-CUBE2.17でBootstrap4を利用したいのですが…
bootstrap.min.jsを読み込む前にjQueryのjsを読み込んでおく必要があると思いますが
その辺りの記述の順番は問題ありませんか?

あと、
bootstrap.min.cssとbootstrap.min.jsはリンク切れにはなっていないですか?
特にbootstrap.min.jsのリンクがjs/bootstrap.min.jsを指定されていますが
「html/user_data/packages/テンプレート名/cssフォルダに入れました。」とありますので
css/bootstrap.min.jsではないのでしょうか?


----------------
株式会社シロハチ
■ECCUBE2系、3系構築カスタマイズご相談ください。
EC-CUBE3マニュアル
blog

yushi
投稿日時: 2020/5/5 18:06
対応状況: 開発中
半人前
登録日: 2018/5/13
居住地:
投稿: 14
Re: EC-CUBE2.17でBootstrap4を利用したいのですが…
shiro8様

ご回答ありがとうございます。
ご指摘の通り、
jQueryの読み込みを忘れていました。
そして、jsディレクトリも違っておりました。
ありがとうございました。

しかし、今だに動かない状態です。
管理画面のパラメーターを指定する必要などがあるのでしょうか?

お忙しい中、申し訳ございませんがお教えいただけますと幸いです。
468
投稿日時: 2020/5/5 21:31
対応状況: −−−
登録日: 2008/10/26
居住地:
投稿: 3217
Re: EC-CUBE2.17でBootstrap4を利用したいのですが…
特にパラメータを設定する必要はないと思います。

基本、フロントエンドの話になるかと思いますので
実際のサイトを見ながらブラウザのデベロッパーツール等で
Javascript等でエラーが出ていないか等、リアルタイムで調査する形になるのではないかと思います。


----------------
株式会社シロハチ
■ECCUBE2系、3系構築カスタマイズご相談ください。
EC-CUBE3マニュアル
blog

yushi
投稿日時: 2020/5/6 3:53
対応状況: 解決済
半人前
登録日: 2018/5/13
居住地:
投稿: 14
Re: EC-CUBE2.17でBootstrap4を利用したいのですが…
shiro8様

ありがとうございました。
chromeのデベロッパーツールで見ると、
確かにエラーになっていました。

もう一度一から再確認してみます。
ありがとうございました。
yushi
投稿日時: 2020/5/7 13:52
対応状況: 解決済
半人前
登録日: 2018/5/13
居住地:
投稿: 14
Re: EC-CUBE2.17でBootstrap4を利用したいのですが…
shiro8さんありがとうございました。

動かない理由は、site_frame.tplに記述した

<!?{$TPL_URLPATH}?>が原因でした。

<!--{$TPL_URLPATH}-->に変更したところ、動作しました。

ありがとうございます。
スレッド表示 | 新しいものから 前のトピック | 次のトピック | トップ


 



ログイン


EC-CUBE公式 Amazon Payプラグイン

統計情報

総メンバー数は88,291名です
総投稿数は109,691件です

投稿数ランキング

1
seasoft
7365
2
468
3217
3
AMUAMU
2712
4
nanasess
2303
5
umebius
2085
6
yuh
1818
7
h_tanaka
1610
8
red
1568
9
mcontact
1240
10
tsuji
958
11
fukap
907
12
shutta
835
13
tao_s
796
14 ramrun 789
15 karin 689
16 sumida 641
17
homan
633
18 DELIGHT 572
19
patapata
502
20
flealog
485


ネットショップの壺

EC-CUBEインテグレートパートナー

Copyright© EC-CUBE CO.,LTD. All Rights Reserved.