php - OpenCart は入力フィールドのタイプ属性を変更します

Question

私はここで奇妙なことに直面しています。OpenCart の登録フォーム ( index.php?route=checkout/register) に取り組んでいます。
次のようなフォームと2つのフィールドがあります。

<span class="required">*</span> <?php echo $entry_email; ?><br />
<input type="text" name="email" value="" class="large-field" /><br />
<br />
<span class="required">*</span> <?php echo $entry_telephone; ?><br />
<input type="text" name="telephone" value="" class="large-field" />

現在: ブラウザはこれら 2 つのフィールドを次のように解釈します。

<input type="email" name="email" value="" class="large-field">

と

<input type="tel" name="telephone" value="" class="large-field">

しかし、email フィールドの attribute-order を次のように変更すると:

<input type="text" value="" class="large-field" name="email" />

フィールドは本当にテキスト型であり、変換されません。
注意: 最初のもの (電子メール) のみを変更します。その後、電子メールと電話は正しく解析されます。

Firefox、Chrome、Opera でこの予期しない動作が見られ
ますが、入力をプレーンな html にコピーして表示すると問題ありません。

何が起こっているのか、そしてもちろんその理由について何か考えはありますか?

編集:
ブラウザーに送信される完全な HTML ( web-sniffer.netで取得) は、このペーストビンにあります: http://pastebin.com/bCXab6Kb

これは、<input type="text"php が HTML をブラウザーに送信するときに、フィールドが既に変更されていることを意味します。
では、何 (なぜ/どのように)を/<input type="text">型に変換するのか ( name 属性に基づいているように見える)、入力フィールドの属性の順序が変更されたときにこれが失敗するのはなぜですか?emailtel

score 2 · Accepted Answer

現在の安定バージョン 1.5.6 (および現在のバージョン 1.5.6.1 ) までの OpenCartは、デフォルトで (またはデフォルトのテーマで) HTML5 (入力フィールドなど) を使用しません。
これは、opencart が html5 の使用を開始するのはいつですか? と一致しています。(2012 年 4 月): 「人々はまだ IE6 のサポートについて不平を言っています。人々がそれについて泣き言を言うのをやめたら、私たちは HTML5 への移行に集中し始めることができます。」 .

たとえば、ファイルcheckout/register.tpl (v 1.5.6 以降) (変更したもの) には、デフォルトで次のものが含まれています。

<span class="required">*</span> <?php echo $entry_email; ?><br />
<input type="text" name="email" value="" class="large-field" />
<br />
<br />
<span class="required">*</span> <?php echo $entry_telephone; ?><br />
<input type="text" name="telephone" value="" class="large-field" />

