مقدمه

یک قالب فروشگاه ساز پروفی شاپ در ساده ترین حالت خود از کد های HTML، CSS و JavaScript تشکیل شده است.این قالب در ابتدا استاتیک بوده و قابلیت نمایش داده های پویای وارد شده در پنل مدیریت فروشگاه را ندارد. سپس با افزودن کدهای سیستم قالب پروفی شاپ به حالت پویا درآمده و قابلیت نمایش داده های فروشگاه از جمله شاخه ها و محصولات را پیدا خواهد کرد.
کوچکترین قطعه کد در سیستم قالب پروفی شاپ قطعه کدی است که برای دسترسی به یک ویژگی (Property) از یک قطعه داده (Data Item) مورد استفاده قرار می گیرد. ساختار این قطعه کد به شکل زیر می باشد:

{{DataItem.Property}}

در هر بخش (Section) از قالب قطعه داده های مختلفی در اختیار شما قرار دارند. برخی از این قطعه داده ها در تمامی قسمت های کد قالب در دسترس بوده و می توانید ویژگی های آن را نمایش دهید. به طور مثال قطعه داده ی page از این جمله بوده که حاوی اطلاعاتی درباره ی صفحه ی جاری (صفحه ای که در مرورگر در حال نمایش است) می باشد. این قطعه داده شامل ویژگی مانند آدرس، عنوان، توضیحات و کلمات کلیدی صفحه ی جاری می باشد.

{{page.address}}
{{page.title}}
{{page.description}}
{{page.keywords}}

از جمله قطعه داده های دیگر که در کل قالب به آن دسترسی دارید می توان به قطعه داده ی site اشاره کرد. این داده شامل برخی از ویژگی های عمومی وب سایت از جمله عنوان، کلمات کلیدی و توضیحات فروشگاه می باشد. تفاوت این ویژگی ها با ویژگی های قطعه داده ی page در این است که ویژگی های عنوان، کلمات کلیدی و توضیحات در قطعه داده ی page در هر صفحه متغیر بوده و به صورت پویا توسط هسته ی سیستم با توجه به صفحه ای که درآن قرار دارید تولید می گردند اما در قطعه داده ی site این سه ویژگی از بخش تنظیمات فروشگاه که توسط کاربر وارد شده اند خوانده شده و در همه ی صفحات ثابت می باشند.
قطعه داده ی مهم دیگری که می توان به آن اشاره کرد، قطعه داده ی profishop می باشد. کلیه شاخه ها و محصولات فروشگاه از ویژگی های این قطعه داده بوده و از طریق آن در دسترس می باشند. این قطعه داده همچنین دارای ویژگی copyright بوده که حتما باید از آن در قالب استفاده نمایید. قرار دادن این ویژگی در صفحه جزو شرایط استفاده از فروشگاه ساز بوده و حذف یا مخفی کردن آن باعث لغو سرویس و پشتیبانی آن خواهد شد.

انواع داده

داده ها در سیستم قالب پروفی شاپ به سه دسته ی اساسی داده های ساده، داده های مرکب و لیست ها تقسیم بندی می شوند.
از جمله داده های ساده می توان به ویژگی های قطعه داده ی page اشاره کرد. به طور مثال ویژگی title که فقط از یک جز (یک متن ساده) تشکیل شده و قابل تقسیم به اجزا ریز تر نمی باشد.
داده های مرکب خود شامل چندین ویژگی می باشند که هر کدام از این ویژگی های می تواند از نوع داده ی ساده یا مرکب باشد. داده های مرکب به خودی خود قابل نمایش نبوده و برای نمایش آن ها باید ویژگی های موجود در آن ها به صورت یک به یک نمایش داده شود. به طور مثال ویژگی product از قطعه داده ی profishop یک نوع داده ی مرکب بوده و خود شامل ویژگی از جمله نام، عنوان، آدرس، قیمت، تصویر و... می باشد.
یک نوع داده ی لیست شامل لیستی از یک نوع داده ی مرکب می باشد که می توان آن ها را در یک حلقه نمایش داد. به طور مثال ویژگی products از قطعه داده ی profishop یک لیست از نوع داده ای product می باشد.

