ここでの解決策は、
- onepage.phtml の 2 つの不適切なクラス参照を修正し、
- 一部の css クラスの名前を変更して、在庫の magento チェックアウト コードが必要とするものに一致させます。
必要な特定の css クラスは次のとおりです。
以下は、修正された onepage.html ファイルの抜粋です。
<ol id="checkoutSteps" class="one-page-checkout">`<?php $i=0; foreach($this->getSteps() as $_stepId => $_stepInfo): ?>
<?php if (!$this->getChild($_stepId) || !$this->getChild($_stepId)->isShow()): continue; endif; $i++ ?>
<li id="opc-<?php echo $_stepId ?>" class="section <?php echo !empty($_stepInfo['allow'])?'allow':'' ?> <?php echo !empty($_stepInfo['complete'])?'saved':'' ?>">
<div class="step-title">
<h3><span class="step-count"><?php echo $i ?></span> <?php echo $_stepInfo['label'] ?></h3><a href="#"><?php echo $this->__('Edit') ?></a>
</div>
<div id="checkout-step-<?php echo $_stepId ?>" class="step <?php if($_stepId=='shipping_method'): ?>-no-padding<?php endif; ?> a-item" style="display:none;">
<?php echo $this->getChildHtml($_stepId) ?>
</div>
</li>
<?php endforeach ?>
</ol>
これは、既存の css クラスの 1 つを新しい必要なクラスの 1 つに (box.css ファイルから)コピーする例です。
.one-page-checkout .box { border:1px solid #bbb6a5; border-top:0; padding:15px 20px; background:#faf7ee; }
.one-page-checkout .step { border:1px solid #bbb6a5; border-top:0; padding:15px 20px; background:#faf7ee; }
これを「ボックス」と呼んでいましたが、Magento に関する限り「ステップ」である必要があります。CSS クラスが異なっている可能性が高いため、コピーする必要があります。
これが誰かに役立つことを願っています。
ちなみに、私がこれを理解した方法は次のとおりです。
- 私のテーマの問題を観察する
- ストックテーマでテスト: 動作することを確認
- 私のテーマに戻り、ファイルを選択的に無効にして、どのファイルが違いを生むかを判断します。
- onepage.phtml という 1 つのファイルに絞り込み、よく調べて在庫と比較します。
- テーマにない CSS クラス名が見つかりました
- それらを追加してデバッグする
これは長くて面倒ですが、うまくいくようです。