显示Magento 2中的可配置产品申博娱乐范围
显示Magento 2中的可配置产品申博娱乐范围

显示Magento 2中的可配置产品申博娱乐范围

2018年2月12日发布 in 发展历程
在Magento 2中正确销售捆绑包
以正确的方式在Magento 2上出售捆绑包
一月11,2018
社交媒体会影响我的SEO吗?
2018年2月22日

今天,我们将探讨使用可配置产品的优势,以及如何更新其申博娱乐在Magento 2产品列表页面上的显示方式,从而为客户提供更加透明的购物体验。在深入探讨之前,我们先简要介绍一下什么是可配置产品。

可配置产品与简单产品的不同之处在于,它们为客户提供了众多选择,最终减少了简单产品的选择。可配置产品的功能真正体现在产品列表页面上,其中单个可配置产品可能充当了数百种简单产品变体的门户。例如,具有10种颜色选项和3种尺寸选项的T恤可配置产品从本质上允许客户从30种有形简单产品中选择一种,而不会因列表页面本身上的所有30种产品不知所措。

问题

虽然可配置的产品可以使我们更优雅地指导​​客户的购物体验,但它们的确存在一个明显的缺点:其潜在的申博娱乐变化无法很好地转化为商品信息页。取而代之的是,Magento在本地显示每种可配置产品的最低申博娱乐。如果我们所有可配置产品的申博娱乐都一样,那么效果很好,但如果申博娱乐不一样,Magento在列表页上显示的申博娱乐可能会产生很大的误导性。如果我们的T恤申博娱乐在20美元到60美元之间(具体取决于选择的大小和颜色),则我们会通过显示20美元的申博娱乐来损害客户的利益,而他们真正想要的申博娱乐可能是60美元。以最低的申博娱乐吸引客户只是为了在选择了选项后以更高的申博娱乐擦拭客户。在清单页面上显示申博娱乐范围可以使商品的可能申博娱乐更加透明,从而使您的客户可以更快地比较商品并继续进行结帐,这对您来说意味着更高的转换率。

解决方案

既然我们已经确定了我们的总体目标,那么我们就可以列出在完成所有步骤后希望看到的功能:

  • 可配置产品将显示申博娱乐范围,而不仅仅是可能的最低申博娱乐。
  • 申博娱乐范围将显示最低的子产品申博娱乐和最高的子产品申博娱乐。
  • 申博娱乐范围将考虑特殊定价。最低的子产品特价将显示为申博娱乐范围内的最低申博娱乐。

通过查看核心Magento模块中的定价逻辑,让我们了解如何更改定价逻辑。在进入目录结构之前,我想简要介绍一下关于定价逻辑的两个总体概念:渲染类和模板,以及数量渲染类和模板。呈现类和模板负责与特定申博娱乐类型是否显示相关的布局和条件逻辑(例如,删除线申博娱乐或常规申博娱乐)。同时,渲染金额类和模板负责显示的实际货币格式金额以及将最终金额传达给搜索引擎抓取工具所需的任何结构化数据标记。

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

The last piece of the puzzle resides 在 the view/base/layout directory: catalog_product_prices.xml. This file tells Magento which render and 量 render 类es and templates to use. Before we continue, let’s state the obvious 这里: the code and configuration contained 在 view/base will apply to both the frontend and admin areas of the site, while code and configuration contained 在 view/frontend and view/adminhtml will apply to 上ly the frontend and adminhtml areas, respectively.

Now that we have our bearings 上 the base module and files 在volved, let’s talk about how the Magento_ConfigurableProduct module updates that behavior for configurable 产品s. If you look 在 the Magento_ConfigurableProduct module, you’ll see that it has its own Pricing directory that allows Magento to calculate the various 价钱s (min, max, final, …), while taking 在to account the given configurable 产品’s child 产品 价钱s. 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 在 a new 论据, “configurable”, to the render.product.prices block. When Magento is calculating a final 价钱 for a configurable 产品, it will use the values for render_template and 量_render_template set 这里 rather than the values set under the “default” 在 the Magento_Catalog module. These are precisely the values we’ll want to override to show 价钱 ranges 上 our 产品 listing pages.

步骤1:

我们为此创建一个名为MyCompany_ConfigurableProductPriceRanges的新模块。如果您是Magento 2的新手,请访问以下链接 官方Magento 2开发文档 上 how to create a module. At minimum, you’ll need these three files 在 the module root: registration.php, composer.json, and etc/module.xml. Note that we’ll need to list Mage_ConfigurableProduct as a dependency 在 etc/module.xml.

第2步:

To override the 默认 configurable 产品 价钱 behavior 上 the 产品 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 量 render template. Add the following code to our new module 在 view/frontend/layout/catalog_product_prices.xml.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<?XML文件 ="1.0"?>
<布局 XML文件ns:si="http://www.w3.org/2001/XMLSchema-instance" si:noNamespaceSchemaLocation=“ ur:magento:框架:视图/布局/etc/layout_generic.xsd”>
    <referenceBlock 名称=“ render.product.prices”>
        <论点>
            <论据 名称=“可配置的” si:类型=“数组”>
                <项目 名称=“申博娱乐” si:类型=“数组”>
                    <项目 名称="最终申博娱乐" si:类型=“数组”>
                        <项目 名称=“ render_template” si:类型=“串”>MyCompany_ConfigurableProductPriceRanges::产品/价钱/申博娱乐范围.phtml</项目>
                        <项目 名称=“ 量_render_template” si:类型=“串”>MyCompany_ConfigurableProductPriceRanges::产品/价钱//默认.phtml</项目>
                    </项目>
                </项目>
            </论据>
        </论点>
    </referenceBlock>
</布局>
 

第三步:

In the last step, we created a 布局 file to override the templates normally used for configurable 产品 价钱s. Now we need to create those template files 在 our module. First, create the render template 在 view/frontend/templates/product/price/price_range.phtml with the following code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<?php
/ ** @var \ Magento \ Catalog \ Pricing \ Render \ FinalPriceBox $ block * /
$ IDSuffix = $块->getIdSuffix() ? $块->getIdSuffix() : '';
$模式 = ($块->getZone() == 'item_view') ? 真正 : ;
 
$ saleableProduct = $块->getSaleableItem();
$ finalPriceModel = $块->getPriceType('最终申博娱乐');
 
$ minimumPrice = ($块->hasSpecialPrice()) ? $ finalPriceModel->getAmount()->getValue() : $ saleableProduct->getMinPrice();
$ maximumPrice = $ saleableProduct->getMaxPrice();
 
$ renderAmount = $块->renderAmount($ finalPriceModel->getAmount(), [
                    'price_id'          => $块->getPriceId(“产品申博娱乐-” . $ IDSuffix),
                    'price_type'        => '最终申博娱乐',
                    'include_container' => 真正,
                    “模式”            => $模式,
                    'min_price'         => $ minimumPrice,
                    'max_price'         => $ maximumPrice,
                ]);
回声 $ renderAmount
?>
 

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<?php / ** @var \ Magento \ Framework \ Pricing \ Render \ Amount $ block * / ?>
 
<跨度=“申博娱乐容器 <?php / * @escapeNotVerified * / 回声 $块->getAdjustmentCssClasses() ?>"
    <?php 回声 $块->getSchema() ? ' 道具道具="offers" 项目scope 项目type="http://schema.org/Offer"' : '' ?>>
    <?php 如果 ($块->getDisplayLabel()): ?>
        <跨度=“申博娱乐标签”><?php / * @escapeNotVerified * / 回声 $块->getDisplayLabel(); ?></跨度>
    <?php 万一; ?>
    <跨度 <?php 如果 ($块->getPriceId()): ?> ID="<?php / * @escapeNotVerified * / 回声 $块->getPriceId() ?>"<?php 万一;?>
        <?php 回声($块->getPriceDisplayLabel()) ? '数据标签=“' . $块->getPriceDisplayLabel() . $块->getPriceDisplayInclExclTaxes() . “” : '' ?>
        数据-价钱-="<?php / * @escapeNotVerified * / 回声 $块->getDisplayValue(); ?>"
        数据-价钱-类型="<?php / * @escapeNotVerified * / 回声 $块->getPriceType(); ?>"
        =“申博娱乐包装机 <?php / * @escapeNotVerified * / 回声 $块->getPriceWrapperCss(); ?>"
        <?php 回声 $块->getSchema() ? 'itemprop =“申博娱乐”' : '' ?>>
 
        <?php 如果 ($块->getMinPrice() && $块->getMaxPrice() && $块->getMinPrice() < $块->getMaxPrice()): ?>
            <?php / * @escapeNotVerified * / 回声 $块->formatCurrency($块->getMinPrice(), (布尔)$块->getIncludeContainer()) . '-' . $块->formatCurrency($块->getMaxPrice(), (布尔)$块->getIncludeContainer()) ?>
        <?php 其他: ?>
            <?php / * @escapeNotVerified * / 回声 $块->formatCurrency($块->getDisplayValue(), (布尔)$块->getIncludeContainer()) ?>
        <?php 万一; ?>
    </跨度>
    <?php 如果 ($块->hasAdjustmentsHtml()): ?>
        <?php 回声 $块->getAdjustmentsHtml() ?>
    <?php 万一; ?>
    <?php 如果 ($块->getSchema()): ?>
        <道具道具=“ 价钱Currency” 内容="<?php / * @escapeNotVerified * / 回声 $块->getDisplayCurrencyCode()?>" />
    <?php 万一; ?>
</跨度>
 

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

第四步:

  • 通过以下方式启用模块 bin/magento module:enable MyCompany_ConfigurableProductPriceRanges
  • 使用以下命令清除缓存 bin/magento cache:flush

结论

而已!此时,您将可以在网站上加载任何本地产品列表页面,并查看具有简单产品且申博娱乐不同的所有可配置产品的申博娱乐范围。这是正在使用的代码的屏幕截图:

可配置产品,在前端显示申博娱乐范围

您的客户现在将能够从产品列表页面快速比较产品并更快地找到他们需要的东西。祝您编码愉快!

完整代码

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

18 评论s

  1. 标记 说:

    你好很棒的模块。在M2.1.9中工作正常,但我’刚刚升级到M2.2.3,现在类别页面上的申博娱乐范围只是短暂出现,然后消失并恢复为可配置的产品申博娱乐。我可以’看不到可能对新default.phtml进行的任何更改,因此想知道您是否有任何想法?一世’在Safari,Firefox和Chrome中尝试过,其行为是相同的。

    • 标记 说:

      I’做了更多的测试。我禁用了自定义主题,以确保这不是’导致问题。在尝试了Magento Luma和空白主题之后,我可以确认问题仍然存在。我什至更改了在所有其他模块之后加载申博娱乐范围模块的顺序,但这并没有’工作。在类别页面加载过程中显示一秒钟后,某些东西会覆盖您的模块。 M2.2.x核心文件必须’更改导致冲突。

  2. 潘泰利斯·佩特梅萨斯 说:

    您好,我们知道它是否适用于2.2.2?

    • 标记 说:

      我对此表示怀疑。我认为将其更新为2.2后,它会坏掉。我一直在检查GitHub存储库,但是它没有’自2017年9月以来被感动。

  3. 王子 说:

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

  4. 亚当·普罗斯特 说:

    你好!我们感谢您的光临。模块避风港’尚未更新为2.2,但是’可能会在接下来的几周内推出。

  5. 亚当·普罗斯特 说:

    We’ve升级了模块以与Magento 2.2兼容。即,该模块现在将覆盖样本申博娱乐显示逻辑,以使申博娱乐范围显示不’页面完全加载时,t被覆盖。您可以看到最新的提交 这里.

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

  6. 房志美 说:

    还可以在产品详细信息页面上显示申博娱乐范围吗?
    如果要在产品详细信息页面上显示,该怎么办?

  7. 香农 说:

    有没有人进行修改以说明在进行销售时显示2个范围?那么常规申博娱乐范围,然后是特殊申博娱乐范围(售后申博娱乐范围)?

  8. 史蒂夫 说:

    这很棒—在产品页面上也可以看到吗?为了一致性?

  9. 拉文德拉 说:

    优秀的博客!我们正在链接到我们网站上的这一特别出色的帖子。

  10. 山丹 说:

    嗨,我想知道这个模块如何处理特价,我知道’正如您在概述中已经说过的那样,
    但它仍会保留默认的magento设置,并为列表列出删除线文本“regular 价钱”,+以上特价?
    (因此,我的客户会知道此商品正在出售吗?

  11. 标记 说:

    Magento 2.3.1似乎再次损坏了它。显示的只是该范围内的最低申博娱乐。

  12. w 说:

    在2.2.8中也是如此。

  13. 奥维迪乌 说:

    该解决方案仅处理显示申博娱乐间隔。
    选择配置选项时,还需要通过js更新申博娱乐。
    这个扩展程序很好地处理了这个问题
    //webpanda-solutions.com/configurable-product-price-range.html

  14. 杰西·W 说:

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

    简而言之,需要对price_range.phtml进行一些细微更改才能获得最高申博娱乐。需要覆盖vendor / magento / module-catalog / view / base / web / js / 价钱-box.js以便在初始化时注释掉更新,从而更改申博娱乐显示。

    更改price_range.phtml,如下所示:

    getIdSuffix()吗? $ block->getIdSuffix() : ”;
    $ 图式 =($ block->getZone() == ‘item_view’) ? 真正 : 假;

    $ saleableProduct = $ block->getSaleableItem();
    $ regularPrice = $ saleableProduct->getPriceInfo()->getPrice(‘regular_price’);
    $ minimumPrice = $ regularPrice->getMinRegularAmount()->getValue();
    $ maximumPrice = $ regularPrice->getMaxRegularAmount()->getValue();

    $ 最终申博娱乐Model = $ block->getPriceType(‘final_price’);

    $ renderAmount = $ block->renderAmount($ 最终申博娱乐Model->getAmount(), [
    ‘price_id’ => $块->getPriceId(‘product-price-‘ . $ IDSuffix),
    ‘price_type’ => ‘finalPrice’,
    ‘include_container’ => 真正,
    ‘schema’ => $模式,
    ‘min_price’ => $ minimumPrice,
    ‘max_price’ => $ maximumPrice,
    ]);
    回声$ renderAmount
    ?>

    将vendor / magento / module-catalog / view / base / web / js / 价钱-box.js复制到模块中的view / frontend / web / js / 价钱-box.js。找到以下_init函数,并注释掉updatePrice触发器:

    _init:函数initPriceBox(){
    var box = this.element;

    //!下面注释掉以避免避免显示的初始申博娱乐范围。
    // box.trigger(‘updatePrice’);
    this.cache.displayPrices = utils.deepClone(this.options.prices);
    }

    将view / frontend / requirejs-config.js添加到您的项目中,如下所示:

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

    var config = {
    地图:{
    ‘*’: {
    价钱Box: ‘MyCompany_ConfigurableProductPriceRanges / js / 价钱-box’,
    }
    },
    };

发表评论 取消回复

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

该网站使用Akismet减少垃圾邮件。 了解如何处理您的评论数据.

最近的帖子查看全部
2020年10月22日
通过 阿什莉·科利弗 商业见解, 优雅的骆马 2020年10月22日
毫无疑问,2020年是历史性的一年。火灾,全球大流行,暴动,老虎王等’只是冰山一角。如 […]