Question

我正在尝试在Jquery颜色框中弹出产品选项。它的工作原理除了产品选项没有显示在颜色框内。以下是我到目前为止的情况：

<script type="text/javascript">
(function($) {
jQuery(document).ready(function(){
$(".inline").colorbox({inline:true, width:"50%"});
});
})(jQuery);
</script>

<p><a class='inline' href="#inline_content">Gift Wrapping</a></p>

<div style='display:none'>
<div id="inline_content">

<div class="product-options" id="product-options-wrapper">
<p style="font-size:15px;margin:0;font-weight: bold"><?php echo $this->__('Choose Your Options') ?></p>
    <?php echo $this->getChildHtml('', true, true);?>
    <?php if ($this->hasRequiredOptions()):?>
        <span style="color:red">&#160;&#160;&#160;<?php echo $this->__('* Required Fields') ?></span>
    <?php endif;?>
</div>
<script type="text/javascript">decorateGeneric($$('#product-options-wrapper dl'), ['last']);</script>

</div>
</div>

Answer 1

在愚弄之后我发现我正在处理错误的文件。使用/app/design/frontend/default/default/template/catalog/product/view/options/wrapper.phtml无法正常工作。我不得不深入使用/app/design/frontend/default/default/template/catalog/product/view/options/type/select.phtml。

这是我的工作：

<?php /* @var $this Mage_Catalog_Block_Product_View_Options_Type_Select */ ?>

<script type="text/javascript">
(function($) {
jQuery(document).ready(function(){
$('#lnkButton').click(function () {
$(this).colorbox.close();});
$(".inline").colorbox({inline:true});
$('#cboxClose').remove();
});
})(jQuery);
</script>

<p><a class='inline' href="#inline_content"><img src="<?php echo $this->getSkinUrl('images/gift-wrap-avalible.png'); ?>" width="190" height="32" /></a></p>


<div style='display:none'>
<div id="inline_content" style="float:left;width:400px">
<h1>Gift Wrapping</h1>
<div style="float:right;width:400px">
<img src="<?php echo Mage::getBaseUrl(Mage_Core_Model_Store::URL_TYPE_MEDIA); ?>wysiwyg/GiftsWrap/blue-papper.png" width="100" height="100" />
<img src="<?php echo Mage::getBaseUrl(Mage_Core_Model_Store::URL_TYPE_MEDIA); ?>wysiwyg/GiftsWrap/blue-peace-papper.png" width="100" height="100" />
<img src="<?php echo Mage::getBaseUrl(Mage_Core_Model_Store::URL_TYPE_MEDIA); ?>wysiwyg/GiftsWrap/blue-stars-papper.png" width="100" height="100" />
</div>

<?php $_option = $this->getOption() ?>
<dt><?php if (!$_option->getType() == Mage_Catalog_Model_Product_Option::OPTION_TYPE_RADIO): ?><label<?php if ($_option->getIsRequire()) echo ' class="required"' ?>><?php if ($_option->getIsRequire()) echo '<em>*</em>' ?><?php echo  $this->htmlEscape($_option->getTitle()) ?></label><?php endif; ?></dt>
<div style="float: left;
width: 370px;
border: 1px solid red;
text-align: left;
margin-left: 20px;">
<dd<?php if ($_option->decoratedIsLast){?> class="last"<?php }?>>
    <div class="input-box">
        <?php echo $this->getValuesHtml() ?>
        <?php if ($_option->getIsRequire()): ?>
            <?php if ($_option->getType() == Mage_Catalog_Model_Product_Option::OPTION_TYPE_RADIO || $_option->getType() == Mage_Catalog_Model_Product_Option::OPTION_TYPE_CHECKBOX): ?>
                <span id="options-<?php echo $_option->getId() ?>-container"></span>
            <?php endif; ?>
        <?php endif;?>
    </div>
</dd>
</div>
<button id="lnkButton"><span><span><?php echo $this->__('Okay') ?></span></span></button>
</div>
</div>

没有样式完美，但它可以弹出一个窗口来选择我在管理中创建的礼品包装选项。

Magento Jquery ColorBox产品选项弹出

1 个答案: