{"id":16,"date":"2026-10-13T11:35:43","date_gmt":"2026-10-13T11:35:43","guid":{"rendered":"https:\/\/upkar.techmarkmarketing.com\/?page_id=16"},"modified":"2026-10-13T11:36:43","modified_gmt":"2026-10-13T11:36:43","slug":"cart","status":"publish","type":"page","link":"https:\/\/upkar.techmarkmarketing.com\/index.php\/cart\/","title":{"rendered":"cart"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"16\" class=\"elementor elementor-16\">\n\t\t\t\t<div class=\"elementor-element elementor-element-9f3b0cf e-con e-atomic-element e-flexbox-base e-default-div e-cb0176c \" data-id=\"9f3b0cf\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"9f3b0cf\">\n    \t\t<div class=\"elementor-element elementor-element-4a357aa elementor-widget elementor-widget-html\" data-id=\"4a357aa\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<div id=\"upkaar-cart-page\">\n<style>\n#upkaar-cart-page {\n  --green: #176b45;\n  --dark-green: #104d32;\n  --bg: #f6f8f5;\n  --text: #202820;\n  --muted: #737b73;\n  font-family: Arial, sans-serif;\n  color: var(--text);\n  background: var(--bg);\n  padding: 30px 16px 60px;\n  min-height: 75vh;\n}\n#upkaar-cart-page * {\n  box-sizing: border-box;\n}\n#upkaar-cart-page .cart-container {\n  max-width: 1150px;\n  margin: auto;\n}\n#upkaar-cart-page .cart-header {\n  margin-bottom: 25px;\n}\n#upkaar-cart-page .cart-header h1 {\n  font-size: 34px;\n  margin: 0 0 8px;\n  color: var(--text);\n}\n#upkaar-cart-page .cart-header p {\n  color: var(--muted);\n  margin: 0;\n  line-height: 1.6;\n}\n#upkaar-cart-page .cart-layout {\n  display: grid;\n  grid-template-columns: minmax(0, 1fr) 340px;\n  gap: 24px;\n  align-items: start;\n}\n#upkaar-cart-page .cart-products,\n#upkaar-cart-page .order-summary {\n  background: #fff;\n  border: 1px solid #e5eae3;\n  border-radius: 14px;\n  padding: 22px;\n}\n#upkaar-cart-page .cart-section-title {\n  font-size: 20px;\n  font-weight: 700;\n  margin: 0 0 18px;\n}\n#upkaar-cart-page .cart-item {\n  display: grid;\n  grid-template-columns: 100px minmax(0, 1fr);\n  gap: 18px;\n  padding: 20px 0;\n  border-bottom: 1px solid #edf0eb;\n}\n#upkaar-cart-page .cart-item:first-of-type {\n  padding-top: 0;\n}\n#upkaar-cart-page .cart-item:last-child {\n  border-bottom: 0;\n}\n#upkaar-cart-page .cart-item img {\n  width: 100px;\n  height: 105px;\n  object-fit: contain;\n  background: #f2f5f0;\n  border-radius: 9px;\n  padding: 5px;\n}\n#upkaar-cart-page .cart-item-name {\n  font-size: 16px;\n  font-weight: 700;\n  line-height: 1.5;\n  margin-bottom: 7px;\n}\n#upkaar-cart-page .cart-item-price {\n  color: var(--green);\n  font-weight: 700;\n  font-size: 16px;\n  margin-bottom: 12px;\n}\n#upkaar-cart-page .cart-item-bottom {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  flex-wrap: wrap;\n  gap: 12px;\n}\n#upkaar-cart-page .quantity-controls {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  border: 1px solid #dfe5dc;\n  border-radius: 7px;\n  padding: 5px;\n}\n#upkaar-cart-page .quantity-controls button {\n  width: 28px;\n  height: 28px;\n  border: 0;\n  background: #f1f5ef;\n  color: var(--green);\n  border-radius: 5px;\n  font-size: 18px;\n  cursor: pointer;\n}\n#upkaar-cart-page .quantity-controls span {\n  min-width: 18px;\n  text-align: center;\n  font-weight: 700;\n}\n#upkaar-cart-page .remove-button {\n  border: 0;\n  background: transparent;\n  color: #c0392b;\n  cursor: pointer;\n  font-size: 13px;\n  padding: 5px 0;\n}\n#upkaar-cart-page .remove-button:hover {\n  text-decoration: underline;\n}\n#upkaar-cart-page .item-subtotal {\n  font-weight: 700;\n  margin-top: 10px;\n  font-size: 14px;\n}\n#upkaar-cart-page .continue-shopping {\n  display: inline-block;\n  margin-top: 18px;\n  color: var(--green);\n  text-decoration: none;\n  font-weight: 700;\n}\n#upkaar-cart-page .continue-shopping:hover {\n  text-decoration: underline;\n}\n#upkaar-cart-page .summary-row {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  gap: 12px;\n  margin-bottom: 17px;\n  font-size: 14px;\n}\n#upkaar-cart-page .summary-row span:first-child {\n  color: var(--muted);\n}\n#upkaar-cart-page .summary-row span:last-child {\n  font-weight: 700;\n  text-align: right;\n}\n#upkaar-cart-page .summary-total {\n  border-top: 1px solid #e7ebe5;\n  padding-top: 18px;\n  margin-top: 18px;\n  font-size: 19px;\n}\n#upkaar-cart-page .summary-total span {\n  color: var(--text) !important;\n  font-weight: 800 !important;\n}\n#upkaar-cart-page .whatsapp-button {\n  width: 100%;\n  border: 0;\n  border-radius: 9px;\n  padding: 15px 12px;\n  margin-top: 12px;\n  color: #fff;\n  background: #168c4b;\n  font-size: 15px;\n  font-weight: 700;\n  cursor: pointer;\n  line-height: 1.5;\n  transition: background .2s;\n}\n#upkaar-cart-page .whatsapp-button:hover {\n  background: #10763d;\n}\n#upkaar-cart-page .whatsapp-note {\n  font-size: 12px;\n  line-height: 1.7;\n  color: var(--muted);\n  margin: 12px 0 0;\n}\n#upkaar-cart-page .empty-cart {\n  background: #fff;\n  border: 1px solid #e5eae3;\n  border-radius: 14px;\n  padding: 60px 20px;\n  text-align: center;\n}\n#upkaar-cart-page .empty-cart-icon {\n  font-size: 55px;\n  margin-bottom: 12px;\n}\n#upkaar-cart-page .empty-cart h2 {\n  font-size: 24px;\n  margin: 0 0 10px;\n}\n#upkaar-cart-page .empty-cart p {\n  color: var(--muted);\n  line-height: 1.7;\n}\n#upkaar-cart-page .shop-button {\n  display: inline-block;\n  background: var(--green);\n  color: #fff;\n  text-decoration: none;\n  border-radius: 8px;\n  padding: 13px 22px;\n  font-weight: 700;\n  margin-top: 10px;\n}\n#upkaar-cart-page .shop-button:hover {\n  background: var(--dark-green);\n  color: #fff;\n}\n#upkaar-cart-page .cart-status {\n  padding: 12px;\n  margin-bottom: 15px;\n  background: #f0f7f0;\n  color: var(--green);\n  border-radius: 8px;\n  font-size: 13px;\n  line-height: 1.5;\n}\n#upkaar-cart-page [hidden] {\n  display: none !important;\n}\n@media(max-width: 800px) {\n  #upkaar-cart-page .cart-layout {\n    grid-template-columns: 1fr;\n  }\n  #upkaar-cart-page .order-summary {\n    order: -1;\n  }\n}\n@media(max-width: 480px) {\n  #upkaar-cart-page {\n    padding: 22px 12px 40px;\n  }\n  #upkaar-cart-page .cart-header h1 {\n    font-size: 28px;\n  }\n  #upkaar-cart-page .cart-products,\n  #upkaar-cart-page .order-summary {\n    padding: 15px;\n  }\n  #upkaar-cart-page .cart-item {\n    grid-template-columns: 78px minmax(0, 1fr);\n    gap: 12px;\n  }\n  #upkaar-cart-page .cart-item img {\n    width: 78px;\n    height: 85px;\n  }\n  #upkaar-cart-page .cart-item-name {\n    font-size: 14px;\n  }\n  #upkaar-cart-page .cart-item-bottom {\n    align-items: flex-start;\n  }\n}\n<\/style>\n<div class=\"cart-container\">\n  <header class=\"cart-header\">\n    <h1>Your Shopping Cart \ud83d\uded2<\/h1>\n    <p>Review your products and send your order directly to Upkaar Store on WhatsApp.<\/p>\n  <\/header>\n  <div id=\"upkaar-cart-status\" class=\"cart-status\" hidden><\/div>\n  <div id=\"upkaar-cart-content\">\n    <div class=\"cart-layout\">\n      <!-- CART PRODUCTS -->\n      <section class=\"cart-products\">\n        <h2 class=\"cart-section-title\">\n          Your Products (<span id=\"upkaar-page-item-count\">0<\/span>)\n        <\/h2>\n        <div id=\"upkaar-page-items\"><\/div>\n        <a href=\"\/\" class=\"continue-shopping\">\n          \u2190 Continue Shopping\n        <\/a>\n      <\/section>\n      <!-- ORDER SUMMARY -->\n      <aside class=\"order-summary\">\n        <h2 class=\"cart-section-title\">Order Summary<\/h2>\n        <div class=\"summary-row\">\n          <span>Total Items<\/span>\n          <span id=\"upkaar-page-quantity\">0<\/span>\n        <\/div>\n        <div class=\"summary-row\">\n          <span>Subtotal<\/span>\n          <span id=\"upkaar-page-subtotal\">\u20b90<\/span>\n        <\/div>\n        <div class=\"summary-row\">\n          <span>Shipping<\/span>\n          <span>To be confirmed<\/span>\n        <\/div>\n        <div class=\"summary-row summary-total\">\n          <span>Estimated Total<\/span>\n          <span id=\"upkaar-page-total\">\u20b90<\/span>\n        <\/div>\n        <button type=\"button\" class=\"whatsapp-button\"\n          id=\"upkaar-page-whatsapp\">\n          \ud83d\udfe2 Order on WhatsApp\n        <\/button>\n        <p class=\"whatsapp-note\">\n          Your product details and estimated total will be added to a WhatsApp\n          message. Shipping charges and final availability can be confirmed\n          by our team.\n        <\/p>\n      <\/aside>\n    <\/div>\n  <\/div>\n  <!-- EMPTY CART -->\n  <div id=\"upkaar-page-empty\" class=\"empty-cart\" hidden>\n    <div class=\"empty-cart-icon\">\ud83d\udecd\ufe0f<\/div>\n    <h2>Your cart is empty<\/h2>\n    <p>You haven't added any products yet.<br>\n      Explore our store and find something you love!<\/p>\n    <a href=\"\/\" class=\"shop-button\">Start Shopping<\/a>\n  <\/div>\n<\/div>\n<script>\n(function () {\n  const root = document.getElementById(\"upkaar-cart-page\");\n  if (!root || root.dataset.initialized === \"true\") return;\n  root.dataset.initialized = \"true\";\n  \/*\n   * IMPORTANT:\n   * Replace this with your actual WhatsApp number.\n   * Use the country code, with no + sign, spaces or dashes.\n   * Example format for India: 919876543210\n   *\/\n  const UPKAAR_WHATSAPP_NUMBER = \"919876543210\";\n  \/*\n   * Keep the product IDs, prices and image URLs consistent\n   * with the products on your Upkaar Store homepage.\n   *\/\n  const products = [\n    {\n      id: 1,\n      name: \"Premium Storage Organizer\",\n      price: 499,\n      image: \"https:\/\/placehold.co\/500x400\/f1f4ef\/176b45?text=Storage+Organizer\"\n    },\n    {\n      id: 2,\n      name: \"Everyday Cotton Tote Bag\",\n      price: 299,\n      image: \"https:\/\/placehold.co\/500x400\/f1f4ef\/176b45?text=Tote+Bag\"\n    },\n    {\n      id: 3,\n      name: \"Kitchen Essentials Set\",\n      price: 799,\n      image: \"https:\/\/placehold.co\/500x400\/f1f4ef\/176b45?text=Kitchen+Set\"\n    },\n    {\n      id: 4,\n      name: \"Classic Water Bottle\",\n      price: 349,\n      image: \"https:\/\/placehold.co\/500x400\/f1f4ef\/176b45?text=Water+Bottle\"\n    },\n    {\n      id: 5,\n      name: \"Decorative Table Vase\",\n      price: 599,\n      image: \"https:\/\/placehold.co\/500x400\/f1f4ef\/176b45?text=Table+Vase\"\n    },\n    {\n      id: 6,\n      name: \"Daily Use Kitchen Container\",\n      price: 249,\n      image: \"https:\/\/placehold.co\/500x400\/f1f4ef\/176b45?text=Container\"\n    },\n    {\n      id: 7,\n      name: \"Casual Everyday Backpack\",\n      price: 899,\n      image: \"https:\/\/placehold.co\/500x400\/f1f4ef\/176b45?text=Backpack\"\n    },\n    {\n      id: 8,\n      name: \"Travel Accessories Pouch\",\n      price: 199,\n      image: \"https:\/\/placehold.co\/500x400\/f1f4ef\/176b45?text=Travel+Pouch\"\n    }\n  ];\n  const itemsContainer = root.querySelector(\"#upkaar-page-items\");\n  const emptyState = root.querySelector(\"#upkaar-page-empty\");\n  const cartContent = root.querySelector(\"#upkaar-cart-content\");\n  const statusBox = root.querySelector(\"#upkaar-cart-status\");\n  const money = amount =>\n    new Intl.NumberFormat(\"en-IN\", {\n      style: \"currency\",\n      currency: \"INR\",\n      maximumFractionDigits: 2\n    }).format(amount);\n  let cart = {};\n  function loadCart() {\n    try {\n      const saved = localStorage.getItem(\"upkaar_store_cart\");\n      if (!saved) return {};\n      const parsed = JSON.parse(saved);\n      const result = {};\n      if (!parsed || typeof parsed !== \"object\" ||\n          Array.isArray(parsed)) {\n        return {};\n      }\n      products.forEach(product => {\n        const qty = Number(parsed[product.id]);\n        if (Number.isSafeInteger(qty) && qty > 0 && qty <= 99) {\n          result[product.id] = qty;\n        }\n      });\n      return result;\n    } catch (error) {\n      return {};\n    }\n  }\n  function saveCart() {\n    try {\n      localStorage.setItem(\"upkaar_store_cart\", JSON.stringify(cart));\n    } catch (error) {\n      \/\/ Continue displaying the cart for this page session.\n    }\n  }\n  function showStatus(message) {\n    statusBox.textContent = message;\n    statusBox.hidden = false;\n    setTimeout(() => {\n      statusBox.hidden = true;\n    }, 3500);\n  }\n  function getEntries() {\n    return Object.entries(cart)\n      .map(([id, qty]) => ({\n        product: products.find(p => p.id === Number(id)),\n        qty: qty\n      }))\n      .filter(item =>\n        item.product &&\n        Number.isSafeInteger(item.qty) &&\n        item.qty > 0\n      );\n  }\n  function renderCart() {\n    const entries = getEntries();\n    const totalQuantity = entries.reduce(\n      (sum, item) => sum + item.qty, 0\n    );\n    const subtotal = entries.reduce(\n      (sum, item) => sum + item.product.price * item.qty, 0\n    );\n    root.querySelector(\"#upkaar-page-item-count\").textContent =\n      totalQuantity;\n    root.querySelector(\"#upkaar-page-quantity\").textContent =\n      totalQuantity;\n    root.querySelector(\"#upkaar-page-subtotal\").textContent =\n      money(subtotal);\n    root.querySelector(\"#upkaar-page-total\").textContent =\n      money(subtotal);\n    cartContent.hidden = entries.length === 0;\n    emptyState.hidden = entries.length !== 0;\n    if (entries.length === 0) {\n      itemsContainer.innerHTML = \"\";\n      saveCart();\n      return;\n    }\n    itemsContainer.innerHTML = entries.map(({ product, qty }) => `\n      <article class=\"cart-item\">\n        <img decoding=\"async\"\n          src=\"${product.image}\"\n          alt=\"${product.name}\"\n        >\n        <div>\n          <div class=\"cart-item-name\">${product.name}<\/div>\n          <div class=\"cart-item-price\">\n            ${money(product.price)}\n          <\/div>\n          <div class=\"cart-item-bottom\">\n            <div class=\"quantity-controls\">\n              <button type=\"button\"\n                data-decrease=\"${product.id}\"\n                aria-label=\"Decrease quantity\">\u2212<\/button>\n              <span>${qty}<\/span>\n              <button type=\"button\"\n                data-increase=\"${product.id}\"\n                aria-label=\"Increase quantity\">+<\/button>\n            <\/div>\n            <button type=\"button\"\n              class=\"remove-button\"\n              data-remove=\"${product.id}\">\n              Remove\n            <\/button>\n          <\/div>\n          <div class=\"item-subtotal\">\n            Subtotal: ${money(product.price * qty)}\n          <\/div>\n        <\/div>\n      <\/article>\n    `).join(\"\");\n    saveCart();\n  }\n  itemsContainer.addEventListener(\"click\", function (event) {\n    const decrease = event.target.closest(\"[data-decrease]\");\n    const increase = event.target.closest(\"[data-increase]\");\n    const remove = event.target.closest(\"[data-remove]\");\n    if (decrease) {\n      const id = Number(decrease.dataset.decrease);\n      if (cart[id] > 1) {\n        cart[id]--;\n      } else {\n        delete cart[id];\n      }\n      renderCart();\n      return;\n    }\n    if (increase) {\n      const id = Number(increase.dataset.increase);\n      if ((cart[id] || 0) < 99) {\n        cart[id] = (cart[id] || 0) + 1;\n        renderCart();\n      } else {\n        showStatus(\"Maximum quantity is 99 per product.\");\n      }\n      return;\n    }\n    if (remove) {\n      const id = Number(remove.dataset.remove);\n      delete cart[id];\n      renderCart();\n      showStatus(\"Product removed from your cart.\");\n    }\n  });\n  root.querySelector(\"#upkaar-page-whatsapp\")\n    .addEventListener(\"click\", function () {\n      const entries = getEntries();\n      if (!entries.length) {\n        showStatus(\"Your cart is empty. Add products before ordering.\");\n        return;\n      }\n      if (!\/^\\d{10,15}$\/.test(UPKAAR_WHATSAPP_NUMBER)) {\n        showStatus(\"Please configure your correct WhatsApp number.\");\n        return;\n      }\n      let subtotal = 0;\n      let message = \"*NEW ORDER - UPKAAR STORE*\\n\";\n      message += \"============================\\n\\n\";\n      message += \"Hello Upkaar Store! I would like to order:\\n\\n\";\n      entries.forEach((item, index) => {\n        const lineTotal = item.product.price * item.qty;\n        subtotal += lineTotal;\n        message += `*${index + 1}. ${item.product.name}*\\n`;\n        message += `Price: ${money(item.product.price)}\\n`;\n        message += `Quantity: ${item.qty}\\n`;\n        message += `Subtotal: ${money(lineTotal)}\\n\\n`;\n      });\n      message += \"============================\\n\";\n      message += `*ESTIMATED TOTAL: ${money(subtotal)}*\\n`;\n      message += \"Shipping: To be confirmed\\n\\n\";\n      message += \"Please confirm availability and delivery charges.\\n\\n\";\n      message += \"Thank you!\";\n      const url =\n        \"https:\/\/wa.me\/\" +\n        UPKAAR_WHATSAPP_NUMBER +\n        \"?text=\" +\n        encodeURIComponent(message);\n      const whatsappWindow = window.open(url, \"_blank\");\n      if (!whatsappWindow) {\n        window.location.href = url;\n      }\n    });\n  cart = loadCart();\n  renderCart();\n})();\n<\/script>\n<\/div>\t\t\t\t<\/div>\n\t\t\n<\/div>\n\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Your Shopping Cart \ud83d\uded2 Review your products and send your order directly to Upkaar Store on WhatsApp. Your Products (0) \u2190 Continue Shopping Order Summary Total Items 0 Subtotal \u20b90 Shipping To be confirmed Estimated Total \u20b90 \ud83d\udfe2 Order on WhatsApp Your product details and estimated total will be added to a WhatsApp message. Shipping [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-16","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/upkar.techmarkmarketing.com\/index.php\/wp-json\/wp\/v2\/pages\/16","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/upkar.techmarkmarketing.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/upkar.techmarkmarketing.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/upkar.techmarkmarketing.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/upkar.techmarkmarketing.com\/index.php\/wp-json\/wp\/v2\/comments?post=16"}],"version-history":[{"count":4,"href":"https:\/\/upkar.techmarkmarketing.com\/index.php\/wp-json\/wp\/v2\/pages\/16\/revisions"}],"predecessor-version":[{"id":21,"href":"https:\/\/upkar.techmarkmarketing.com\/index.php\/wp-json\/wp\/v2\/pages\/16\/revisions\/21"}],"wp:attachment":[{"href":"https:\/\/upkar.techmarkmarketing.com\/index.php\/wp-json\/wp\/v2\/media?parent=16"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}