在Bigcommerce模具框架中的类别页面上显示色板颜色

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

I had the exact same problem.

The way to solve it is like this. It's not pretty but it worked.

1. Go to Storefront > Footer Scripts

   You might have to play around a bit with the '190px' I removed the 'Required' field earlier from the swatch.html file.

2. Include this at the end:

---

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