با خواندن این راهنما می‌توانید…

• لینک مسیریابی نشان فروشگاه یا شعبه را از اپ نشان بگیرید
• نقشه و دکمهٔ «مسیریابی با نشان» را در فوتر و صفحه تماس با ما نشان دهید
• بدون عوض کردن کل قالب فوتر یا تم، فقط با JavaScript سفارشی این کار را انجام دهید

این راهنما پیشرفته است. اگر با کد آشنا نیستید، با پشتیبانی میزکار یا یک متخصص هماهنگ کنید. کد اشتباه می‌تواند ظاهر یا رفتار سایت را خراب کند.

این بخش چیست؟

در پنل سایت‌ساز، بخش اطلاعات تماس فقط متن آدرس، تلفن و ایمیل را نگه می‌دارد. فیلد جداگانه‌ای برای «لینک نقشه» یا «مسیریاب نشان» ندارد.

برای نمایش نقشه و دکمهٔ باز شدن مسیریاب نشان روی سایت عمومی، امن‌ترین راه این است که کد را در JavaScript سفارشی بگذارید — همان جایی که معمولاً چت آنلاین یا دکمه‌های شناور هم اضافه می‌شود.

از کجا پیدایش کنم؟

1. منو → سایت من
2. سایت‌ها → سایت مورد نظر را باز کنید
3. تنظیمات → JavaScript سفارشی

مسیرهای مرتبط (اختیاری):

قبل از شروع — چه چیزهایی لازم است؟

گرفتن لینک از نشان

1. در اپ یا وب نشان، مکان فروشگاه / شعبه را باز کنید.
2. گزینهٔ اشتراک یا مسیریابی را بزنید و لینک کوتاه را کپی کنید.
3. همان لینک را بعداً در کد، به‌جای مقدار نمونه می‌گذارید.

دکمهٔ روی سایت باید همان لینک نشان را باز کند. نقشهٔ داخل صفحه معمولاً موقعیت را نشان می‌دهد؛ برای مسیریابی واقعی کاربر روی دکمه کلیک می‌کند و وارد نشان می‌شود.

قدم‌به‌قدم

۱. آدرس و تماس را در پنل درست کنید

1. تنظیمات → اطلاعات تماس
2. تلفن، موبایل، ایمیل و آدرس را کامل پر کنید.
3. ذخیره را بزنید.

این متن در فوتر و صفحه تماس می‌ماند؛ نقشه جداگانه با کد اضافه می‌شود.

۲. JavaScript سفارشی را باز کنید

1. تنظیمات → JavaScript سفارشی
2. اگر از قبل کدی دارید (مثلاً دکمهٔ سبد شناور)، آن را پاک نکنید — کد جدید را پایین همان متن بچسبانید.
3. کد نمونهٔ پایین را بچسبانید و سه مقدار را عوض کنید:

۳. کد نمونه (قابل کپی)

کد زیر روی فوتر یک ستون نقشه می‌سازد و در صفحه تماس با ما نقشه را داخل کادر شبکه‌های اجتماعی می‌گذارد و عنوان آن کادر را به «مسیریابی و شبکه‌ها» عوض می‌کند.

