Quote from Pablo Borysenco on March 13, 2025, 10:49

Hello

Yes, the plugin can work with custom posts without woocommerce

Please watch these videos - https://wp-filter.com/video-tutorials#video_1293  and  https://wp-filter.com/video-tutorials#video_1290

Quote from Crum on March 20, 2025, 22:55

After watching the video I can create the slide search like the demo. But, it's not responsive on mobile

Please check the video I've  recorded here: https://streamable.com/sn8fdj

The form should be completely hidden, only showing the icon when we want to hide it. Currently, the form takes up half of the mobile screen.

Thanks @pavlo_borysenco

Quote from Pablo Borysenco on March 21, 2025, 10:22

Hello

You should set the slide out to be closed by default ( https://share.pluginus.net/image/i20250321102235.png ) - https://wp-filter.com/document/using-search-shortcode/

Quote from Crum on March 22, 2025, 10:02

Thanks @pavlo_borysenco
It's worked like charm.

However, I want the icon always stays on the middle right when users scroll the browser.

I tried to "play" with ChatGPT, DeepSeek and Gemini for a hour but no success, the best result is the icon always stay on the middle right but it's unclickable.

Could you please take a time to help?

Thanks (my site is here https://nhadatcantho.info/ )

/* CỐ ĐỊNH VỊ TRÍ ICON */
.mdf-handle {
position: fixed !important;
top: 50% !important;
right: 0 !important;
transform: translateY(-50%) !important;
z-index: 1000000 !important;
background: url(https://nhadatcantho.info/wp-content/uploads/2025/03/search-png.webp) no-repeat !important;
background-size: 68px 68px !important;
width: 68px !important;
height: 68px !important;
cursor: pointer !important;
pointer-events: auto !important;
opacity: 1 !important;
visibility: visible !important;
}

/* VỊ TRÍ FORM VÀ HIỆU ỨNG */
.mdf-slide-out-div {
position: fixed !important;
top: 50% !important;
right: -250px !important;
transform: translateY(-50%) !important;
z-index: 999999 !important;
transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* TRẠNG THÁI HIỂN THỊ FORM */
.mdf-slide-out-div.mdf-active {
right: 0 !important;
}

 

<script>
document.addEventListener('DOMContentLoaded', function() {
// Chọn phần tử
const handle = document.querySelector('.mdf-handle');
const slideOutDiv = document.querySelector('.mdf-slide-out-div');

// Kiểm tra tồn tại phần tử
if (!handle || !slideOutDiv) {
console.error('Không tìm thấy phần tử cần thiết');
return;
}

// Xử lý click icon
function toggleForm(e) {
e.preventDefault();
e.stopPropagation();
e.stopImmediatePropagation();

// Toggle trạng thái
const isActive = slideOutDiv.classList.contains('mdf-active');
slideOutDiv.classList.toggle('mdf-active', !isActive);

// Debug
console.log('Trạng thái form:', !isActive ? 'Hiển thị' : 'Ẩn');
}

// Gỡ bỏ mọi sự kiện click cũ
handle.replaceWith(handle.cloneNode(true));

// Thêm sự kiện mới
document.querySelector('.mdf-handle').addEventListener('click', toggleForm);

// Đóng form khi click ra ngoài
document.addEventListener('click', function(e) {
if (!slideOutDiv.contains(e.target) {
slideOutDiv.classList.remove('mdf-active');
}
});

// Fix cho jQuery (nếu plugin dùng jQuery)
if (typeof jQuery !== 'undefined') {
jQuery(document).off('click', '.mdf-handle').on('click', '.mdf-handle', toggleForm);
}
});
</script>

Quote from Pablo Borysenco on March 24, 2025, 10:15

Hello

Please delete all your custom code and read docs ( https://share.pluginus.net/image/i20250324101534.png ) -  https://wp-filter.com/document/using-search-shortcode/