Nuevo estilo del account

account.liquid

{% if customer %}
<script>
  mixpanel.identify(‘{{customer.id}}’);
  mixpanel.people.set({
  “$first_name”: “{{customer.first_name}}”,
  “$last_name”: “{{customer.last_name}}”,
  “$email”: “{{customer.email}}”,
  “Order Count”: “{{customer.orders_count}}”,
  “Total Spent”: “{{customer.total_spent | money_without_currency}}”
  });
</script>
{% endif %}

<div id="accountContainer">
  <h1 class="account-title">Área personal</h1>
  <div class="options-list">
    <ul>
      <li class="multiple">
        <img
          class="option-list--icon"
          src="https://cdn.shopify.com/s/files/1/0781/6149/files/icono_plan.svg?v=1650374966"
          alt="plan_semanal"
        />
        <a href="">Mi plan semanal</a>
        <a href="/tools/checkout/front_end/login">
          <img
            class="option-list--arrow"
            src="https://cdn.shopify.com/s/files/1/0781/6149/files/arrow-right-bw.png?v=1613156706"
            alt="open"
          />
        </a>
      </li>
      <li class="multiple">
        <img
          class="option-list--icon"
          src="https://cdn.shopify.com/s/files/1/0781/6149/files/cart_icon.svg?v=1633571719"
          alt="market"
        />
        <a href="">Market</a>
        <a href="/collections/marketplace">
          <img
            class="option-list--arrow"
            src="https://cdn.shopify.com/s/files/1/0781/6149/files/arrow-right-bw.png?v=1613156706"
            alt="open"
          />
        </a>
      </li>
      <li>
        <img
          class="option-list--icon"
          src="https://cdn.shopify.com/s/files/1/0781/6149/files/history_icon.svg?v=1650375462"
          alt="history"
        />
        <a href="">Historial</a>
        <a id="historyOption" href="#!">
          <img
            class="option-list--arrow"
            src="https://cdn.shopify.com/s/files/1/0781/6149/files/arrow-right-bw.png?v=1613156706"
            alt="open"
          />
        </a>
      </li>
    </ul>
  </div>
  <div class="options-list">
    <ul>
      <li>
        <img
          class="option-list--icon"
          src="https://cdn.shopify.com/s/files/1/0781/6149/files/help_icon.svg?v=1650375529"
          alt="help"
        />
        <a href="">Gestionar Pagos **</a>
        <a
          href="https://fitb.myshopify.com/apps/checkout/customer-info?public_payment_id=RCurvylQnIEVtwVv72bRuphFlvI9X7EVfhEvN5OEodeG1AtPvliAoCEK9Lrme98E"
        >
          <img
            class="option-list--arrow"
            src="https://cdn.shopify.com/s/files/1/0781/6149/files/arrow-right-bw.png?v=1613156706"
            alt="open"
          />
        </a>
      </li>
    </ul>
  </div>
  <div class="options-list">
    <ul>
      <li>
        <img
          class="option-list--icon"
          src="https://cdn.shopify.com/s/files/1/0781/6149/files/help_icon.svg?v=1650375529"
          alt="help"
        />
        <a href="">Ayuda</a>
        <a href="https://foodinthebox.freshdesk.com/support/home">
          <img
            class="option-list--arrow"
            src="https://cdn.shopify.com/s/files/1/0781/6149/files/arrow-right-bw.png?v=1613156706"
            alt="open"
          />
        </a>
      </li>
    </ul>
  </div>
  <div class="options-list">
    <ul>
      <li>
        <img
          class="option-list--icon"
          src="https://cdn.shopify.com/s/files/1/0781/6149/files/logout_icon.svg?v=1650375587"
          alt="logout"
        />
        <a href="">Log out</a>
        <a href="/account/logout">
          <img
            class="option-list--arrow"
            src="https://cdn.shopify.com/s/files/1/0781/6149/files/arrow-right-bw.png?v=1613156706"
            alt="open"
          />
        </a>
      </li>
    </ul>
  </div>
</div>

<div id="orders" class="orders-container">
  <div class="orders-container--title">
    <a id="historyBackButton" href="#!">
      <img
        class="option-list--arrow"
        src="https://cdn.shopify.com/s/files/1/0781/6149/files/back_icon.svg?v=1650376456"
        alt="open"
      />
    </a>
    <h1>Historial</h1>
  </div>
  <div>
    <div class="orders-container--details">
      <div>
        <span>Semana actual</span>
      </div>
      <div class="orders-container--detail-items actual"></div>
    </div>
    {% if customer.orders.size != 0 %} {% for order in customer.orders %}
    <div class="orders-container--details">
      <div>
        <span>{{ order.created_at | date: format:"abbreviated_date" }}</span>
      </div>
      <div class="orders-container--detail-items">
        {% for item in order.line_items %} {% unless item.product.title contains
        'Plan' %}
        <div>
          <img src="{{ item.product | image_url: width:150 }}" alt="" />
          <p>{{ item.product.title }}</p>
        </div>
        {% endunless %} {% endfor %}
      </div>
    </div>
    {% endfor %} {% else %}
    <p>{{ "customer.orders.none" | t }}</p>
    {% endif %}
  </div>
</div>

<div class="banner-whatsapp-container banner-view-device">
  <div class="banner-whatsappp-icon">
    <img src="{{ 'Grupo_2608.svg' | asset_url }}" />
  </div>
  <div class="banner-whatsappp-text">
    Llámanos o contacta por Whatsapp<br />
    en el <b>622 03 26 25</b><br />
    (Lu-Vi 9am-7pm)
  </div>
