إضافة تنسيقات مخصصة إلى المتجر Custom Codes

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

1. قسم الترويسة(Header): يمكنك هذا الاعداد من إضافة ترويسة للصفحة الرئيسية في المتجر مع إمكانية تعديل النصوص الافتراضية التي تأخذ من عنوان المتجر والوصف الخاص به.

<header class="header-hero position-relative">
    <div style="background:url('#StoreCover');
                     background-position: center center;
                     background-size: cover;position:
                     absolute;top: 0;height: 100%;width: 100%;">
    </div>
    <h1>#StoreTitle</h1>
    <h3>#StoreDescription</h3>
    <a href="/s/#StoreName/Products" class="btn hvr-glow hvr-icon-push">
        <i class="hvr-icon" data-feather="shopping-bag">
        </i>
        <span class='ar-only'> تسوق الآن
        </span>
        <span class='en-only'> Shop Now
        </span>
    </a>
</header>

يمكنك أيضا إضافة أقسام إضافية أسفل الترويسة لأصناف محددة او اقسام مميزة عن طريق الكود التالي:

<div class="container">
    <div class="row-circle">

    <a href="#">
  <img src="https://sawahhost.com/wp-content/uploads/2020/11/26-12.jpg"   alt="Alternate Text" />
            <h6>
                ورود طبيعية
            </h6>
        </a>
        <a href="#">
            <img src="https://sowarward.com/wp-content/uploads/2018/03/jasmine-flower-3-623x831.jpg"
                alt="Alternate Text" />
            <h6>ياسمين
            </h6>
        </a>
        <a href="#">
           <img src="https://upload.3dlat.com/uploads/3dlat.net_29_17_9652_02cca35ea3445.jpg" alt="Alternate Text" />
            <h6>
                ياسمين
                أصفر
            </h6>
        </a>
    </div>
  </div>
</div>

يمكنك أيضا تغير خلفية القسم المضاف وجعله من دون صور (يأخذ اللون المختار من اعداد المتجر) عن طريق الكود التالي:

<div class="container">
    <div class="row-circle">
        <a href="#">
            <div class="div-circle">
                <div class="div-circle-div">
                    <h6>
                        كعك
                    </h6>
                </div>
            </div>
        </a>
        <a href="#">
            <div class="div-circle">
                <div class="div-circle-div">
                    <h6>
                        شموع عطرية
                    </h6>
                </div>
            </div>
        </a>
        <a href="#">
            <div class="div-circle">
                <div class="div-circle-div">
                    <h6>
                        أوعية للزهور
                    </h6>
                </div>
            </div>
        </a>
        <a href="#">
            <div class="div-circle">
                <div class="div-circle-div">
                    <h6>
                        كروت معايدة
                    </h6>
                </div>
            </div>
        </a>
    </div>
</div>

أو تغير شكل القسم الى مربعات عن طريق الكود التالي:

<div class="container">
    <div class="row-rectangle">
        <a href="#">
            <div class="div-rectangle">
                <h6>
                    كعك
                </h6>
            </div>
        </a>
        <a href="#">
            <div class="div-rectangle">

                <h6>
                    شموع عطرية
                </h6>
            </div>
        </a>
        <a href="#">
            <div class="div-rectangle">
                <h6>
                    أوعية للزهور
                </h6>
            </div>
        </a>

        <a href="#">
            <div class="div-rectangle">
                <h6>
                    كروت معايدة
                </h6>
            </div>
        </a>
    </div>
</div>

1. قسم التذييل (Footer):يمكنك إضافة اقسام قبل منطقة التذييل كقسم حول المتجر او مواقع التواصل الاجتماعي وفي المثال مثال على قسم حول المتجر:

<section class="about-section HomeCustomFooter">
    <div class="container">
        <div class="row">
            <div class="col-12">
                <div class="card about-card">
                    <div class="row no-gutters">
                        <div class="col-12 col-md-6 col-lg-7">
                            <div class="card-body">
                       <h5 class="card-title">لسنا مجرد متجر … نحن نحب الزهور!</h5>
       <p class="card-text">
              هذا النص هو مثال لنص يمكن أن يستبدل في نفس المساحة، لقد تم توليد
     		هذا النص من مولد النص العربى، حيث يمكنك أن تولد مثل هذا النص أو العديد من النصوص
                    الأخرى إضافة إلى زيادة عدد الحروف التى يولدها التطبيق.
       </p>
       <p class="card-text">
           هذا النص هو مثال لنص يمكن أن يستبدل في نفس المساحة، لقد تم توليد
         هذا النص من مولد النص العربى، حيث يمكنك أن تولد مثل هذا النص أو العديد من النصوص
         الأخرى إضافة إلى زيادة عدد الحروف التى يولدها التطبيق.
        </p>
              <a href="#" class="btn btn-gradient">اعرف قصتنا الكاملة</a>
       </div>  </div>
          <div class="col-12 col-md-6 col-lg-5">
                <img src="/images/[email protected]" alt="" class="card-img">
          </div>
                    </div>
                </div>   </div>   </div>
    </div></section>

وفي المثال التالي طريقة إضافة قسم روابط مواقع التوصل الاجتماعي:

<section class="social-section HomeCustomFooter">
 <div class="container"> 
<div class="row align-items-center"> 
<div class="col-12 col-md-6"> 
<h6 class="sub-title">تابعنا في كل مكان</h6> 
<h4 class="main-title">عروض حصرية على متاجرنا في الشبكات الاجتماعية</h4> 
<a href="#" class="btn btn-block btn-social btn-instagram">تابعنا على إنستغرام</a> 
<a href="#" class="btn btn-block btn-social btn-facebook">تابعنا على فيسبوك</a> 
<a href="#" class="btn btn-block btn-social btn-twitter">تابعنا على تويتر</a> 
</div> <div class="col-12 col-md-6"> 
<img src="/images/[email protected]" class="img-fluid" alt="img-social"> 
</div> 
</div> 
</div> 
</section>

كما يمكنك إضافة قسم روابط مواقع التوصل الاجتماعي بدون صورة عن طريق
الكود التالي:

 

<section class="social-section HomeCustomFooter">
    <div class="container">
        <div class="text-center">
            <h6 class="sub-title">تابعنا في كل مكان</h6>
            <h4 class="main-title">عروض حصرية على متاجرنا في الشبكات الاجتماعية</h4>
            <a href="#" class="btn btn-block btn-social btn-instagram">تابعنا على إنستغرام</a>
            <a href="#" class="btn btn-block btn-social btn-facebook">تابعنا على فيسبوك</a>
            <a href="#" class="btn btn-block btn-social btn-twitter">تابعنا على تويتر</a>
            <a href="#" class="btn btn-block btn-social" style="background-color: #25D366;">
                <i class="fa fa-whatsapp fa-lg" aria-hidden="true"></i>
                تواصل معنا عبر الواتساب</a>
        </div>
    </div>
</section>

عروض حصرية

كما يمكنك اضافة قسم خاص بك مع عنوان بعد قسم التذييل (Footer) مثل قسم للمنتجات كما في الكود التالي:

<div class="container">
    <h2 class="Home-Newlabel">Title section </h2>
    <div class="row">
        <div class="col-lg-4 col-md-6 col-12 item-search hvr-float discount-div">
            <div class="div-gradient-background  animated zoomIn">
                <div class="card card-body flex-fill mx-auto product  d-flex">
                    <a href="https://gew.azurewebsites.net/s/ward1235/i25442-test">
                        <span class="start-span discount">
                            <img src="/images/discount.svg">
                            تخفيضات%
                        </span>
                        <img class="image-product img-fluid" src="https://testfatora.azurewebsites.net/Admin/Asset/stockNoAvatar.png" alt="Test">
                        <div class="name-card d-inline-block w-100">
                            <p class="div-name mb-0" dir="ltr">
                                Name
                            </p>
                            <div class="price-card">
                                <span class="bold-font">
                                    20 QAR
                                </span>
                            </div>
                        </div>
                    </a>
        <div class="row">
              <div class="col-12 text-center btn-order-now-div">
            <a href="https://gew.azurewebsites.net/s/ward1235/i25442-test" class="btn-gradient btn order-now rounded-pill  text-white pt-xs-1 pl-xl-5 pr-xl-5  pl-5 pr-5 hvr-glow hvr-icon-push">
                                <i data-feather="shopping-bag"></i>
                                الشراء الآن
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

مع إمكانية تعديل حالة المنتج بخيارين اما جديد او تخفيضات من خلال تبديل الكود التالي:

تخفيضات

<span class="start-span discount">
      <img src="/images/discount.svg">
           تخفيضات%
 </span>

جديد

<span class="start-span  new">
    <img src="/images/new.svg">
    جديد
</span>

ملاحظات عامة:

