Product preview card component

Community feedback

• 

  Karol Binkowski•1,640

  @GrzywNPosted about 2 years ago

  siea

  tam jak masz przekreślone to sobie daj tag <s> zamiast spana, bo wtedy masz od razu przekreślone i jest lepiej semantycznie, bo czytniki i wyszukiwarki biorą to jako coś nieaktualnego

  spróbuj sobie wyjebać te divy które mają tylko jeden element, bo w sumie są chyba zbyteczne, najwyżej daj sobie display: block w cssie na elementach inline czyli tych tekstowych (ale chyba to nie potrzebne)

  wrzuć sobie cały komponent w diva jakby to był komponent który masz wrzucić na inną stronkę, na stronce może być tylko jeden main tag, często do takich kart sie używa figure i figcaption ale można to poprostu też wrzucić w diva

  z tym bemem z nazewnictwem takim jakie miałeś to sobie możesz zrobić coś takiego

  <div>
      <img src="./images/image-product-desktop.jpg" class="component__left--img" alt="perfume" />
      <section class="component__right">
        <p class="component__header">Perfume</p>
        <div class="component__title-wrapper">
          <h1 class="component__title">Gabrielle Essence Eau De Parfum</h1>
        </div>
        <div class="component__description-wrapper">
          <p class="component__description">A floral, solar and voluptuous interpretation composed by Olivier Polge, Perfumer-Creator for the House of CHANEL.
          </p>
          <span class="component__price">$149.99</span>
          <s class="component__price component__price--line-through">$169.99</s>
        </div>
        <div>
          <button type="button" class="component__button"><img src="./images/icon-cart.svg" alt="icon-cart" /> Add to Cart</button>
        </div>
      </section>
  </div>
  

  ja to se tak zrobiłem, akurat tutaj używałem dużych liter ale wiekszosc osob robi tak jak ty i jest gicik

  <div class="ProductPreview">
          <div class="ProductPreview__Card">
            <div class="ProductPreview__ImageWrapper">
              <img class="ProductPreview__Image" src="" alt="" />
            </div>
            <div class="ProductPreview__Body">
              <h2 class="ProductPreview__Type"><slot name="type">Perfume</slot></h2>
              <h3 class="ProductPreview__Name"><slot name="name">Gabrielle Essence Eau De Parfum</slot></h3>
              <p class="ProductPreview__Description"
                ><slot name="description">A floral, solar and voluptuous interpretation composed by Olivier Polge,
                Perfumer-Creator for the House of CHANEL.</slot></p
              >
              <div class="ProductPreview__Prices">
                <span class="ProductPreview__CurrentPrice"><slot name="current-price">$149.99</slot></span>
                <s class="ProductPreview__OldPrice"><slot name="old-price">$169.99</slot></s>
              </div>
              <button class="ProductPreview__AddToCart" type="button">
                <span class="ProductPreview__AddToCartWrapper">
                  <img class="ProductPreview__CartIcon" src="./assets/icon-cart.svg" alt="" />
                  <slot name="add-to-cart">Add to Cart</slot>
                </span>
              </button>
            </div>
          </div>
        </div>
  

  a ogólnie to maśniutko 🤙

  0