اصلاح بخش گزینه‌های موجود در صفحه‌ی محصول اپن کارت

[mojtabamalaekeh]

اپن کارت قابلیت خوبی برای دریافت اطلاعات اضافی قبل از خرید داره.

مثلاً میخواید موارد زیر رو از مشتری دریافت کنید:
نحوه‌ی آشنایی با فروشگاه
سایز کفش
آدرس سایت مشتری
و...

اطلاعاتی که ممکنه ربطی به مشخصات زمان ثبت نام مشتری نداشته باشن و جزء اطلاعات خرید هستن.

این قابلیت از طریق سربرگ «گزینه‌ها» در صفحه‌ی ویرایش محصول در دسترس است.
اما چیزی که باعث شد این موضوع رو مطرح کنم این بود که یه فیلد متنی (TextArea) به گزینه‌ها اضافه کردم و با ظاهر نامناسبی توی صفحه‌ی محصول اومد:

میخوایم تغییراتی بدیم که به شکل عکس زیر ظاهر بشه:

در دایرکتوری محل نصب فروشگاه خود، فایل زیر را پیدا کرده و ویرایش کنید:

کد php:

catalog/view/theme/default/template/product/product.tpl 


درون فایل product.tpl این عبارت رو جستجو کنید:

کد php:

<?php if ($option['type'] == 'textarea') { ?>

زیر اون عبارتی که جستجو کردین یه تگ div هست

کد php:

            <?php if ($option['type'] == 'textarea') { ?>
            <div class="form-group<?php echo ($option['required'] ? ' required' : ''); ?>">
              <label class="control-label" for="input-option<?php echo $option['product_option_id']; ?>"><?php echo $option['name']; ?></label>
              <textarea name="option[<?php echo $option['product_option_id']; ?>]" rows="5" placeholder="<?php echo $option['name']; ?>" id="input-option<?php echo $option['product_option_id']; ?>" class="form-control"><?php echo $option['value']; ?></textarea>
            </div> 


که باید کدش رو به این شکل تغییر بدین:

کد php:

            <?php if ($option['type'] == 'textarea') { ?>
            <div class="form-group<?php echo ($option['required'] ? ' required' : ''); ?>">
              <label class="control-label" for="input-option<?php echo $option['product_option_id']; ?>"><?php echo $option['value']; ?></label>
              <textarea name="option[<?php echo $option['product_option_id']; ?>]" rows="5" placeholder="" id="input-option<?php echo $option['product_option_id']; ?>" class="form-control"></textarea>
            </div> 


[mojtabamalaekeh]

اصلاح شیوه‌ی نمایش گزینه‌های موجود در صفحه‌ی محصول اپن کارت

بعضی گزینه‌ها ممکنه باعث کاهش یا افزایش قیمت محصول بشن.
مثلا میخواید با انتخاب گزینه‌ی «بدون گارانتی» 90000 تومان از قیمت پایه کم بشه.
به خاطر نمایش علامت منفی در سمت راست عدد، خوانایی اختلاف قیمت پایین میاد.
حالا تغییراتی میدیم که به جای علامت «+»، عبارت «افزایش قیمت» و به جای علامت «-»، عبارت «کاهش قیمت» در گزینه‌ها نمایش داده بشه.


1- همون فایلی که توی پست قبلی گفته شد رو ویرایش کنید:

کد php:

catalog/view/theme/default/template/product/product.tpl 


2- این عبارت رو (که چند بار توی فایل تکرار شده) پیدا کنید:

کد php:

<?php echo $option_value['price_prefix']; ?>

3- با عبارت زیر جایگزینش کنید:

کد php:

<?php echo $option_value['price_prefix'] === '-' ? 'کاهش قیمت ' : 'افزایش قیمت '; ?>

این کار رو با دقت کامل انجام بدین. حتی 1 کاراکتر پرانتز یا آکولاد اضافی هم نباید اشتباهی پاک بشه.

نکته: توی کد بالا انگار جای کاهش و افزایش عوض شده ولی با خیال راحت کپی کنید. این مشکل به خاطر ترکیب متن فارسی و انگلیسی است.

[mojtabamalaekeh]

نمایش تصاویر گزینه‌ها در کنار هر گزینه

این قابلیت وجود داره که برای هر کدوم از موارد تعریف شده در گزینه‌ها، یک تصویر با سایز 50*50 انتخاب کنید.
اما اپن کارت، فقط تصویر مقادیر مربوط به گزینه‌هایی از نوع «تصویر» رو نمایش میده.
اگر گزینه‌های زیادی از نوع «دکمه رادیویی» دارین که لازمه یهشون عکس اضافه کنید
و براتون صرف نمی‌کنه همه رو پاک کنید و جایگزین معادلشون از نوع «تصویر» رو بسازید،
این آموزش رو دنبال کنید.
ما علاوه بر نمایش تصاویر برای دکمه‌های رادیویی، استایل مرتب‌تری هم با استفاده از CSS اعمال می‌کنیم.

احتمالاً نمایش تصویر در کنار گزینه‌هایی از نوع «دکمه رادیویی» و «جعبه انتخاب» میتونه مفید باشه و در سایر انواع گزینه‌ها ممکنه کاربردی نداشته باشه.
ما «دکمه‌های رادیویی» رو مثال می‌زنیم. اگر خواستید برای «جعبه انتخاب» هم این کار رو بکنید، صرفاً با کپی کردن کدها در بخش مربوطه، این کار انجام نمیشه و چه بسا با Copy/Paste کردن، کار خراب بشه.
اگر خواستید برای گزینه‌های دیگه هم این کار رو بکنید باید کدهای مربوط به «دکمه رادیویی» رو قبل و بعد از اعمال تغییرات، مقایسه کنید و فقط ما به تفاوت کدها   رو تغییر بدین.

ظاهر دکمه‌های رادیویی قبل از تغییرات

ظاهر دکمه‌های رادیویی بعد از تغییرات

مثل پست‌های قبلی، این بار هم باید فایل زیر رو ویراش کنید:

کد php:

catalog/view/theme/default/template/product/product.tpl 


1- این کد رو پیدا کنید
(قرار نیست این کد عوض بشه، فقط برای هدایت شدن به محلی در نزدیکی مکان مورد نظر پیداش کنید):

کد php:

($option['type'] == 'radio') 


2- چند خط پایین‌تر از کد بالا، این قطعه کد رو با چشم (مشاهده)، پیدا کنید:

کد php:

<div class="radio">
  <label>
    <input type="radio" name="option[<?php echo $option['product_option_id']; ?>]" value="<?php echo $option_value['product_option_value_id']; ?>" />
    <?php echo $option_value['name']; ?>
    <?php if ($option_value['price']) { ?>
    (<?php echo $option_value['price_prefix']; ?><?php echo $option_value['price']; ?>)
    <?php } ?>
  </label>
</div> 


3- کدهای زیر رو جایگزین کنید:

کد php:

<div class="radio">
  <label class="opt_val_rad">
    <?php if (!empty($option_value['image'])) { echo '<img class="opt_val_img" src="', $option_value['image'], '"/>'; } ?>
    <input type="radio" name="option[<?php echo $option['product_option_id']; ?>]" value="<?php echo $option_value['product_option_value_id']; ?>" />
    <span>
        <?php echo $option_value['name']; ?>
        <?php if ($option_value['price']) { ?>
        (<?php echo $option_value['price_prefix'] === '-' ? 'کاهش قیمت ' : 'افزایش قیمت '; ?><?php echo $option_value['price']; ?>)
        <?php } ?>
    </span>
  </label>
</div> 


4- تغییرات رو ذخیره کنید.

الان اگه بخواید تغییرات رو در صفحه‌ی یک محصول ببینید که یک گزینه از نوع «دکمه رادیویی» با مواردی که براشون عکس گذاشتین داره، نتیجه جالب نیست!
چون هنوز کد CSS رو اضافه نکردیم.

5- فایل زیر رو (برای قالب پیشفرض اپن کارت) پیدا کرده و در حالت ویرایش، باز کنید:

کد php:

catalog/view/theme/default/stylesheet/stylesheet-rtl.css 


6- کدهای زیر رو هر جا از فایل که خواستید (البته اگر با CSS آشنایی ندارید حتماً از یک نفر کمک بخواید) اضافه کنید:

کد php:

.opt_val_rad {
    display: table;
    width: 100%;
    border: 1px solid lightgray;
    border-radius: 5px;
    padding-left: 4px;
    box-shadow: 2px 2px 3px lightgray;
}
.opt_val_rad .opt_val_img {
    margin-left: 20px;
    margin-right: -20px;
    display: table-cell;
}
.radio .opt_val_rad input[type="radio"] {
    position: relative;
} 


7- تغییرات رو ذخیره کرده و صفحه محصول رو تازه کنید!

نکته: در عکس نمونه‌ای که قرار دادم، اون ستاره‌های طلایی همون عکس‌هایی هستند که برای موارد مربوط به گزینه‌ی «دکمه رادیویی» اضافه کرده‌ام.
یعنی یک عکس 50*50 داشتم که 2 تا ستاره طلایی کنار هم بودن
و یک عکس 50*50 هم داشتم که 1 ستاره طلایی در وسط قرار گرفته.