※2014年4月21日14時頃以降に作成された設定はフォーム変換の仕様が変更されています。詳しくは下記、記事をご参照ください。
■ドラッグドロップで持ってきたフォームの内部動作を変更しました
サイト内検索やECカートにかかせないフォームの機能ですが、shuttoでも利用できるようになりました。
使い方は簡単。
今までと同じようにドラッグ&ドロップするだけです。
(form要素にリピート設定は使えません。)
ラベル要素やチェックボックス要素を1つ1つ持ってくるのは大変ですので、その場合はHTMLの「構造を保持」オプションにチェックをいれると簡単です。
注意点としては、PCでは枠線や色などがCSSで整えられていたものが、スマホ変換後は「見えなかった枠が見える」「枠が消える」「色が変わってしまった」という場合があります。※スマホ変換により、CSSの構造が変わる場合があるためです。
その場合は、shuttoマニュアル(ダウンロード(3,470KB))のP.38「CSSの設定」をご確認いただき、CSSを適宜設定していただく必要があります。
ただ、下記の例のようにJavaScriptを使って制御している場合、このままではsubmitボタン(「カートに入れる」「検索」等のボタン)が動作しません。
【JavaScriptでsubmitするソース例】
</a>
ECCUBE等でよく見られるパターンです。
この場合、PCサイトからもってきたsubmitボタンの代わりに、HTMLで<input type=”submit”>ボタンを設置してあげます。
1.PCサイトから持ってきたsubmitボタンを消す。
CSSの設定からボタンを指定して「display: none;」で消すこともできますが、「抽出の設定」にある「非表示にする要素」で消すこともできます。
ここでは、img id=”cart” の要素を非表示に指定しました。
2.JavaScriptを使わないsubmitボタンを挿入する
HTML挿入機能を使ってinputボタンのソースを挿入します。
「form=」にはformのidを入れます。
formにidがついていないときは、「form=”formのセレクタ”」で指定することができます。例)form=”form[name=’form’]” など
変換例
http://shutto.com/view/KxLrE1n
※JSタグは埋め込んでおりませんので、プレビューのみ確認可能です。
また、shuttoがJavaScript情報を持ってこれない特性上、ECの商品ページ等で色やサイズ等の変更をJavaScript制御にしている場合も対応ができませんので、ご利用の際はお気をつけください。