نمایش داده ها

همانطور که قبلا اشاره شد انواع داده ی ساده به سادگی با استفاده از ساختار {{DataItem.Property}} در دسترس بوده و قابل نمایش می باشند.
برای نمایش انواع داده ی مرکب و یا لیست باید از تگ های HTML استفاده نموده و خاصیت profishop-item این تگ‌ها را با داده‌ی مورد نظر مقداردهی نمایید. سپس در داخل تگ می توانید به داده‌های داخل آن دسترسی داشته باشد. به طور مثال در زیر نحوه ی دسترسی به ویژگی های یک محصول نمایش داده شده است:

<div profishop-item="{{product}}">
    <h3>{{product.heading}}</h3>
    <div>{{product.fullText}}</div>
    <div>{{product.price}} تومان</div>
    <a href="{{product.address}}">جزییات بیشتر</a>
</div>

از آنجایی که نوع داده ی لیست حاوی لیستی از قطعه های داده از یک نوع داده ای خاص می باشد بنابراین برای دسترسی به آنها کافیست قالب مورد نظر خود را برای یک نمونه پیاده کرده و سپس سیستم از روی این نمونه تمامی آیتم های لیست را ایجاد خواهد کرد. در این نمونه باید خاصیت profishop-item از تگ مورد نظر برابر با {{DataItem.item}} تنظیم گردد.
به طور مثال نحوه ی نمایش محصولات فروشگاه در زیر نمایش داده شده است:

<div profishop-item="{{products}}">
    <div profishop-repeat="product in products">
        <h3>{{product.heading}}</h3>
        <img src="{{product.image}}" alt="{{product.name}}" />
        <div>{{product.price}} تومان</div>
        <a href="{{product.address}}">مشاهده کالا</a>
    </div>
</div>

دسترس پذیری

یک تگ section یا به طور مختصر یک سکشن در سیستم قالب پروفی شاپ فقط زمانی نمایش داده می شود که نوع داده ی مورد نظر موجود باشد. به طور مثال سکشن product فقط در زمانی که آدرس صفحه، آدرس یک محصول باشد نمایش داده می شود.
همچنین در لیست ها، تگی با {{DataItem.item}} فقط در زمانی که آیتمی در لیست موجود باشد نمایش داده می شود.
در انتهای این سند، لیست کاملی از انواع داده ی پروفی شاپ و همچنین نوع، ویژگی ها و دسترس پذیری هر یک ذکر شده است.

خاصیت profishop-location

تگ های HTML در سیستم قالب پروفی شاپ می توانند خاصیتی به نام profishop-location را مقدار دهی نمایند که نشان دهنده ی مکانی (یا آدرسی) است که آن تگ مجاز است نمایش داده شود. به طور مثال در صورتی که قصد دارید بخشی از قالب را فقط در صفحه ی اصلی سایت نمایش دهید و نمی خواهید این بخش در بقیه ی صفحات نمایش داده شود، کافیست به تگ HTML که آن بخش از قالب در آن قرار دارد خاصیت profishop-location با مقدار “home” اختصاص دهید. به طور مثال:

<div profishop-location="home">
    این بخش فقط در صفحه ی اصلی سایت نمایش داده می شود
</div>

لازم به ذکر است خاصیت های profishop-item و profishop-location می توانند همراه با یکدیگر نیز استفاده گردند. به طور مثال در صورتی که قصد دارید لیستی از محصولات را فقط در صفحه ی اول وب سایت نمایش دهید می توانید مانند زیر عمل کنید:

