Вывести образец изображения продукта Shopify - PullRequest
Новая
       95

Вывести образец изображения продукта Shopify

0 голосов
/ 07 февраля 2020

На моем сайте Shopify я редактирую страницу аккаунта / заказа. На странице сводки по индивидуальному заказу я показываю изображение образца продукта вместе с названием цвета продукта. Я получил название цвета продукта для работы, однако я не знаю, как я мог получить изображение образца продукта, чтобы показать. У кого-нибудь есть идеи? 

                                <div class="account-single-order-product-card-info-variant">
                                  <span class="account-single-order-product-card-info-variant-image-padding">
                                    <span class="account-single-order-product-card-info-variant-image"> </span> 
                                  </span>
                                  <span class="account-single-order-product-card-info-variant-text">
                                  {%- for option in line_item.product.options -%}
  {% if option == 'Color' %}
     {{ line_item.product.variants.first.options[forloop.index0] }}  
  {% endif %}
{% endfor %}
                                  </span>
                                  
                                </div>

Вот мой swatch.liquid, чтобы показать, как они отображаются на странице моего продукта (если это помогает) - 

{%- include 'check_not_feature_img' -%}
<table class="variations{%- if settings.swatch_design == '2' %} variant_square{%- elsif settings.swatch_design == '3' %} variant_simple{%- endif -%}" cellspacing="0">
   {%- assign option_index = 0 -%}
   {%- if settings.color_name_check != blank -%}{%- assign _gl_color_name = settings.color_name_check | replace: ' ,', ',' | replace: ', ', ',' | split: ',' -%}{%- assign gl_color_name = _gl_color_name | downcase -%}{%-else-%}{%- assign gl_color_name = '\nathan_dt\' -%}{%-endif-%}
   <tbody>
   {%- for option in product.options_with_values -%}
      {%- assign option_index = forloop.index0 -%}
      {%- assign downcased_option = option.name | downcase -%}
      {%- assign downcased_option_check = option.name | downcase | prepend: '"' | append: '"' | strip -%} 
      {%- if downcased_option == 'color' or downcased_option == 'colour' or gl_color_name contains downcased_option_check -%}
            <tr data-option-index="{{ option_index }}" id="gl_select_{{ option_index }}">
               <td class="label"><label for="{{ option_index }}">{{ option.name }}</label></td>
               <td class="value with-swatches">
                  <div class="swatches-select" data-id="{{ option_index }}" data-option-index="{{ option_index }}">
                     {%-assign index = 0 %}
                     {%- for value in option.values -%}
                        <div class="basel-swatch bg_color basel-tooltip swatch-size-{{settings.swatch_size}}{%- if settings.swatch_style == '1' %} colored-swatch{%- else %} image-swatch{%- endif %}{%- if first_available_variant and option.selected_value == value %} active-swatch{%- elsif forloop.first == true and product.selected_variant == blank and first_available_variant == false %} active-swatch{%- elsif option.selected_value == value and product.selected_variant != blank and first_available_variant == false %} active-swatch{%- endif %} bg_color_{{ value  | handleize  }} bg_{{ value  | handleize  }} swatch-enabled" data-value='{{ value | handleize }}' data-image-id="{{ featured_image_id[index] }}">
                           <span class="basel-tooltip-label">{{ value }}</span>{{ value }}
                        </div>
                        {%-assign index = index | plus: 1 %}
                     {%- endfor -%}
                  </div>
               </td>
            </tr>
      {%- else- %}
         <tr data-option-index="{{ option_index }}" id="gl_select_{{ option_index }}">
            <td class="label"><label for="{{ option_index }}">{{ option.name }}</label></td>
            <td class="value with-swatches">
               <div class="swatches-select" data-id="{{ option_index }}" data-option-index="{{ option_index }}">
                 {%- for value in option.values -%}
                     <div class="basel-swatch basel-tooltip text-only swatch-size-{{settings.swatch_size}}{%- if first_available_variant and option.selected_value == value %} active-swatch{%- elsif forloop.first == true and product.selected_variant == blank and first_available_variant == false %} active-swatch{%- elsif option.selected_value == value and product.selected_variant != blank and first_available_variant == false %} active-swatch{%- endif %} bg_{{ value | handleize  }} swatch-enabled" data-value='{{ value | handleize }}'>
                     <span class="basel-tooltip-label">{{ value }}</span>{{ value }}
                     </div>
                 {%- endfor -%}
               </div>
            </td>
         </tr>
      {%- endif -%}
   {%- endfor -%}
   </tbody>
</table>

1 Ответ

1 голос
/ 07 февраля 2020

Под образцом продукта я предполагаю, что вы ссылаетесь на variant.image, поскольку для образца нет изображения.

Таким образом, вы можете сделать это:

{{ line_item.image | default: line_item.product.featured_image | img_url: '300x' | img_tag }}

Где мы нацеливаемся на изображение варианта и предоставляем изображение по умолчанию в случае, если у варианта нет изображения, которое будет откат к изображению продукта.

...