Script test: juni.com.br

gistfile1.js

function el(tag, tags) {
  const element = document.createElement(tag);

  if (tags) {
    const tagsKeys = Object.keys(tags);
    tagsKeys.forEach(function (key) {
      element[key] = tags[key];
    });
  }

  return element;
}

function text(text) {
  return document.createTextNode(text);
}

function append(parent, itens) {
  itens.forEach(function (child) {
    parent.appendChild(child);
  });
}

function injectCss() {
  const style = el("style");
  style.textContent = `
    .modal-bottom-container {
      z-index: 99;
      background-color: #fff;
      position: fixed;
      bottom: 0;
      left: 0;
      width: 100%;
      transition: 1s cubic-bezier(0.94, 0.02, 0.16, 1.01);
      padding: 20px 20%;
      box-shadow: 0 5px 80px 0px rgba(0,0,0,.5);
    }
    
    .modal-bottom-container>.productName {
      text-transform: uppercase
    }
    
    .modal-bottom-container .mbc-reveal-button {
      cursor: pointer;
      position: absolute;
      top: 0;
      left: 50%;
      width: 32px;
      height: 32px;
      background-color: #fff;
      padding: 10px;
      transition: 1s cubic-bezier(0.94, 0.02, 0.16, 1.01);
      transform: translate(-50%, -100%);
      box-shadow: 0 -10px 17px -11px black;
    }

    .mbc-reveal-button .icon {
      position: absolute;
      top: 50%;
      left: 50%;
      padding: 10px;
      transition: 1s cubic-bezier(0.94, 0.02, 0.16, 1.01);
      transform: translate(-50%,-50%) rotate(180deg);
    }

    .modal-bottom-container.hidden .mbc-reveal-button .icon {
      transform: translate(-50%,-50%) rotate(0deg);
    }
    
    .modal-bottom-container.hidden {
      transform: translateY(100%)
    }
    
    .modal-bottom-container .product-image-column {
      padding-right: 10px;
    }

    .modal-bottom-container .product__name {
      text-transform: uppercase;
      margin-bottom: 20px;
    }

    .modal-bottom-container .product__name > .productName {
      text-transform: uppercase;
    }
    
    .modal-bottom-container .original-price {
      font-size: 12px;
      text-decoration: line-through;
    }
    
    .modal-bottom-container .discount-price {
      font-size: 13px;
    }
  `;

  document.body.appendChild(style);
}

(function () {
  injectCss();

  const initialProductName = document.querySelector(".productName").textContent;
  const productPriceSource = document.querySelector(".skuBestPrice")
    .textContent;
  const productOriginalParsed = parseFloat(
    productPriceSource.replace(/([A-Z$\s])/gi, "").replace(",", ".")
  );
  const originalBuyButton = document.querySelector(".button--buy");
  const colorChoiceControl = document
    .querySelector(".productInfos__sku-colors")
    .cloneNode(true);
  const sizeChoiceControl = document
    .querySelector(".productInfos__sku-sizes")
    .cloneNode(true);

  const fragment = document.createDocumentFragment();
  const container = el("div", {
    className: "container grid grid--center modal-bottom-container hidden",
  });

  /**
   * Control container revel state
   */
  const revelButton = el("span", {
    className: "mbc-reveal-button",
  });
  const revelButtonIcon = el("i", {
    className: "icon icon-arrow",
  });

  revelButton.addEventListener("click", function (e) {
    e.preventDefault();
    container.classList.toggle("hidden");
  });
  revelButton.appendChild(revelButtonIcon);

  container.appendChild(revelButton);

  /**
   * Product image
   */

  const productImageColumn = el("div", {
    className: "grid__col--sm-1 product-image-column",
  });
  const productImages = document.querySelectorAll(".product__image");
  let selectedProductImage = productImages[0];

  const productImage = el("img");
  productImage.src = selectedProductImage.src;

  productImageColumn.appendChild(productImage);

  /**
   * Product info component
   */
  const productInfoColumn = el("div", {
    className: "grid__col--sm-9",
  });

  // ProductName
  const productNameContainer = el("div", {
    className: "product__name",
  });
  const productNameContent = el("span", {
    className: "productName",
  });
  function setProductName(name) {
    productNameContent.textContent = name;
  }

  setProductName(initialProductName);

  productNameContainer.appendChild(productNameContent);
  productInfoColumn.appendChild(productNameContainer);
  ///ProductName

  // ProductPrice
  const productPriceContainer = el("div");
  const productOriginalPriceEl = el("span", {
    className: "original-price",
    textContent: productPriceSource,
  });
  const productDiscountPriceEl = el("span", {
    className: "discount-price",
  });
  const prependText = text(" por ");
  const newPriceText = el("strong", {
    textContent: `R$ ${productOriginalParsed * 0.9}`,
  });
  const appendText = text(" (-10%)");

  append(productDiscountPriceEl, [prependText, newPriceText, appendText]);
  append(productPriceContainer, [
    productOriginalPriceEl,
    productDiscountPriceEl,
  ]);

  append(productInfoColumn, [
    productPriceContainer,
    colorChoiceControl,
    sizeChoiceControl,
  ]);
  ///ProductPrice

  append(container, [productImageColumn, productInfoColumn]);

  /**
   * Buy button component
   */
  const buyButton = el("button", { classList: "button button--buy" });
  buyButton.textContent = "adicionar à sacola";
  const buyButtonContainer = el("div", {
    className: "grid__col--sm-2",
  });
  const buyButtonContent = el("div", {
    className: "product__buy-button",
  });

  buyButtonContent.style.display = "initial";

  buyButtonContent.appendChild(buyButton);
  buyButtonContainer.appendChild(buyButtonContent);

  buyButton.addEventListener("click", function (event) {
    event.preventDefault();

    container.classList.add("hidden");
    originalBuyButton.click();
  });
  container.appendChild(buyButtonContainer);

  /**
   * Render
   */
  fragment.appendChild(container);
  document.body.appendChild(fragment);

  $(".modal-bottom-container .dimension-Tamanho").click(function (event) {
    if ($(this).hasClass("disabled")) {
      event.preventDefault();
      return;
    }

    $(`.dimension-Tamanho.sku-picked`).removeClass("sku-picked");
    $(this).addClass("sku-picked");
  });

  setTimeout(function () {
    container.classList.remove("hidden");
  }, 300);
})();