<div profishop-item="{{products}}" profishop-location="home">
    <div profishop-repeat="product in products">
        <h3>{{product.heading}}</h3>
        <img src="{{product.image}}" alt="{{product.name}}" />
        <div>{{product.price}} تومان</div>
        <a href="{{product.address}}">مشاهده کالا</a>
    </div>
</div>

لازم به ذکر است خاصیت profishop-location می تواند مقادیری از نوع عبارات با قاعده را نیز بپذیرد. همچنین می توانید از چندین مقدار که هر یک با ویرگول (;) از یکدیگر جدا شده اند نیز استفاده نمایید.
در انتهای این سند لیستی از profishop-location های خاص نیز به همراه توضیحات آن آورده شده است.

صفحات 404

در صورتی که آدرس صفحه ای به هیچ نوع داده ای خاصی در سیستم مرتبط نباشد سیستم به کد 404 را باز خواهد گردانید. این کد برای مرورگر و موتورهای جستجو قابل مشاهده بوده و کاربر کد قالب را مشاهده خواهد کرد. برای نمایش پیغامی خاص به کاربر در هنگام رخ دادن خطای 404 می توانید از خاصیت profishop-location با مقدار 404 استفاده نمایید.

فرم ها

برای دریافت هر نوع اطلاعاتی از کاربر و ثبت آن در سیستم باید از فرم ها استفاده نمایید. فرم ها می توانند در هر قسمتی از قالب مورد استفاده قرار بگیرند و در همه ی صفحات در دسترس می باشند.
به طور مثال برای اینکه کاربران سایت بتوانند پیامی را برای شما ارسال نمایند باید فرم "تماس با ما" را در قالب سیستم ایجاد نمایید. شما می توانید این فرم را در همه ی صفحات وب سایت نمایش دهید و یا با استفاده از خاصیت profishop-location در آدرسی خاص به نمایش آن بپردازید.
داده هایی که از طریق فرم ها می توانید به سیستم وارد شود و همچنین عملیاتی که در سیستم می توانید توسط فرم ها انجام محدود به مواردی می باشند که در هسته ی سیستم از پیش پیاده سازی شده اند. این عملیات شامل، ثبت نام کاربران، ورود کاربران، تماس با ما، ثبت سفارش و... می باشد.
عملیات هر فرم توسط خاصیتی به نام profishop-action مشخص می گردد. به طور مثال برای ارسال یک پیام به مدیر باید خاصیت profishop-action فرم را برابر با contactus استفاده نمایید.
هر فرم از بخش های مشابهی تشکیل شده است که در ادامه توضیح داده خواهد شد:

فیلد ها، تگ های ورودی:

فیلد ها یا تگ های ورودی همان کنترل های فرم هستند که کاربر می تواند با استفاده از آن ها داده های خود را وارد کند. به طور مثال جعبه های متن، لیست ها، چک باکس ها و...
هر فیلد داری خاصیت name می باشد که نشان دهنده ی این است که داده ی وارد شده در آن باید تحت چه نامی به سیستم ارسال شود.
به طور مثال برای فرم تماس با ما نیاز به فیلد های name، email، subject و text می باشد. همچنین فیلد های phone و website نیز می توانند به صورت اختیاری آورده شوند.
هر فرم دارای ویژگی هایی همنام با فیلد های مورد نظر می باشد که می توانید برای نگهداری و دسترسی به اطلاعات در طول عملیات از آن استفاده نمایید.

دکمه ها:

دکمه هانیز یکی از راه های ورودی فرم هستند که کاربر پس از تکمیل فیلد ها با کلیک بر روی آن ها فرم را به سمت سرور ارسال می کند. هر دکمه دارای نام و مقداریست که مشخص می کند چه عملیاتی باید انجام شود. برای کلیه عملیات فرم باید از نام action برای دکمه ها استفاده نمایید. مقدار یا value نیز مشخص کننده ی عملی است که قصد انجام آن را دارید. به طور مثال مقدار submit در فرم تماس با ما به معنی این است که شما قصد ثبت یک پیام را با استفاده از اطلاعات وارد شده توسط کاربر دارید.
دکمه ها همچنین می توانند دارای چندین مقدار باشند که با ویرگول (;) از یکدیگر جدا شده اند.

