独自の画像要素(ウィジェット)を統合する(店舗情報ウィジェットの例)

昨日、私はからウィジェットを作成するという問題に直面しました ショップ情報 インストールするオンライン ショップの評価ポータル。 マーチャント アソシエーション 使用できるようにします。

残念ながら、Shopware Store からのプラグインはありません。 そのため、コードを手動で配置する必要がありました。

これを行うために、まず、サイトのバックエンドでショップ情報ウィジェットを構成しました。

独自の画像要素(ウィジェット)を統合する(店舗情報ウィジェットの例)

その後、コードはもう少し深く利用できます。

独自の画像要素(ウィジェット)を統合する(店舗情報ウィジェットの例)

次のステップで、このコードをフッターに挿入しました。 ftp プログラム (Filezilla など) を起動して、以下を探します。

/テーマ/フロントエンド/あなたのテーマ名/フロントエンド/インデックス

この時点で、既に独自のテーマを使用していると仮定します。そうしないと、変更は更新に対して安全ではありません。 それ以外の場合、Shopware は次のドキュメントを提供します。

テンプレートに変更を加える

独自の画像要素(ウィジェット)を統合する(店舗情報ウィジェットの例)

変更を加える前に常に現在のファイルのバックアップ コピーを作成し、現在の日付を名前に追加します。

上記のコードをテキスト エディター (Notepad++ など) で挿入します。

独自の画像要素(ウィジェット)を統合する(店舗情報ウィジェットの例)

Shopware オンライン ショップの下部にウィジェットが表示されます。 もちろん見た目はあまり良くありません。 したがって、ショップ情報は、このウィジェットを右下にしっかりと配置する小さなコード スニペットを提供します。

@media のみの画面と (最小幅: 768px) { div#shopauskunft_widget { display: block; 位置: 固定; 右: 10px; 下: 10px; }}

しかし、それをどうするか?

Showare バックエンドで追加の css ファイルを指定できます。 最初に、上記のコードを含む新しい css ファイルを ftp 経由でアップロードします。

独自の画像要素(ウィジェット)を統合する(店舗情報ウィジェットの例)

あとは、このファイルを使用するよう Shopware 5 に指示するだけです。 これを行うには、バックエンドに移動します 設定/テーママネージャー...

独自の画像要素(ウィジェット)を統合する(店舗情報ウィジェットの例)

... テーマを選択し、[テーマの構成] をクリックします。

[構成] タブで...

独自の画像要素(ウィジェット)を統合する(店舗情報ウィジェットの例)

…「その他の CSS ファイル」の下に CSS ファイルを入力します。

<link href="/ja/主題/フロントエンド/あなたのテーマ名/frontend/_public/src/css/shopauskunft.css?template=itintime_170425&is_preview=on" media="all" rel="stylesheet" type="text/css" />

ショップのキャッシュを空にして、テーマをコンパイルします。

Shopware 5 のキャッシュをクリアする

出来上がり…あなたのウィジェットは見栄えがします! 🙂

独自の画像要素(ウィジェット)を統合する(店舗情報ウィジェットの例)

ショップ情報からの RBA ウィジェットは、評価メールを送信するために引き続き必要です。 この投稿で設定方法を説明します。

Shopware 5 のショップ情報から RBA ウィジェットをインストールする