想要在单击颜色变体时更改为产品页面上的新产品 Shopify答案

【问题标题】：Want to Change to a new product on a product page whenever color variant is clicked Shopify想要在单击颜色变体时更改为产品页面上的新产品 Shopify
【发布时间】：2023-01-26 17:17:22
【问题描述】：

我想当我点击 shopify 商店产品页面上的颜色变体时加载与颜色变体对应的新产品。

就像下面这个网站

https://www.prettylittlething.com/chocolate-slinky-high-neck-cut-out-long-sleeve-bodycon-dress.html

所有产品都已设置为单独的颜色变体，这意味着所有颜色变体都已在主题中设置了产品。

我希望每当我点击时通过颜色变体动态挑选出相应的产品。

颜色变体类是产品选项__值

到目前为止的当前代码

$(".product-options__value ").click(function () {
  alert("it works");
  // let currentURL = "window.location.href";
  
  // currentUrl = $(location).attr("href");
  // console.log(window.location.pathname);
 
});

当我检查颜色变体时，这是下面的代码

<div class="product-options__value product-options__value--circle rounded-circle text-hide cursor-pointer active lazyload" data-js-option-value="" data-value="WEDGEWOODOVALS" data-js-trigger-id="footbar-Color-WEDGEWOODOVALS" data-master="url(//cdn.shopify.com/s/files/1/reducted_[width]x.progressive.jpg?v=7889054)" data-bg="url(//cdn.shopify.com/s/files/1/reducted_48x.progressive.jpg?v=47786648)" data-scale="2" data-js-tooltip="" data-tippy-content="WEDGEWOOD OVALS" data-tippy-placement="top" data-tippy-distance="6" data-was-processed="true" style="background-image: url(&quot;//cdn.shopify.com/s/files/1/reducted_48x.progressive.jpg?v=67895&quot;);" tabindex="0">WEDGEWOOD OVALS</div>

非常感谢任何帮助。

The color variant class is **product-options__value**

**current code so far**

`$(".product-options__value").click(function () { 警报（“它有效”）; // 让 currentURL = "window.location.href";

// currentUrl = $(location).attr("href"); // console.log(window.location.pathname);

});`

【问题讨论】：

标签： javascript jquery shopify e-commerce shopify-template

【解决方案1】：

我正在考虑做类似的事情，但将新图像作为免费内容加载到产品模板中。

你是怎么上来的？你发送的 url 似乎有一个很好的体验，当点击颜色时，产品图片都会改变。

【讨论】：