Imagens na página inicial

Carlos · Março 25, 2020, 1:58pm

Como introduzir imagens (Banners) entre as coleções?

leonardo · Março 25, 2020, 5:25pm

Você se refere aos banners no topo da página antes das coleções? Ou as imagens de produtos nas coleções?

Se for os banners no topo da página eu recomendo que você edite as imagens mesmo, tente diminuir a altura mantendo a mesma largura, também é bom manter os banners com o mesmo tamanho.
Uma segunda opção neste caso seria limitar a largura do slider (por padrão fica em tela cheia) com CSS:

.banner-slider {
  max-width: 1000px;
}

Este CSS é só um exemplo, você pode alterar o 1000px pra adaptar ao que achar que fica melhor.

Carlos · Março 25, 2020, 5:29pm

Não são os banners principais, mas sim banners entre as coleções. Por exemplo, entre a coleção destaques e promoções colocar um banner.
Também banner menores entre a barra de informações e a primeira coleção

leonardo · Março 25, 2020, 5:53pm

Ah sim, interpretei mal.
Você pode editar isto direto no HTML (EJS), facilitei um pouco pra você, agora basta alterar as linhas que vou abaixo:

github.com

ecomplus-stores/lojaluv/blob/master/template/pages/views/home.ejs#L28


<% } %>
<div class="home container py-1 py-sm-2 py-lg-4">
  <% if (showcase.length) { %>
    <%
    for (let i = 0; i < showcase.length; i++) {
      const shelf = showcase[i]
      
      switch (shelf.collection) {
        case '5e691ad87e65524614885379':
          %>
          <!-- HTML antes da coleção Novidades -->
          <%
          break
        case '5e691aa27e65524614885372':
          %>
          <!-- HTML antes da coleção Destaques -->
          <%
          break
        case '5e691afa7e6552461488537e':
          %>
          <!-- HTML antes da coleção Promoção -->

github.com

ecomplus-stores/lojaluv/blob/master/template/pages/views/home.ejs#L33


const shelf = showcase[i]


switch (shelf.collection) {
  case '5e691ad87e65524614885379':
    %>
    <!-- HTML antes da coleção Novidades -->
    <%
    break
  case '5e691aa27e65524614885372':
    %>
    <!-- HTML antes da coleção Destaques -->
    <%
    break
  case '5e691afa7e6552461488537e':
    %>
    <!-- HTML antes da coleção Promoção -->
    <%
    break
}


// get collection body

github.com

ecomplus-stores/lojaluv/blob/master/template/pages/views/home.ejs#L38


    <!-- HTML antes da coleção Novidades -->
    <%
    break
  case '5e691aa27e65524614885372':
    %>
    <!-- HTML antes da coleção Destaques -->
    <%
    break
  case '5e691afa7e6552461488537e':
    %>
    <!-- HTML antes da coleção Promoção -->
    <%
    break
}


// get collection body
const res = await _.ecomClient.store({ url: `/collections/${shelf.collection}.json` })
const collection = res.data
let items = []
if (Array.isArray(collection.products) && collection.products.length) {
  // search collection items by IDs

Pra adicionar um banner único você pode colocar a imagem como:

<img src="url-da-imagem" class="img-fluid"/>

Pra adicionar mais banners em linha único você pode usar o grid do Bootstrap:

<div class="row>
  <div class="col-lg-4">
    <img src="url-da-imagem-1" class="img-fluid"/>
  </div>
  <div class="col-lg-4">
    <img src="url-da-imagem-2" class="img-fluid"/>
  </div>
  <div class="col-lg-4">
    <img src="url-da-imagem-3" class="img-fluid"/>
  </div>
</div>

leonardo · Março 25, 2020, 6:03pm

Nota: acho que isto vai ser uma demanda comum (certo @Matheus ?), adicionei no roadmap da V2 uma melhoria para o CMS para possibilitar esta edição sem necessidade de alteração em código (embora editar o HTML te permita fazer alterações de mais flexíveis). Isto vai ser implementado em breve, então se preferir esperar…

github.com/ecomplus/storefront

Banners before each collection on homepage

opened 05:59PM - 25 Mar 20 UTC

closed 07:23AM - 30 Mar 20 UTC

leomp12

enhancement cms 1:easy

**Is your feature request related to a problem? Please describe.** Merchants fr…equently want to add banners between collections on home, it should be easy to do inside CMS. **Describe the solution you'd like** Add a `banners` array field to each [`showcase`](https://github.com/ecomplus/storefront/blob/master/%40ecomplus/storefront-template/content/home.json#L18) object, then handle it on `home.ejs` to render a banner or list of banners (row) before each respective collection. **Describe alternatives you've considered** Edit it with EJS, more flexible but not so easy. **Additional context** Community topic: https://community.e-com.plus/t/imagens-na-pagina-inicial/203/4

Carlos · Março 25, 2020, 6:50pm

Show!!!
Assim que colocar a loja definitivamente já vou usar o caminho!!!

Carlos · Março 25, 2020, 6:50pm

Boa! A V2 vai estar fodastica…kkkkk

Matheus · Março 25, 2020, 7:01pm

Sim, muitas alterações que vão facilitar muito na implementação de alterações na loja.

anon32448718 · Junho 7, 2020, 11:16pm

@Matheus estou acompanhando, pois tenho interesse em inserir banners entre as coleções.
Porém esses banners devem substituit o nome da coleção na home.
Continuo em acompanhamento.

Matheus · Junho 8, 2020, 2:30pm

@anon32448718 dá para fazer de várias formas. Inclusive via CSS, colocando uma imagem de fundo ao termo escrito, logo será um banner só que com texto, o que seria mais interessante, pois não perderia uma tag importante para SEO. Se quiser, ainda assim você pode retirar o texto e colocar um banner apenas em cima da vitrine. Isso já é possível.

anon32448718 · Junho 8, 2020, 3:34pm

@Matheus muito obrigado.
Poderia me passar o caminho do CSS e a classe oi id do elemento.
Creio que fazer no html e depois configurar via CSS seja melhor.
Mas vou precisar do caminho para acessar esses arquivos de html e css, além das classes ou id.
Muito obrigado

Matheus · Junho 8, 2020, 3:52pm

Você já possui uma imagem de fundo?
O seletor é
.products-carousel__title
Esse no caso aparecerá em qualquer vitrine existente do site. Caso queira algo apenas na home é possível também pegar um seletor mais específico.

anon32448718 · Junho 8, 2020, 4:02pm

vou usar apenas na home. acho melhor um seletor mais específico.

Matheus · Junho 8, 2020, 4:13pm

.page--home .products-carousel__title

anon32448718 · Junho 8, 2020, 4:20pm

vou inserir a imagem via CSS através do backgroud utilizando esse seletor.
Acha viável?

anon32448718 · Junho 8, 2020, 4:26pm

agora que percebi uma situação:
São várias soleções e varias fotos, porém só tem um seletor.

Matheus · Junho 8, 2020, 10:55pm

Seletor são diversos, você que escolhe. Existe uma classe apenas, pois vamos reaproveitando os componentes.

anon32448718 · Junho 10, 2020, 4:19am

@Matheus
É possível ter acesso ao html da home e da vitrine de produtos.
Não encontrei esses arquivos quando instalei o clone.

Matheus · Junho 10, 2020, 2:26pm

Dá sim, no caso teria que ser importada apenas a view da home, acredito que isso não seja boa ideia. O que você quer alterar?

anon32448718 · Junho 10, 2020, 2:41pm

preciso das referências das classes e id’s utilizadas no html da home.
preciso ainda verificar as classes e ids utilizadas na vitrine de produtos.
Mas não estou utilizando direto no git. Estou fazendo em servidor local como demonstrado no vídeo enviado por @Carlos.
Na verdade @Matheus acho muito boa essa possibilidade de fazer as modificações via servidor local. Porém minha crítica é que não temos acesso a arquivos importantes, que no mínimo possibilitem o entendimento do fluxo do código.
acho importante liberar o html solciitados e os respectivos arquivos css.
principalmente se eu desejar fazer modificações mais profundas no visual da loja.