この記事では、1C-Bitrixサイト管理用に作成した拡張機能について説明します。この拡張機能は、上記で発表された問題を解決します。
Google自体はレスポンシブサイトを好みます。1つのサイトは2つのコンテンツよりも優れていますが、形式は異なります。 スタジオとそのクライアントにとって、アダプティブサイトは経済的な観点からも魅力的です。アダプティブサイトは、オンラインおよびモバイルバージョンよりも開発とサポートが安価になります。
そのため、1C-Bitrixにサイトがあり、Bootstrap3に統合されたレイアウトがあり、モバイルユーザーを支援したいと考えています。
以前は、アダプティブバージョンのサイトの多かれ少なかれ見た目を実現するために、レイアウトおよびコンテンツマネージャーは素晴らしい可視性クラス「.hidden-lg、.hidden-md、.hidden-smおよび.hidden-xs」を使用していました。 これは、ユーザーのさまざまな画面解像度で不要なブロックを隠すのに十分です。
「しかし、リソースはどうですか？」写真とjsは、ユーザーのデバイスにアップロードおよびアップロードされています。 時にはメガバイトの不要なトラフィックであり、モバイルユーザーについて言えば、高価で低速のトラフィックです。 ここでは、もちろん、「タグがあり、jsをチェックします！」を無視できますが、同じコンテンツマネージャーはこれらのツールを使用して問題を解決できないことを理解しています。
これを反映して、可視性クラスはもちろん良いことですが、もっと効果的なツールを作成する必要があるという結論に達しました。 このツールは、ユーザーのデバイス上のコンテンツのダウンロードをキャンセルできるようにする必要があります。つまり、サーバー自体が特定のコードを提供してユーザーがダウンロードしないようにする必要があります。 同時に、ツールはできるだけシンプルで、可視性クラスのようにシンプルでなければなりません。
私は、ページのレンダリング中ではなく、モバイルユーザーを「まだ進行中」に判断できるソリューションを探し始めました。 このソリューションは、PHPライブラリMobile Detect（地下のリンク）であることが判明しました。 このPHPライブラリを使用すると、スマートフォン/タブレット/デスクトップのユーザーを特定できます。また、サイトにアクセスしたユーザーのデバイスに関する多くの背景情報も提供します。 さまざまなライブラリの中から、私は1つの方法のみを選択し、「モバイルユーザーかどうか」という質問に答えました。 もちろん、タブレットも隔離することはできましたが、スマートフォンでそれらをヒープにすくい上げました。
最初は、モバイルユーザーとデスクトップユーザーを分離できるため、ツール自体を作成する必要があります。
ここでは、1C-Bitrix API、特にOnEndBufferContentイベント（フッター内のリンク）が役立ちます。 このメソッドは、バッファリングされたコンテンツが表示されるときに呼び出され、それらを操作できるようにします。
少しずつ、OnEndBufferContentイベントをインターセプトし、Mobile Detectライブラリを接続して、ユーザーが前にモバイルであるかどうかを確認します。 次に、答えに応じて、コンテンツから不要なブロックを破棄し、残りを出力のためにユーザーに転送します。
コンテンツ管理者向けに、最も単純なページレイアウトオプションを作成しました。 <lg> </ lg>でラップされたコンテンツはデスクトップでのみ表示され、<xs> </ xs>はモバイルデバイスでのみ表示されます。 明確でシンプルかつ効果的。 当然、好ましくないブロックをキャッチすると、マークアップタグ<lg> </ lg> <xs> </ xs>もコードから切り取られるため、レイアウトのセマンティクスを損なうことがなくなります。
これは完了できたかもしれませんが、スタジオには多くのプロジェクトがあり、コードを前後にコピーするのは不便です+何とかして更新する必要があります。 そのため、稼働時間をモジュールにまとめてから、Marketplaceの別の拡張機能にまとめました。 拡張機能の作業中に、管理パネルに表示される使用方法の指示と、同じ質問「mobile？」に答えるAPIメソッドを取得しました。 最新のイノベーションにより、コンポーネントとテンプレートを作成する際にモジュールを使用できるようになりました。ここでは、空想の飛翔は無限であり、コンポーネントテンプレートはユーザーに変換および適合できます。そして最も重要なことは、すべてが組み込みのBitrixキャッシュと非常に友好的です
その結果、1C-Bitrix UTの可視性クラスの迅速かつ単純な類似物を作成することができました。 このソリューションを使用すると、さまざまなタイプのユーザーに対してコンテンツを非表示および表示できるだけでなく、トラフィックを大幅に節約し、ページの読み込み時間を短縮し、js携帯電話やサイトのデスクトップバージョンの他の楽しみで難しいスライダーを不要にすることなく、モバイルデバイスのプロセッサーをアンロードできます。
何が起こったかのスクリーンショットのカップル：
