طراحی صفحه محصول با المنتور: چرا گالری در قالب بلوکی دیده نمی‌شود؟

طرح Single Product در المنتور پرو جای صفحه پیش‌فرض محصول ووکامرس می‌نشیند. ما آن را روی وردپرس ۷٫۱٫۳ فارسی با ووکامرس ۱۱٫۲٫۱، Elementor 4.3.4 و Elementor Pro 4.3.1 (بسته فروشگاه) ساختیم و روی چند محصول نمونه آزمودیم. جایی که گالری و تب‌ها کار نکردند قالب پیش‌فرض خود وردپرس بود: روی Twenty Twenty-Five گالری تصاویر در صفحه هست ولی دیده نمی‌شود و تب‌های محصول فعال نمی‌شوند. علتش در کد ووکامرس و ابزارک پرو است و با چند خط درست می‌شود؛ راه‌حل‌ها در بخش دوم است: قالب کلاسیک مثل Hello Elementor، یا کدی که اسکریپت‌ها را دوباره می‌آورد.

هیچ‌کدام از پنج راهنمای فارسی که برای «طراحی صفحه محصول با المنتور» و «ساخت صفحه محصول با المنتور» باز کردیم (جست‌وجوی DuckDuckGo، ۲۰ مهر ۱۴۰۵) عبارت «قالب بلوکی» را ندارد و واژه‌های Ajax و Stay In Column هم در متن‌شان نیست.

طرح Single Product را از ابزارک‌های پنل می‌سازید و با یک شرط منتشر می‌کنید

از منوی المنتور Theme Builder را باز کنید (در منوی کناری المنتور: قالب‌ها > پوسته‌ساز). برنامه تمام‌صفحه و انگلیسی Theme Builder باز می‌شود؛ در فهرست سمت راست Single Product را انتخاب کنید و Add New را بزنید. راهنمای المنتور هم همین مسیر را می‌گوید و یادآوری می‌کند که WooCommerce Builder به Elementor Pro نیاز دارد. المنتور طرح را «قالب» می‌نامد؛ ما «قالب» را برای قالب وردپرس نگه می‌داریم.

ویرایشگر یک‌راست باز می‌شود و کتابخانه طرح‌های آماده بالای آن است. درج یکی از سه طرح آماده پیام «اتصال به کتابخانه قالب» داد و برای ادامه حساب رایگان المنتور خواست؛ ما پنجره را بستیم و از ابزارک‌ها ساختیم. پنل در گروه Product ۱۴ ابزارک دارد، همه از بسته پرو: Add To Cart، Product Price، Product Title، Product Images، Upsells، Short Description، Product Meta، Product Stock، Product Rating، Product Data Tabs، Product Related، WooCommerce Breadcrumbs، Additional Information و Product Content.

ما یک کانتینر دو ستونه ساختیم. ستون اول، که در صفحه راست‌به‌چپ سمت راست می‌افتد، Product Images است. ستون دوم از بالا به پایین WooCommerce Breadcrumbs، Product Title، Product Rating، Product Price، Short Description، Add To Cart، Product Meta و Product Data Tabs را دارد. زیر هر دو ستون Upsells و Product Related آمد. ابزارک Product Related بنا به راهنمای المنتور محصول‌های هم‌برچسب و هم‌دسته را نشان می‌دهد، نه Upsell را؛ برای Upsell ابزارک Upsells هست.

دکمه «انتشار» پنجره Publish Settings را باز می‌کند. این پنجره انگلیسی است: Add condition یک ردیف پیش‌فرض «Include / محصولات» (همه محصولات) می‌گذارد و Save & Close طرح را منتشر می‌کند. از آن لحظه محصول ساده، متغیر و ناموجود نمونه ما صفحه جدید را داشتند.

روی Twenty Twenty-Five گالری دیده نمی‌شود و تب‌ها کار نمی‌کنند

قالب پیش‌فرض وردپرس ۷٫۱٫۳ Twenty Twenty-Five است، یک قالب بلوکی؛ یعنی نتیجه wp_is_block_theme برایش درست است. روی آن و روی Twenty Twenty-Four طرح ما رندر شد، ولی جای گالری خالی ماند: تصویرها (پنج تا برای لیوان) در صفحه بودند و opacity گالری صفر بود. روی Twenty Twenty-Five تب‌ها هم کار نمی‌کردند. هیچ تبی فعال نبود، کلیک روی «نظرات» فقط صفحه را به لنگر می‌برد و توضیحات، توضیحات تکمیلی و نظرات هر سه زیر هم باز بود. بعد از نصب Persian WooCommerce 10.0.5 هم همین را دیدیم. اگر نمی‌دانید قالب شما بلوکی است یا کلاسیک، منوی «نمایش» را ببینید: بنا به نوشته صفحه تشکر در آن منو Twenty Twenty-Five گزینه «ویرایشگر» دارد و Storefront «سفارشی‌سازی» و «ابزارک‌ها»، ولی این نشانه کامل نیست.

