Cum să personalizați aspectul paginii produsului în Magento

După cum probabil știți, fiecare produs necesită un anumit aspect de pagină bazat pe caracteristicile sale unice. Deci, lucrul aici este să personalizați un anumit aspect al paginii de produs pentru mai multe produse dintr-o categorie fără a schimba aspectul categoriei .

Pentru a face asta, va trebui să parcurgem elementele de bază și numai de acolo, vom învăța să personalizăm aspectul paginii de produs cu fișiere de aspect.

Despre fișierele de aspect

În Magento, fișierele de aspect sunt fișiere .XML care sunt utilizate pentru a defini structura unei anumite pagini. Fișierele de aspect sunt clasificate în:

• Aspecte de bază : fișierele de aspect furnizate de module

• Aspecte teme : fișierele de aspect furnizate de teme

Cum să personalizați aspectul paginii produsului

Pentru a personaliza aspectul unei anumite pagini, va trebui să înlocuiți fișierul de aspect al paginii respective cu unul personalizat. Pentru a face acest lucru, va trebui să găsiți fișierele de aspect pentru pagina de produs a temei dvs.

Personalizați aspectul paginii de produs pentru toate tipurile de produse

Pagina produsului anterioară/următoare Magento 2

Magento 2 Previous Next Pagina de produs este o caracteristică optimizată care permite clienților să navigheze fără probleme prin paginile de produse cu un singur clic. Această caracteristică crește gradul de utilizare al magazinului dvs. și menține o experiență de navigare fluidă și plăcută pentru clienții dvs.

Ce se întâmplă dacă doriți să personalizați aspectul paginii de produs pentru toate tipurile dvs. de produse?

Aceasta este partea ușoară, deoarece va trebui doar să faceți modificări în fișierul de aspect comun, de exemplu catalog_product_view.xml (situat în /theme_dir/Magento_Catalog/layout/) pentru ca modificarea să se reflecte pe toate tipurile de produse.

Structurați conținutul în aspect folosind containere

Aspectul paginilor dvs. de produse este structurat folosind containere , care pot fi referite sau au adăugat mai multe blocuri.

Exemplu :

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

Iată containerele obișnuite utilizate în aspectul paginii produsului:

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

Personalizați aspectul paginii de produs pentru un anumit produs

Există două moduri prin care puteți personaliza aspectul paginii de produs pentru un anumit produs, ambele implicând plasarea fișierelor într-un folder /layout/ specificat.

Metoda 1 : Creați o actualizare personalizată a aspectului

Începând cu Magento 2.3.4, câmpul Layout Update XML din Magento Admin Panel este acum convertit într-un selector, ceea ce înseamnă că nu mai puteți adăuga liber cod în acest câmp.

Pentru a aplica actualizări personalizate de aspect pentru paginile dvs. de produse, va trebui să puneți un fișier .XML într-un folder specificat ( app/design/frontend/<Vendor>/<Theme>/Magento_Catalog/layout/ ). Actualizarea aspectului din acel fișier .XML va apărea apoi sub Actualizare aspect personalizat ca opțiune care poate fi selectată.

Regula pentru numele fișierelor de actualizare a aspectului personalizat

Numele fișierelor de actualizare a aspectului personalizat va trebui să respecte următoarea regulă:

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

Unde:

• <Product_SKU> : este codul SKU al produsului pe care doriți să îl aplicați actualizarea aspectului personalizat
• <Name for Layout Update> : este numele acestui aspect care va fi afișat în selectorul de actualizare a aspectului personalizat

De exemplu, dacă dorim să aplicăm o nouă actualizare a aspectului personalizat pentru acest SKU: MH05. Va trebui să punem un fișier de aspect personalizat numit catalog_product_view_selectable_ MH05_test.xml în /theme_dir/Magento_Catalog/layout/ , cu conținutul de mai jos:

 <?xml version="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">
    <corp>
        <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>
    </corp>
</pagina>

Ceea ce va face acest aspect de testare este că va elimina pesmeturile de pe pagina de produs a produsului SKU MH05.

Apoi, în Catalog > Produse , alegeți produsul cu SKU MH05. Acum ar trebui să puteți vedea o actualizare a aspectului personalizat numit test :

Alegeți această nouă actualizare a aspectului personalizat și Salvați modificările.

Acum ștergeți memoria cache folosind:

 php bin/magento cache:flush

Și modificările ar trebui să se reflecte acum pe front-end.

Metoda 2 : Suprascrierea aspectului

Cu metoda addPageLayoutHandles, puteți suprascrie aspectul folosind:

• ID produs
• SKU produs
• Tip produs

De exemplu, dacă doriți să personalizați aspectul paginii de produs pentru un produs cu ID 68, numele fișierului de aspect va trebui să respecte următorul format:

catalog_product_view_id_number.xml

de exemplu, catalog_product_view_id_68

Și fișierul va trebui să fie în următoarea parte:

/theme_dir/Magento_Catalog/layout/

Goliți memoria cache după mesajul sistemului. Dacă nu, puteți accesa interfața pentru a verifica noul aspect de pagină personalizat pentru produsul specific.

Pentru tipul de produs, puteți urma aceiași pași și puteți schimba numele fișierului în consecință. De exemplu, utilizați catalog_product_view_type_bundle.xml pentru a aplica noul aspect de pagină pentru produsele grupate.

Sper să vă placă noul aspect al paginii pentru articolele tale frumoase!

Postări asemănatoare:
Cum să personalizați procesul de plată în Magento 2
Cum să vă personalizați șabloanele de e-mail Magento