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

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

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

وفي جميع الحالات الأخرى، يجب وصف كائنات الصورة بعناصر اختيارية.

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

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

تعليق. على عكس العناصر البسيطة، تكون جميع عناصر المجموعة مطلوبة بشكل افتراضي.

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

وبالتالي، يمكن استخدام العناصر لتحديد مستند (مطلوب)، والبحث عن الكتل (مطلوب واختياري)، ورفض الفرضيات الخاطئة (عناصر غير صالحة).

يتم اختيار خيار استخدام عنصر ما في مربع حوار خصائص العنصر (علامة التبويب عام).

يتم تسليط الضوء على صور العناصر المطلوبة وغير المقبولة على النحو التالي.

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

أولا المشكلة نفسها

لقد ولت منذ فترة طويلة أيام تصميم مواقع الويب ذات العرض الثابت مع الامتثال الكامل للتخطيط. في عصر الشاشات العريضة، وتلفزيون الإنترنت، والأجهزة اللوحية، والهواتف الذكية بمختلف أحجامها، يجب أن يأخذ تصميمنا في الاعتبار أي دقة - من 320 بكسل إلى 7680 بكسل.

كل هذه القرارات تضع متطلبات على الصور - يجب أن تتمدد وتتقلص لتتوافق مع مجموعة متنوعة من المتطلبات. ربما تكون هذه مشكلة لأن... باستثناء الرسومات المتجهة، تحتوي معظم الصور على عرض بكسل ثابت لا يتغير.

اذا مالعمل؟

الحل الحالي والأكثر شيوعا

عادة، ستجد ما يلي في كود CSS لأي موقع ويب سريع الاستجابة تقريبًا:

img (الحد الأقصى للعرض: 100%؛ الارتفاع: تلقائي؛)

img (الحد الأقصى - العرض: 100%؛ الارتفاع: تلقائي؛)

يستخدم هذا الرمز إعداد الحد الأقصى للعرض: 100%; للتأكد من أن الصورة لن تمتد خارج الحاوية الأصل. إذا أصبحت الحاوية الأصلية أصغر من عرض الصورة، فسوف تتقلص الصورة معها. ضبط الارتفاع: تلقائي؛ موجود بحيث يتم الحفاظ على نسب الصورة عند تقليلها.

صورة مطاطية واحدة لجميع الأجهزة

وهذا يحل المشكلة في مفتاح واحد، مما يسمح لنا بعرض نفس الصورة في ظل ظروف مختلفة. لكنه لا يسمح لنا بعرض صور مختلفة لظروف مختلفة.

الحل الجديد: علامة الصورة

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

سيسمح لك بتحميل صور مختلفة اعتمادًا على:

نتائج استعلام الوسائط، مثل ارتفاع إطار العرض والعرض والاتجاه

كثافة البكسل

مما يعني أنه يمكنك:

قم بتحميل صور بأحجام مناسبة، مع تحقيق أقصى استفادة من عرض القناة المتاحة.

قم بتحميل الصور ذات عمليات الاقتصاص ونسب العرض إلى الارتفاع المختلفة لاستيعاب التخطيطات المتغيرة لعروض الشاشة المختلفة.

قم بتحميل صور عالية الدقة للشاشات ذات الكثافة العالية للبكسل.

يتم تحميل صور مختلفة حسب الظروف

كيف يعمل عنصر الصورة؟

الخطوات الأساسية للعمل مع عنصر الصورة هي:

إنشاء علامات فتح وإغلاق الصورة.

ضمن هذه العلامات، قم بإنشاء عنصر مصدر لكل طلب تريد تقديمه.

أضف سمة وسائط إلى استعلامك لأشياء مثل ارتفاع إطار العرض والعرض والاتجاه وما إلى ذلك.

أضف سمة srcset بالاسم المناسب لملف الصورة المراد تحميله.

أضف أسماء ملفات إضافية إلى سمة srcset الخاصة بك إذا كنت تريد دعم الشاشات ذات الكثافة العالية للبكسل مثل Retina.

أضف عنصر img كعنصر احتياطي.

