在Magento 2中显示可配置的产品价格范围2
在Magento 2中显示可配置的产品价格范围2

在Magento 2中显示可配置的产品价格范围2

2018年2月12日出版 in 发展
在Magento 2的正确方式销售捆绑
在magento 2的正确方式销售捆绑
2018年1月11日
社交媒体是否会影响我的SEO?
2018年2月22日

今天,我们将介绍使用可配置产品的优势以及我们如何更新其价格在Magento 2产品上市页面上的价格,为客户提供更透明的购物体验。在我们深入挖掘之前,让我们简单地谈谈可配置的产品。

可配置产品与简单的产品不同,因为它们为客户提供了许多选项,最终减少到简单的产品选择。可配置产品的功率真正闪耀着产品上市页面,其中单个可配置产品可以充当门口,以依字形为数百个简单的产品变化。例如,具有10个颜色选项和3个尺寸选项的T恤可配置产品基本上允许客户从30个有形简单产品中的一个中进行选择,而不会因列出页面本身上的所有30个产品而被淹没。

问题

虽然可配置的产品允许我们更加优雅地指导​​客户的购物体验,但他们确实有一个值得注意的缺点:他们的潜在价格变化不会很好地转化为上市页面。相反,Magento本身显示了每个可配置产品的最低价格。如果我们的所有可配置产品选择成本相同,那么很好,但如果他们没有,所以Magento在上市页面上的价格可能会非常误导。如果我们的T恤价格从20美元到60美元的价格,请根据所选的尺寸和颜色,我们通过显示20美元的价格,当他们真正想要的价格最终是60美元的价格,我们通过展示20美元的价格。在他们选择选择后,将客户带入最低价格,以最低的价格绘制客户,只需更高的价格即可。在上市页面上显示价格范围使得物品的可能价格更加透明,使您的客户能够更快地比较产品并继续结账,这意味着您的转换率更高。

解决方案

现在我们已经确定了我们的普遍目标,我们可以排队我们希望看到所有人所说和完成的功能:

  • 可配置产品将显示价格范围,而不是最低的价格。
  • 价格范围将显示最低的儿童产品价格和最高的儿童产品价格。
  • 价格范围将考虑到特殊定价。最低的儿童产品特价将显示为价格范围的最低价格。

让我们来通过查看如何在核心Magento模块中处理定价逻辑来改变定价逻辑的轴承。在我们跳入目录结构之前,我想简要介绍两个将在定价逻辑上看到的总体概念:渲染类和模板,以及渲染类和模板。渲染类和模板负责与特定价格类型显示的布局和条件逻辑是否显示(例如,删除价格或常规价格)。同时,渲染量类和模板负责显示和将最终金额传送到搜索引擎爬虫所需的任何结构化数据标记的原因。

That said, now we’re ready to review the primary Magento module responsible for price rendering, Mage_Catalog. If you open the module, you’ll see a directory called Pricing. This houses the price render classes and the price amount render classes. In view/base/templates/product/price you’ll see the price render templates, and if you dive into the view/base/templates/product/price/amount folder you’ll find the price amount render template.

The last piece of the puzzle resides in the view/base/layout directory: catalog_product_prices.xml. This file tells Magento which render and amount render classes and templates to use. Before we continue, let’s state the obvious here: the code and configuration contained in view/base will apply to both the frontend and admin areas of the site, while code and configuration contained in view/frontend and view/adminhtml will apply to only the frontend and adminhtml areas, respectively.

Now that we have our bearings on the base module and files involved, let’s talk about how the Magento_ConfigurableProduct module updates that behavior for configurable products. If you look in the Magento_ConfigurableProduct module, you’ll see that it has its own Pricing directory that allows Magento to calculate the various prices (min, max, final, …), while taking into account the given configurable product’s child product prices. Most notable is the presence of view/base/layout/catalog_product_prices.xml. In this file, you’ll see that the Magento_ConfigurableProduct module is passing in a new argument, “configurable”, to the render.product.prices block. When Magento is calculating a final price for a configurable product, it will use the values for render_template and 数量_render_template set here rather than the values set under the “default” in the Magento_Catalog module. These are precisely the values we’ll want to override to show price ranges on our product listing pages.

