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

منصة التجارة الإلكترونية هذه ديناميكية للغاية ومليئة بالصور. مليء بالصور لدرجة أن معظمهم يقوم بتنزيل حوالي 5 إلى 10 وحتى 20 ميغا بايت من الصور في كل صفحة.

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

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

تغيير حجم الصورة لـ PrestaShop

إذا كنت لا تعرف ما هو تغيير حجم صورة Cloudflare ، فلن أكرر مرة أخرى هنا لإنشاء محتوى مكرر. من فضلك هنا حول هذا الموضوع على Official Post .

ما فعلته هنا هو أخذ العامل الذي أنشأته لـ WordPress وعدّلته لـ PrestaShop .

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

التخطيط وخلق العامل

بادئ ذي بدء ، لدى PrestaShop طريقة غريبة للغاية للتعامل مع عناوين URL للصورة. إذا انتقلت إلى https://demo.prestashop.com/#/en/front ، يمكنك مشاهدة المظهر الكلاسيكي.

عند فحص مصدر الصفحة ، بالنظر إلى شريط التمرير على سبيل المثال ، يمكننا رؤية ما يلي:

1<img src="https://ready-low.demo.prestashop.com/modules/ps_imageslider/images/sample-3.jpg" alt="sample-3" loading="lazy" width="1110" height="340">

حسنًا ، هذا ليس سيئًا ، يمكننا بسهولة مطابقة عنوان URL هذا وإعادة كتابته. ومع ذلك ، أثناء قيامنا بالتمرير أدناه إلى المنتجات ، يمكننا رؤية ما يلي:

1<img src="https://ready-low.demo.prestashop.com/1-home_default/hummingbird-printed-t-shirt.jpg" alt="Hummingbird printed t-shirt" loading="lazy" 
2	data-full-size-image-url="https://ready-low.demo.prestashop.com/1-large_default/hummingbird-printed-t-shirt.jpg" width="250" height="250">
3	
4<img src="https://ready-low.demo.prestashop.com/21-home_default/brown-bear-printed-sweater.jpg" alt="Brown bear printed sweater" loading="lazy" 
5	data-full-size-image-url="https://ready-low.demo.prestashop.com/21-large_default/brown-bear-printed-sweater.jpg" width="250" height="250">
6
7<img src="https://ready-low.demo.prestashop.com/3-home_default/the-best-is-yet-to-come-framed-poster.jpg" alt="The best is yet to come' Framed poster" loading="lazy" 
8	data-full-size-image-url="https://ready-low.demo.prestashop.com/3-large_default/the-best-is-yet-to-come-framed-poster.jpg" width="250" height="250">

اوك ، هذا مؤلم. ما هي المشكلة التي قد تسأل؟ المشكلة هي أن الصور ليست داخل “مجلد” ، وبدلاً من ذلك تتم إعادة كتابتها ببساطة عبر إعادة كتابة Apache.

إذا نظرت عن كثب إلى عنوان URL للصور ، يمكنك رؤية المشكلة: prestashop.com / 1-home_default ، prestashop.com / 21-home_default ، prestashop.com / 3-home_default وهكذا.