فيما يلي مثال بسيط يتحقق مما إذا كان إطار العرض أصغر من 768 بكسل، وإذا كان كذلك، فسيتم تحميل صورة أصغر:

< picture > < source srcset = "smaller.jpg" media = "(max-width: 768px)" > < source srcset = "default.jpg" > < img srcset = "default.jpg" alt = "صورتي الافتراضية" > < / picture >

ستلاحظ أن بناء الجملة المستخدم في سمة الوسائط هو تمامًا نفس ما اعتدت عليه عند كتابة استعلامات وسائط CSS. يمكنك استخدام نفس عمليات التحقق، مما يعني أنه يمكنك إنشاء استعلامات لـ max-width، وmin-width، وmax-height، وmin-height، والاتجاه، وما إلى ذلك.

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

< picture > < source srcset = "smaller_landscape.jpg" media = "(max-width: 40em) and (orientation: landscape)" > < source srcset = "smaller_portrait.jpg" media = "(max-width: 40em) and (orientation: portrait)" > < source srcset = "default_landscape.jpg" media = "(min-width: 40em) and (orientation: landscape)" > < source srcset = "default_portrait.jpg" media = "(min-width: 40em) and (orientation: portrait)" > < img srcset = "default_landscape.jpg" alt = "صورتي الافتراضية" > < / picture >

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

إذا كان الجهاز في اتجاه عمودي، فإنه يقوم بتنزيل الصورة التي تم اقتصاصها وفقًا لذلك: حجم أصغر للأجهزة الأصغر وصورة أكبر للأجهزة ذات الدقة الأعلى.

إذا كنت تريد توفير إصدارات مختلفة الدقة من الصور لشاشات ذات كثافة أعلى، فيمكنك القيام بذلك عن طريق إضافة أسماء ملفات إضافية إلى السمة srcset. على سبيل المثال، دعونا نلقي نظرة على مثال الكود الأول أعلاه مع إضافة دعم دقة الشاشة Retina 2x:

< picture > < source srcset = "smaller.jpg, smaller_retina.jpg 2x" media = "(max-width: 768px)" > < source srcset = > < img srcset = "default.jpg, default_retina.jpg 2x" alt = "صورتي الافتراضية" > < / picture >

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

باستخدام الصورة اليوم

حاليًا، يتم تطوير تطبيق أصلي للصورة لمتصفحات Chrome وFirefox وOpera. وفي المستقبل، سنرى على الأرجح دعمًا أوسع في المتصفحات الأخرى. ولكن، اعتبارًا من اليوم، من المتوقع فقط أن يكون الدعم.

في الوقت الحالي، ليس عليك الانتظار إذا كنت تريد البدء في استخدام الصورة الآن. كل ما عليك فعله هو استخدام Picturefill 2.0، وهو عبارة عن مادة متعددة يوفرها المطورون في Filament Group.

بمجرد تنزيل ملف imagefill.js في مشروعك، يمكن استخدامه ببساطة عن طريق تحميله في القسم الرئيسي بموقعك:

يوجد أيضًا خيار تحميل البرنامج النصي بشكل غير متزامن لتحقيق كفاءة أكبر، وهو ما يمكنك القراءة عنه في وثائق Picturefill. بالإضافة إلى تحميل هذا البرنامج النصي، سيعمل عنصر الصورة كما وصفته، مع قيود بسيطة. ]-->< source srcset = "smaller.jpg" media = "(max-width: 768px)" > < source srcset = "default.jpg" > < ! -- [ if IE 9 ] > < / video > < ! [ endif ] -- > < img srcset = "default.jpg" alt = "صورتي الافتراضية" > < / picture >

أندرويد 2.3

تمامًا مثل IE9، لا يرى Android 2.3 عناصر المصدر داخل علامات الصور. ومع ذلك، فإنه يتعرف على سمة srcset عندما يتم تعيينها لعلامة img عادية. تأكد من تضمين عنصر img احتياطي مع اسم الملف الافتراضي في سمة srcset لنظام Android 2.3 أو أي متصفح آخر به مشكلة مماثلة.

يتطلب جافا سكريبت ودعم استعلام الوسائط الأصلية