</div>

<div class="banner-container">
  <a href="/pages/gana-20-regala-20">
    <img
      src="https://cdn.shopify.com/s/files/1/0781/6149/files/MGM_estatico_Web.png?v=1634762355"
      alt="regala_20"
    />
  </a>
</div>

<style>
  #accountContainer {
    align-items: center;
    display: grid;
    grid-template-columns: auto;
    padding: 16px;
  }

  .account-title {
    font-family: "Poppins", sans-serif !important;
    font-size: 26px !important;
    font-weight: bold !important;
    text-transform: capitalize !important;
    text-align: center !important;
    padding: 16px 0px !important;
  }

  .banner-container img {
    display: block;
    margin: 0 auto;
    width: 90%;
  }

  .orders-container {
    display: none;
    padding: 16px;
  }

  .orders-container--details {
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: 25px auto;
    overflow-y: scroll;
  }

  .orders-container--detail-items {
    display: grid;
    grid-template-columns: auto auto auto;
    grid-gap: 16px;
    grid-template-rows: 160px;
  }

  .orders-container--detail-items img {
    border-radius: 15px;
  }

  .orders-container--detail-items p {
    color: #333333 !important;
    font-family: "Open Sans", sans-serif !important;
    font-size: 15px !important;
    font-weight: 400 !important;
  }

  .orders-container--title {
    align-items: center;
    display: grid;
    grid-template-columns: 20px auto;
  }

  .orders-container--title h1 {
    font-family: "Poppins", sans-serif !important;
    font-size: 26px !important;
    font-weight: bold !important;
    text-transform: capitalize !important;
    text-align: center !important;
    padding: 16px 0px !important;
  }

  .options-list {
    border-radius: 20px;
    box-shadow: 5px 5px #b1aeae1c;
    display: grid;
    grid-template-columns: auto;
    margin-bottom: 16px;
    padding: 0px 16px;
  }

  .options-list ul {
    list-style: none;
    margin: 0px;
  }

  .options-list li {
    align-items: center;
    display: grid;
    grid-template-columns: 40px auto 25px;
    height: 50px;
  }

  .options-list li.multiple {
    border-bottom: 1px solid #e5dfdc;
  }

  .option-list--arrow {
    cursor: pointer;
  }

  .option-list--icon,
  .option-list--arrow {
    height: 24px;
    width: 24px;
  }
</style>

<script>
  (() => {
    const historyOption = document.getElementById("historyOption");
    const historyBackButton = document.getElementById("historyBackButton");
    const accountContainer = document.getElementById("accountContainer");
    const ordersContainer = document.getElementById("orders");

    // Leer las recetas en el local storage
    function getCurrentWeekRecipes() {
      const currentWeek = document.getElementsByClassName("actual")[0];
      const currentRecipes = JSON.parse(new URLSearchParams(window.location.search).get('recipes'));
      let currentRecipesHTML = ``;
      currentRecipes.forEach((item) => {
        currentRecipesHTML += `<div><img src="${item.Picture}" alt=""><p>${item.ProductName}</p></div>`;
      });
      currentWeek.innerHTML = currentRecipesHTML;
    }

    const displayOrders = () => {
      accountContainer.style.display = "none";
      ordersContainer.style.display = "block";
      getCurrentWeekRecipes()
    };

    const hideOrders = () => {
      accountContainer.style.display = "block";
      ordersContainer.style.display = "none";
    };

    historyOption.addEventListener("click", displayOrders);
    historyBackButton.addEventListener("click", hideOrders);

    $(".tab-link a").click(function () {
      var href = $(this).attr("href");
      if (href.startsWith("#")) {
        $(".tab-content").hide();
        $(href).show();
        $(".tab-link").removeClass("active");
        $(this).parent().addClass("active");
        return false;
      }
    });

    // Guardar las recetas en el storage from url parameters
    function createStorage() {
      const currentRecipes = localStorage.getItem("recipes");
      if (!currentRecipes) {
        const urlParams = new URLSearchParams(window.location.search);
        const recipes = urlParams.get("recipes");
        if (recipes) {
          localStorage.setItem("recipes", recipes);
        }
      }
    }

    // Funcion paera generar url con parametros de las recetas.
    // al dar click en ver recetas dentro del area personal..
    function getBOLDSubscriptionProducts() {
      let productsData = [];
      const subscriptionProducts = document
        .getElementById("view_choices")
        .querySelectorAll(".row");
      subscriptionProducts.forEach((productRow) => {
        const Picture =
          productRow.childNodes[1].childNodes[1].style.backgroundImage.split(
            '"'
          )[1];
        const ProductName = productRow.childNodes[3].childNodes[1].innerText;
        const Qty = parseInt(productRow.childNodes[5].childNodes[1].innerText);
        if (Qty > 0) {
          productsData.push({
            Picture,
            ProductName,
            Qty,
          });
        }
      });
      const URL = `https://foodinthebox.com/account?recipes=${JSON.stringify(
        productsData
      )}`;
      window.location.replace(URL);
    }

    //Contact-us button.
    $(".banner-whatsapp-container").click(function () {
      //Verficamos que estamos en un dispositivo movil.
      if (
        /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
          navigator.userAgent
        )
      ) {
        let phoneNumber = "34622032625";
        let link = `https://wa.me/${phoneNumber}/?text=${encodeURI("")}`;
        //let link=`http://api.whatsapp.com/send?phone=${phoneNumber}&text=${encodeURI('msg a enviar')}`;
        window.open(link);
      }
    });
  })();
</script>