Criando um modelo de página inicial personalizado no Magento2

11

Como tudo que você sabe, o magento2 tem algum modelo de layout como 1coluna, 2 colunas à esquerda, 2 colunas à direita, 3 colunas e eu quero criar um modelo de layout de página inicial personalizado no Magento2, para que eu sigo alguns tutoriais e crie módulos e arquivos como dito em esses links, mas nenhum deles está funcionando e não consigo obter o layout da "página inicial" na página cms -> guia design.

Eu sigo abaixo todos os links, mas nenhum de trabalho para que alguém tenha a solução adequada, por favor, compartilhe.

primeiro link

segundo link

terceiro link

adiante link

Ablove todas as soluções não estão funcionando.

Dhaval
fonte
@Khoa TruongDinh Você sabe a resposta desta pergunta?
Dhaval

Respostas:

23

Primeiro de tudo, precisamos saber como criar um tema personalizado Magento 2, podemos mais aqui: http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/themes/theme-create. html

Depois de criar um novo tema personalizado. Vamos criar um novo layout personalizado para nossa página inicial. Por exemplo, nossa estrutura de pastas:

insira a descrição da imagem aqui

Devemos nos concentrar em dois arquivos xml: layouts.xmle page_layout/custom_home.xmlna Magento_Themepasta

app / design / frontend / Boolfly / livro / Magento_Theme / layouts.xml

<?xml version="1.0" encoding="UTF-8"?>
<page_layouts xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
              xsi:noNamespaceSchemaLocation="urn:magento:framework:View/PageLayout/etc/layouts.xsd">

    <layout id="custom_home">
        <label translate="true">Custom Home</label>
    </layout>

</page_layouts>

O ID do layout custom_homeé o nome do layout da página abaixo.

app / design / frontend / Boolfly / book / Magento_Theme / page_layout / custom_home.xml (fiz uma cópia por 1column.xmlpadrão)

<?xml version="1.0"?>
<layout xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
        xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_layout.xsd">
    <update handle="empty"/>
    <referenceContainer name="page.wrapper">
        <container name="header.container" as="header_container" label="Page Header Container"  htmlTag="header" htmlClass="page-header" before="main.content"/>
        <container name="page.top" as="page_top" label="After Page Header" after="header.container"/>
        <container name="footer-container" as="footer" before="before.body.end" label="Page Footer Container" htmlTag="footer" htmlClass="page-footer" />
    </referenceContainer>
</layout>

Entre no Magento Admin, encontre a home page do cms. Agora, nossa página inicial de layout personalizado está na lista de layouts:

insira a descrição da imagem aqui

Se escolhermos esse layout, podemos vê-lo na primeira página:

insira a descrição da imagem aqui

Nota: Verifique se o cache do Magento foi limpo.

Khoa TruongDinh
fonte
1
perfeito!!!!! Eu só seguir o seu caminho e minha done.Thanks trabalho bro
Dhaval
Eu já votei, mas talvez a última parte da resposta possa explicar exatamente onde encontrar a guia de design da sua captura de tela.
Joshua Flood
0

É facilmente alcançado pelo Admin, presumo que você já tenha criado o tema.

A maioria confusa após a criação de um novo tema perdeu a aparência da página inicial porque os blocos da página inicial não são atribuídos à página inicial enquanto criamos um novo tema. Nós apenas fazemos isso manualmente.

por favor siga as instruções

faça login no admin e navegue até

Conteúdo -> Páginas

encontre a Página inicial e, na coluna de ação , clique em editar e

clique na guia Conteúdo e insira o valor abaixo na área de texto

{{block class="Magento\Cms\Block\Block" block_id="home-page-block"}}

nota: aqui block_id é o ID exclusivo dos blocos, você pode encontrar os blocos de lista e o bloco em Conteúdo-> Blocos

finalmente salvar página

depois limpe o cache do magento e do navegador, carregue a página inicial e você poderá ver a página inicial parecida com a página inicial do luma.

se você deseja encontrar o conteúdo html da página inicial, localize o bloco home-page-block em Conteúdo-> Blocos e edite o bloco, poderá ver o conteúdo html da página inicial .

tome a referência deste conteúdo html; depois disso, você poderá desenvolver seu próprio html conforme sua exigência; Adicionar CSS a partir do arquivo de layout do tema.

você precisa de algum esclarecimento, basta mencionar no comentário

Tenha boa sorte.

Bilal Usean
fonte
Como você sabe no magento2, existem alguns modelos, como 1 coluna, 2 colunas esquerda, 2 colunas direita, 3 colunas etc. cms -> páginas -> página inicial. Agora você entendeu meu argumento?
Dhaval
Eu pensei que você tinha tentado personalizar o conteúdo da página inicial :-) Eu nunca tentei antes do que você pergunta, por isso não posso ajudar alguém a dar as mãos a você.
Bilal Usean
Eu tentei isso, mas não funciona no meu caso
Yusuf Ibrahim