وبما أن هذا الحل يتم تنفيذه في JavaScript، فإنه يتطلب JavaScript للعمل بشكل صحيح في المتصفح. لا يوفر Picturefill 2.0 حلولاً لـ "no-js" لأنه بخلاف ذلك، ستظهر الكثير من الصور على الصفحات عند تنفيذ الدعم الأصلي. ومع ذلك، يمكنك استخدام Picturefill 1.2 إذا كانت ميزة "no-js" مهمة بالنسبة لك.

الشرط التالي لـ Picturefill هو الدعم الأصلي لاستعلامات الوسائط حتى تعمل الاستعلامات في سمة الوسائط. تدعم جميع المتصفحات الحديثة استعلامات الوسائط، في حين أن متصفح IE8 والإصدارات الأقدم هو المتصفح الوحيد الذي لا يدعم ذلك، مع وجود قاعدة مستخدمين متبقية صغيرة.

طلبات HTTP الإضافية ممكنة

بالنسبة للمتصفحات التي تدعم srcset الأصلي ولكنها لا تدعم الصورة، فمن الممكن أن يتم طلب اسم ملف معين في عنصر img الاحتياطي قبل تحديد صورة أكثر ملاءمة في عنصر img. هذه المشكلة مؤقتة وسيتم حلها عند تطبيق دعم الصورة الأصلية.

تعد الصور أحد أصعب جوانب تصميم الويب سريع الاستجابة. سننظر اليوم في كيفية استخدام العنصر الذي يمثل حلاً لمشكلة الصور المستجيبة الآن.

أولا عن المشكلة

لقد ولت أيام تصميم البكسل المثالي وثابت العرض. الآن في عصر الشاشات العريضة وتلفزيون الإنترنت والأجهزة اللوحية والهواتف الذكية بمختلف أحجامها، يجب أن تتناسب تصميماتنا مع عرض أي جهاز يتراوح من 320 بكسل إلى 7680 بكسل محتمل.

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

اذا ماذا يجب ان نفعل؟

الحل المشترك الحالي

عادة، ستجد هذا الرمز على أي موقع ويب ذو تصميم سريع الاستجابة:

Img (الحد الأقصى للعرض: 100%؛ الارتفاع: تلقائي؛)

هنا يتم استخدام الحد الأقصى للعرض: 100%؛ للتأكد من أن الصورة لا تمتد أبدًا إلى ما هو أبعد من عرض الحاوية الأصلية. إذا تقلصت الحاوية الأصلية إلى عرض أصغر من عرض الصورة، فإن الأخيرة تنكمش مع الحاوية. ضبط الارتفاع: تلقائي؛ اللازمة للحفاظ على النسب.

صورة "سائلة" واحدة لجميع المناسبات

يتم حل المشكلة بطريقة واحدة فقط، مما يسمح لنا بإظهار نفس الصورة لجميع الحالات. لكن هذا لا يمنحنا الفرصة للتثبيت مختلفصور لحالات مختلفة.

الحل الجديد:

هذا عنصر جديد يشكل جزءًا من HTML5.

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

سيسمح لك هذا بتحميل صور مختلفة اعتمادًا على:

• نتائج تعبيرات الوسائط، مثل الارتفاع أو العرض أو اتجاه إطار العرض
• كثافات البكسل

وهذا بدوره يعني أنه يمكنك:

• قم بتحميل ملفات الصور ذات الحجم المناسب باستخدام النطاق الترددي بكفاءة.
• قم بتحميل صور موجهة بشكل مختلف بنسب مختلفة لاستيعاب تغييرات التخطيط بعروض مختلفة.
• قم بتحميل صور عالية الدقة لشاشات ذات كثافة بكسل أعلى.

استخدام صور مختلفة حسب الظروف كيف يعمل؟

الخطوات الأساسية عند العمل مع

إنشاء علامات الفتح والإغلاق.

في الداخل، قم بإنشاء عنصر لكل تعبير تريد معالجته.

أضف سمة وسائط تحتوي على تعبيرات لأشياء مثل ارتفاع وعرض إطار العرض والاتجاه وما إلى ذلك.

