Как настроить макет страницы продукта в Magento

Как вы, возможно, знаете, для каждого продукта требуется определенный макет страницы, основанный на его уникальных функциях. Итак, дело здесь в том, чтобы настроить определенный макет страницы продукта для нескольких продуктов в категории без изменения макета категории .

Для этого нам нужно пройти через основы, и только оттуда мы научимся настраивать макет страницы продукта с помощью файлов макета.

О файлах макетов

В Magento файлы макета представляют собой файлы .XML, которые используются для определения структуры данной страницы. Файлы макетов подразделяются на:

• Базовые макеты : файлы макетов, предоставляемые модулями.

• Макеты тем: файлы макетов, предоставляемые темами.

Как настроить макет страницы продукта

Чтобы настроить макет данной страницы, вам нужно заменить файл макета этой страницы на пользовательский. Для этого вам нужно найти файлы макета для страницы продукта вашей темы.

Настройка макета страницы продукта для всех типов продуктов

Magento 2 Предыдущая/следующая страница продукта

Magento 2 Предыдущая Следующая Страница продукта — это оптимизированная функция, которая позволяет клиентам легко перемещаться по страницам продукта одним щелчком мыши. Эта функция повышает удобство использования вашего магазина и обеспечивает плавный и приятный просмотр для ваших клиентов.

Что делать, если вы хотите настроить макет страницы продукта для всех типов ваших продуктов?

Это простая часть, так как вам нужно будет только внести изменения в общий файл макета, например, catalog_product_view.xml (расположенный в /theme_dir/Magento_Catalog/layout/), чтобы изменения отразились на всех типах ваших продуктов.

Структурируйте содержимое в макете с помощью контейнеров

Макет страниц вашего продукта структурирован с использованием контейнеров , на которые можно ссылаться или в которые можно добавить больше блоков.

Пример :

 <move element="product.info.social" destination="product.info.main" before="product.info.price"/>

Вот общие контейнеры, используемые в макете страницы продукта:

• product.info.main
• product.info.price
• product.info.stock.sku
• product.info.form.content
• product.info.extrahint
• product.info.social
• product.info.media

Настройка макета страницы продукта для конкретного продукта

Существует два способа настройки макета страницы вашего продукта для конкретного продукта, оба из которых предполагают размещение файлов в указанной папке /layout/.

Способ 1. Создайте собственное обновление макета.

Начиная с Magento 2.3.4, XML-поле Layout Update в панели администратора Magento теперь преобразовано в селектор, что означает, что вы больше не можете свободно добавлять код в это поле.

Чтобы применить настраиваемые обновления макета для страниц вашего продукта, вам необходимо поместить файл .XML в указанную папку ( app/design/frontend/<Vendor>/<Theme>/Magento_Catalog/layout/ ). Обновление макета из этого файла .XML затем появится в разделе « Обновление пользовательского макета » в качестве доступного для выбора параметра.

Правило для имен файлов обновления пользовательского макета

Имена файлов обновлений пользовательского макета должны соответствовать следующему правилу:

catalog_product_view_selectable_<Product SKU>_<Name for Layout Update>.xml

куда:

• <Product_SKU> : это артикул продукта, к которому вы хотите применить обновление пользовательского макета.
• <Name for Layout Update> : имя этого макета, которое будет отображаться в селекторе обновления пользовательского макета .

Например, если мы хотим применить новое обновление пользовательского макета для этого SKU: MH05. Нам нужно поместить пользовательский файл макета с именем catalog_product_view_selectable_ MH05_test.xml в /theme_dir/Magento_Catalog/layout/ с содержимым, как показано ниже:

 <?xml версия="1.0"?>
<page layout="1column" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <тело>
        <move element="page.main.title" destination="product.info.main" before="-"/>
        <move element="product.info.stock.sku" destination="product.info.price" after="product.price.final"/>
        <move element="product.info.review" destination="product.info.main" before="product.info.price"/>
		<referenceContainer name="page.wrapper">
             <referenceBlock name="breadcrumbs" remove="true"/>
         </referenceContainer>
    </тело>
</страница>

Этот тестовый макет удалит «хлебные крошки » со страницы продукта Product SKU MH05.

Далее в Каталог > Товары выберите товар с артикулом MH05. Теперь вы должны увидеть пользовательское обновление макета с именем test :

Выберите это новое обновление пользовательского макета и сохраните изменения.

Теперь очистите кеш, используя:

 Кэш php bin/magento: флеш

И изменения теперь должны быть отражены в вашем интерфейсе.

Способ 2 : переопределение макета

С помощью метода addPageLayoutHandles вы можете переопределить макет, используя:

• Код товара
• Артикул продукта
• Тип продукта

Например, если вы хотите настроить макет страницы продукта для продукта с идентификатором 68, имя файла макета должно соответствовать следующему формату:

catalog_product_view_id_number.xml

например, catalog_product_view_id_68

И файл должен быть в следующей части:

/theme_dir/Magento_Catalog/layout/

Очистите кеш после сообщения системы. Если нет, вы можете перейти к внешнему интерфейсу, чтобы проверить новый настраиваемый макет страницы для конкретного продукта.

Для типа продукта вы можете выполнить те же действия и соответствующим образом изменить имя файла. Например, используйте catalog_product_view_type_bundle.xml , чтобы применить новый макет страницы для связанных продуктов.

Надеюсь, вам понравится новый макет страницы для ваших любимых вещей!

Похожие сообщения:
Как настроить процесс оформления заказа в Magento 2
Как настроить шаблоны электронной почты Magento