آیا دليل موفقیت مدیر فروشگاه‌های معروف را می‌دانید؟

آیا می‌دانیستید در سال‌های اخیر بیشتر کسب وکارها از اینترنت برای انجام تجارتشان استفاده می‌کنند؟

بارها شاهد خريد آنلاين همشهريانمان از ديگراستان‌ها بوده‌ايم درصورتي كه همان كالا در فروشگاه‌های شهرمان موجود بوده و اين به خاطر آگاهي مردم به تحقيق قبل از خريد در سايت‌هاي اينترنتي است، که در نهایت اين تحقيق آسان و کم‌هزینه در كمترين زمان به خريد آنلاين ازمسافت دور تبديل می‌شود. به همین دلیل فروشگاه‌های اینترنتی به یک تجارت پر رونق و در حال رشد تبدیل شده و روز به روز محبوب‌تر می‌شود كه نسبت به خرید و فروش سنتی مزایای روشنی دارد.

با تاثیر اینترنت درتغییر و تحول زندگی بشر نیاز وب‌سایت برای هر فروشگاهی احساس می‌شود.

دليل موفقیت مدیر فروشگاه‌های معروف:

•    استفاده از وب‌سایت و تاثیر آن در اطلاع‌رسانی و اعتبارستجی
•    تاثیر غیرقابل انکار فروش آنلاین درگسترش مشتریان، مثل سایت دی جی کالا
•    معرفی راحت محصولات خود به بازدیدکنندگان
•    مشتری مداری مدرن( مشتری با خرید آنلاین بدون اتلاف وقت در مسیر یا در صف خرید، كالاي خریداری شده خود را در درب منزل تحویل می‌گیرد).

مدیران فروشگاه‌های معروف مثل *دی‌جی کالا* با ایجاد وب‌سایت، تاثیر مثبت آن را در گسترش مشتریان خود ملاحضه نموده‌اند.

ازهم اکنون با یک مدیریتی وسیع و موفق، فروشگاه اینترنتی مدرن راه‌اندازی کنید و
تجارتی پررونق داشته باشید.

مزایای فروشگاه اینترنتی برای فروشگاه‌ها:

1) جلوگيري ازخستگي فروشنده در توضيح مداوم اطلاعات يك كالا:
یکی از برتری‌های فروشگاه اینترنتی امکان نمایش بازخورد مشتریان است که می تواند به خریداران اطلاعات ارزشمندی درباره کیفیت کالا یا خدمات مشتریان ارائه نماید، و درنتيجه با صرفه‌جويي انرژي و زمان توضيح مداوم فيزيكي اطلاعات كالا حذف مي‌شود.

2) مشتری مداری مدرن و منحصربفرد:
برای فروشندگان، اینترنت یک سیستم ارتباط با مشتری منحصربه فرد ایجاد می‌کند که هیچگاه در بزرگترین بازارهای فیزیکی یافت نمی‌شود. روزانه میلیون‌ها نفر خرید آنلاین انجام می‌دهند که از طریق تبلیغات اینترنتی به آن می‌رسند، این عملکرد ساده‌تر از مبادلات فيزيكي است.

3) فروش بيشتربا عدم وجود صف فروش:
در زمان شلوغی فروشگاه‌های سنتی مخصوصا موقع تعطیلات و آخر هفته‌ها، نیاز به صرف وقت نسبتا زیاد برای انجام فروش در ساعات کار محدود فروشگاه با بي‌حوصلگي فروشندگان غیرماهر و بی‌تجربه مواجه هستيم و همچنين احتمال تمام شدن کالاهای موجود در انبار براي نمايش وجود خواهد داشت كه اين موارد دور از مشتري مداري مي‌باشد.

4) فروشگاه 24 ساعته:
فروشگاه اينترنتي در هر لحظه از شبانه روز آماده سرويس دهي به مشتريان است و به خریدار اجازه می‌دهد تا در هر زمان که می‌خواهد به خرید بپردازد درفروشگاه اینترنتی 24ساعته هیچ گونه صف طولانی برای خرید کالای مورد نظر شما وجود ندارد.