أضف سمة srcset بالاسم المناسب لملف الصورة المراد تحميله.

أضف أسماء ملفات إضافية إلى سمة srcset إذا كنت بحاجة إلى دعم كثافات بكسل مختلفة، مثل شاشات Retina.

إضافة عنصر احتياطي .

فيما يلي مثال بسيط، في الحالة التي يكون فيها عرض المنطقة المرئية أقل من 768 بكسل، يتم تحميل صورة أصغر:

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

يمكن استخدام عمليات التحقق هذه، على سبيل المثال، لتحميل نسخة أفقية (أفقية) أو عمودية (عمودية) من الصورة اعتمادًا على اتجاه الجهاز، ويمكنك التحقق من الأبعاد في هذه التعبيرات في نفس الوقت. على سبيل المثال:

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

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

إذا كنت تريد عرض الصور بدقة مختلفة لشاشات ذات كثافة بكسل أعلى، فيمكنك القيام بذلك عن طريق تحديد أسماء ملفات إضافية في سمة srcset. لنأخذ مثالاً على الجزء الأول من عملية إضافة التعليمات البرمجية لشاشات Retina 2x:

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

استخدم اليوم

في الوقت الحالي، يتم تطبيق الدعم الأصلي في Chrome وFirefox وOpera. ومن المحتمل أن نرى في المستقبل دعمًا واسع النطاق في المتصفحات الأخرى. ولكن لا يزال يتعين علينا أن نعيش حتى هذه اللحظة.

في هذه الأثناء، ليس عليك الانتظار إذا كنت تريد استخدامه الآن. فقط استخدم Picturefill 2.0؛ polyfill من الأشخاص الأذكياء في Filament Group.

بعد تنزيل ملف imagefill.js في مشروعك، ما عليك سوى تضمينه في الرأس:

يوجد أيضًا خيار لتحميل البرنامج النصي بشكل غير متزامن، والذي يمكنك القراءة عنه في وثائق Picturefill.

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

قيود Picturefill IE9

يعمل Picturefill بشكل جيد مع إصدارات مختلفة من IE، إلا أن IE9 لا يدعم العناصر المستخدمة داخليًا. للتغلب على ذلك، قم بتغليف عناصر المصدر في علامات باستخدام التعليقات الشرطية؛ وهذا سيجعلها مرئية لـ IE9، على سبيل المثال:

أندرويد 2.3

مثل IE9، لا يعرض Android 2.3 العناصر الموجودة بداخله، ومع ذلك، فإنه يفهم سمة srcset عند استخدامها بشكل عادي العلامات. تأكد من تضمين نسخة احتياطية دائمًا باستخدام اسم الملف الافتراضي في سمة srcset لنظام Android 2.3 والمتصفحات الأخرى التي قد تواجه نفس المشكلة.

يتطلب جافا سكريبت ودعم استعلام الوسائط الأصلي

وبناءً على ذلك، يلزم تفعيل JavaScript في المتصفح. لا يوفر Picturefill 2.0 حلاً "no-js"، لأنه إذا تم ذلك، فعند قيام المتصفح بتقديم الدعم الأصلي، سيتم بالفعل عرض العديد من الصور. ومع ذلك، يمكنك استخدام Picturefill 1.2 إذا كان خيار "no-js" إلزاميًا بالنسبة لك.

هناك متطلبات أخرى لـ Picturefill وهي دعم استعلام الوسائط الأصلي للسماح بمعالجة التعبيرات الموجودة في سمة الوسائط. تدعم جميع المتصفحات الحديثة تعبيرات الوسائط، فقط IE8 وما دونه لا يتمتع بدعمه، وهو ما يتوافق مع جزء صغير فقط من المستخدمين.

طلبات HTTP الإضافية ممكنة

من الممكن أن يكون ذلك في المتصفحات التي تحتوي على دعم أصلي لـ srcset ولكن ليس لديها حتى الآن دعم لذلك المحدد في العنصر الاحتياطي قد يتم طلب الملف قبل تحديد الخيار المناسب من ملف .

