在大商业模板框架的类别页面上显示色板颜色

Question

这是我的网站 http://evisionshop.com/

我需要与色板颜色相关的建议。我如何在每个产品低于价格的情况下将产品属性颜色显示在类别页面中。

以下是类别页面的代码

<h3 class="product-item-name">{{name}}</h3>
<!---swatch--->
<div class="cat_item"></div>
<!---swatch--->
<div class="product-item-price">
{{#if price}}
{{> components/product/price price=price show_savings=false schema_org=false}}
{{/if}}
</div>

这是帮助样本颜色显示在产品详细信息页面上

的代码

<div class="form-field form-field-options form-field-swatch{{#if required}} form-required{{/if}}"
data-swatch-selector
data-product-attribute="swatch">
<div class="form-field-title">
{{display_name}}
<span class="swatch-value" data-swatch-value>{{lang 'forms.swatches_none_selected'}}</span>
{{#if required}}<span class="required-text">{{lang 'common.required'}}</span>{{/if}}
</div>
<div class="form-field-control">
{{#each values}}
<label class="swatch-wrap" data-swatch-value="{{label}}" data-product-attribute-value="{{id}}">
<span class="form-label-text">{{label}}</span>
<input
class="form-input swatch-radio"
id="attribute-{{id}}"
type="radio"
name="attribute[{{../id}}]"
value="{{id}}"
{{#if selected}}checked{{/if}}
{{#if ../required}}required{{/if}}
aria-required="{{required}}">
<span class="swatch {{#if data.[1]}}two-colors{{/if}}{{#if data.[2]}} three-colors{{/if}}">
{{#if pattern}}
<span class="swatch-color swatch-pattern" style="background-image: url('{{getImage image 'core-swatch'}}');"></span>
{{/if}}
{{#if data.[0]}}
<span class="swatch-color" style="background-color: #{{data.[0]}}"></span>
{{/if}}
{{#if data.[1]}}
<span class="swatch-color secondary" style="background-color: #{{data.[1]}}"></span>
{{/if}}
{{#if data.[2]}}
<span class="swatch-color tertiary" style="background-color: #{{data.[2]}}"></span>
{{/if}}
</span>
{{#if pattern}}
<span class="swatch-pattern-expanded">
<img class="swatch-pattern-image" src="{{getImage image 'core-swatch'}}">
</span>
{{/if}}
</label>
{{/each}}
</div>
</div>

我有jquery代码，它正在处理简单的主题，这是jquery的代码

<script>
$(document).ready(function(){
$(".ProductDetails").each(function(){
var mcurl = $("strong a",this).attr("href");
$(this).after("<div class='mccolors'></div>");
$(".mccolors").load(mcurl + " .productOptionPickListSwatch");

});
});
</script>

但它不适用于大型商业模板框架，我已经更改了类但不起作用。

如果您点击网站首页上的第一个产品，它将在详细信息页面中显示产品的颜色，这里是链接

http://evisionshop.com/blackview-e7s/

我正在尝试在类别页面上调用这种颜色，请检查屏幕截图 http://prntscr.com/fk0p1r

我如何使用jquery或javascript来实现这一点，在我调用的部分中调用的<div class="cat_items"></div>会自动在类别页面上动态显示色板颜色。

提前感谢您的帮助。

Answer 1

我遇到了完全相同的问题。

解决它的方法就是这样的。它不漂亮，但它奏效了。

1. 转到店面>页脚脚本

   您可能需要稍微使用一下"190px"，我之前从色板.html文件中删除了"必需"字段。

2. 在末尾包括以下内容：

<小时 />

<style>
@media screen and (max-width: 770px) {

.productView-options .form-radio:checked+.form-option span.form-option-variant.form-option-variant--color:after{ left:190px!important; }
}
.productView-options [data-product-attribute='swatch']{
position:relative !important;
}
.productView-options [data-product-attribute] .form-option{
overflow:visible !important;
position: initial !important;
}
.productView-options .form-option span.form-option-variant.form-option-variant--color:after {
content:  attr(title);
display: none;
}
.productView-options .form-radio:checked+.form-option span.form-option-variant.form-option-variant--color:after{
display: inline-block;
color: #000;
padding: 0;
position:absolute;
top: -2px;
left: 50px;
border-radius:4px;
width: 250px;
text-align: left;
font-size: 15px;
font-weight: 100;
}
</style>