نوع داده ی فرم:

در داخل هر تگ فرم به نوع داده ای خاصی با نام form دسترسی دارید که شامل ویژگی هایی همنام با فیلد های فرم می باشد. همچنین هر فرم دارای یک ویژگی با نام message یا پیام است که یک نوع داده ی مرکب می باشد. این خاصیت فقط زمانی وجود دارد که یک پیام برای فرم موجود باشد.
در ادامه مثالی عملی از نحوه ی پیاده سازی فرم تماس با آورده شده است:

<form profishop-action="contactus">
    <div profishop-item="form.message">
        {{message.text}}
    </div>
    <br />
    <label>نام:</label>
    <input name="name" />
    <br />
    <label>ایمیل:</label>
    <input name="email" />
    <br />
    <label>موضوع پیام:</label>
    <input name="subject" />
    <br />
    <label>متن پیام:</label>
    <textarea name="text"></textarea>
    <br />
    <button type="submit" name="action" value="submit">ثبت پیام</button>
</form>

همنطور که قبلا ذکر شد هر فرم دارای ویژگی هایی همنام با فیلد ها می باشد. این ویژگی ها با رفرش شدن فرم مقدار قبلی خود را حفظ می کنند. بنابراین می توانید از آن ها برای نگهداری ویژگی ها در زمانی که خطایی در عملیات فرم رخ می دهد و فرم بدون انجام عملیات مجددا به سمت کاربر بازگشت داده می شود استفاده نمایید. به طور مثال:

<form profishop-action="contactus">
    <div profishop-item="form.message">
        {{message.text}}
    </div>
    <br />
    <label>نام:</label>
    <input name="name" value="{{form.name}}" />
    <br />
    <label>ایمیل:</label>
    <input name="email" value="{{form.email}}" />
    <br />
    <label>موضوع پیام:</label>
    <input name="subject" value="{{form.subject}}" />
    <br />
    <label>متن پیام:</label>
    <textarea name="text">{{form.text}}</textarea>
    <br />
    <button type="submit" name="action" value="submit">ثبت پیام</button>
</form>

در انتهای این سند لیست کاملی از فرم ها به همراه فیلد‌ها و ویژگی‌های هر یک به تفصیل آورده شده است.

صفحات جانبی اضافه:

همانطور که پیش تر ذکر شد در صورتی که شما آدرسی مانند /contact-us از وب سایت را در مرورگر تایپ کنید، کاربر قالب وب سایت را مشاهده خواهد نمود با این حال چون صفحه ی مورد نظر به هیچ داده ای از وب سایت متصل نمی باشد خطای 404 نیز به همراه صفحه به مرورگر ارسال می شود. همچنین این صفحه هیچ عنوان و توضیحات و کلمات کلیدی ای نخواهد داشت. در صورتی که قصد داشته باشید از این صفحه به طور مثال برای نمایش فرم تماس با ما استفاده نمایید بهتر است این صفحه را نیز در کد قالب به عنوان یک صفحه ی جانبی معرفی کرده و ویژگی های آن مانند عنوان صفحه را نیز مشخص نمایید. برای این منظور از کدی مانند شکل زیر استفاده نمایید:

<input profishop-type="page"
       profishop-address="/contact-us"
       profishop-title="تماس با ما"
       profishop-description="تماس با مدیر فروشگاه"
       profishop-keywords="تماس با ما,ارسال پیام" />

کد مورد نظر باعث می شود صفحه ی /contact-us به لیست صفحات جانبی سایت اضافه شود. دقت نمایید این صفحه جدای از صفحات جانبی ایجاد شده در پنل مدیریتی توسط کاربر بوده و توسط طراح قالب بنابر نیاز ایجاد می گردد.