أفضل طريقة لاستخدام Discourse للتعليقات على منشورات مدونة Shopify؟

[MarximusMG]

أهلاً بالجميع!

لقد أجريت بعض البحث هنا لهذا التطبيق المحدد، ولكن يبدو أن معظم الأسئلة تتعلق باستخدام Discourse للتعليقات على منشورات Wordpress.

بصرف النظر عن هذا الدليل (Embed Discourse comments on another website via Javascript)، هل هناك أي توجيهات يمكن لأي شخص مشاركتها لتطبيق تعليقات Discourse خاصة لمنشورات مدونة Shopify؟

مثال لما أتخيله يمكن رؤيته في كيفية تعامل macrumors.com مع التعليقات (أي، عند عرض مقال، يتم عرض أهم التعليقات أسفل المقال، ويُمنح المستخدم خيار عرض جميع التعليقات. بعد النقر على هذا الرابط، يتم تحميل موضوع المنتدى الذي تم إنشاؤه نتيجة للمقال).

شكراً مقدماً!

[MarximusMG]

[pfaffman (Jay Pfaffman)]

ما هي المشكلة في تضمين جافاسكريبت؟

[MarximusMG]

شكرا على الرد!

سأقوم بتطبيق هذا اليوم وسأعود هنا بأي مشاكل قد تنشأ - أعتقد أنني لم أدرك أن خيار التضمين في جافاسكريبت يعمل بنفس الطريقة التي وصفتها أعلاه. اعتذاري!

[jord8on (Jordan)]

مرحباً @MarximusMG! كيف سار هذا الأمر معك؟ هل تمانع في مشاركة تجربتك في استخدام تضمين JS؟ أم أنك تخلّيت عن هذه المبادرة؟

[simon]

لطالما تساءلت عن هذا الأمر، لذا قررت تجربته. لاحظ أن لدي خبرة قليلة جدًا في Shopify، ولكنه شيء طُلب مني كثيرًا عند تقديم دعم العملاء لـ Discourse.

إذا تم تكوين كل من متجر Shopify وموقع Discourse بحيث يمكن للمستخدمين المجهولين (غير المسجلين دخولهم) عرضهما، فيمكن تضمين تعليقات Discourse في صفحة منتج Shopify. للقيام بذلك، أضف نطاق متجرك إلى قسم “Allowed Hosts” في صفحة “Admin / Customize / Embedding” الخاصة بموقع Discourse:

تأكد من إضافة اسم المستخدم الخاص بمستخدم Discourse الذي سيظهر كمؤلف لمواضيع Discourse في إعداد “Username for topic creation”. ثم انقر فوق الزر “Save Embedding Settings” من أسفل الصفحة.

انسخ رمز التضمين المعروض في صفحة “Embedding” إلى قسم “Description” في صفحة منتج Shopify. تأكد من النقر فوق الزر “show html” في المحرر قبل إدراج الرمز:

قم بتحرير رمز التضمين لاستبدال DISCOURSE_USERNAME باسم المستخدم الذي أدخلته كـ “Username for topic creation” في صفحة Discourse Embedding. استبدل أيضًا نص EMBED_URL في رمز التضمين بعنوان URL الخاص بالمنتج. ثم احفظ صفحة المنتج.

لاحظ أنه يمكنك الحصول على مزيد من التفاصيل حول تضمين تعليقات Discourse هنا: Embed Discourse comments on another website via Javascript.

يجب أن ترى الآن قسم “Discourse Comments” (مضمن كـ iframe) في صفحة منتج Shopify. بافتراض عدم وجود أخطاء، قد يعرض النص “Loading discussion” في المرة الأولى التي تزورها فيها. ما يحدث هو أن زيارة الصفحة قد أدت إلى قيام Discourse بإنشاء موضوع لصفحة المنتج. بعد بضع ثوانٍ، يجب أن ترى النص “Start discussion”. إذا نقرت فوق هذا الرابط، فسيتم نقلك إلى موضوع Discourse ذي الصلة.