1. يمكنك إضافة كلاسات الى الأقسام المضافة للتحكم بالمسافات من اعلى القسم واسفله عن طريق استخدام الكلاسات  من mt-1 to mt-5
2. يمكنك التحكم بظهور المحتوى على حسب اختيار لغة المنتج وظهوره تلقائيا على حسب اللغة المختارة عن طريق استخدام الكلاس ar-only للظهور في اللغة العربية او en -only للظهور في اللغة الإنكليزية
3. عند إضافة الأقسام قبل منطقة التذييل يمكنك التحكم في إمكانية ظهور هذا القسم في الصفحة الرئيسية فقط عن طريق إضافة الكلاس HomeCustomFooter الى القسم
4. عند إضافة الأقسام قبل منطقة التذييل يمكنك التحكم في إمكانية ظهور هذا القسم في صفحة المنتج فقط عن طريق إضافة الكلاس ProductCustomFooter الى القسم
5. يوجد تابع مكتوب مسبقا يمكنك استخدمه لإرجاع نص على حسب لغة المتجر strLang يأخذ وسيطين النص العربي والإنكليزي يمكنك استخدمه مثلا كقيمة للعنوان القسم HomeProductTitle

strLang(“مرحبا” , “hi”)

إمكانية إضافة إعدادات إضافية عن طريق إضافة قيم محددة في ملف  Custom JS:

1. اختيار لون خلفية التذييل (Footer) اما dark أو light عن طريق الخاصية footer-style
2. التحكم بظهور عدد المنتجات في الصفحة الرئيسية حيث العدد الأعظمي هو 12 منتج مع المنتجات المميزة عن طريق الخاصية max-item-per-home
3. التحكم بعنوان قسم المنتجات في الصفحة الرئيسية وفي navbarعن طريق الخاصية products-value حيث إذا كانت هناك قيمة سيعرضها(“products-value“: ” الخدمات “)أما إذا كانت قيمة فارغة سيزيل العنوان(“products-value“: “”)أما إذا كانت الخاصية غير موجودة سيأخذ العنوان الافتراضي
4. يمكنك تغيير اللون الأساسي عن طريق الخاصية BrandColor يأخذ قيمة ب Hex  (#4A148C)
5. يمكنك تغير اسم الزر بصفحة المنتج من الشراء الآن الى أي اسم الذي تريده عن طريق الخاصية  cta-value :” اشترك الآن”
6. يمكنك الذهاب الى صفحة checkout مباشرة من دون الذهاب الى صفحة السلة عن طريق الخاصية    no-cart”: true”
7. يمكنك إضافة زر الشراء المباشر بحيث يظهر زر على المنتجات يمكنك من اضافة المنتج الى السلة بدون فتح المنتج عن طريق اضافة الخاصية "add-to-cart": true, 
8.  الشريط الإعلان يمكنك اضافته عن طريق الخاصية announcement كما في المثال التالي:

"announcement": `<div class="banner-div">
                        <img src="/images/icon-discount-colored.svg" alt="icon discount" />
                        <h5>تخفيضات نهاية الموسم - خصومات تصل إلى 70٪</h5>
                        <a class="btn btn-gradient hvr-glow" href="/s/ward1235/Products">
                          تسوق الآن!  </a>
                     </div>`,

مثال على جميع القيم التي ممكن استخدامها في ملف   Custom JS

{
    "cta-value": "الاشتراك الآن",
    "no-cart": true,
    "add-to-cart": true,
    "footer-style": "dark",
    "products-value": "الخدمات",    
    "max-item-per-home": 10,
    "HomeProductTitle": "جديدنا",
    "announcement": `<div class="banner-div">
        <img src="/images/icon-discount-colored.svg" alt="icon discount" />
        <h5>تخفيضات نهاية الموسم - خصومات تصل إلى 70٪</h5>
        <a class="btn btn-gradient hvr-glow" href="/s/ward1235/Products">
            تسوق الآن! </a>
    </div>`,
    "BrandColor": "#4A148C"
}

إمكانية إضافة تنسيقات خاصة عن طريق إضافة قيم محددة في ملف

Custom CSS:

مثال تغيير لون الخلفية:

#main {
    background: #000!important;
 }

قسم Tracking code header

يمكنك من إضافة سكريبت خاص بك وتصمينه تلقائيا بالمتجر

قسم Tracking code footer

يمكنك من إضافة سكريبت خاص بك وتصمينه تلقائيا بالمتجر وكتابة اكود جافا سكربت خاصة بك