Preparando-se para personalizar a página de resultados da pesquisa de pedidos

A página de resultados da pesquisa de pedidos e as ações pertencem ao buc-app-order módulo. Nesta lição, você aprenderá como habilitar a personalização do buc-app-order módulo e, em seguida, copiar os recursos necessários para iniciar a personalização.

Procedimento

  1. Abra o devtoolkit_docker/orderhub-code/buc-app-order/overrides.json arquivo.
  2. Para o resultado da pesquisa de pedidos, defina runAsCustomization como verdadeiro para habilitar a personalização para esta rota. Essa configuração instrui o Order Hub a consultar seu código personalizado quando a rota order-search-result for chamada.
    Importante: defina runAsCustomization como verdadeiro apenas para as rotas que estão sendo personalizadas no momento. Recomenda-se personalizar no máximo cinco rotas por vez.
  3. Abra um terminal e vá para o devtoolkit_docker/orderhub-code/buc-app-order/ diretório.
  4. Inicie o aplicativo executando o seguinte comando.
    yarn start-app
    A compilação e a inicialização do aplicativo podem levar vários minutos. Aguarde a mensagem “Compilado com sucesso” para cada rota em que runAsCustomization estiver definido como verdadeiro. Por exemplo,
    resultado da pesquisa de ordem: √ Compilado com sucesso.

    Você verá uma mensagem "** Angular Live Development Server is listening on bucgenerichost:<port>, open your browser on https://bucgenerichost:<port>/buc-app-order/order-search-result **"Você pode ignorar esta mensagem. Você deve usar o Order Hub para visualizar o módulo. A etapa 5 descreve como testar o módulo no Order Hub.

As telas de pedidos são modularizadas em diferentes pacotes no buc-app-order aplicativo. Cada pacote segue a estrutura de pastas src e src-custom.

  • src contém um código fornecido pel IBM. Não modifique nada nesta pasta.
  • src-custom contém todo o seu código de personalização.
  • src-merged é gerado após a compilação do aplicativo, que mescla src e src-custom.
Consulte a captura de tela a seguir para ver a estrutura da pasta src-custom enquanto segue as etapas abaixo.
Uma captura de tela da estrutura da pasta

  1. Configure o Order Hub para renderizar o módulo buc-app-order a partir do seu kit de ferramentas de desenvolvedor.
  2. Verifique se você pode adicionar conteúdo aos pontos de extensão existentes disponíveis no modal Ordem de programação usando a abordagem de personalização diferencial :
    1. No Order Hub, clique em Pedidos > Saída.
    2. Pesquisar um pedido.
    3. Na página de resultados da pesquisa, clique no menu de overflow no final de uma linha e, em seguida, clique em Agendar.
    4. Pressione Ctrl + D para mostrar os pontos de extensão disponíveis no modal.
      Modalidade de pedido de agendamento
    5. Anote os identificadores dos pontos de extensão aos quais você deseja adicionar conteúdo.

      Neste caso, utilizaremos o ponto de extensão schedule_modal_shared_bottom para a personalização.

    6. Quando terminar, pressione Ctrl + Shift + D para ocultar os pontos de extensão disponíveis no modal.

Resultados

Agora, você está pronto para começar a desenvolver as alterações no modal usando o ponto de extensão identificado.