alpine html bootstrap
Initial Release
بالنسبة إلى المتجر المركز على الإنترنت ، يعد Alpine قالبًا سريع الاستجابة للتجارة الإلكترونية مع تأثير "Ken Burns" على عرض شرائح الصفحة الرئيسية ، لافتات الزاوية ، وراية نقطة ساخنة مخصصة مع بطاقات منتجات popout. تمنحك صور المنتجات الكبيرة على صفحات الفئات مساحة واسعة لعرض المنتجات مع توفير التنقل السهل في وقت واحد في جميع أنحاء الموقع. إنها نقطة البداية المثالية لأي موقع ويب للبيع بالتجزئة للأزياء ، والتصميم النظيف والحد الأدنى في القالب يعني أنه من السهل تعديله وغير مؤلم للتكامل مع تطبيق التجارة الإلكترونية المخصصة. وقبل كل شيء ، إنه مجاني.
عرض العرض التوضيحي | قم بتنزيل Zip
إذا كنت لا تنوي العمل مع رمز مصدر القالب (وهذا يعني أنك لن تقوم بتجميعه أو تشغيل خادم WebPack Dev) ، فلن تحتاج إلى تثبيت أي شيء. يمكنك ببساطة الانتقال إلى مجلد DIST والبدء في تحرير الملفات.
سيقوم معظم المطورين بتحرير التعليمات البرمجية المصدر وسيقومون أيضًا بتشغيل WebPack لإعادة ترجمة ملفات القالب. إذا كان هذا هو الحال ، فتأكد من تثبيت Node.js. يمكنك تنزيله من هنا
git clone https://github.com/PixelRocket-Shop/alpine-html-bootstrap.gitnpm install في سطر الأوامر الخاص بك.npm start في بدء تشغيل WebPack DevServer.npm run build يتكون القالب من 5 صفحات:
للحفاظ على تكرار التعليمات البرمجية إلى الحد الأدنى ، استخدمنا المقابض. نستخدم أيضًا مكونًا إضافيًا لمقود بيانات JSON - وهذا يتيح لنا استخدام الحلقات وإخراج كتلة رمز HTML واحدة بدلاً من تكرار نفس HTML.
عنوان URL التجريبي
يرجى ملاحظة أن هذا قالب HTML فقط. لا يتصل بقاعدة بيانات ، ولن يعمل تلقائيًا في نظام إدارة المحتوى (WordPress وما إلى ذلك). ستحتاج إلى دمج التعليمات البرمجية الخاصة بنا في تطبيقك.
؟ dist - نسخة تم إنشاؤها من القالب. اذهب إلى هنا إذا كنت لا ترغب في العمل مع رمز مصدر القالب. ولكن كن حذرًا: إذا قمت بتخصيص أي شيء في هذا المجلد مباشرة ، ثم إعادة ترجمة القالب باستخدام WebPack ، إلا إذا قمت بنقل مجلد DIST خارج القالب ، فسيتم تجاوز التغييرات الخاصة بك.
؟ node_modules - دليل حيث يقوم NPM بتثبيت التبعات. لن ترى هذا المجلد حتى تكمل تثبيت القالب. لا تحتاج إلى إنشاء هذا المجلد.
؟ SRC - رمز مصدر القالب. اذهب هنا لتخصيص القالب الخاص بك.
؟ SRC/Assets - أصول القالب مثل CSS ، JS ، الصور إلخ.
؟ SRC/DATA - قالب ملفات بيانات JSON. نستخدم ملفات JSON هذه لجعل وظيفتك أسهل لإدراج المحتوى في القالب.
؟ SRC/HTML - صفحات القالب. انتقل إلى هنا لتحرير الصفحات الحالية أو إضافة صفحات جديدة.
؟ SRC/partials - المقودات الجزئية القوالب.
المقاود هو محرك قالب يسمح لنا بالحفاظ على رمز مصدر القالب الخاص بنا على أنه منظم ونظيف قدر الإمكان. إنه يقلل من تكرار الكود ومن خلال استخدام وظائف المساعد ، يسمح لمطوري القالب بإخراج كميات كبيرة من البيانات بسرعة كبيرة. يمكنك قراءة المزيد عنها هنا.
نستخدم المقابض لسببين رئيسيين: أولاً ، يتيح لنا استخدام Partials المقابض للرجوع إلى نفس الملف في ملفات HTML متعددة ووسائل أنه يتعين عليك فقط تحرير الكود من مصدر واحد. إذا كنت معتادًا على العمل مع React أو Vue ، فسيكون هذا هو نفسه الرجوع إلى مكون. ثانياً ، فإن استخدام بيانات JSON لبيانات الكتالوج الوهمية لدينا يحافظ على نظافة رمز القالب الخاص بنا. يمكننا بسهولة إخراج 10 منتجات وهمية على صفحة القائمة الخاصة بنا عن طريق إخراج حلقة المقاود الأساسية.
افتح الملف التالي في قالبنا: SRC/HTML/INDEX.HTML.
حول السطر 46 سترى الرمز التالي:
{{> swiper/swiper-hero-slideshow }}
هذا مقود جزئي. يخبر هذا الرمز المقاود للنظر داخل مجلد يسمى Swiper (الموجود في مجلد Partials) ثم للعثور على ملف يسمى Swiper-Hero-Slideshow وأدخله في ملف INDEX.HTML عند تجميعه.
هناك عدد قليل من الملاحظات المهمة حول استخدامنا للجزأات المقودات:
دعونا نلقي نظرة على كيفية استخدام المقاود للحفاظ على قاعدة الكود لدينا نظيفة. افتح صفحة الفئة: src/html/catevory.html.
حول السطر 56 ، ستجد هذا الرمز:
{{#if (config category-products)}}
{{#each (limit category-products.entries 4)}}
<div class="col-12 col-sm-6 col-md-4">
{{> listing-cards/listing-card this }}
</div>
{{/each}}
{{/if}}
وهذه هي حلقتنا لصفحة الفئة. نحن نمرر بيانات JSON إلى حلقة المقاود الخاصة بنا ، ثم داخل الحلقة ، نشير إلى مقود جزئي ونمر به البيانات لكل عنصر حلقة:
{{> listing-cards/listing-card this }}
يأتي المكون الإضافي لـ WebPack Handlebars الذي نستخدمه بأداة فائدة للغاية تتيح لنا تمرير ملفات JSON كبيانات قالب.
يرجى الانتقال إلى: SRC/البيانات. هنا هو المكان الذي توجد فيه ملفات بيانات القالب JSON. يمكنك تعديل أو إزالة أو إضافة خاص بك إلى هذا المجلد.
مرة أخرى ، إذا أشرنا إلى حلقة صفحة الفئة الخاصة بنا:
{{#if (config category-products)}}
{{#each (limit category-products.entries 4)}}
<div class="col-12 col-sm-6 col-md-4">
{{> listing-cards/listing-card this }}
</div>
{{/each}}
{{/if}}
الجزء المهم هنا فيما يتعلق ببيانات القالب هو منتجات الفئة. ما يعنيه هذا هو أنه داخل مجلد البيانات الخاص بنا ، ستجد ملف JSON يسمى "منتجات الفئة". يحتوي ملف الفئة-products.json على "مفتاح" يسمى "إدخالات".
يتم الاحتفاظ بجميع ملفات CSS/SASS الخاصة بالمصدر داخل مجلد أصول القالب. انتقل إلى SRC/Assets/SCSS. افتح theme.scss مع المحرر الخاص بك.
هذه هي نقطة الدخول الرئيسية لجميع ملفات SASS/CSS الأخرى.
لإنشاء صفحة جديدة ، انتقل في محرر التعليمات البرمجية إلى: SRC/HTML. لتسهيل الحصول على HTML الصحيح في المكان ، استنساخ صفحة موجودة. أعد تسمية الملف الذي تم إنشاؤه حديثًا إلى أي عنوان URL الذي تحتاجه. وهذا كل شيء. أنت الآن حر في فتح الصفحة الجديدة باستخدام محرر الرمز الخاص بك ، وقم بإجراء تغييراتك ، ثم حفظ الملف. Quit Webpack DevServer وأعد تشغيله حتى تظهر الصفحة.
يحتوي Bootstrap بالفعل على موقع توثيق شامل من شأنه أن يرشدك في إعداد واستخدام جميع ميزات bootstrap الافتراضية. تم دمج Bootstrap 5 تمامًا مع رمز مصدر القالب الخاص بنا. يرجى الرجوع إلى موقع DOC الخاص بـ Bootstrap أولاً للحصول على أي ميزات الافتراضية
bootstrap
AOS.JS
غير مصممة
Pexels
pixabay
MediumZoom.JS
nouislider.js
SimpleBar.JS
swiper.js
يمكنك العثور على موقعنا هنا أو يمكنك مراسلتي عبر البريد الإلكتروني على [email protected]