5) فروش در شهرهاي هم‌جوار:
ديگر افراد با دسترسي به اينترنت برای جستجوی کالا به‌دنبال فروشگاهی خاص در مکان جغرافیایی خاص نيستنند، بلكه به دنبال كالاي موردنظر خود در هر مكان و مسافتي با خريد آنلاين هستند. بنابراین يک فروشگاه سنتي به منطقه بسيار محدودي خدمات مي دهد اما خريد و ارسال سفارش از يک فروشگاه آنلاين به دورترين نقاط کشور و (در صورت فروش با کارت هاي اعتباري بين المللي) به تمام نقاط دنيا امکانپذير است.

6) سرویس انبارداری و پست لجستیک:
فروشگاه کالاها را از انبار لجستیک خود به آدرس خریداران ارسال می کند. و چنین فرآیندی به این معناست که دیگر نیازی به اجاره یک فضای خرده فروشی ندارید. دیگر با كمبود فضا مواجه نيستيد چرا كه نیازی نیست کالاها را داخل قفسه‌های مختلف مغازه بچینند تا هنگام مراجعه مشتریان مورد توجهشان قرار گیرد.

7) اطلاع نظرات کاربران:
در خرید آنلاین مدیرفروشگاه قادر خواهد بود از نظرات خریداران پیشین و کاربران عادی در مورد فروشگاه و محصولات نسبت به تغییرات آن در کمک به پیشرفت فروشگاه استفاده کند

شاید بتوان با توجه به مطالعات صورت گرفته، عمده‌ترین مزیت فروشگاه اینترنتی را “راحتی و سهولت” در امر خرید و فروش دانست.

امكانات سايت فروشگاهی:

• صفحه معرفي فروشگاه (شرح سابقه فروشگاه ، آدرس کامل فروشگاه ترجیحا همراه با لینک نقشه گوگل و اطلاعات تماس)
• صفحه معرفی محصولات فروشگاه (معرفی تک تک محصولات فروشگاه  به همراه امکان مشاهده و بررسی محصولات با جزئیات بیشتری، به جذب مشتری بیشترکمک می‌کند )
•    فروشگاه آنلاین (امکان مقایسه محصولات و قیمت‌های آن‌ها ، صرفه جویی در زمان ، انعطاف پذیری در زمان خرید ، عدم نیاز به تحرک فیزیکی ، وجود قیمت های رقابتی ، تنوع محصولات و سهولت در سفارش خرید)
•    ثبت نام مشتریان جديد در سایت(مشتریان می‌توانند در سایت عضو شوند)
•    بخش خدمات به مشتریان(تخفیف چند درصدی خرید به مشتریان عضو شده در سایت، ارسال رایگان و…)
•    شفارش آنلاين
•    بخش استخدام (اگر فروشگاه به نيروي كار نياز داشت اطلاعیه در قسمت استخدام زده شود)
•    نظرات مشتری(مشتری جدید با نظرسنجی‌های رضایتمندی که قبلا شده با اطمینان خاطر خرید می‌کند)
•    پیشنهادات و انتقادات (به پیشرفت در کسب و کار کمک می‌کند)
•    رزرواسیون کالا(مشتری قادر است  در مسافت‌هاي كوتاه با رزرو  چند ساعته كالا بدون اتلاف وقت زياد  فقط به آدرس فروشگاه مقصد مراجعه  و از نزديك آن را مشاهده كرده و بعد خرید کند).

The post دليل موفقیت مدیر فروشگاه‌های معروف appeared first on وب دیزاین.