إذا قمت بزيارة الموضوع والرد عليه، فسيظهر هذا الرد في صفحة منتج Shopify.

المشاكل المحتملة:
يبدو أن قسم الوصف في سمة Shopify الافتراضية ليس عريضًا بما يكفي لعرض قسم تعليقات Discourse:

أفترض أنه يمكن إصلاح ذلك بسهولة باستخدام سمة Shopify مخصصة.

لا يمنحك Discourse الكثير من التحكم في المحتوى الذي يتم سحبه من منتج Shopify إلى موضوع Discourse. إليك ما أراه للمنتج الذي ربطته بـ Discourse:

بعد النقر فوق الزر “Show Full Post”:

ما أود رؤيته هو وصف المنتج والسعر والصورة. بالتأكيد لا أريد عرض النص التالي:

Product variants
Couldn’t load pickup availability Refresh

قد يكون من الممكن إصلاح ذلك عن طريق العبث بإعداد موقع Discourse allowed embed selectors. بعض التفاصيل حول هذا الإعداد هنا: Configure the Allowed Embed Selectors Setting. لدى Discourse أيضًا إعداد موقع مخفي blocked embed selectors قد يكون مفيدًا. لقد قمت مؤخرًا بإعداد مصحح أخطاء عبر الإنترنت للمساعدة في تكوين إعدادات تضمين Discourse. إنه قيد العمل، ولكن أرسل لي رسالة خاصة إذا كنت ترغب في تجربته.

إذا تم تكوين موقع Discourse أو متجر Shopify بحيث لا يمكن للمستخدمين المجهولين عرضهما، فأنا أشك في أنك ستواجه مشاكل مع التعليقات المضمنة.

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

شيء آخر قد يحتاج إلى معالجة هو جعل أنماط تعليقات Discourse المضمنة تتطابق مع أنماط صفحة منتج Shopify. يجب أن يكون من الممكن القيام بذلك عن طريق إضافة بعض CSS إلى قسم “Embed CSS” في محرر السمات لسمة Discourse الافتراضية الخاصة بك. على سبيل المثال، هذا يصلح مشكلة لون الخلفية في لقطات الشاشة السابقة الخاصة بي:

[simon]

أدركت أنني لم أجب تمامًا على سؤال OP. إليك نهج عام سيعمل لصفحات منتجات Shopify أو منشورات المدونة. من قسم “المظهر / تخصيص” الخاص بمتجرك، انتقل إلى قالب الصفحة الذي تريد إضافة تعليقات Discourse إليه. اعتمادًا على الصفحة، أضف إما كتلة “Custom Liquid” إلى قسم، أو أضف قسم “Custom Liquid” جديدًا. ثم أضف رمز تضمين Discourse إلى القسم.

بالنسبة لـ discourseEmbedUrl في رمز التضمين، استخدم location.href. بهذه الطريقة سيتم تعيين discourseEmbedUrl تلقائيًا. على سبيل المثال:

<div id='discourse-comments'></div>
<meta name='discourse-username' content='DISCOURSE_USERNAME'>

<script type="text/javascript">
  DiscourseEmbed = {
    discourseUrl: 'DISCOURSE_URL',
    discourseEmbedUrl: location.href,
    // className: 'CLASS_NAME',
  };

  (function() {
    var d = document.createElement('script'); d.type = 'text/javascript'; d.async = true;
    d.src = DiscourseEmbed.discourseUrl + 'javascripts/embed.js';
    (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(d);
  })();
</script>

بالنسبة لمنشورات مدونة Shopify، ستحتاج على الأرجح إلى إضافة بعض CSS مخصص إلى قسم Liquid للحفاظ على قسم التعليقات في المنتصف وتقييد عرضه. على سبيل المثال:

div#discourse-comments {
  max-width: 726px;
  margin: 0 auto;
}

مع منشورات المدونة، على عكس صفحات المنتجات، أجد أن Discourse يقوم بعمل جيد في سحب المحتوى المناسب إلى الموضوع: