عنوان URL عام لصفحة فوترة المستخدم في Javascript لا يعمل

مطور
1

أعلم بالفعل أن /my/billing/subscriptions هي الطريقة لربط المستخدم الحالي بملفه الشخصي، وتحديداً قسم الفواتير المرفق مع اشتراكات Discourse. ومع ذلك، يبدو أن هذا لا يعمل في الكود أدناه، وتحديداً في التعبير داخل جملة الشرط (if-statement). على وجه التحديد، أحاول إظهار زر فقط على صفحة الفواتير الخاصة بالمستخدم. في الواقع، يبدو أن الأمر لا يعمل لأي عنوان URL من الصيغة /my، سواء كان الفواتير، التفضيلات، النشاط، أو أي شيء آخر. هل أقوم بشيء خاطئ؟ ما الذي يجب أن أستخدمه؟ (تذكر أن هذا لا يعمل فقط داخل جملة الشرط. بخلاف ذلك، استخدام /my كان ويعمل بشكل جيد.)

<script type="text/discourse-plugin" version="0.8">
api.registerConnectorClass("above-user-profile", "back-button", {
    setupComponent(args, component) {
    api.onPageChange((url) => {

        if (url === "/my/billing/subscriptions" ){ 
          document.querySelector("html").classList.add("custom-homepage"); 
          component.set("displayCustomHomepage", true); 
        } else {  
          document.querySelector("html").classList.remove("custom-homepage"); 
          component.set("displayCustomHomepage", false); 
        }
    });
    }
});

</script>

<script type="text/x-handlebars" data-template-name="/connectors/above-user-profile/back-button">
  {{#if displayCustomHomepage}} 
    <a href="https://mathbymiles.com/my/preferences" class="btn btn-default">
        <span class="d-button-label">
            عد إلى الإعدادات!
        </span>
    </a>
  {{/if}}
</script>
إعجاب واحد (1)
2

أليس ذلك لأن المستخدمين لا يكونون أبدًا في عناوين URL مثل /my/* لأنها مجرد إعادة توجيه ذكية؟

على سبيل المثال، /my/preferences سيعيد توجيهي إلى /u/falco/preferences، لذا فأنا لا أكون أبدًا في صفحة /my/preferences لكي يتحقق الشرط if في الكود الخاص بك.

إعجابَين (2)
3

أفهم، أنت محق. أرى لماذا لا يكون ذلك مناسبًا في حالة if، لأنه لن يكون صحيحًا أبدًا. إذن ماذا يمكنني أن أفعل إذن؟

لقد حاولت فعل ذلك بدلاً من ذلك، في if،

url === "/u/" + user.username + "/billing/subscriptions"

حيث

const user = api.getCurrentUser(),

ولكن يبدو أن ذلك لم ينجح أيضًا…

تحرير: إذن، باستخدام console.log تمكنت من استنتاج أن هذا النهج يعمل بشكل جيد بشكل عام. على سبيل المثال، إذا وضعت الكود ببساطة

const user = api.getCurrentUser()
console.log("/u/" + user.username + "/billing/subscriptions")

في سكريبت، أحصل على النتيجة المطلوبة /u/Miles/billing/subscriptions.

ومع ذلك، تظهر المشكلة عندما أحاول وضع هذا داخل setupComponent(args, component) {}. بمجرد فعل ذلك، لم يعد console.log يعرض أي شيء. لا زلت غير متأكد مما أفعله خطأ…

4

هل لديك وصول إلى كائن api في طريقة setupComponent؟ أتساءل عما إذا كان هذا هو السبب في وجود مشكلات تواجهها.

5

كنت أظن ذلك، لأن استخدام api.onPageChange(url) موجود بالفعل ويعمل بشكل صحيح. لاحظ أنني أقوم بتكييف الكود من هنا، لذا يبدو أنه صحيح تمامًا أن لدي وصولًا إلى كائن api داخل دالة setupComponent.

فقط للتوضيح الإضافي، إليك ما توصلت إليه حتى الآن:

مع الكود:

<script type="text/discourse-plugin" version="0.8">
    const user = api.getCurrentUser();
    console.log("/u/" + user.username + "/billing/subscriptions");

    api.registerConnectorClass("above-user-profile", "back-button", {
    setupComponent(args, component) {

    api.onPageChange((url) => {

        if (url === "/u/" + user.username + "/billing/subscriptions" ){ 
          document.querySelector("html").classList.add("custom-homepage"); 
          component.set("displayCustomHomepage", true); 
        } else {  
          document.querySelector("html").classList.remove("custom-homepage"); 
          component.set("displayCustomHomepage", false); 
        }
    });
    }
});

أحصل على المخرجات الصحيحة /u/Miles/billing/subscriptions من وحدة التحكم. ولكن عندما أقوم بما يلي:

<script type="text/discourse-plugin" version="0.8">
    

    api.registerConnectorClass("above-user-profile", "back-button", {
    setupComponent(args, component) {

    const user = api.getCurrentUser();
    console.log("/u/" + user.username + "/billing/subscriptions");

    api.onPageChange((url) => {

        if (url === "/u/" + user.username + "/billing/subscriptions" ){ 
          document.querySelector("html").classList.add("custom-homepage"); 
          component.set("displayCustomHomepage", true); 
        } else {  
          document.querySelector("html").classList.remove("custom-homepage"); 
          component.set("displayCustomHomepage", false); 
        }
    });
    }
});

لا توجد أي مخرجات يمكن العثور عليها…