أكد فحص .htaccess هذا:

 1# Images
 2RewriteRule ^([0-9])(\-[_a-zA-Z0-9-]*)?(-[0-9]+)?/.+\.jpg$ %{ENV:REWRITEBASE}img/p/$1/$1$2$3.jpg [L]
 3RewriteRule ^([0-9])([0-9])(\-[_a-zA-Z0-9-]*)?(-[0-9]+)?/.+\.jpg$ %{ENV:REWRITEBASE}img/p/$1/$2/$1$2$3$4.jpg [L]
 4RewriteRule ^([0-9])([0-9])([0-9])(\-[_a-zA-Z0-9-]*)?(-[0-9]+)?/.+\.jpg$ %{ENV:REWRITEBASE}img/p/$1/$2/$3/$1$2$3$4$5.jpg [L]
 5RewriteRule ^([0-9])([0-9])([0-9])([0-9])(\-[_a-zA-Z0-9-]*)?(-[0-9]+)?/.+\.jpg$ %{ENV:REWRITEBASE}img/p/$1/$2/$3/$4/$1$2$3$4$5$6.jpg [L]
 6RewriteRule ^([0-9])([0-9])([0-9])([0-9])([0-9])(\-[_a-zA-Z0-9-]*)?(-[0-9]+)?/.+\.jpg$ %{ENV:REWRITEBASE}img/p/$1/$2/$3/$4/$5/$1$2$3$4$5$6$7.jpg [L]
 7RewriteRule ^([0-9])([0-9])([0-9])([0-9])([0-9])([0-9])(\-[_a-zA-Z0-9-]*)?(-[0-9]+)?/.+\.jpg$ %{ENV:REWRITEBASE}img/p/$1/$2/$3/$4/$5/$6/$1$2$3$4$5$6$7$8.jpg [L]
 8RewriteRule ^([0-9])([0-9])([0-9])([0-9])([0-9])([0-9])([0-9])(\-[_a-zA-Z0-9-]*)?(-[0-9]+)?/.+\.jpg$ %{ENV:REWRITEBASE}img/p/$1/$2/$3/$4/$5/$6/$7/$1$2$3$4$5$6$7$8$9.jpg [L]
 9RewriteRule ^([0-9])([0-9])([0-9])([0-9])([0-9])([0-9])([0-9])([0-9])(\-[_a-zA-Z0-9-]*)?(-[0-9]+)?/.+\.jpg$ %{ENV:REWRITEBASE}img/p/$1/$2/$3/$4/$5/$6/$7/$8/$1$2$3$4$5$6$7$8$9$10.jpg [L]
10RewriteRule ^c/([0-9]+)(\-[\.*_a-zA-Z0-9-]*)(-[0-9]+)?/.+\.jpg$ %{ENV:REWRITEBASE}img/c/$1$2$3.jpg [L]
11RewriteRule ^c/([a-zA-Z_-]+)(-[0-9]+)?/.+\.jpg$ %{ENV:REWRITEBASE}img/c/$1$2.jpg [L]
12# AlphaImageLoader for IE and fancybox
13RewriteRule ^images_ie/?([^/]+)\.(jpe?g|png|gif)$ js/jquery/plugins/fancybox/images/$1.$2 [L]

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

على الرغم من النظر إلى موضوعات مختلفة في البرية ، فإن الأمر يزداد سوءًا. على سبيل المثال ، لنلق نظرة على Shopkart التي وجدتها في Monsterone المواضيع:

1<img src="https://demo4techies.com/prestashop/shopkart-lite/modules/ps_imageslider/images/8187e2cea6dcd5e1b98a1b1af132211cf94c9a8e_Slider-1.jpg" alt="">
2
3<img src="https://demo4techies.com/prestashop/shopkart-lite/1-home_default/casual-shoes-sneaker.jpg" alt="Casual Shoes Sneaker" 
4	data-full-size-image-url="https://demo4techies.com/prestashop/shopkart-lite/1-large_default/casual-shoes-sneaker.jpg">
5
6<img src="https://demo4techies.com/prestashop/shopkart-lite/6-home_default/square-sunglasses-black-frame.jpg" alt="Square Sunglasses Black Frame" 
7	data-full-size-image-url="https://demo4techies.com/prestashop/shopkart-lite/6-large_default/square-sunglasses-black-frame.jpg">
8
9<img src="https://demo4techies.com/prestashop/shopkart-lite/img/cms/testimonial-img-1.jpg" alt="testimonial1">

كما ترى ، الأمر أسوأ بكثير لأن السمات على ما يبدو تعمل على تغيير بنية عنوان URL الافتراضية للصورة من خلال تضمين اسم السمة بداخلها. لجعل الأمر أسوأ ، يشيرون أيضًا إلى مجلدات مثل / img / cms وما إلى ذلك.