در مطلبی در مورد صفحات اسپلش توضیحاتی را نوشتیم و اینکه چه هستند و چه کاربردی دارند،در این مطلب آستین ها را بالا زده و یک اینتروی زیبا با jquery  برای سایت خواهیم ساخت تا در صورت نیاز در طراحی سایت های خودتان از آن استفاده کنید.نیازمندی این آموزش دانش CSS , JS , HTML بوده و سطح آن ساده می باشد.

چگونه یک اینتروی زیبا با jquery برای سایتمان بسازیم؟

خب روند کار رو به صورت کلی خدمتتان عرض می کنم تا یک دید صحیحی داشته باشید و بتوانید آموزش را بهتر درک کنید.

ما المنتهایی را در صفحه گذاشته و آنها را مخفی می کنیم،و پس از لود صفحه به ترتیبی که مدنظرمان است آن ها را با افکتهای جی کوئری و در جهت هایی که مدنظرمان است نمایان می کنیم.

مشخص کردن استراتژی اینترو

خب هرچیزی اگر برنامه ریزی شده پیش برود نتیجه بهتری دربرخواهد داشت،بهتر است ما نیز برای این اینتروی زیبا با jquery  یک برنامه ای بچینیم،موافقید؟

ما سه المنت خواهیم داشت:

1. متن “شهاب نت”
2. یک خط افقی
3. متن “خوش آمدید”

خب روند کار را به این صورت در نظر بگیریم که ابتدا همه اینها مخفی هستند و ما میخواهیم به محض باز شدن صفحه ابتدا متن “شهاب نت” از پایین به بالا ظاهر گردد و سپس یک خط افقی جداکننده از سمت چپ وارد صحنه شده و زیر متن “شهاب نت” قرار بگیرد،همچنین پس از این دو اتفاق میخواهیم متن “خوش آمدید” از زیر خط افقی به سمت پایین ظاهر گردد.پس این شد برنامه ی ما برای ساخت یک اینتروی زیبا و کاربرپسند.

لذا ما برای این کارها نیاز به کمی استایل با CSS جهت مخفی کردن و زیبایی کار و همچنین به کتابخانه jQuery جهت ایجاد افکتها نیاز خواهیم داشت.

کدهای HTML صفحه اینتروی ما

ابتدا المنتهای در صفحه را توسط HTML به این صورت خواهیم داشت:

<div class="middle">
    <div class="cutoff">
        <p class="text">شهاب نت</p>
        <div class="hr"></div>
        <p class="desc"><span class="descText">خوش آمدید</span></p>
    </div>
</div>

می بینید که علاوه بر چینش المنت ها به هر المنت کلاس هایی جهت کنترل آن ها خواهیم داشت.

کدهای CSS صفحه اینترو

اجازه بدهید کمی استایل به کار بدهیم:

*{margin:0;padding:0;font-family:"b yekan";}

.middle {
    width: 249px;
    height: 120px;
    margin: auto;
    position: absolute;
    top: 0; bottom: 0; left: 0; right: 0;
    overflow: hidden;
}
.text {
    font-weight: 300;
    font-size: 32px;
    color: #EF5350;
    text-align: center;
    opacity: 0;
    top: 50px;
    position: relative;
}
.hr {
    margin-top: 12px;
    height: 1px;
    width: 262px;
    margin-left: -262px;
    background-color: #bbb;
}
.desc {
    font-weight: 301;
    font-size: 20px;
    color: #333;
    text-align: center;
    overflow: hidden;
}
.desc span {
    margin-top: -24px;
    display: block;
}

خط 1 برای حذف حاشیه و تعیین فونت کار هست،اسم فونتی که اینجا استفاده شده است باید در سیستم کاربر موجود باشد ، در غیر این صورت با فونتهای پیشفرض ، صفحه را مشاهده خواهد کرد،فرض بر این است که شما فونت را به صفحه و سایتتان اضافه کرده اید و نام فونت “b yekan” می باشد.