步骤1:

让我们为此创建一个名为mycompany_configureableProductPriceranges的新模块。如果你是Magento 2的新手,这里有一个链接 官方Magento 2 Dev Doc 上 how to create a module. At minimum, you’ll need these three files in the module root: registration.php, composer.json, and etc/module.xml. Note that we’ll need to list Mage_ConfigurableProduct as a dependency in etc/module.xml.

第2步:

To override the default configurable product price behavior on the product listing page, we’ll need to add our own catalog_product_prices.xml 布局 file. This will allow us to specify a new render template and amount render template. Add the following code to our new module in view/frontend/layout/catalog_product_prices.xml.

第3步:

In the last step, we created a layout file to override the templates normally used for configurable product prices. Now we need to create those template files in our module. First, create the render template in view/frontend/templates/product/price/price_range.phtml with the following code:

Here we’ve retrieved the minimum and maximum prices from the saleable product and also taken into account the possibility of a special price on one or more of the child products. This template will get hit first and pass our minimum and maximum price values to the amount render template via the $块->renderAmount() call. That means we’ll need to create our amount render template next. In view/frontend/templates/product/price/amount/default.phtml place the following code:

This file is essentially a direct copy of what you would find in the Magento_Catalog module’s view/base/templates/product/price/amount/default.phtml file. Our only modification is the addition of the 如果 ($block->getMinPrice() && $block->getMaxPrice() && $block->getMinPrice() < $block->getMaxPrice()): section. If the template block has access to the minimum and maximum price and they differ in value, our template will show those prices as a price range (i.e., minPrice minus maxPrice) instead of the default singular price.

第四步:

  • 启用模块 bin/magento module:enable mycompany_configurable产品priceranges.
  • 清除你的缓存 bin/magento cache:flush

结论

而已!此时,您将能够在您的网站上加载任何本机产品清单页面,并查看所有可配置产品的价格范围,具有不同价格的简单产品。以下是此代码中的屏幕截图:

可配置的产品,显示前端的价格范围

您的客户现在将能够快速比较产品并找到它们需要更快的东西,从产品上市页面上。快乐编码!

完整的代码

想要没有工作的好处吗?你有运气– you can 从本文下载完整代码 上 github.