ただし、現在のマスターブランチ('13 年 12月) では、一部のページ (:やなど)で HTML5 入力フィールドの一貫性のない使用が見られます。account/register.tplaccount/edit.tpl

<div class="form-group required">
  <label class="col-sm-2 control-label" for="input-email"><?php echo $entry_email; ?></label>
  <div class="col-sm-10">
    <input type="email" name="email" value="<?php echo $email; ?>" placeholder="<?php echo $entry_email; ?>" id="input-email" class="form-control" />
    <?php if ($error_email) { ?>
    <div class="text-danger"><?php echo $error_email; ?></div>
    <?php } ?>
  </div>
</div>
<div class="form-group required">
  <label class="col-sm-2 control-label" for="input-telephone"><?php echo $entry_telephone; ?></label>
  <div class="col-sm-10">
    <input type="tel" name="telephone" value="<?php echo $telephone; ?>" placeholder="<?php echo $entry_telephone; ?>" id="input-telephone" class="form-control" />
    <?php if ($error_telephone) { ?>
    <div class="text-danger"><?php echo $error_telephone; ?></div>
    <?php } ?>
  </div>
</div>
<div class="form-group">
  <label class="col-sm-2 control-label" for="input-fax"><?php echo $entry_fax; ?></label>
  <div class="col-sm-10">
    <input type="text" name="fax" value="<?php echo $fax; ?>" placeholder="<?php echo $entry_fax; ?>" id="input-fax" class="form-control" />
  </div>
</div>

^{ファックスフィールドがどのようにtype="text"あり、テーブルが存在しないこと (div を優先)、そして最後に異なるクラス名に注意してください。}

それはあなたの質問の最も興味深い部分に私たちをもたらします:何 (なぜ/どのように)<input type="text"を型email/ tel(名前属性に基づいているように見える) に変換し、入力フィールドの属性の順序が変更されたときにこれが失敗するのはなぜですか?.

PHP からブラウザーに送信された HTML コード ( http://pastebin.com/bCXab6Kb )を見るとわかるように、input-field の type 属性は既に変更されています。したがって、これを変更するのはブラウザや JavaScript ではありません。
したがって、PHP 自体がコードを変更しないと仮定すると、PHP が実行するスクリプトに、コードをブラウザーに送信する前に、ハードディスク上のファイルに保存されているコードを変更する何かが含まれている必要があります。の）それは「テーマ」、「モジュール」、「拡張機能」などです。
そして、ある種のhtmlパーサーはおそらくそのような単純なタスクを台無しにしないので、最も可能性の高い候補は基本的な検索を行うスクリプトのようなものです交換。

OpenCart に共通する 2 つの (非常に関連性の高い) スクリプトがたまたまあり、この法案に完全に適合します..

OpenCart の「変更システム」
「最新の」(開発) マスターブランチを誤ってダウンロード/インストールした (または貢献者である) 場合は、system/engine/modification.phpのようなファイル(およびいくつかの関連ファイルと対象の php/tpl ファイルの前のxml ファイル ( system/modification.xml )で指定されたルールに従って、php/tpl ファイル内のコード行を検索し、先頭に追加/追加/置換することができます (ハードコードされた制限)。元のファイルを変更せずに解析されます。このかなり自明なxmlファイルには、基本的に、その場で変更するためのファイルごとの「操作」が含まれています。次に例を示します。
```
<file name="system/engine/front.php">
  <operation>
    <search>
      <![CDATA[$action->getFile()]]>
    </search>
    <add position="replace">
      <![CDATA[$this->registry->get('modification')->getFile($action->getFile())]]>
    </add>
  </operation>
</file>         
```
whereは、ファイルが解析される前に$action->getFile()置き換えられます!$this->registry->get('modification')->getFile($action->getFile()) system/engine/front.php
" vQmod™</a>" (別名 Virtual Quick Mod)
vQmod は個別に開発されたパッケージであり、基本的に OpenCart の変更システム (上記) の洗練されたバージョンであり、そこから生まれました。OpenCart のプロダクションリリースを変更するために「アドオン」によって一般的に使用され、フォルダ(OpenCart のルートにある) にインストールされます (デフォルトでは OpenCart に含まれていないため)。vqmodこのフォルダー内vqcacheには、キャッシュされた変更済みファイルをxml保持するフォルダーと、 xml search/replace files. これらの xml ファイルは、 OpenCart の変更システム (上記) と比較し
て、わずかに異なる構文(特に属性) を持っています。position
```
<file name="catalog/view/theme/default/template/checkout/register.tpl">
  <operation>
    <search position="replace">
      <![CDATA[<input type="text" name="email" value="" class="large-field" />]]>
    </search>
    <add>
      <![CDATA[<input type="email" name="email" value="" class="large-field" />]]>
    </add>
  </operation>
  <operation>
    <search position="replace">
      <![CDATA[<input type="text" name="telephone" value="" class="large-field" />]]>
    </search>
    <add>
      <![CDATA[<input type="tel" name="telephone" value="" class="large-field" />]]>
    </add>
  </operation>
  <operation>
    <search position="replace">
      <![CDATA[<input type="text" name="fax" value="" class="large-field" />]]>
    </search>
    <add>
      <![CDATA[<input type="tel" name="fax" value="" class="large-field" />]]>
    </add>
  </operation>
</file>
```
^{注: 上記の例は「embermonkey レスポンシブテーマ」からのものであり、経験している動作の優れた例です: 入力属性を置き換えます。}

これらの変更スクリプトの目的は次のとおりです。

コアファイルを変更する必要がなくなります。概念は非常に単純です... コアファイルを直接変更する代わりに、変更は xml 検索/置換スクリプトファイルとして作成されます。これらのスクリプトファイルは、各「ソース」コアファイルが「include」または「require」php 関数で読み込まれるときに、ページの読み込み中に解析されます。次に、ソースにスクリプトファイルの変更が適用され、一時ファイルに保存されます。その一時ファイルは、実行中に元のファイルに置き換えられます。元のソースファイルが変更されることはありません。これにより、コアファイルを実際に変更することなく、実行中にコアが「仮想的に」変更されます。

これにより、「OpenCart の任意の php または tpl ファイル (メインの index.php を除く) を仮想的に変更する」ことが可能になり、OpenCart のコアファイルの更新やテンプレートの追加/削除などがより簡単かつ確実になります。

最後に、有効なメールアドレス (letters@gmail.com) は、入力のタイプが代わりに設定されている場合に検証に失敗しemailますtext...
モバイルのテーマなど (通常、電話分野にも影響します) ^{1 , 2} .
問題は、ブラウザーが有効なメールアドレスを拒否することではありません (入力フィールドのタイプがemailではなくに設定されている場合text)。email代わりに、デフォルトで入力タイプ(およびなど) を取得しないのは、OpenCart の JSON バリデーターtelです (ユーザーまたはテーマがパッチを適用していない場合):

$('#button-guest').live('click', function() {
   $.ajax({
      url: 'index.php?route=checkout/guest/validate',
      type: 'post',
      data: $('#payment-address input[type=\'text\'], #payment-address input[type=\'checkbox\']:checked, #payment-address input[type=\'radio\']:checked, #payment-address input[type=\'hidden\'], #payment-address select'),
      dataType: 'json',

したがって、明らかに、解決策はこれらの入力タイプを AJAX 呼び出しに追加することです。

$('#button-guest').live('click', function() {
   $.ajax({
      url: 'index.php?route=checkout/guest/validate',
      type: 'post',
      data: $('#payment-address input[type=\'text\']
             , #payment-address input[type=\'email\']   // added
         //  , #payment-address input[type=\'tel\']     // added
             , #payment-address input[type=\'checkbox\']:checked
             , #payment-address input[type=\'radio\']:checked
             , #payment-address input[type=\'hidden\']
             , #payment-address select'
             ),
      dataType: 'json',

結論として、上記の説明を使用すると、次のようになります。

ほとんどの場合、vQmod を含む OpenCart の「完全な」/「一般的な」再配布をインストールしたか、vQmod を含む既存の OpenCart インストールをアップグレードしたか、vQmod に依存するある種のアドオンをインストールし、それを自体。
この mod を見つけて無効にするには、まず OpenCart ディレクトリで「vQmod」というフォルダーを検索します。見つからない場合は、<input type="email"(たとえば) を含む文字列に対してテキスト検索 (OpenCart ディレクトリから開始し、サブディレクトリを含む) を実行し、最初にファイルタイプ xml の結果を調べます。
(電子メール、電話、ファックスなどの) 検証に失敗せずに mod を使用するには、JSON 呼び出しを修正します (既にインストールされている場合は vQmod を使用し、影響を受けるファイルの操作としてこれを追加するだけです)。
あるいは (すでにお気づきのように)、属性の順序を変更して mod をクラッシュさせます (お気付きのように、このページの他の mod の代償として)。
上記のいずれもうまくいかない場合は、OpenCart のクリーンバージョンを再インストールすることを強くお勧めします。

PS: これで vQmod のことがわかりました。(コアファイルを変更する代わりに) それを使用したほうがよいでしょう。なぜなら、「驚くべきことに、パフォーマンスはまったく問題にならないように見える」からです。将来！

score 0 · Accepted Answer

実際、あなたが説明している動作は、OpenCart からのものではありません。少なくとも、デフォルトのテーマを使用したデフォルトのインストールからのものではありません。

JS をオフにして、このページに直接アクセスできます。http://your.ocinstall.com/index.php?route=account/register- 登録ページが開きます。

とにかく、デフォルトのインストール (およびデフォルトのテーマ) には、次の HTML があります。

    <tr>
      <td><span class="required">*</span> <?php echo $entry_email; ?></td>
      <td><input type="text" name="email" value="<?php echo $email; ?>" />
        <?php if ($error_email) { ?>
        <span class="error"><?php echo $error_email; ?></span>
        <?php } ?></td>
    </tr>
    <tr>
      <td><span class="required">*</span> <?php echo $entry_telephone; ?></td>
      <td><input type="text" name="telephone" value="<?php echo $telephone; ?>" />
        <?php if ($error_telephone) { ?>
        <span class="error"><?php echo $error_telephone; ?></span>
        <?php } ?></td>
    </tr>

ただし、Firefox では、属性の順序が変更されます (ただし、属性値は変更されません! ):

<input type="text" value="" name="email" />

Chrome でも同じ - 属性値は変更されません。唯一の理由は、JavaScript ライブラリや別のテーマが使用されている可能性があります。

OpenCart のデフォルトテーマの HTML の doctype はHTML5 として定義されていますが、OpenCart は実際には HTML5 の機能を使用していません。

いずれにせよ、あなたのテンプレートに HTML5 を実際に使用するものがある場合は、恐れずにこれらの機能を楽しんでください。たとえば、あなたの質問の例では、入力のタイプがemailortelの場合、ユーザーはフィールドに意味的に正しいメールアドレスが含まれるまでフォームを送信できずemail、リテラル (非数値) 文字を入力することさえできません。telフィールド... (はい、ユーザーが開発者ツールを介して HTML を変更するまで...)

php - OpenCart は入力フィールドのタイプ属性を変更します

2 に答える 2

Related

Reference