خطوط 3 تا 10 برای وسط چین کردن کل کار استفاده شده،این تکنیک المنت طول و عرض داده شده را افقی و عمودی وسط چین می کند،به این صورت که طول و عرضی را برای المنت مشخص کرده،سپس خاصیت position آن را absolute داده و مقادیر top,right,bottom,left را صفر می گذاریم،با این کار موقعیت وسطچینی المنت بر عهده خود مرورگر گذاشته شده و لذا المنت در وسط صفحه جای داده خواهد شد.خاصیت مهم دیگر در این قسمت خاصیت overflow می باشد که hidden داده شده است،در این حالت اگر ما فرزندی را از این المنت به خارج از حیطه مادر آن بکشیم،دیگر قابل نمایش نخواهد بود،این موارد به افکت های ما کمک می کند،در ادامه ان شاءالله متوجه خواهید شد.

خطوط 11 تا 19 مربوط به متن “شهاب نت” می باشد که استایلهایی داده شده است،موارد مهم در این قسمت خط 16 خط 17 می باشند،اولی المنت را مخفی می کند،البته به روش opacity و دومی فاصله از بالا را 50px مشخص می کند،اما چرا؟ این دو خاصیت دقیقا برای افکت ما در نظر گرفته شده اند،ما میخواهیم المنت مقادیر اولیه ش این ها باشد و سپس ما این مقادیر را به ترتیب یه 1 جهت نمایان شدن المنت و به 0 جهت تداعی حرکت المنت از بالا به پایین ، تغییر دهیم.لذا 50px جهت خارج شدن از حیطه المنت مادر و opacity جهت محو کردن استفاده شده است.

و اما خطوط 20 تا 26 ! این خطوط استایل آن خط جداکننده ما را انجام می دهند و باز در این مورد خاصیت margin-left برای ما مهم است.این خاصیت مقداری را گرفته که خود را خارج از حیطه المنت مادر برده است.

خطوط 27 تا 37 مربوط به متن “خوش آمدید” می باشد و باز از همان قوانین که برای افکت نیاز است استفاده می کند،لذا در این قسمت باید به خاصیت margin-top دقت کرد.

نکته : ما اگر المنتی را فرضا از به سمت بالا برده باشیم،پس افکت ما نمایش از بالا به پایین خواهد بود،یعنی از جایی که مخفی است (بالا) به سمت جایی که می تواند نمایان باش (پایین)این قانون برای موارد دیگر هم صدق می کند،به عنوان مثال برای سمت چپ و راست.

کدهای Javascript / jQuery صفحه اینترو

خب نوبتی هم که باشد نوبت به این کتابخانه دوست داشتنی می رسد تا کمک حال ما در انجام افکتها باشد تا به یک اینتروی زیبا با jquery برسیم.

پس باید این کتابخانه را به صفحه امان تزریق کنیم،که در کدی انتهای کار که به صورت یکجا گذاشته خواهد شد این مورد را خواهید دید،پس صرف نظر از چگونگی این کار می پردازیم به اصل کد:

jQuery('document').ready(function($) {
    
    var a = $(".text");
    var b = $(".hr");
    var c = $(".descText");
    
    a.delay(1000).animate({top: "0", opacity: "1"}, 1000, function() {
        b.delay(500).animate({marginLeft: "0"}, 800, function() {
            c.animate({marginTop: "8"}, 800,function(){
        $('body').animate({opacity: "0"}, 1000);
      });
        });
    });
    
    
});

جی کوئری کارها می دانند که ما برای اینکه کدهایمان اجرا شود نیاز داریم تا المنتها در صفحه آماده استفاده شوند و کاملا بارگزاری شده باشند،این المنتها و بساطشان را می گویند DOM ، در جی کوئری برای حاضر شدن این آقای DOM ، بایستی گوش وایساد و بعد کدها را اجرایی کرد،که سبک jQuery برای این کار به صورت بالا صورت می پذیرد،یعنی کدها در بلاک مخصوص به این کار قرار می گیرند:

