1

这是我的网站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>我调用的部分自动显示类别页面上动态显示色板颜色的帮助下实现这一点。

提前感谢您的帮助。

4

1 回答 1

2

我有同样的问题。

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

  1. 转到店面 > 页脚脚本

    您可能需要使用 '190px' 我之前从 swatch.html 文件中删除了 'Required' 字段。

  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>
于 2018-10-03T04:48:37.053 回答