ادغام ویجت‌های قسطی اسنپ‌پی و ترب‌پی در یک کارت واحد

اگر در فروشگاه ووکامرستان هر دو درگاه پرداخت اقساطی اسنپ‌پی و ترب‌پی را فعال کرده باشید، احتمالاً با این مشکل مواجه شده‌اید: هر پلاگین ویجت خودش را با استایل، فونت و چیدمان مستقل نمایش می‌دهد. نتیجه؟ دو کارت جدا، ناهماهنگ و شلوغ زیر دکمه «افزودن به سبد خرید» که هم از نظر بصری آزاردهنده است و هم اعتماد کاربر را کم می‌کند.

در این مقاله روشی را نشان می‌دهیم که با یک قطعه کد ساده (بدون دست‌کاری فایل‌های پلاگین‌ها) هر دو ویجت را در یک کارت یکدست ادغام می‌کنیم؛ کارتی که کاملاً واکنش‌گرا (Responsive) است، سایه ملایم دارد، با هاور شناور می‌شود، و مبلغ قسط را برای جلب توجه بیشتر هایلایت می‌کند.

چرا این‌طور بهتر است؟

• یکپارچگی بصری: کاربر یک کارت تمیز می‌بیند، نه دو باکس با استایل‌های متفاوت.
• کاهش شلوغی صفحه: فضای کمتری اشغال می‌شود و تمرکز کاربر روی تصمیم خرید حفظ می‌شود.
• بدون ریسک آپدیت: چون هیچ فایلی از پلاگین‌های اسنپ‌پی یا ترب‌پی تغییر نمی‌کند، با آپدیت شدن این پلاگین‌ها کدتان پاک نمی‌شود.
• بهبود نرخ تبدیل (CRO): با هایلایت کردن مبلغ قسط و افزودن نشانه‌های اعتماد، تصمیم‌گیری برای خرید ساده‌تر می‌شود.

پیش‌نیاز

این روش فرض می‌کند:

1. پلاگین اسنپ‌پی (snapppay-woocommerce-gateway) فعال است و ویجتش با کلاس .snapppay-widget رندر می‌شود.
2. پلاگین ترب‌پی (torobpay-woocommerce-gateway) فعال است و ویجتش با کلاس .torobpay-widget رندر می‌شود.
3. هر دو ویجت در صفحه محصول (Single Product) نمایش داده می‌شوند.

اگر نسخه‌ی پلاگین‌ها را آپدیت کردید و کد کار نکرد، احتمالاً اسم کلاس‌ها تغییر کرده؛ کافی‌ست با ابزار Inspect مرورگر، کلاس جدید را پیدا کرده و در کد جایگزین کنید.

روش پیاده‌سازی

کد را در یک ویجت HTML در المنتور (یا هر بخش دیگری که در صفحه محصول بارگذاری می‌شود) قرار می‌دهیم. منطق کار به این صورت است:

1. عنصر ویجت اسنپ‌پی و ترب‌پی را در DOM پیدا می‌کند.
2. عنوان، تصویر و توضیح هر دو را می‌خواند.
3. لوگوی هرکدام را کوچک کرده و کنار عنوان مربوط به خودش قرار می‌دهد (لوگو + متن در یک ردیف).
4. یک خط جداکننده بین دو ردیف (اسنپ‌پی و ترب‌پی) می‌گذارد.
5. باکس اصلی ترب‌پی را که دیگر لازم نیست، از صفحه حذف می‌کند.
6. با یک MutationObserver، اگر صفحه (مثلاً بر اثر تغییر تنوع محصول) دوباره رندر شود، ادغام دوباره و بدون تکرار انجام می‌شود.
7. با CSS، کارت را تمام‌عرض، دارای سایه ملایم و افکت شناور روی هاور می‌کند.
8. مبلغ هر قسط را با رنگ برجسته و توضیحات را کم‌رنگ‌تر می‌کند تا سلسله‌مراتب بصری بهتری داشته باشد.

کد کامل

<script>
/*
 * ادغام ویجت‌های قسط اسنپ‌پی و ترب‌پی در یک کارت واحد.
 * وابسته به کلاس‌های خروجی پلاگین‌های snapppay-woocommerce-gateway و torobpay-woocommerce-gateway.
 * اگر این پلاگین‌ها آپدیت بشن و اسم کلاس‌ها عوض بشه، این اسکریپت باید بازبینی بشه.
 */
function mergeInstallmentWidgets() {
    var snappWidget = document.querySelector('.snapppay-widget');

    // اگر قبلاً ادغام انجام شده، دوباره اجرا نکن (جلوگیری از تکرار روی رندر مجدد محصولات متغیر)
    if (!snappWidget || snappWidget.classList.contains('installment-merged-done')) return;

    var snappImg = snappWidget.querySelector('.snapppay-widget-image');
    var snappContent = snappWidget.querySelector('.snapppay-widget-content');
    var snappTitle = snappWidget.querySelector('.snapppay-widget-title');
    var snappDesc = snappWidget.querySelector('.snapppay-widget-description');
    var torob = document.querySelector('.torobpay-widget');
    if (!snappImg || !snappContent || !snappTitle || !snappDesc || !torob) return;

    var torobImg = torob.querySelector('.torobpay-widget-image');
    var torobTitle = torob.querySelector('.torobpay-widget-title');
    var torobDesc = torob.querySelector('.torobpay-widget-description');
    if (!torobImg || !torobTitle || !torobDesc) return;

    // ---- هایلایت کردن مبلغ قسط در متن عنوان (برای هر دو ردیف) ----
    function highlightAmount(titleEl) {
        var amountEl = titleEl.querySelector('.woocommerce-Price-amount');
        if (amountEl) {
            amountEl.style.color = '#0f9d58';
            amountEl.style.fontWeight = '700';
        }
    }

    // ---- ردیف عنوان اسنپ‌پی: لوگو کوچیک + عنوان ----
    var snappTitleRow = document.createElement('div');
    snappTitleRow.style.display = 'flex';
    snappTitleRow.style.alignItems = 'center';
    snappTitleRow.style.gap = '8px';

    snappImg.style.width = '24px';
    snappImg.style.height = '24px';
    snappImg.style.borderRadius = '6px';
    snappImg.style.flexShrink = '0';
    snappImg.style.objectFit = 'contain';

    snappTitle.style.margin = '0';
    highlightAmount(snappTitle);

    snappTitleRow.appendChild(snappImg);
    snappTitleRow.appendChild(snappTitle);

    // ---- آیکون تیک اعتماد کنار توضیحات اسنپ‌پی ----
    function addTrustIcon(descEl) {
        var wrap = document.createElement('div');
        wrap.style.display = 'flex';
        wrap.style.alignItems = 'center';
        wrap.style.gap = '4px';

        var icon = document.createElement('span');
        icon.innerHTML = '✓';
        icon.style.color = '#0f9d58';
        icon.style.fontWeight = 'bold';
        icon.style.fontSize = '12px';
        icon.style.flexShrink = '0';

        wrap.appendChild(icon);
        wrap.appendChild(descEl);
        return wrap;
    }

    var snappDescWrap = addTrustIcon(snappDesc);

    // محتوای اصلی رو خالی می‌کنیم و ساختار جدید رو می‌چینیم
    snappContent.innerHTML = '';
    snappContent.appendChild(snappTitleRow);
    snappContent.appendChild(snappDescWrap);

    // ---- جداکننده ----
    var divider = document.createElement('div');
    divider.style.borderTop = '1px solid #ebecf2';
    divider.style.margin = '10px 0';

    // ---- ردیف عنوان ترب‌پی: لوگو کوچیک + عنوان ----
    var torobTitleRow = document.createElement('div');
    torobTitleRow.style.display = 'flex';
    torobTitleRow.style.alignItems = 'center';
    torobTitleRow.style.gap = '8px';

    var newImg = torobImg.cloneNode(true);
    newImg.style.width = '24px';
    newImg.style.height = '24px';
    newImg.style.borderRadius = '6px';
    newImg.style.flexShrink = '0';
    newImg.style.objectFit = 'contain';

    var newTitle = document.createElement('div');
    newTitle.className = 'snapppay-widget-title';
    newTitle.style.margin = '0';
    newTitle.innerHTML = torobTitle.innerHTML;
    highlightAmount(newTitle);

    torobTitleRow.appendChild(newImg);
    torobTitleRow.appendChild(newTitle);

    var newDesc = document.createElement('div');
    newDesc.className = 'snapppay-widget-description';
    newDesc.innerHTML = torobDesc.innerHTML;
    var newDescWrap = addTrustIcon(newDesc);

    snappContent.appendChild(divider);
    snappContent.appendChild(torobTitleRow);
    snappContent.appendChild(newDescWrap);

    // ---- کارت رو تمام‌عرض کن و flex-direction رو عمودی کن ----
    snappWidget.style.width = '100%';
    snappWidget.style.maxWidth = '100%';
    snappWidget.style.boxSizing = 'border-box';
    snappWidget.style.flexDirection = 'column';
    snappWidget.style.alignItems = 'stretch';

    // ---- حذف باکس اصلی ترب‌پی ----
    torob.remove();

    // ---- علامت‌گذاری که ادغام انجام شد ----
    snappWidget.classList.add('installment-merged-done');
}

document.addEventListener('DOMContentLoaded', mergeInstallmentWidgets);

// اجرای مجدد در صورت رندر شدن مجدد ویجت‌ها (مثلاً تغییر تنوع محصول)
var installmentObserver = new MutationObserver(function () {
    mergeInstallmentWidgets();
});
document.addEventListener('DOMContentLoaded', function () {
    var formWrap = document.querySelector('.elementor-add-to-cart');
    if (formWrap) {
        installmentObserver.observe(formWrap, { childList: true, subtree: true });
    }
});
</script>

<style>
.snapppay-widget-wrap {
    width: 100% !important;
    max-width: 100% !important;
}

.snapppay-widget {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding: 14px 16px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

.snapppay-widget:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12) !important;
}

.snapppay-widget-description {
    opacity: 0.75;
    line-height: 1.8 !important;
}
</style>

نحوه نصب

1. وارد ویرایش صفحه محصول در المنتور شوید.
2. یک ویجت HTML درست زیر بخش «افزودن به سبد خرید» اضافه کنید (یا از ویجت HTML موجود استفاده کنید).
3. کد بالا را کامل داخل آن قرار دهید و به‌روزرسانی (Update) بزنید.
4. کش سایت (مثلاً Perfmatters یا هر پلاگین کش دیگری) را پاک کنید.
5. صفحه محصول را با Ctrl+F5 (رفرش کامل بدون کش مرورگر) باز کنید تا نتیجه را ببینید.

نکات مهم قبل از انتشار

• رنگ هایلایت (#0f9d58) را می‌توانید با رنگ اصلی برند خودتان جایگزین کنید.
• اگر پلاگین‌های پرداخت اقساطی را آپدیت کردید و ویجت‌ها دیگر ادغام نشدند، ابتدا با Inspect Element کلاس‌های جدید HTML را بررسی و در کد اصلاح کنید.
• این روش تنها ظاهر صفحه را تغییر می‌دهد و هیچ تأثیری بر منطق پرداخت یا محاسبات قسط ندارد.