علت هم در ووکامرس ۱۱٫۲٫۱ است و هم در ابزارک پرو. بارگذار اسکریپت‌ها اسکریپت‌های گالری را فقط وقتی می‌آورد که صفحه محصول باشد و wp_is_block_theme نادرست برگردد (یا شورت‌کد product_page در محتوا باشد). بلوک‌های خود ووکامرس، مثل ProductImageGallery، وقتی در صفحه باشند این اسکریپت‌ها را خودشان درج می‌کنند؛ توضیح کدشان: «Enqueue legacy assets when this block is used as we don’t enqueue them for block themes anymore». کلاس BlockTemplatesController هم، وقتی قالب بلوکی است و صفحه محصول باز شود، اسکریپت wc-single-product را بیرون می‌اندازد؛ توضیح خودش: «Dequeue legacy scripts that have no usage with block themes».

ابزارک Product Images پرو اسکریپت‌های گالری را فقط در حالت پیش‌نمایش درج می‌کند (در کد Elementor Pro 4.3.1 خواندیم)، پس در آزمون ما روی صفحه منتشرشده (نه پیش‌نمایش) هیچ‌چیز آنها را نمی‌آورد: طرح المنتور جای بلوک‌های ووکامرس را می‌گیرد. Hello Elementor قالب بلوکی نیست و پشتیبانی گالری را اعلام می‌کند، و روی آن گالری و تب‌ها کار کردند.

دو راه دارید: قالب کلاسیک مثل Hello Elementor، یا کد زیر که اسکریپت‌ها را دوباره می‌آورد:

اولویت ۳۰ مهم است: ووکامرس wc-single-product را در اولویت ۲۰ بیرون می‌اندازد، و وقتی همین کد را با اولویت ۲۰ گذاشتیم، این اسکریپت باز هم نیامد. ما کد را همین‌طور که چاپ شده در یک فایل تازه زیر wp-content/mu-plugins گذاشتیم (نام فایل مهم نیست؛ اگر پوشه نبود، بسازید). اگر آن را در functions.php می‌گذارید، خط <?php را نگذارید.

با آن گالری دیده شد، کلیک روی بندانگشتی تصویر اصلی را عوض کرد و لایت‌باکس باز شد. روی صفحه‌ای که طرح المنتور ندارد و ووکامرس گالری را خودش می‌آورد، این کد یک عنصر لایت‌باکس دوم به صفحه می‌افزاید؛ در آزمون ما گالری و لایت‌باکس باز هم کار کردند. اگر فقط wc-single-product را بیاورید، گالری و تب‌ها برمی‌گردند ولی دکمه ذره‌بین و بندانگشتی‌های اسلایدر نمی‌آیند.

اگر نمی‌خواهید خودتان کد بگذارید، می‌توانید آن را به ما بسپارید.

طرح مخصوص یک دسته از طرح «همه محصولات» جلوتر است

شرط هر طرح یک ردیف است: Include یا Exclude، نوع و مقدار. فهرست نوع در طرح Single Product هفت گزینه داشت: همه محصولات، برند، زیربرندها، دسته، زیردسته‌ها، برچسب و نویسنده. ما طرح دوم را برای دسته «کیف و کوله» ساختیم: همان صفحه با یک متن راهنمای اندازه بالای دکمه افزودن به سبد. در پنجره شرط نوع را روی دسته گذاشتیم و در کادر آخر «کیف» را جست‌وجو کردیم؛ فهرست «دسته‌های محصولات: کیف و کوله» را نشان داد.

کوله‌پشتی طرح دوم را گرفت، با اینکه طرح اول همه محصولات را پوشش می‌داد؛ لیوان، دفتر و محصول بدون دسته طرح اول را. وقتی طرح اول را پیش‌نویس کردیم، لیوان که زیر هیچ شرطی نبود به صفحه محصول خود قالب برگشت و کوله‌پشتی همچنان طرح دوم را داشت. پس اگر بعد از ساخت طرح صفحه‌تان عوض نشد، اول وضعیت انتشار و شرط را ببینید.

پرو در نصب ما انگلیسی ماند و موجودی دو بار چاپ شد

