Могут ли метаполя обрабатывать жидкий код в Shopify

Question

У меня есть продукт Shopify с метаполем.Метаполе возвращает дополнительную информацию о продукте на страницу продукта.В частности, он возвращает оглавление (характеристики продукта) в формате вкладок - см. Пример изображения ниже.

Я хочу, чтобы метаполе также возвращало определенное изображение продукта и форматировало его в таблице.

Причина, по которой я хочу сделать это таким образом, заключается в том, что я хочу использовать карту изображения (https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_areamap) на изображении продукта, чтобы при нажатии пользователем функции продукта на изображении строка таблицыс соответствующей информацией будет выделено.

Ниже приведен пример того, что я имею в виду.

Вкладка ДЕТАЛИ становитсяего информация из этого метаполя имеет 2 столбца - согласно приведенному ниже коду.

Левый столбец (1) должен возвращать конкретное изображение продукта, а правый столбец (2) - это таблица со связанной информацией - таккогда пользователь нажимает на выноску изображения (3), соответствующая строка таблицы выделяется (3).

Мой код в метаполе выглядит так, как показано ниже. Но он просто отображает жидкий код, а не изображение.tafields обрабатывает жидкий код или Shopify может обрабатывать жидкий код после его передачи из метаполя?Или какой лучший способ сделать это?

<div class="row">
    <div class="col-sm-12 col-md-12 col-lg-6"><!-- Image column START -->
        {% for image in product.images offset:9 limit:1 %}<!-- Show specific image START -->
            <img src="{{ image.src | product_img_url: 'master' }}">
        {% endfor %}<!-- Show specific image END -->
    </div><!-- Image column END -->

    <div class="col-sm-12 col-md-12 col-lg-6"><!-- Details column START -->
        <table id="product-table">
            <tr>
                <td>Rear view mirror</td>
            </tr>
            <tr>
                <td>ABS Brakes</td>
            </tr>
            <tr>
                <td>6 Speed Transmission</td>
            </tr>
            <tr>
                <td>Lowerd Seat Height</td>
            </tr>
        </table>
    </div><!-- Details column START -->
</div>

Answer 1

Ваш вопрос немного неловкий, но я постараюсь дать четкий ответ для вас.

Метаполе - это просто ресурс, который вы назначаете другому ресурсу. Так что в вашем случае продукту будут назначены некоторые ресурсы. Это могут быть строки, целые числа или JSON. Это означает, что ваше метаполе может предоставить вам много дополнительных данных. Изображение, вероятно, не является хорошим кандидатом для метаполей. У вас есть изображения продуктов и варианты изображений. Перехват других изображений просто требует жестко запрограммированных проблем. Вы можете сделать это, но очень сложно организовать ваши изображения в виде файловых ресурсов и правильно их использовать. Не смешно. Не легко.

Таким образом, когда Shopify анализирует Liquid в вашем шаблоне, он генерирует гигантскую строку HTML. Эта гигантская строка HTML - ваш магазин Shopify, и она доступна для веб-браузеров ваших клиентов. Таким образом, в то время как Shopify превращает ваш product.liquid в HTML, он также подчиняется любым командам для отображения выбранных вами метаполей. Это означает, что вы получаете еще больше данных для размещения в своем HTML. Это зависит от вас. Обычно вы визуализируете свою гигантскую строку HTML, а затем разрешаете Javascript, который вы включаете, прослушивать щелчки и другие обычные действия.

В вашем случае ваш вопрос не столько о Liquid и Metafields, сколько о том, как отобразить вашу гигантскую веб-страницу Shopify, а затем подключить правильный Javascript. Поскольку в вашем вопросе об этом ничего не сказано, я оставлю вас с ответом, что для того, чтобы сделать ваш мотоцикл волшебным, вам нужно выполнить некоторые сценарии в Javscript и, возможно, слегка поработать над умной работой с DOM во время рендеринга Liquid.