wholesale orders
<!DOCTYPE html><html lang="ar"><head><meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" /><title> wholesale orders</title><style>
:root{
--mmw-font: "Expo Arabic", system-ui, -apple-system, "Segoe UI", Tahoma, Arial, sans-serif;
--mmw-ink: #221C35;
--mmw-muted: rgba(34, 28, 53, 0.60);
--mmw-panel: #F3F3F3;
--mmw-white: #FFFFFF;
--mmw-primary: #4E8D73;
--mmw-ghost: #ECECEC;
--mmw-radius: 999px;
/* مودل: شفاف تمام بدون سواد */
--mmw-modal-overlay: rgba(0,0,0,0);
}
/* Hide Header/Footer (سلة) */
.sticky-header,
header,
.store-header,
.store-header-container,
salla-breadcrumb,
.s-breadcrumb-wrapper,
.page-title,
.page__title,
h1.font-bold.text-2xl.mb-6,
footer,
.store-footer,
.store-footer__inner,
.store-footer.container,
.footer-text,
.copyright-text,
salla-comments {
display: none !important;
}
body { margin: 0 !important; }
main, .main-content, .container { padding-top: 0 !important; }
html, body, .mmw {
font-family: var(--mmw-font) !important;
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
}
.mmw, .mmw * {
font-family: var(--mmw-font) !important;
box-shadow: none !important;
border: 0 !important;
outline: none !important;
-webkit-tap-highlight-color: transparent;
}
button, input, textarea, select {
font-family: var(--mmw-font) !important;
-webkit-appearance: none;
appearance: none;
}
.mmw {
direction: rtl;
color: var(--mmw-ink);
padding: 40px 16px 70px;
position: relative;
z-index: 999999;
}
.mmw .wrap {
max-width: 980px;
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 12px;
}
.mmw .logo img { height: 64px; width: auto; display: block; }
@media (max-width: 520px){
.mmw .logo img { height: 46px; }
.mmw .logo { pointer-events: none; }
}
.mmw h1 {
margin: 0;
font-weight: 900;
letter-spacing: -0.5px;
font-size: clamp(26px, 6vw, 44px);
line-height: 1.15;
}
.mmw .sub {
margin: 0;
max-width: 760px;
color: var(--mmw-muted);
font-size: clamp(13px, 3.7vw, 18px);
line-height: 1.7;
}
.num {
direction: ltr !important;
unicode-bidi: bidi-override;
font-variant-numeric: tabular-nums lining-nums;
letter-spacing: 0.2px;
}
/* Stepper */
.mmw .stepper {
width: 100%;
max-width: 920px;
background: var(--mmw-panel);
border-radius: var(--mmw-radius);
padding: 10px;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
box-sizing: border-box;
}
.mmw .step {
border-radius: var(--mmw-radius);
padding: 12px 10px;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
color: rgba(34, 28, 53, 0.6);
font-weight: 800;
font-size: 15px;
background: transparent;
user-select: none;
touch-action: manipulation;
cursor: default;
}
.mmw .dot {
width: 10px; height: 10px;
border-radius: var(--mmw-radius);
background: rgba(34, 28, 53, 0.15);
}
.mmw .step.is-active { background: var(--mmw-white); color: var(--mmw-ink); }
.mmw .step.is-active .dot { background: var(--mmw-primary); }
/* Card */
.mmw .card {
width: 100%;
max-width: 920px;
background: var(--mmw-panel);
border-radius: 32px;
padding: 18px;
text-align: right;
box-sizing: border-box;
overflow: hidden;
}
.mmw .row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
}
@media (max-width: 900px) {
.mmw { padding-top: 32px; }
.mmw .row { grid-template-columns: 1fr; }
.mmw .card { border-radius: 28px; padding: 16px; }
.mmw .step { font-size: 14px; padding: 11px 10px; }
}
/* Fields */
.mmw .field { display: grid; gap: 8px; }
.mmw label {
font-weight: 800;
color: rgba(34, 28, 53, 0.7);
font-size: 14px;
}
.mmw input,
.mmw textarea {
background: var(--mmw-white);
border-radius: var(--mmw-radius);
padding: 13px 14px;
font-size: 15px;
color: var(--mmw-ink);
width: 100%;
box-sizing: border-box;
}
.mmw textarea {
border-radius: 24px;
min-height: 120px;
resize: vertical;
}
/* Pills */
.mmw .pills {
display: flex;
gap: 10px;
justify-content: flex-start;
flex-wrap: wrap;
}
.mmw .pill {
background: var(--mmw-white);
border-radius: var(--mmw-radius);
padding: 12px 14px;
cursor: pointer;
user-select: none;
font-weight: 900;
color: rgba(34, 28, 53, 0.7);
display: inline-flex;
align-items: center;
gap: 10px;
touch-action: manipulation;
}
.mmw .pill .miniDot {
width: 12px; height: 12px;
border-radius: var(--mmw-radius);
background: rgba(34, 28, 53, 0.15);
}
.mmw .pill.is-on { color: var(--mmw-ink); }
.mmw .pill.is-on .miniDot { background: var(--mmw-primary); }
/* Options */
.mmw .options { display: grid; gap: 10px; }
.mmw .opt {
background: var(--mmw-white);
border-radius: 24px;
padding: 14px 14px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
user-select: none;
touch-action: manipulation;
text-align: right;
width: 100%;
}
.mmw .opt .left {
display: flex;
align-items: center;
gap: 10px;
min-width: 0;
}
.mmw .opt .radioDot {
width: 14px; height: 14px;
border-radius: var(--mmw-radius);
background: rgba(34, 28, 53, 0.15);
flex: 0 0 auto;
}
.mmw .opt.is-on .radioDot { background: var(--mmw-primary); }
.mmw .opt .name {
font-weight: 950;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-size: 15px;
}
.mmw .opt .price {
color: rgba(34, 28, 53, 0.6);
font-weight: 900;
flex: 0 0 auto;
font-size: 13px;
}
/* Learn button */
.mmw .learnWrap{
display: flex;
justify-content: flex-start;
margin-top: 10px;
}
.mmw .learnBtn{
background: var(--mmw-white);
border-radius: var(--mmw-radius);
padding: 12px 14px;
font-weight: 950;
font-size: 14px;
cursor: pointer;
user-select: none;
touch-action: manipulation;
color: var(--mmw-ink);
}
/* Quantity */
.mmw .qtyBox {
background: var(--mmw-white);
border-radius: 24px;
padding: 14px 14px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.mmw .qtyBtns { display: flex; gap: 10px; }
.mmw .qbtn {
background: var(--mmw-panel);
border-radius: var(--mmw-radius);
width: 44px; height: 44px;
font-size: 22px;
font-weight: 950;
cursor: pointer;
color: var(--mmw-ink);
user-select: none;
touch-action: manipulation;
}
/* Summary */
.mmw .summary {
background: var(--mmw-white);
border-radius: 24px;
padding: 14px;
display: grid;
gap: 10px;
}
.mmw .sumRow {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
color: rgba(34, 28, 53, 0.75);
font-weight: 900;
font-size: 14px;
}
.mmw .sumRow b { color: var(--mmw-ink); font-weight: 1000; }
/* Actions */
.mmw .actions {
margin-top: 16px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
flex-wrap: wrap;
}
.mmw .btn {
border-radius: var(--mmw-radius);
padding: 13px 18px;
font-size: 15px;
font-weight: 1000;
cursor: pointer;
user-select: none;
touch-action: manipulation;
}
.mmw .btnPrimary { background: var(--mmw-primary); color: var(--mmw-white); }
.mmw .btnGhost { background: var(--mmw-ghost); color: rgba(34, 28, 53, 0.6); }
.mmw .hide { display: none !important; }
/* ===== Modal (شفاف تماما بدون طبقة سوداء) ===== */
.mmw-modal{
position: fixed;
inset: 0;
display: none;
align-items: center;
justify-content: center;
padding: 18px;
/* أهم تعديل: ما فيه خلفية داكنة أبداً */
background: transparent !important;
z-index: 2147483647;
/* يمنع أي فلتر أو بلور يخرب اللي ورا */
-webkit-backdrop-filter: none !important;
backdrop-filter: none !important;
}
.mmw-modal.is-open{ display: flex; }
/* خلي الضغط يروح للصندوق فقط، وخارج الصندوق يغلق */
.mmw-modal .box{
width: min(860px, 100%);
background: var(--mmw-white);
border-radius: 28px;
padding: 14px;
box-sizing: border-box;
text-align: right;
max-height: min(82vh, 760px);
overflow: auto;
-webkit-overflow-scrolling: touch;
pointer-events: auto;
}
.mmw-modal .top{
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin-bottom: 10px;
}
.mmw-modal .title{
font-weight: 950;
font-size: 16px;
color: var(--mmw-ink);
margin: 0;
}
.mmw-modal .close{
background: var(--mmw-panel);
border-radius: var(--mmw-radius);
width: 44px;
height: 44px;
cursor: pointer;
user-select: none;
touch-action: manipulation;
display: inline-flex;
align-items: center;
justify-content: center;
font-weight: 1000;
color: var(--mmw-ink);
font-size: 18px;
}
.mmw-modal .imgWrap{
background: var(--mmw-panel);
border-radius: 24px;
padding: 12px;
display: grid;
place-items: center;
overflow: hidden;
}
.mmw-modal img{
width: 100%;
height: auto;
max-height: 62vh;
object-fit: contain;
display: block;
border-radius: 18px;
}
/* مهم: ما نلمس body overlay/scroll بطريقة تسبب "سواد" ببعض الأجهزة */
html.mmw-lock, body.mmw-lock{
overflow: hidden;
overscroll-;
}
</style></head><body style=";text-align:left;direction:ltr">
<!-- Modal --> {
if (document.readyState === "loading") document.addEventListener("DOMContentLoaded", fn, { once:true });
else fn();
};
ready(() => {
const NF2 = new Intl.NumberFormat("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2 });
const NF0 = new Intl.NumberFormat("en-US", { maximumFractionDigits: 0 });
const fmtMoney = (n) => NF2.format(Number(n || 0));
const fmtInt = (n) => NF0.format(Number(n || 0));
const types = [
{ id:"premium", name:"ماتشا ممتازة", price:1608.85, img:"https://www2.0zz0.com/2025/12/27/16/462626322.png" },
{ id:"luxury", name:"ماتشا فاخرة", price:1148.85, img:"https://www2.0zz0.com/2025/12/27/16/768097561.png" },
{ id:"nonorg", name:"ماتشا فاخرة غير عضوية", price:954.50, img:"https://www2.0zz0.com/2025/12/27/16/599179077.png" },
];
const state = {
step: 1,
clientType: "individual",
name: "",
license: "",
cr: "",
typeId: null,
qty: 5,
notes: ""
};
const root = document.getElementById("mmw");
if (!root) return;
const $ = (s) => root.querySelector(s);
const $$ = (s) => Array.from(root.querySelectorAll(s));
// Modal refs
const modal = document.getElementById("mmwModal");
const modalClose = document.getElementById("modalClose");
const modalImg = document.getElementById("modalImg");
const modalTitle = document.getElementById("modalTitle");
function normalizeDigits(str){
if (!str) return "";
const map = {
"٠":"0","١":"1","٢":"2","٣":"3","٤":"4","٥":"5","٦":"6","٧":"7","٨":"8","٩":"9",
"۰":"0","۱":"1","۲":"2","۳":"3","۴":"4","۵":"5","۶":"6","۷":"7","۸":"8","۹":"9"
};
return String(str).replace(/[٠-٩۰-۹]/g, d => map[d] || d);
}
function showStep(n){
state.step = n;
$$("[data-step]").forEach(el => el.classList.add("hide"));
const sec = root.querySelector(`[data-step="${n}"]`);
if (sec) sec.classList.remove("hide");
$$("[data-step-pill]").forEach(p => p.classList.remove("is-active"));
const pill = root.querySelector(`[data-step-pill="${n}"]`);
if (pill) pill.classList.add("is-active");
if (n === 2) updateSummary();
if (n === 3) fillFinal();
}
function setClientType(type){
state.clientType = type;
$$("[data-client]").forEach(b => b.classList.remove("is-on"));
const btn = root.querySelector(`[data-client="${type}"]`);
if (btn) btn.classList.add("is-on");
const boxLicense = $("#box_license");
const boxCr = $("#box_cr");
if (type === "individual") {
boxLicense && boxLicense.classList.remove("hide");
boxCr && boxCr.classList.add("hide");
} else {
boxLicense && boxLicense.classList.add("hide");
boxCr && boxCr.classList.remove("hide");
}
}
function renderTypes(){
const container = $("#mmw_types");
container = "";
types.forEach(t => {
const btn = document.createElement("button");
btn.type = "button";
btn.className = "opt" + (state.typeId === t.id ? " is-on" : "");
btn.dataset.action = "selectType";
btn.dataset.typeId = t.id;
btn = `
wholesale orders
Enter the data to find out the prices and specify the quantities.
Data
demand
send
<!-- STEP 1 --> <!-- STEP 2 --> <!-- STEP 3 -->
<button class="pill is-on" type="button" data-client="individual">individual</button> <button class="pill" type="button" data-client="company">Institution/Company</button>
<input id="mmw_name" type="text" placeholder="اكتب الاسم" autocomplete="name" inputmode="text" />
<input id="mmw_license" class="num" type="text" placeholder="FL-123456789" inputmode="text" />
<button class="btn btnPrimary" id="btn_next_1" type="button">Next</button> <button class="btn btnGhost" id="btn_back_1" type="button">Back</button>
<button class="learnBtn hide" id="btn_learn" type="button">Get to know her</button>
<button class="qbtn" id="q_plus" type="button">+</button> <button class="qbtn" id="q_minus" type="button">−</button>
5 kg
Type —
Quantity —
Total —
<button class="btn btnPrimary" id="btn_next_2" type="button">Next</button> <button class="btn btnGhost" id="btn_back_2" type="button">Back</button>
Customer type —
the name -
Type —
Quantity —
Total —
<textarea id="mmw_notes" placeholder="أي ملاحظة إضافية"></textarea>
<button class="btn btnPrimary" id="btn_send" type="button">Send request via WhatsApp.</button> <button class="btn btnGhost" id="btn_back_3" type="button">Back</button>
${t.name}
${fmtMoney(t.price)} ريال/كجم
`;
container(btn);
});
}
function getSelectedType(){
return types.find(t => t.id === state.typeId) || null;
}
function updateLearnButton(){
const learnBtn = $("#btn_learn");
if (!learnBtn) return;
if (state.typeId) learnBtn.classList.remove("hide");
else learnBtn.classList.add("hide");
}
function updateSummary(){
const t = getSelectedType();
const qty = state.qty;
$("#mmw_qty").textContent = fmtInt(qty);
if (!t) {
$("#sum_type").textContent = "—";
$("#sum_qty").textContent = "—";
$("#sum_total").textContent = "—";
updateLearnButton();
return;
}
const total = t.price * qty;
$("#sum_type").textContent = t.name;
$("#sum_qty").textContent = `${fmtInt(qty)} KG`;
$("#sum_total").textContent = `${fmtMoney(total)} SAR`;
updateLearnButton();
}
function fillFinal(){
const t = getSelectedType();
const qty = state.qty;
const total = t ? (t.price * qty) : 0;
$("#f_client").textContent = state.clientType === "individual" ? "فرد" : "مؤسسة / شركة";
$("#f_name").textContent = state.name || "—";
$("#f_type").textContent = t ? t.name : "—";
$("#f_qty").textContent = `${fmtInt(qty)} KG`;
$("#f_total").textContent = `${fmtMoney(total)} SAR`;
const extraRow = $("#f_extra_row");
const extraLabel = $("#f_extra_label");
const extraValue = $("#f_extra_value");
let label = "";
let value = "";
if (state.clientType === "individual") {
label = "رخصة العمل الحر";
value = (state.license || "").trim();
} else {
label = "السجل التجاري";
value = (state.cr || "").trim();
}
if (value) {
extraLabel.textContent = label;
extraValue.textContent = value;
extraRow.style.display = "flex";
} else {
extraRow.style.display = "none";
}
}
function buildWhatsAppMessage(){
const t = getSelectedType();
const qty = state.qty;
const total = t ? (t.price * qty) : 0;
const lines = [];
lines.push("طلب جملة - MoMatcha");
lines.push("");
lines.push(`نوع العميل: ${state.clientType === "individual" ? "فرد" : "مؤسسة / شركة"}`);
lines.push(`الاسم: ${state.name || "-"}`);
if (state.clientType === "individual" && (state.license || "").trim()) {
lines.push(`رخصة العمل الحر: ${(state.license || "").trim()}`);
}
if (state.clientType === "company" && (state.cr || "").trim()) {
lines.push(`السجل التجاري: ${(state.cr || "").trim()}`);
}
lines.push("");
lines.push(`نوع الماتشا: ${t ? t.name : "-"}`);
lines.push(`الكمية: ${fmtInt(qty)} KG`);
lines.push(`سعر الكيلو: ${t ? fmtMoney(t.price) : "0.00"} SAR`);
lines.push(`الإجمالي: ${fmtMoney(total)} SAR`);
const notes = (state.notes || "").trim();
if (notes) {
lines.push("");
lines.push("ملاحظات:");
lines.push(notes);
}
return lines.join("\n");
}
// ===== Modal (شفاف تماما) =====
function openModalForSelectedType(){
const t = getSelectedType();
if (!t) return;
modalTitle.textContent = `تعرّف عليها: ${t.name}`;
modalImg.src = t.img;
modalImg.alt = t.name;
modal.classList.add("is-open");
modal.setAttribute("aria-hidden", "false");
// قفل السكرول بدون أي overlay أو سواد
document.documentElement.classList.add("mmw-lock");
document.body.classList.add("mmw-lock");
}
function closeModal(){
modal.classList.remove("is-open");
modal.setAttribute("aria-hidden", "true");
document.documentElement.classList.remove("mmw-lock");
document.body.classList.remove("mmw-lock");
}
modalClose.addEventListener("click", closeModal);
modal.addEventListener("click", (e) => { if (e.target === modal) closeModal(); });
document.addEventListener("keydown", (e) => {
if (e.key === "Escape" && modal.classList.contains("is-open")) closeModal();
});
// ===== Event Delegation (ثابت بكل الأجهزة) =====
root.addEventListener("pointerup", (e) => {
const el = e.target.closest("[data-client],[data-action],#btn_next_1,#btn_next_2,#btn_back_1,#btn_back_2,#btn_back_3,#btn_send,#q_plus,#q_minus,#btn_learn");
if (!el) return;
e.preventDefault();
if (el.matches("[data-client]")) {
setClientType(el.getAttribute("data-client"));
return;
}
if (el.id === "btn_next_1") { showStep(2); return; }
if (el.id === "btn_next_2") { showStep(3); return; }
if (el.id === "btn_back_1") { showStep(1); return; }
if (el.id === "btn_back_2") { showStep(1); return; }
if (el.id === "btn_back_3") { showStep(2); return; }
if (el.id === "q_plus") { state.qty = Math.min(20, state.qty + 1); updateSummary(); return; }
if (el.id === "q_minus") { state.qty = Math.max(5, state.qty - 1); updateSummary(); return; }
if (el.dataset.action === "selectType") {
state.typeId = el.dataset.typeId;
renderTypes();
updateSummary();
return;
}
if (el.id === "btn_learn") {
openModalForSelectedType();
return;
}
if (el.id === "btn_send") {
const msg = buildWhatsAppMessage();
const url = `https://wa.me/966535578177?text=${encodeURIComponent(msg)}`;
window.open(url, "_blank", "noopener,noreferrer");
return;
}
}, { passive: false });
// Inputs (بدون قيود)
$("#mmw_name").addEventListener("input", (e) => state.name = (e.target.value || "").trim());
$("#mmw_license").addEventListener("input", (e) => {
const v = normalizeDigits(e.target.value);
e.target.value = v;
state.license = v;
});
$("#mmw_cr").addEventListener("input", (e) => {
const v = normalizeDigits(e.target.value);
e.target.value = v;
state.cr = v;
});
$("#mmw_notes").addEventListener("input", (e) => state.notes = e.target.value || "");
// Init
setClientType("individual");
renderTypes();
updateSummary();
showStep(1);
});
})();
</body></html>