بصراحة في هذه المرحلة ، كنت أرغب في الاستسلام لأنه بدا وكأنه صداع كبير لدعم هذا الأمر ، لكن شيئًا ما في ذهني الفاسد كان يقول لي “مستحيل”.

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

بعد عدة ساعات ، كنت في النقطة التي يدعم فيها عاملي:

  • سمة PrestaShop Classic
  • سمة PrestaShop ETS (أي)

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

إعادة كتابة المنتجات “عرض سريع”

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

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

سيعيد العامل كتابة جميع الصور التي تظهر في وضع “العرض السريع” بسرعة.

إزالة البرامج النصية الخبيثة

أثناء اللعب بموضوع “خدمات الاختبارات التربوية” ، لاحظت شيئًا غريبًا. كان ملف JavaScript ذو مظهر غريب جدًا يحاول التحميل عن بُعد.

لحسن الحظ ، كان عنوان URL للبرنامج النصي يعرض HTTP 404 (غير موجود) ، وللأسف لم أتمكن من رؤية ما يدور حوله. لذلك توجهت إلى أرشيف الويب ووجدت نسخة مخبأة .

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

سيقوم العامل بإزالة البرنامج النصي والحفاظ على أمان زوار موقعك.

استخدام عامل PrestaShop Image Resizing

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

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

 1// Edit the below as needed
 2// START EDIT -----------------------------------------------------
 3
 4// Set theme type
 5// 0 = Classic
 6// 1 = All themes by ETS (https://prestahero.com/brand/2-ets)
 7const PS_THEME = 0;
 8
 9// Speed: Set the image quality
10const IMAGE_QUALITY = 90;
11
12// Speed: Append lazy loading to images
13const IMAGE_LAZY_LOAD = true;
14
15// END EDIT -------------------------------------------------------
16// DO NOT EDIT BELOW THIS LINE.

إنها جميلة لا تحتاج إلى شرح. إذا كنت تستخدم سمة PrestaShop Classic ، فاترك “PS_THEME” على 0 ، وإلا اضبط على 1. يمكنك أيضًا تخصيص جودة الصورة ، لكنني أوصي بترك القيمة الافتراضية.

نشر العامل

ما عليك سوى نشر العامل على موقع الويب الخاص بك ، باستخدام مثال المسار: `` examplestore.com / * ’’ واستمتع بالمزايا.

يمكنك العثور على رمز العامل على my Github كالمعتاد.

إذا كنت لا تعرف كيفية القيام بذلك ، فيرجى الرجوع إلى مقالتي الأخرى الخاصة بـ WordPress والتي تحتوي على إرشادات.

جودة الصورة

عند استخدام تغيير حجم الصورة ، فأنت تريد عادةً توجيه الصورة الأصلية لـ Cloudflare لتغيير حجمها ، لأن PrestaShop يقوم بتغيير حجم الصور بطريقة غريبة والجودة مجرد هراء.

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

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

يدعم

يعد تكييف العامل مع مواضيع مختلفة مهمة تستغرق وقتًا طويلاً. قد أضيف دعمًا لمزيد من السمات إذا كان لدي وقت فراغ ولكنه ليس مضمونًا.

إذا كان لديك سمة PrestaShop مدفوعة أو مخصصة وتريد مني تكييف العامل مع متجرك ، فأنا متاح للدعم التجاري.

يرجى استخدام صفحة استشارة وحجز محادثة سريعة لمناقشة احتياجاتك.

رخصة

كما هو مذكور في المقالة السابقة لـ WordPress ، فإن نموذج الترخيص الجديد المستخدم هو Apache License 2.0 ، لذا يرجى عدم إعادة بيع عملي.

هذا لا يؤثر عليك من استخدامه تجاريًا أو شخصيًا.

روابط مفيدة

آمل أن يزدهر متجرك بهذه الإضافة.

اسمحوا لي أن أعرف أفكارك أدناه.