;(() => {
  const SHARE_URL = "https://nshn.ir/YOUR_SHARE_CODE";
  const LAT = 35.79726;
  const LNG = 51.51087;
  const MARKER = "mz-neshan-map";
  const DELTA = 0.008;
  const OSM_EMBED =
    "https://www.openstreetmap.org/export/embed.html?bbox=" +
    encodeURIComponent(
      LNG - DELTA + "," + (LAT - DELTA) + "," + (LNG + DELTA) + "," + (LAT + DELTA)
    ) +
    "&layer=mapnik&marker=" +
    encodeURIComponent(LAT + "," + LNG);

  function ensureStyles() {
    if (document.getElementById(MARKER + "-style")) return;
    const style = document.createElement("style");
    style.id = MARKER + "-style";
    style.textContent =
      "." + MARKER + "{margin-top:.75rem;width:100%}" +
      "." + MARKER + "__frame{display:block;width:100%;height:220px;border:0;border-radius:10px;background:#f3f0ea}" +
      "." + MARKER + "--contact ." + MARKER + "__frame{height:280px}" +
      "." + MARKER + "__btn{display:inline-flex;align-items:center;justify-content:center;margin-top:.5rem;padding:.4rem .85rem;border-radius:999px;text-decoration:none;font-weight:600;color:#fff!important;background:var(--bs-primary,#bea064);width:100%}";
    document.head.appendChild(style);
  }

  function buildBlock(variant) {
    const wrap = document.createElement("div");
    wrap.className = MARKER + " " + MARKER + "--" + variant;
    wrap.setAttribute("data-" + MARKER, "1");

    const frame = document.createElement("iframe");
    frame.className = MARKER + "__frame";
    frame.src = OSM_EMBED;
    frame.title = "نقشه موقعیت";
    frame.loading = "lazy";
    frame.referrerPolicy = "no-referrer-when-downgrade";

    const link = document.createElement("a");
    link.className = MARKER + "__btn";
    link.href = SHARE_URL;
    link.target = "_blank";
    link.rel = "noopener noreferrer";
    link.textContent = "مسیریابی با نشان";

    wrap.appendChild(frame);
    wrap.appendChild(link);
    return wrap;
  }

  function injectFooterColumn() {
    const footer = document.querySelector("footer.footer-simple");
    if (!footer || footer.querySelector("." + MARKER + "-col")) return;
    const row =
      footer.querySelector(".container .row.g-4") ||
      footer.querySelector(".row.g-4") ||
      footer.querySelector(".row");
    if (!row) return;

    const col = document.createElement("div");
    col.className = "col-md-4 " + MARKER + "-col";
    const title = document.createElement("h6");
    title.className = "fw-bold mb-3";
    title.textContent = "مسیریابی";
    col.appendChild(title);
    col.appendChild(buildBlock("footer"));
    row.appendChild(col);
  }

  function injectContactPage() {
    if (!document.body.classList.contains("mz-page-contact")) return;
    const main = document.querySelector(".mz-main--contact") || document.querySelector("main");
    if (!main) return;

    main.querySelectorAll(".contact-info [data-" + MARKER + "]").forEach((el) => el.remove());

    const socialIcons = main.querySelector(".social-icons-container");
    if (!socialIcons || socialIcons.closest("footer")) return;
    const cardBody = socialIcons.closest(".card-body");
    if (!cardBody || cardBody.querySelector("[data-" + MARKER + "]")) return;

    const title = cardBody.querySelector(".card-title");
    if (title && !title.getAttribute("data-" + MARKER + "-title")) {
      title.setAttribute("data-" + MARKER + "-title", "1");
      title.innerHTML = '<i class="bi bi-geo-alt me-2"></i>مسیریابی و شبکه‌ها';
    }
    cardBody.appendChild(buildBlock("contact"));
  }

  function run() {
    ensureStyles();
    injectFooterColumn();
    injectContactPage();
  }

  if (document.readyState === "loading") {
    document.addEventListener("DOMContentLoaded", run);
  } else {
    run();
  }
})();

۴. ذخیره و بررسی در سایت

1. دکمهٔ ذخیره را بزنید — پیام موفقیت JavaScript سفارشی را ببینید.
2. سایت عمومی را باز کنید (ترجیحاً با Ctrl+F5 برای رفرش کامل).
3. پایین صفحه (فوتر) را ببینید — ستون نقشه و دکمهٔ مسیریابی باید باشد.
4. صفحهٔ تماس با ما را باز کنید — کادر سمت شبکه‌ها باید عنوان جدید و نقشه داشته باشد.
5. روی مسیریابی با نشان کلیک کنید — لینک نشان شما باید باز شود.

مثال واقعی — فروشگاه پوشاک با شعبه حضوری

1. در نشان، موقعیت شعبه فروش حضوری را ذخیره و لینک اشتراک گرفتند.
2. همان آدرس را در اطلاعات تماس نوشتند.
3. کد بالا را در JavaScript سفارشی گذاشتند و فقط SHARE_URL و مختصات را عوض کردند.
4. در فوتر، نقشه در ستون خالی سمت چپ آمد؛ در تماس با ما داخل کادر ارتباط قرار گرفت تا یک کادر شلوغ و یک کادر خالی نماند.

نکات مهم

• کد قبلی را پاک نکنید — همیشه پایین همان کادر اضافه کنید.
• اگر فوتر سایت شما از نوع دیگری است و ستون نقشه دیده نشد، ممکن است کلاس‌های فوتر فرق داشته باشد؛ در این حالت با پشتیبانی هماهنگ کنید.
• رنگ دکمه از رنگ اصلی سایت (--bs-primary) می‌آید؛ اگر خالی بود، رنگ پیش‌فرض طلایی نمونه استفاده می‌شود.
• برای ظاهر ظریف‌تر می‌توانید بعداً فقط رنگ و ارتفاع نقشه را در همان بخش استایل داخل کد عوض کنید — نیازی به CSS سفارشی جدا نیست.
• این روش برای یک مکان طراحی شده است. چند شعبه نیاز به چند لینک و تنظیم جدا دارد.

اگر این اتفاق افتاد…

قدم بعدی

• اطلاعات تماس سایت
• شبکه‌های اجتماعی
• CSS و JavaScript سفارشی
• تم و رنگ‌های سایت