0

私はウェブショップを持っています。私にそれを提供してくれる会社があります。したがって、それらはホストとデータベースのためにとどまります。Webショップを管理できる管理者側がいます。そこで、いくつかの例外を除いて、WebサイトのCSS、HTML、およびJavaScriptを変更できます。

この例外の1つである「チェックアウトページの構造」を変更したいのですが、私のWebショップを提供している会社のサポートによると、JavaScriptを使用して構造を変更する必要があります。Jqueryのユーザーフレンドリーです。

理論:(これは、エンドクライアント側で現在どのように見えるかです）：

**Products list on the cart:**
------------------------------
I   Art1   10$   10units     I
I   Art2    5$    4units     I
I   Art3    1$    1units     I
------------------------------

**Payments method:**
--------------
I   Visa     I
I   Invoice  I
I   SMS      I
--------------

**Freight Alternative:**
-------------------
I   Ordinarie     I
I   DHL Saver     I
I   DHL Express   I
-------------------

**Adress Alternative:**
-----------------------
I   Actually adress   I
I   Customer Name     I
I   Customer Telefon  I
-----------------------

（これは、エンドクライアント側でどのように表示したいかです）：

**Products list on the cart: Payments method: Freight Alternative: Adress Alternative:**
-----------------------------------------------------------------------------------
I   Art1   10$   10units     I   Visa     I   Ordinarie     I   Actually adress   I
I   Art2    5$    4units     I   Invoice  I   DHL Saver     I   Customer Name     I
I   Art3    1$    1units     I   SMS      I   DHL Express   I   Customer Telefon  I
-----------------------------------------------------------------------------------

一般的に、これは会社が提供するデフォルトのHTMLチェックアウトページのように見えます。

<html><!-- CHECKOUT PAGE DEFAULT STRUCTURE -->
<body>

<div>List products on the cart, Example: Art1, Art2, Art3, prices, quantities</div>
<div>
  <div>Payment method, Example: Visa, Invoice, SMS</div>
  <div>Freight method, Example: ordinary, UPS saver, UPS express</div>
  <div>Customer address, Example: Delivery adress, Phone number, Contact person</div>
</div>

</body>
</html>

ステップ1：構造を変更できるJQueryの代替スクリプトを見つけます。

    <html><!-- CHECKOUT PAGE DEFAULT STRUCTURE -->


<!-- MAGICAL JQUERY SCRIPT FROM STACKOVERFLOW ANSWER -->
<script>
script
script
</script>
<!-- END -->


    <body>

    <div>List products on the cart, Example: Art1, Art2, Art3, prices, quantities</div>
    <div>
      <div>Payment method, Example: Visa, Invoice, SMS</div>
      <div>Freight method, Example: ordinary, UPS saver, UPS express</div>
      <div>Customer address, Example: Delivery adress, Phone number, Contact person</div>
    </div>

    </body>
    </html>

ステップ2：デフォルトページから構造を壊すようにJqueryスクリプトを構成します。したがって、新しいスクリプトを保存した後でページを更新すると、次のようになります。

        <html><!-- CHECKOUT PAGE DEFAULT STRUCTURE -->


    <!-- MAGICAL JQUERY SCRIPT FROM STACKOVERFLOW ANSWER -->
    <script>
    script
    script
    </script>
    <!-- END -->


        <body>
          <table>
           <tr>

<td>          <div>List products on the cart, Example: Art1, Art2, Art3, prices, quantities</div></td>
<td>          <div>Payment method, Example: Visa, Invoice, SMS</div></td>
<td>          <div>Freight method, Example: ordinary, UPS saver, UPS express</div></td>
<td>          <div>Customer address, Example: Delivery adress, Phone number, Contact person</div></td>

          </tr>
          </table>        
        </body>
        </html>

何か案は？Jqueryの並べ替え構造を見つけました。しかし、それほど新鮮でシンプルに見えませんでした。私はいくつかの新しい、単純なものが欠けていますか？または私は醜いバリアントを使用する必要がありますか？

スウェーデンからよろしく。質問がわかりにくい場合はお知らせください！

4

1 に答える 1

0

float:leftすべてのメイン div に与えてみてください。

于 2013-03-12T12:42:43.750 に答える