Показать образцы цветов на странице категории в фреймворке Bigcommerce трафарета

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", который я ранее удалил из поля "Обязательный" из файла swatch.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>