بسته پرو پوشه زبان ندارد و در نصب ما نام ابزارک‌ها و کنترل‌های پرو، پنجره انتشار و عنوان‌های ابزارک Product Meta انگلیسی ماند. این ابزارک «SKU» و «Category» را خودش می‌نویسد و در نمای پیش‌فرض (inline)، روی صفحه راست‌به‌چپ، دو مورد به هم چسبید و «CategorySKU» خوانده شد. فیلدهای بخش Captions را فارسی کردیم (کد محصول، دسته‌بندی، برچسب) و نما را Stacked گذاشتیم.

خط موجودی هم دو بار آمد. ابزارک Add To Cart برای محصول ساده فایل simple.php ووکامرس را اجرا می‌کند و خط ۲۶ آن خودش وضعیت موجودی را چاپ می‌کند. ما Product Stock را هم گذاشته بودیم: «۱۲ عدد در انبار» دو بار آمد و برای محصول ناموجود «ناموجود». Product Stock را برداشتیم.

گالری چسبان بدون Stay In Column روی بخش Upsells می‌افتد

کانتینر گالری را انتخاب کنید و در تب «پیشرفته»، بخش «موشن افکت»، Sticky را روی Top بگذارید، Sticky On را روی دسکتاپ و تبلت و Sticky Offset را روی ۲۴ پیکسل. این مسیر کانتینر معمولی است و ما همین را آزمودیم. اگر گالری را با عنصرهای گروه «عناصر اتمی جدید» پنل ساخته‌اید، راهنمای المنتور می‌گوید گزینه Position را روی Sticky بگذارید.

ما برای محصول لیوان ۲۴ بند توضیح نوشتیم تا ستون متن از گالری بلندتر شود و با اسکرول واقعی در Chrome (کلید PageDown، پنجره ۱۴۴۰ در ۹۰۰) دیدیم گالری ثابت می‌ماند. ولی در انتهای صفحه، بدون Stay In Column، هنوز ثابت بود و روی بخش Upsells افتاده بود. با Stay In Column روی Yes، گالری پایین ردیف ایستاد و درست بالای Upsells ماند. همان راهنما زیر مسیر تب «پیشرفته» می‌گوید: «Toggle to Yes if you want the section to remain in its own column».

روی گوشی (عرض ۳۹۰ پیکسل) حالت Sticky اعمال نشد، چون Sticky On فقط دسکتاپ و تبلت بود. گالری بالای عنوان آمد و صفحه از ۳۹۰ پیکسل پهن‌تر نشد.

محصول متغیر: سواچ رنگ و افزودن بدون بارگذاری مجدد با افزونه می‌آید

ابزارک Add To Cart برای محصول متغیر کشوی انتخاب (Dropdown) می‌گذارد و دکمه تا انتخاب همه صفت‌ها غیرفعال می‌ماند. در بسته پرو کدی برای سواچ رنگ پیدا نکردیم (جست‌وجوی swatch فقط یک خط changelog و فایل‌های آیکون Font Awesome را داد). ووکامرس ۱۱٫۲٫۱ گزینه آزمایشی «Color swatches for attributes» دارد که پیش‌فرض خاموش است؛ نوع صفت «Color / image» آن فقط با قالب بلوکی در فهرست آمد. با روشن کردنش و یک صفت رنگ، ابزارک المنتور باز هم کشو نشان داد. افزونه رایگان Variation Swatches for WooCommerce 2.5.0 کشو را به سه مربع رنگ تبدیل کرد؛ فروشگاه نسخه Pro آن (2.5.1) را هم دارد، که ما بیش از فعال‌سازی آزمایش نکردیم.

دکمه Add To Cart روی صفحه محصول فرم را ارسال می‌کند و صفحه دوباره بارگذاری می‌شود (یک درخواست POST به نشانی محصول). JetWooBuilder 2.3.5 در ووکامرس > پیکربندی تبی به نام JetWooBuilder دارد با گزینه «Use AJAX Add to Cart» («Force use of AJAX Add to Cart instead of page reload on the product single page»). با روشن کردنش همان دکمه ابزارک پرو بدون بارگذاری مجدد کالا را اضافه کرد و پیام «به سبد خرید شما اضافه شد» آمد؛ با خاموش کردنش صفحه دوباره بارگذاری شد. سرصفحه این بسته ووکامرس ۷٫۸ و Elementor 3.22 را برای آزمون خودش نوشته و ما فقط همین گزینه را آزمودیم.

همه آزمایش‌ها روی یک فروشگاه نمونه با محصول‌های ساختگی بود. قالب‌های دیگر، از جمله قالب‌های فروشگاهی، Elementor رایگان به‌تنهایی و نسخه‌های قدیمی‌تر المنتور را آزمایش نکردیم.

پرسش‌های متداول