Shopify Collection Макет страницы - изображение, видео, затем текст + Добавить в корзину Кнопка

Question

Я принципиально новый для жидкостного двигателя. Тем не менее, я программирую на нескольких языках, поэтому считаю, что могу победить Liquid несколькими указателями.

Я хочу, чтобы мою страницу коллекции для компоновки продуктов, как они изложены здесь: http://www.boombycindyjoseph.com/pages/store

Это расположение 3 колонки с Изображение продукта на левой стороне, видео продукта в середине, и текст + Добавить в корзину справа. У меня не будет видео для каждого продукта, поэтому мне нужно будет иметь место в виде заполнителя по умолчанию в середине.

Обратите внимание, что изображение продукта не совпадает с изображением продукта на странице продукта. Хотя это необязательно, это тоже было бы неплохо.

My Googling просто привел к простым ответам, например, как добавить видео на страницу вашего продукта.

Так что я мог бы немного помочь, с чего начать редактирование. Я предполагаю, что это будет либо в файлах collection-template.liquid, collection-grid-item.liquid, либо в коллекции-grid-collage.liquid.

Оттуда мне нужно добавить изображение продукта и видео продукта для страницы коллекции в список активов или (лучше), так или иначе добавить пару полей в файл product.liquid, который позволяет мне вводить их, когда я имейте их.

Answer 1

Если вы используете Timber, то product-grid-item.liquid в фрагментах - это то, что коллекция будет создавать цикл для создания каждого из списков. Из того, что вы указали, похоже, что это будет collections-grid-item.liquid.

Изображения продуктов, которые вы можете извлечь из загруженных изображений, например, <img src="{{ product.featured_image.src | img_url: 'large' }}" > внутри цикла.

Чтобы получить изображение, которое не первый, попробуйте <img src="{{ product.images[1] | product_img_url: 'large' }}">

видео может быть загружено либо активы или Настройки> Файлы, то вы можете использовать именование, чтобы захватить его внутри цикла. То есть Допустим, у вас есть продукт под названием «синяя футболка», видео можно назвать «blue-tshirt.mp4», а затем, чтобы захватить видео в цикле, это будет примерно так: <video src="{{ product.title | handleize | append: '.mp4' }}"></video>

Лес будет хорошим отправной точкой, поскольку вы, вероятно, научитесь быстрее всего, а не готовой темы.

https://shopify.github.io/Timber/

Это также хороший ресурс для получения дескриптора на различных объектах Shopify:

http://cheat.markdunkley.com/

EDIT:

Если ваш ресурс не существует, проверить это ссылка:

https://ecommerce.shopify.com/c/ecommerce-design/t/testing-if-a-file-exists-29624