在 bigcommerce 模板框架中的类别页面上显示样本颜色

Question

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

下面是分类页面的代码

          <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>

但它在大型商业模板框架上不起作用我已经更改类但不起作用。

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

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

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

如何在 jquery 或 javascript 的帮助下实现此目的 <div class="cat_items"></div> 我调用了这些部分，自动在类别页面上动态显示样本颜色。

在此先感谢您的帮助。

Answer 1

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

解决方法是这样的。它不漂亮，但它起作用了。

转到店面 > 页脚脚本

您可能需要尝试一下我之前从 swatch.html 文件中删除 'Required' 字段的“190px”。
在最后加上这个：

<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>

在 bigcommerce 模板框架中的类别页面上显示样本颜色

Show swatch-colors on category page in bigcommerce stencil framwork

javascript

jquery

stencils

bigcommerce