18 Comments

  1. 标记 说:

    你好。伟大的模块。它在M2.1.9中工作正常,但我’刚刚升级到M2.2.3,现在类别页面上的价格范围仅在消失之前简要出现并恢复可配置的产品价格。我能’t看到任何可能导致它的新默认默认的更改如此想知道是否有任何想法?一世’在野生动物园里尝试过,Firefox和Chrome,行为是一样的。

    • 标记 说:

      I’完成了更多的测试。我禁用了自定义主题以确保这是不是’t导致问题。然后尝试Magento Luma以及空白主题我可以确认问题仍然存在。我甚至更改了所有其他模块之后的序列以加载价格范围模块,但没有’工作。在类别页面负载期间出现一秒钟后,某些东西会覆盖模块。 M2.2.x核心文件必须’改变了导致冲突。

  2. Pantelis petmezas. 说:

    您好,我们知道它是否在2.2.2中工作?

    • 标记 说:

      我对此表示怀疑。我认为更新后它会破坏2.2。我继续检查github存储库,但它没有’自2017年9月以来一直被触及。

  3. 王子 说:

    我也有同样的问题。请确认是否已得到解决?

  4. adam.prost.prost. 说:

    你好!我们感谢您所有人都已停下来。该模块有了’T尚未更新2.2,但是’在接下来的几周可能会推出。

  5. adam.prost.prost. 说:

    We’升级模块与Magento 2.2兼容。即,模块现在覆盖了Swatch Price Display Logic,使得价格范围显示ISN’T页面完全加载时覆盖。你可以看到最新的提交 这里.

    Important Note: The frontend will now always show the price range for the configurable product, which may not be what you need for your individual use cases. However, the commit will give you insight into how the price display can be further modified. For more customized price display cases you’ll also need to dive into Magento/ConfigurableProduct/Block/Product/View/Type/Configurable->getJsonConfig() and Magento/Swatches/view/frontend/web/js/swatch-renderer.js->_UpdatePrice().

  6. 吉米芳 说:

    它也可以在产品详细信息页面上显示价格范围?
    如果我想在产品详细信息页面上显示,我该怎么办?

  7. 香农 说:

    有没有人对销售正在进行的情况下显示2范围的修改?所以定期价格范围,然后是特殊价格范围(出售后价格范围)?

  8. 史蒂夫 说:

    这有效—这也可以在产品页面上可见吗?一致性?

  9. Ravindra 说:

    优秀的博客!我们在我们的网站上与这篇特别好的帖子联系起来。请务必写作。

  10. yamdan. 说:

    嗨,我想知道这个模块如何处理特殊价格,我知道’当您在概述中已经说明时会考虑LL,
    但它仍然会留下Defult Magento设置,并列出了删除粒子的文本“regular price”,+上面的特价?
    (所以我的客户知道这个项目正在出售吗?

  11. 标记 说:

    玛托托 2.3.1似乎很难打破它。所有这些都是该范围内最低的价格。

  12. Dawhoo 说:

    在2.2.8中打破了。

  13. ovidiu. 说:

    此解决方案仅处理显示价格间隔。
    选择配置选项时,您还需要在JS时更新价格。
    这个延伸很好地处理了这一点
    //webpanda-solutions.com/configurable-product-price-range.html

  14. 杰西W. 说:

    我提交了与Magento 2.3一起使用的拉拉请求(在2.3.1上测试)。可用AT. //github.com/SlowFamily/magento2-configurable-product-price-ranges.

    简而言之,Price_Range.phtml需要略微的变化来获得最大价格。供应商/ Magento / Module-Catalog / View / Base / Web / JS / Price-Box.js需要被覆盖,以评论初始化的更新,以改变价格显示。

    更改price_range.phtml,如下:

    getIdsuffix()? $块 - >getIdSuffix() : ”;
    $架构=($块 - >getZone() == ‘item_view’) ? true : false;

    $ saleable产品= $ block->getSaleableItem();
    $ scalalprice = $ saleable product->getPriceInfo()->getPrice(‘regular_price’);
    $ minualprice = $ scalalprice->getminregularamount() - >getValue();
    $ maximalprice = $ scalalprice->getMaxRegularAmount() - >getValue();

    $ finalpricemodel = $ block->getPriceType(‘final_price’);

    $ renderamount = $ block->RenderAmount($ FinalPriceModel->getAmount(), [
    ‘price_id’ => $block->getPriceId(‘product-price-‘ . $idSuffix),
    ‘price_type’ => ‘finalPrice’,
    ‘include_container’ => true,
    ‘schema’ => $schema,
    ‘min_price’ => $minimumPrice,
    ‘max_price’ => $maximumPrice,
    ]);
    回声 $ renderamount.
    ?>

    复制供应商/ Magento / module-Catalog / View / Base / Web / JS / Price-Box.js在模块中查看/ Frontend / Web / JS / Price-Box.js。找到以下_Init函数并注释出updatePrice触发器:

    _Init:function initpricebox(){
    var box = this.element;

    //下面注明了解,以避免删除显示的初始价格范围。
    // box.trigger(‘updatePrice’);
    this.cache.displayprices = utils.deepclone(this.options.prices);
    }

    添加视图/ Frontend / RequireJS-Config.js,如下所示:

    / **
    *版权所有©Magento,Inc。保留所有权利。
    *请参阅对许可证详细信息的复制.txt。
    */

    var config = {
    map: {
    ‘*’: {
    价值箱:‘mycompany_configurigurable产品priceranges / js / price-box’,
    }
    },
    };

发表评论 取消回复

您的电子邮件地址不会被公开。 必需的地方已做标记 *

本网站使用AkisMet减少垃圾邮件。 了解如何处理评论数据.

最近的帖子查看全部
3月1日,2021年

Covid的巨大加速要求再次欺诈和消费者虐待警惕

2月3日,2021年

社交媒体在科迪德自然时期的增长’s One

1月5日,2021年

替代社交媒体

您是否注意到您的Facebook和Instagram内容似乎越来越少,并且每次通过都会越来越少?用于达到的帖子 […]