Question

Here is my website http://evisionshop.com/

I need suggestion related to the swatch color. How I can show the products attribute color into category page with each product below price.

below is the code of category page

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

and here is the code with the help the swatch colors showing on products details page

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

I have jquery code which was working on simple theme and here is the code of 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>

but it's not working on big commerce stencil framework I have changed classes but not working.

If you click on the first products on the website home page it will show colors of products into details page here is the link

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

and I am trying to call this color on category page please check the screenshot http://prntscr.com/fk0p1r

how I can achieve this with jquery or javascript with the help the <div class="cat_items"></div> I have called into the sections automatically show the swatch colors dynamically on the category page.

Thanks in advance for help.

Answer 1

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

解决问题的方法是这样的。它不是很漂亮，但是可以用。

转到店面>页脚脚本

您可能需要稍微处理一下“ 190px”，我早些时候已从swatch.html文件中删除了“必填”字段。
在末尾添加此内容：

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

Show swatch-colors on category page in bigcommerce stencil framwork

1 个答案: