مراجعة لوحة إدارة Webasyst

في هذه المقالة ، أريد أن أخبرك كيف تجعل حياتك أسهل قليلاً عن طريق ملء موقع الويب باستخدام محرك WebAsyst ، والذهاب مباشرة إلى تحرير المنتجات والقدرة على إزالة جميع مربعات الاختيار على الصفحة. ومن المحتمل أيضًا توفير 500 روبل عند شراء مكون إضافي يعمل على إصلاح إحدى هذه المشكلات.

مقدمة


أنا أعمل في مجال إنشاء مواقع الويب والترويج لها ، وبالنسبة للمتاجر عبر الإنترنت ، نلجأ بشكل أساسي إلى محرك Webasyst. لا أستطيع أن أقول شيئًا سيئًا عنه ، ولكن في عام مليء بالمواقع عليه ، أدركت أن شيئين يزعجني ، والذي سأتحدث عنه لاحقًا.
وبمجرد أن قررت البحث في رمز لوحة الإدارة نفسها ومحاولة إصلاح ما لا يعجبني.

التبديل إلى تحرير المنتج من خلال النقر عليه في لوحة الإدارة


هذا ما تبدو عليه قائمة السلع:

صورة

الحقيقة هي أنه إذا نقرت ببساطة على الاسم في قائمة السلع ، فسيتم فتح مثل هذه النافذة الوسيطة:

صورة

حيث يمكنك الذهاب لتحرير الصور أو تغيير الاسم ... وعند النقر فوق الزر "تحرير" ، يتم الانتقال مباشرة للتحرير.

صورة

ربما شخص ما مرتاح. شخص ولكن ليس أنا.

استكشاف


إذا نظرت إلى الرابط ، يصبح من الواضح أن الصفحة الوسيطة لها عنوان

https:///webasyst/shop/?action=products#/product/id

وصفحة التحرير هي نفسها + /editفي النهاية.

نحن نصحح


لم يكن من الصعب العثور على القالب لصفحة عرض قائمة المنتجات ، فهو موجود في:

//wa-apps/shop/templates/actions/products/

هناك 3 ملفات ، يبدأ اسمها بـ product_list_. كلهم يرسمون لوحة الإدارة في 3 أشكال مختلفة:

صورة

عرض البضائع على شكل جدول ، أيقونات وطاولة مع مقالات. أستخدم عرض الجدول فقط ، لذا فإن خياري هو الملف

product_list_table.html

بعد فتح مفتش صفحة المتصفح في لوحة المشرف ، اكتشفت أن روابط المنتج تبدو كالتالي:

<td class="drag-handle s-product-name">
    <a href="#/product/6037">
        <div>.  <i class="shortener"></i></div>
    </a>
</td>

العثور على السطر في الملف أعلاه:

<td class="drag-handle s-product-name">
    <a href="#/product/{%#p.id%}/">
        <div>{%#p.name%}<i class="shortener"></i></div> 
    </a>
</td>

وأضاف في نهاية التعديل ، اتضح مثل هذا:

<td class="drag-handle s-product-name">
    <a href="#/product/{%#p.id%}/edit">
        <div>{%#p.name%}<i class="shortener"></i></div> 
    </a>
</td>

وعملت.

بالمناسبة ، رأيت على مساحات برنامج التثبيت مكونًا إضافيًا مطلوبًا لنفس المهمة ، ولكنه يكلف 500 روبل.

مربعات الاختيار


على الموقع ، الذي يجب ملؤه في الغالب ، يتم تنفيذ مكونات إضافية مختلفة للأبواب باستخدام "الخدمات". يرتبط كل منتج (باب) بفئته ، وبما أنه من المستحيل تعيين خدمة لفئة ما ، فإن جميع المنتجات لا تزال مصنفة إلى أنواع مختلفة من السلع ، والتي عادة ما تكرر فئات.

أي أن كل ما يوجد داخل فئة "واحد" ينتمي إلى نوع المنتج "واحد". ولكن هناك استثناءات عندما يختلف سعر المكونات في فئة واحدة اعتمادًا على لون الباب ، إلخ. ثم يتم إنشاء أنواع المنتجات "one.1" و "one.2" وما إلى ذلك. ولكل نوع تحتاج إلى إنشاء خدماتك الخاصة بأسعارها الخاصة.

عرض في لوحة الإدارة:

صورة

عرض في الموقع:

صورة

كان مطلوبًا إنشاء الكثير من هذه الخدمات ، وكان من الضروري وضع علامة من 1 إلى 5 مربعات اختيار ، وبشكل افتراضي ، عند إنشاء "خدمة" جديدة ، تم وضع علامة على جميع مربعات الاختيار في قائمة أنواع المنتجات بالفعل. في البداية ، قمت بإزالة كل شيء يدويًا ، وتركته ضروريًا ، ولكن بالطبع ، استغرق الأمر وقتًا طويلاً لإزالة حوالي مائة خانة اختيار وبدأت في كتابة الرمز في وحدة التحكم في كل مرة أنشأت فيها "خدمة":

$('body input:checkbox').prop('checked', false);

يزيل هذا الرمز جميع مربعات الاختيار المحددة على الصفحة. نجحت ، لكنها لم تكن مريحة بعد. لذلك ، رأيت خيارين: تعديل الشفرة بحيث عند إنشاء الخدمة ستظهر مربعات الاختيار في الحالة غير المحددة ، وليس في المربع المحدد أو أضف زر "إزالة جميع مربعات الاختيار" إلى واجهة المشرف.

معرفتي في JS صغيرة للغاية ، لذلك اخترت الطريقة الثانية.

العثور على ملف عرض لواجهة تحرير الخدمة:

//wa-apps/shop/templates/actions/services/Services.html

وفيه رمز زر "حذف الخدمة":

<li>
    <a href="#" class="s-delete-service">
        <i class="icon16 delete"></i>
        [`Delete this service`]
    </a>
</li>

دون التفكير مرتين ، أضفت زرًا بجوار "الحذف" الحالي الوحيد عن طريق وضع الرمز أدناه:

<li>
    <input type="button" value="  " onClick="$('body input:checkbox').prop('checked', false);" />
</li>

عند النقر ، يتم تنفيذ كود JS أعلاه ويعمل كل شيء.

قبل النقر:

صورة
بعد الضغط:

صورة
ربما يمكن حل كل ذلك بسهولة ، لكنني قررت قدر الإمكان. آمل أن يجد شخص ما هذا مفيدًا.

Source: https://habr.com/ru/post/undefined/


All Articles