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

[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 ستاره طلایی در وسط قرار گرفته.