هذه مشكلة مؤقتة فقط، وسوف تختفي بمجرد نشر الدعم المدمج

• اقرأ المزيد عن Picturefill 2.0 وقم بتنزيله لمشروعك من هذه الصفحة.
• اطلع على تفاصيل العنصر الكاملة على موقع responsiveimages.org.

حاول استخدامه في مشروعك اليوم!

• لم يتم العثور على وصف للعنصر "yml_catalog". قد يتم تحديد العنصر الجذر بشكل غير صحيح.

يبدو أن الخطأ يرجع إلى حقيقة أنه لم يتم إنشاء XML على الإطلاق، أو أنك قدمت Yandex برابط غير صحيح إلى YML. للعثور على سبب الخطأ، افتح الرابط إلى YML الخاص بك في المتصفح.

• خطأ فادح: خطأ في تحليل XML: خطأ في تحليل موجز XML: علامة غير معروفة: علامة XML "b" (سلسلة...

حدث خطأ ما أثناء عملية إنشاء YML. ألقى PHP رسالة خطأ، وهو يفعل ذلك في العلامة "b". افتح كود مصدر YML، ومن خلال رقم السطر يمكنك بسهولة العثور على نص خطأ PHP. إذا كنت لا تعرف ماذا يعني ذلك، ابحث في جوجل. أنا متأكد من أنك ستجد توصيات لإزالة هذا الخطأ.

• عنصر الصورة المطلوب مفقود

وفقًا لقواعد Yandex.Market، يجب أن يحتوي المنتج المصدر على صورة واحدة على الأقل. لا يتم تصدير المنتجات بدون صور. تأكد من وجود رقم أكبر من الصفر في إعدادات الوحدة في حقل "عدد صور المنتج". وتأكد من أن المنتجات الموجودة في قاعدة بيانات المتجر تحتوي على صور.

• خطأ في مواصفات XML. اجعل قائمة الأسعار الخاصة بك متوافقة مع المتطلبات الفنية للتنسيق المحدد...

سبب الخطأ هو وجود علامات غريبة في تصدير YML. يحدث هذا إذا قمت بتصدير شيء ما إلى علامة الكلمات الرئيسية. ياندكس لا يحتاج إلى هذه العلامة. حدد في إعدادات الوحدة النمطية "خذ علامة الكلمات الرئيسية من الحقل" = "لا تقم بإلغاء التحميل"

• لا توجد معلمة العروض المطلوبة

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

الأخطاء التي تظهر في المتصفح

• عند فتح YML في المتصفح، يكون الخطأ 500 أو 502 "بوابة سيئة"، أو مجرد شاشة بيضاء.

اكتمل البرنامج النصي الذي يقوم بإنشاء YML مع حدوث خطأ. إعدادات موقعك بحيث لا تظهر الأخطاء. تحتاج إلى تمكين عرض الخطأ. لن يكون تمكين الأخطاء في إعدادات المتجر في مسؤول OpenCart كافيًا على الأرجح. يجب تمكين عرض الأخطاء في ملفات .htaccess وphp.ini. ولكن هذا قد لا يكون كافيا. قد يتم تكوين استضافة الموقع بطريقة لا تؤثر فيها هذه الملفات على مخرجات الخطأ. أفضل ما يمكنك فعله هو الاتصال بالدعم الفني للاستضافة.

• خطأ في تحليل XML: لم يتم العثور على العنصر الجذر

اكتمل البرنامج النصي الذي يقوم بإنشاء YML مع حدوث خطأ. في هذه الحالة، لم يتم تشكيل YML بالكامل - لا توجد علامات إغلاق. ألق نظرة على كود مصدر YML. إذا كانت هناك رسالة خطأ في النهاية، فابحث عن نص الخطأ في Yandex أو Google. إذا لم تكن هناك رسالة خطأ، راجع الفقرة السابقة.

• خطأ "تم تجاوز الحد الأقصى لوقت التنفيذ وهو 30 ثانية"

بشكل افتراضي، يتم منح البرنامج النصي PHP 30 ثانية للتنفيذ. إذا لم يقم البرنامج النصي بإنشاء YML خلال 30 ثانية، فسيتم إنهاء البرنامج النصي قسرًا. وبطبيعة الحال، لم يتم تشكيل YML، أو لم يتم تشكيلها بالكامل.
والحقيقة هي أن تصدير قاعدة السلع بأكملها هي عملية كثيفة الاستخدام للموارد. يستغرق تغيير حجم الصور في Yandex وقتًا طويلاً بشكل خاص، لأن Yandex يقبل الصور التي لا يقل حجمها عن 600 × 600 بكسل. لحسن الحظ، يقوم OpenCart بتخزين الصور ذات الحجم الكبير في ذاكرة التخزين المؤقت للصور. عند التصدير مرة أخرى، سيتم التقاط الصور بسرعة من ذاكرة التخزين المؤقت. حتى يتم تكوين ذاكرة التخزين المؤقت للصورة بشكل كامل، قد يستغرق البرنامج النصي لتصدير YML وقتًا طويلاً حتى يكتمل. حاول تشغيل البرنامج النصي عدة مرات، وسيتم إنشاء ذاكرة تخزين مؤقت، وسيعمل البرنامج النصي بشكل أسرع، ضمن الحد الزمني.
إذا لم يساعد ذلك، فإن وقت إنشاء YML لا يزال طويلاً (نظرًا لحقيقة أن لديك الكثير من المنتجات)، فيمكنك محاولة زيادة المعلمة max_execution_time في ملف إعدادات PHP php.ini.
إذا لم يكن هذا كافيا (الاستضافة الخاصة بك ضعيفة إلى حد ما بالنسبة لمتجر عبر الإنترنت مع قاعدة المنتجات هذه)، فيمكنك محاولة إنشاء تصدير YML عن طريق تشغيل البرنامج النصي عبر php-cli.

أسئلة محتوى YML
• لا يتم تصدير جميع البضائع.

قد يكون هناك عدة أسباب لعدم وجود جميع المنتجات في تصدير YML. السبب الشائع هو إعدادات الوحدة ومحتويات قاعدة بيانات المنتج.

لم يتم تحديد الشركة المصنعة للمنتجات، ولكن في علامة تبويب الإعدادات بوحدة "ما سيتم تصديره"، يتم تحديد الشركات المصنعة.

لا تحتوي المنتجات على فئات رئيسية، ولكن تم تحديد خانة الاختيار "المنتجات لها فئات رئيسية" في علامة التبويب "عام".

المنتج موجود في القائمة السوداء أو ليس في القائمة البيضاء، والتي تم تحديدها في علامة التبويب "ما سيتم تصديره" في إعدادات الوحدة.

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

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

لا يتم تضمين كافة الفئات في الصادرات.

في OpenCart، يمكن عرض منتج واحد في عدة فئات، ولكن في تنسيق YML، يمكن أن ينتمي المنتج إلى فئة واحدة فقط. تقوم وحدة التصدير بتعيين المنتج إلى الفئة الأولى المتوفرة. ولذلك قد يتبين أنه لا توجد سلع في بعض الفئات، وهذه الفئات لن تكون موجودة في الصادرات، رغم أن السلع ستكون موجودة، وإن كان في فئات أخرى.
يحتوي ocStore على فئات رئيسية، ويمكنك فقط ربط المنتجات بالفئات الرئيسية. للقيام بذلك، في إعدادات الوحدة، حدد المربع "المنتجات لها فئات رئيسية". في هذه الحالة، سوف تتلقى تصنيفًا أكثر تفصيلاً للسلع في تصدير YML، ولكن لن يتم تصدير البضائع التي لم يتم تحديد الفئة الرئيسية لها على الإطلاق.

كيف تصنع...؟

• كيف لا يتم تصدير منتج بكمية صفر؟

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

التطوير باللغات: PHP، JavaScript، Node.js. قواعد البيانات: MySQL، PostgreSQL، MongoDB.
تحسين نظام إدارة المحتوى: OpenCart، PrestaShop، Wordpress. التكامل مع: أنظمة الدفع، فكونتاكتي، الفيسبوك، ياندكس.