jQuery('document').ready(function($) {
   //کدها اینجا قرار می گیرند
});

خطوط 3تا5 همان سه المنت اصلی صفحه را نشانه می روند تا بتوان از آنها استفاده کرد.برای رعایت ترتیب کار از a,b و c استفاده شده است.

خب! برای ادامه کار بایستی توابعی از جی کوئری را توضیح دهیم.

تابع delay : این تابع مقداری از زمان را به میلی ثانیه می گیرد و بعد از آن ردیف بعد از خود را اجرا می کند.

پس الان خط 7 مشخص شد که ما می خواهیم یک ثانیه بعد از لود صفحه کدهایمان اجرا شود.

تابع animate : این تابع خواص CSS ی را می گیرد و به مرور و با افکت آن را تغییر می دهد که نتیجه برای ما می شود:حرکت انیمشنی المنت!

که پارامتر اول در قالب یک آرایه جاوااسکریپت مقادیر را می گیرد،پارامتر دوم زمان انجام این تغییر و سوم در اینجا تابعیست که بعد از اتمام کار بایستی اجرا شود.

پس الان متوجه شده اید که بعد از اجرای نمایش المنت اول باید اجرای نمایش المنت دوم آغاز گردد و این ترتیب به این صورت که ذکر شد رعایت می گردد.

در خطوط پایانی با همین منطق انیمیشنهای دیگر اجرایی می گردد و مقادیر به جاهای اصلی خود تغییر پیدا می کنند تا المنت ها ظاهر گردند.

تنها در خط 10 و پس از اتمام تمام نمایش ها المنت body نیز با افکت مخفی می شود تا کار زیبایی خاصی داشته باشد.

کل کد را به صورت یک جا ببینید

خب خدا قوت به همه شما،دموی کار رو ببینید:

دموی اینتروی زیبا با جی کوئری

و کل کد:

<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="utf8">
<style>
*{margin:0;padding:0;font-family:"b yekan";}

.middle {
    width: 249px;
    height: 120px;
    margin: auto;
    position: absolute;
    top: 0; bottom: 0; left: 0; right: 0;
    overflow: hidden;
}
.text {
    font-weight: 300;
    font-size: 32px;
    color: #EF5350;
    text-align: center;
    opacity: 0;
    top: 50px;
    position: relative;
}
.hr {
    margin-top: 12px;
    height: 1px;
    width: 262px;
    margin-left: -262px;
    background-color: #bbb;
}
.desc {
    font-weight: 301;
    font-size: 20px;
    color: #333;
    text-align: center;
    overflow: hidden;
}
.desc span {
    margin-top: -24px;
    display: block;
}

</style>
</head>
<body>
<div class="middle">
    <div class="cutoff">
        <p class="text">شهاب نت</p>
        <div class="hr"></div>
        <p class="desc"><span class="descText">خوش آمدید</span></p>
    </div>
</div>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
jQuery('document').ready(function($) {
    
    var a = $(".text");
    var b = $(".hr");
    var c = $(".descText");
    
    a.delay(1000).animate({top: "0", opacity: "1"}, 1000, function() {
        b.delay(500).animate({marginLeft: "0"}, 800, function() {
            c.animate({marginTop: "8"}, 800,function(){
        $('body').animate({opacity: "0"}, 1000);
      });
        });
    });
    
    
});
</script>
</body>
</html>

این بود ساخت یک اینتروی زیبا با jquery ، امیدوارم استفاده کرده باشین،شما با استفاده از خلاقیت خودتان و چیزهایی که اینجا یاد گرفته اید می توانید اینتروهای بسیار زیباتری را برای سایت خود بسازید.

لازم به ذکر است کدهای استفاده شده از این آموزش این دوست خوبمون برداشته شده است که جهت ادای امانت لینک آن را می گذاریم:

The post اینتروی زیبا با jquery ، آموزش و دمو appeared first on وب دیزاین.