Question

我在这里需要一些建议，我一整天用Google搜索，但没有发现任何有用的信息，只是部分代码和建议。

如果您查看我的演示页

DEMO PAGE

你可以看到带有一些图像和价格的优惠框，如果你将鼠标悬停在它上面，它会显示带有一些数据的透明窗口，但重要的是有一个名为 PREGLED 的按钮（这是一个单词）用我的语言查看）。

当您点击它时，它会在此产品单页上显示。

是否有可能拥有此产品页面＆＃34;在弹出式灯箱中打开，而不是去加载新页面？

我真的不太熟悉Magento代码，但现在我有机会了解。所以任何建议都非常感谢。

谢谢...

更新

非常感谢你我可以执行代码并启动弹出窗口，但它非常难看，我没有考虑布局和其他所有内容;（现在，我需要一些关于如何使这个弹出窗口有点眼睛的建议-catchy？如果没有，那么我将只使用普通的新窗口......

Answer 1

我在Magento为我工作的shadowbox，非常类似于灯箱。这就是我这样做的方式。只需添加核心js和css文件，就可以将shadowbox添加到Magento。

这个答案假设您安装了jQuery并正常运行，请查看此链接以了解shadowbox的jQuery要求：https://github.com/mjijackson/shadowbox

使用内部托管文件，下载最新版本并将以下代码放在：/ app / design / frontend / default / [YourTheme] /layout/local.xml

<default>
 <reference name="head">
  <action method="addItem"><type>skin_css</type><name>js/shadowbox.css</name></action>
  <action method="addItem"><type>skin_js</type><name>js/shadowbox.js</name></action>
 </reference>
</default>

将shadowbox.css和shadowbox.js放在/ skin / frontend / default / [YourTheme] / js /文件夹中。然后，您可以将属性rel =“shadowbox”添加到链接以使用shadowbox打开，例如：

<a href="http://saneldesign.com/..srcu-jadrana.html" rel="shadowbox">
 <i class="icon-eye-open icon-white"></i>
 Pregled </a>

如果您希望在整个网站范围内运行shadowbox，则必须在Admin＆gt;中添加以下代码进行初始化。系统＆gt;配置＆gt;一般＆gt;设计＆gt;页脚＆gt;杂项HTML：

<script type="text/javascript"> 
Shadowbox.init();
</script>

如果你得到任何javascript错误，你可能需要检查冲突（$），原型并确保jQuery，特别是shadowbox在没有冲突模式下运行。我使用以下代码并在jQuery文件中根据需要将$更改为$ j。

var $j = jQuery.noConflict();

此处还有其他配置选项：http://shadowbox-js.com/options.html

Answer 2

我会将其构建为一个新模块，其中包含一个IndexController.php方法ajaxprodAction。之后，您需要确保在要加载弹出窗口的页面上也加载了特定于产品视图的JS，这对于获取任何addToCart-js和此类工作非常重要。

ajaxprodAction方法加载显示产品信息的块，并将它们返回给JS，将其插入弹出窗口。您还需要确保使用正确的产品模型对象提供产品视图块，以便了解要显示的产品。

此stackoverflow问题提供了有关模块控制器所需内容的更多详细信息： Ajax in magento (load product view block)

Magento - 打开页面作为LightBox而不是在新窗口或选项卡中

2 个答案: