根据颜色变化改变产品形象

Change product image based on variant color

本文关键字：改变 颜色 变化      更新时间：2023-09-26

我的目标在线示例:

我正在尝试在类别页面上显示自行车产品。在每个产品上都有一个框架变体颜色，我使用圆形div来显示。

当我点击一种颜色时，图像应该会改变，就像你在Specialized网站上看到的那样:(在产品图像下面)Specialized Example.

我自己的网站

你可以在这里看到我自己的例子:我自己的网站的例子(向下滚动，直到你看到多个产品的产品)。

目标功能:

当我点击绿色div时，我想显示图片2当我点击红色div时，我想看到图片3，但默认情况下，它总是第一个

  • 第一个颜色=第一个图像
  • 第二种颜色=第二张图片
  • 等等
我的HTML

: 

<div class="frameColors">
    <div class="frameColor" data-color="#95BD40" style="background-color:#95BD40"></div>
    <div class="frameColor" data-color="#000000" style="background-color:#000000"></div>
    <div class="frameColor" data-color="#C6352D" style="background-color:#C6352D"></div>
</div>
<a href="/produkter/cykler/mountain-bikes/specialized/epic-hardtails/epic-hardtail/">
    <div class="categoryImage" data-frame-color="95BD40">
        <img src="/media/1072/165519.jpg?anchor=center&amp;mode=crop&amp;width=500&amp;height=350&amp;rnd=131200748910000000" class="productImage">
    </div>
    <div class="categoryImage" data-frame-color="000000">
        <img src="/media/1071/165518.jpg?anchor=center&amp;mode=crop&amp;width=500&amp;height=350&amp;rnd=131200746750000000" class="productImage">
    </div>
    <div class="categoryImage" data-frame-color="C6352D">
        <img src="/media/1073/166762.jpg?anchor=center&amp;mode=crop&amp;width=500&amp;height=350&amp;rnd=131200749050000000" class="productImage">
    </div>
</a>

我的Foreach (s): 

  var imageIds = item.GetPropertyValue<string>("productImages").Split(new string[] { "," }, StringSplitOptions.RemoveEmptyEntries);
  var images = Umbraco.Media(imageIds);
     <div class="frameColors">
                @foreach (var bikeColor in images)
                {
                    var color = bikeColor.GetPropertyValue("frameColor");
                    <div class="frameColor" data-color="#@color" style="background-color:#@color"></div>
                }
            </div>
            <a href="@item.Url">
                @foreach (var img in images)
                {        
                    <div class="categoryImage" data-frame-color="@img.GetPropertyValue("frameColor")">
                        <img src="@img.GetCropUrl("product image")" class="productImage" />
                    </div>
                }
            </a>

根据Adeneo的回复，我设法修改了一些代码，使其按我想要的方式工作。

首先，我添加了一个css行:.categoryImage { display:none; }来隐藏所有的产品图像。

然后我根据Adeneo的回复添加了脚本。我开始瞄准每个.frameColordiv，并在其中添加以下行以显示第一张图像:categoryImage.first().show();

如果不包含CSS行，默认情况下将显示所有产品图像，因此有必要隐藏所有图像，并在脚本中显示第一个图像。

    $(function () {
    $(".frameColor").each(function () {
        var categoryImage = $(this).parent("div").next("a").find(".categoryImage");
        categoryImage.first().show();
        if ($(categoryImage).length > 1) {
            $(this).on('click', function () {
                var color = $(this).data('color').replace('#', '');
                $(categoryImage).hide().filter(function () {
                    return $(this).data('frame-color') === color;
                }).show();
            });
        }
        else {
            $(this).hide();
        }
    });
});

感谢Adeneo提供原始脚本。

相关文章：