Opencart 2.x - Делаем Информационный Сайт (2 Часть)

Тема в разделе "Шаблоны, дизайн и оформление магазина", создана пользователем admin, 10 фев 2018.

  1. TopicStarter Overlay
    Online

    admin Команда форума Администратор

    Сообщения:
    2.609
    Симпатии:
    114.920
    Репутация:
    180
    Всем привет, в этой статье мы продолжим переделывать наш интернет магазин в информационный сайт, сегодня мы исправим категории, результаты поиска, карточку товара и т.д.

    info-site-lessons-2.jpg

    Список задач на сегодня:

    1. Работаем с файлом category.tpl (категории)

    2. Работаем с файлом search.tpl (результаты поиска)

    3. Работаем с файлом product.tpl (карточка товара)

    4. Работаем с файлом sitemap.tpl (карта сайта)

    Приступим:

    1. Откроем файл ../catalog/view/theme/default/template/product/category.tpl и удалим эти строки (63-67):

    Код:
    <div class="col-md-3 col-sm-6">
    <div class="form-group">
    <a href="<?php echo $compare; ?>" id="compare-total" class="btn btn-link"><?php echo $text_compare; ?></a>
    </div>
    </div>
    (P.S.сравнение товаров)

    удалим эти строки (101-112):

    Код:
    <?php if ($product['price']) { ?>
    <p class="price">
    <?php if (!$product['special']) { ?>
    <?php echo $product['price']; ?>
    <?php } else { ?>
    <span class="price-new"><?php echo $product['special']; ?></span> <span class="price-old"><?php echo $product['price']; ?></span>
    <?php } ?>
    <?php if ($product['tax']) { ?>
    <span class="price-tax"><?php echo $text_tax; ?> <?php echo $product['tax']; ?></span>
    <?php } ?>
    </p>
    <?php } ?>
    (P.S.цена товара)

    удалим эту строку (116):

    Код:
    <button type="button" data-toggle="tooltip" title="<?php echo $button_compare; ?>" onclick="compare.add('<?php echo $product['product_id']; ?>');"><i class="fa fa-exchange"></i></button>
    (P.S.сравнение товара)

    2. Откроем файл ../catalog/view/theme/default/template/product/search.tpl и удалим эти строки (78-82):

    Код:
    <div class="col-md-3 col-sm-6">
    <div class="form-group">
    <a href="<?php echo $compare; ?>" id="compare-total" class="btn btn-link"><?php echo $text_compare; ?></a>
    </div>
    </div>
    удалим эти строки (116-127):

    Код:
    <?php if ($product['price']) { ?>
    <p class="price">
    <?php if (!$product['special']) { ?>
    <?php echo $product['price']; ?>
    <?php } else { ?>
    <span class="price-new"><?php echo $product['special']; ?></span> <span class="price-old"><?php echo $product['price']; ?></span>
    <?php } ?>
    <?php if ($product['tax']) { ?>
    <span class="price-tax"><?php echo $text_tax; ?> <?php echo $product['tax']; ?></span>
    <?php } ?>
    </p>
    <?php } ?>
    удалим эту строку (131):

    Код:
    <button type="button" data-toggle="tooltip" title="<?php echo $button_compare; ?>" onclick="compare.add('<?php echo $product['product_id']; ?>');"><i class="fa fa-exchange"></i></button>
    3. Откроем файл ../catalog/view/theme/default/template/product/product.tpl и удалим эти строки (38-40):

    Код:
    <?php if ($attribute_groups) { ?>
    <li><a href="#tab-specification" data-toggle="tab"><?php echo $tab_attribute; ?></a></li>
    <?php } ?>
    (P.S.вкладка характеристик)

    удалим эти строки (44-64):

    Код:
    <?php if ($attribute_groups) { ?>
    <div class="tab-pane" id="tab-specification">
    <table class="table table-bordered">
    <?php foreach ($attribute_groups as $attribute_group) { ?>
    <thead>
    <tr>
    <td colspan="2"><strong><?php echo $attribute_group['name']; ?></strong></td>
    </tr>
    </thead>
    <tbody>
    <?php foreach ($attribute_group['attribute'] as $attribute) { ?>
    <tr>
    <td><?php echo $attribute['name']; ?></td>
    <td><?php echo $attribute['text']; ?></td>
    </tr>
    <?php } ?>
    </tbody>
    <?php } ?>
    </table>
    </div>
    <?php } ?>
    (P.S.таблица характеристик)

    удалим эту строку (100):

    Код:
    <button type="button" data-toggle="tooltip" class="btn btn-default" title="<?php echo $button_compare; ?>" onclick="compare.add('<?php echo $product_id; ?>');"><i class="fa fa-exchange"></i></button>
    (P.S.кнопка сравнения товаров)

    удалим эти строки (102-111):

    Код:
    <ul class="list-unstyled">
    <?php if ($manufacturer) { ?>
    <li><?php echo $text_manufacturer; ?> <a href="<?php echo $manufacturers; ?>"><?php echo $manufacturer; ?></a></li>
    <?php } ?>
    <li><?php echo $text_model; ?> <?php echo $model; ?></li>
    <?php if ($reward) { ?>
    <li><?php echo $text_reward; ?> <?php echo $reward; ?></li>
    <?php } ?>
    <li><?php echo $text_stock; ?> <?php echo $stock; ?></li>
    </ul>
    (P.S.производитель, код товара, бонусные баллы, доступность – наличие товара)

    удалим эти строки (102-129):

    Код:
    <?php if ($price) { ?>
    <ul class="list-unstyled">
    <?php if (!$special) { ?>
    <li>
    <h2><?php echo $price; ?></h2>
    </li>
    <?php } else { ?>
    <li><span style="text-decoration: line-through;"><?php echo $price; ?></span></li>
    <li>
    <h2><?php echo $special; ?></h2>
    </li>
    <?php } ?>
    <?php if ($tax) { ?>
    <li><?php echo $text_tax; ?> <?php echo $tax; ?></li>
    <?php } ?>
    <?php if ($points) { ?>
    <li><?php echo $text_points; ?> <?php echo $points; ?></li>
    <?php } ?>
    <?php if ($discounts) { ?>
    <li>
    <hr>
    </li>
    <?php foreach ($discounts as $discount) { ?>
    <li><?php echo $discount['quantity']; ?><?php echo $text_discount; ?><?php echo $discount['price']; ?></li>
    <?php } ?>
    <?php } ?>
    </ul>
    <?php } ?>
    (P.S.цены)

    удалим эти строки (102-238):

    Код:
    <div id="product">
    <?php if ($options) { ?>
    <hr>
    <h3><?php echo $text_option; ?></h3>
    <?php foreach ($options as $option) { ?>
    <?php if ($option['type'] == 'select') { ?>
    <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>
    <select name="option[<?php echo $option['product_option_id']; ?>]" id="input-option<?php echo $option['product_option_id']; ?>" class="form-control">
    <option value=""><?php echo $text_select; ?></option>
    <?php foreach ($option['product_option_value'] as $option_value) { ?>
    <option 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 } ?>
    </option>
    <?php } ?>
    </select>
    </div>
    <?php } ?>
    <?php if ($option['type'] == 'radio') { ?>
    <div class="form-group<?php echo ($option['required'] ? ' required' : ''); ?>">
    <label class="control-label"><?php echo $option['name']; ?></label>
    <div id="input-option<?php echo $option['product_option_id']; ?>">
    <?php foreach ($option['product_option_value'] as $option_value) { ?>
    <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 if ($option_value['image']) { ?>
    <img src="<?php echo $option_value['image']; ?>" alt="<?php echo $option_value['name'] . ($option_value['price'] ? ' ' . $option_value['price_prefix'] . $option_value['price'] : ''); ?>" class="img-thumbnail" />
    <?php } ?>
    <?php echo $option_value['name']; ?>
    <?php if ($option_value['price']) { ?>
    (<?php echo $option_value['price_prefix']; ?><?php echo $option_value['price']; ?>)
    <?php } ?>
    </label>
    </div>
    <?php } ?>
    </div>
    </div>
    <?php } ?>
    <?php if ($option['type'] == 'checkbox') { ?>
    <div class="form-group<?php echo ($option['required'] ? ' required' : ''); ?>">
    <label class="control-label"><?php echo $option['name']; ?></label>
    <div id="input-option<?php echo $option['product_option_id']; ?>">
    <?php foreach ($option['product_option_value'] as $option_value) { ?>
    <div class="checkbox">
    <label>
    <input type="checkbox" name="option[<?php echo $option['product_option_id']; ?>][]" value="<?php echo $option_value['product_option_value_id']; ?>" />
    <?php if ($option_value['image']) { ?>
    <img src="<?php echo $option_value['image']; ?>" alt="<?php echo $option_value['name'] . ($option_value['price'] ? ' ' . $option_value['price_prefix'] . $option_value['price'] : ''); ?>" class="img-thumbnail" />
    <?php } ?>
    <?php echo $option_value['name']; ?>
    <?php if ($option_value['price']) { ?>
    (<?php echo $option_value['price_prefix']; ?><?php echo $option_value['price']; ?>)
    <?php } ?>
    </label>
    </div>
    <?php } ?>
    </div>
    </div>
    <?php } ?>
    <?php if ($option['type'] == 'text') { ?>
    <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>
    <input type="text" name="option[<?php echo $option['product_option_id']; ?>]" value="<?php echo $option['value']; ?>" placeholder="<?php echo $option['name']; ?>" id="input-option<?php echo $option['product_option_id']; ?>" class="form-control" />
    </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'] == 'file') { ?>
    <div class="form-group<?php echo ($option['required'] ? ' required' : ''); ?>">
    <label class="control-label"><?php echo $option['name']; ?></label>
    <button type="button" id="button-upload<?php echo $option['product_option_id']; ?>" data-loading-text="<?php echo $text_loading; ?>" class="btn btn-default btn-block"><i class="fa fa-upload"></i> <?php echo $button_upload; ?></button>
    <input type="hidden" name="option[<?php echo $option['product_option_id']; ?>]" value="" id="input-option<?php echo $option['product_option_id']; ?>" />
    </div>
    <?php } ?>
    <?php if ($option['type'] == 'date') { ?>
    <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>
    <div class="input-group date">
    <input type="text" name="option[<?php echo $option['product_option_id']; ?>]" value="<?php echo $option['value']; ?>" data-date-format="YYYY-MM-DD" id="input-option<?php echo $option['product_option_id']; ?>" class="form-control" />
    <span class="input-group-btn">
    <button class="btn btn-default" type="button"><i class="fa fa-calendar"></i></button>
    </span></div>
    </div>
    <?php } ?>
    <?php if ($option['type'] == 'datetime') { ?>
    <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>
    <div class="input-group datetime">
    <input type="text" name="option[<?php echo $option['product_option_id']; ?>]" value="<?php echo $option['value']; ?>" data-date-format="YYYY-MM-DD HH:mm" id="input-option<?php echo $option['product_option_id']; ?>" class="form-control" />
    <span class="input-group-btn">
    <button type="button" class="btn btn-default"><i class="fa fa-calendar"></i></button>
    </span></div>
    </div>
    <?php } ?>
    <?php if ($option['type'] == 'time') { ?>
    <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>
    <div class="input-group time">
    <input type="text" name="option[<?php echo $option['product_option_id']; ?>]" value="<?php echo $option['value']; ?>" data-date-format="HH:mm" id="input-option<?php echo $option['product_option_id']; ?>" class="form-control" />
    <span class="input-group-btn">
    <button type="button" class="btn btn-default"><i class="fa fa-calendar"></i></button>
    </span></div>
    </div>
    <?php } ?>
    <?php } ?>
    <?php } ?>
    <?php if ($recurrings) { ?>
    <hr>
    <h3><?php echo $text_payment_recurring; ?></h3>
    <div class="form-group required">
    <select name="recurring_id" class="form-control">
    <option value=""><?php echo $text_select; ?></option>
    <?php foreach ($recurrings as $recurring) { ?>
    <option value="<?php echo $recurring['recurring_id']; ?>"><?php echo $recurring['name']; ?></option>
    <?php } ?>
    </select>
    <div class="help-block" id="recurring-description"></div>
    </div>
    <?php } ?>
    <div class="form-group">
    <label class="control-label" for="input-quantity"><?php echo $entry_qty; ?></label>
    <input type="text" name="quantity" value="<?php echo $minimum; ?>" size="2" id="input-quantity" class="form-control" />
    <input type="hidden" name="product_id" value="<?php echo $product_id; ?>" />
    <br />
    <button type="button" id="button-cart" data-loading-text="<?php echo $text_loading; ?>" class="btn btn-primary btn-lg btn-block"><?php echo $button_cart; ?></button>
    </div>
    <?php if ($minimum > 1) { ?>
    <div class="alert alert-info"><i class="fa fa-info-circle"></i> <?php echo $text_minimum; ?></div>
    <?php } ?>
    </div>
    (P.S.опции, количество, в корзину)

    удалим эти строки (151-162):

    Код:
    <?php if ($product['price']) { ?>
    <p class="price">
    <?php if (!$product['special']) { ?>
    <?php echo $product['price']; ?>
    <?php } else { ?>
    <span class="price-new"><?php echo $product['special']; ?></span> <span class="price-old"><?php echo $product['price']; ?></span>
    <?php } ?>
    <?php if ($product['tax']) { ?>
    <span class="price-tax"><?php echo $text_tax; ?> <?php echo $product['tax']; ?></span>
    <?php } ?>
    </p>
    <?php } ?>
    (P.S.цена у рекомендуемых товаров)

    удалим эту строку (155):

    Код:
    <button type="button" data-toggle="tooltip" title="<?php echo $button_compare; ?>" onclick="compare.add('<?php echo $product['product_id']; ?>');"><i class="fa fa-exchange"></i></button>
    (P.S.кнопка сравнения у рекомендуемых товаров)

    удалим эти строки (203-256):

    Код:
    <script type="text/javascript"><!--
    $('#button-cart').on('click', function() {
    $.ajax({
    url: 'index.php?route=checkout/cart/add',
    type: 'post',
    data: $('#product input[type=\'text\'], #product input[type=\'hidden\'], #product input[type=\'radio\']:checked, #product input[type=\'checkbox\']:checked, #product select, #product textarea'),
    dataType: 'json',
    beforeSend: function() {
    $('#button-cart').button('loading');
    },
    complete: function() {
    $('#button-cart').button('reset');
    },
    success: function(json) {
    $('.alert, .text-danger').remove();
    $('.form-group').removeClass('has-error');
    
    if (json['error']) {
    if (json['error']['option']) {
    for (i in json['error']['option']) {
    var element = $('#input-option' + i.replace('_', '-'));
    
    if (element.parent().hasClass('input-group')) {
    element.parent().after('<div class="text-danger">' + json['error']['option'][i] + '</div>');
    } else {
    element.after('<div class="text-danger">' + json['error']['option'][i] + '</div>');
    }
    }
    }
    
    if (json['error']['recurring']) {
    $('select[name=\'recurring_id\']').after('<div class="text-danger">' + json['error']['recurring'] + '</div>');
    }
    
    // Highlight any found errors
    $('.text-danger').parent().addClass('has-error');
    }
    
    if (json['success']) {
    $('.breadcrumb').after('<div class="alert alert-success">' + json['success'] + '<button type="button" class="close" data-dismiss="alert">&times;</button></div>');
    
    $('#cart > button').html('<span id="cart-total"><i class="fa fa-shopping-cart"></i> ' + json['total'] + '</span>');
    
    $('html, body').animate({ scrollTop: 0 }, 'slow');
    
    $('#cart > ul').load('index.php?route=common/cart/info ul li');
    }
    },
    error: function(xhr, ajaxOptions, thrownError) {
    alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
    }
    });
    });
    //--></script>
    удалим эти строки (203-268):

    Код:
    <script type="text/javascript"><!--
    $('.date').datetimepicker({
    pickTime: false
    });
    
    $('.datetime').datetimepicker({
    pickDate: true,
    pickTime: true
    });
    
    $('.time').datetimepicker({
    pickDate: false
    });
    
    $('button[id^=\'button-upload\']').on('click', function() {
    var node = this;
    
    $('#form-upload').remove();
    
    $('body').prepend('<form enctype="multipart/form-data" id="form-upload" style="display: none;"><input type="file" name="file" /></form>');
    
    $('#form-upload input[name=\'file\']').trigger('click');
    
    if (typeof timer != 'undefined') {
    clearInterval(timer);
    }
    
    timer = setInterval(function() {
    if ($('#form-upload input[name=\'file\']').val() != '') {
    clearInterval(timer);
    
    $.ajax({
    url: 'index.php?route=tool/upload',
    type: 'post',
    dataType: 'json',
    data: new FormData($('#form-upload')[0]),
    cache: false,
    contentType: false,
    processData: false,
    beforeSend: function() {
    $(node).button('loading');
    },
    complete: function() {
    $(node).button('reset');
    },
    success: function(json) {
    $('.text-danger').remove();
    
    if (json['error']) {
    $(node).parent().find('input').after('<div class="text-danger">' + json['error'] + '</div>');
    }
    
    if (json['success']) {
    alert(json['success']);
    
    $(node).parent().find('input').val(json['code']);
    }
    },
    error: function(xhr, ajaxOptions, thrownError) {
    alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
    }
    });
    }
    }, 500);
    });
    //--></script>
    (P.S.мы удалили лишние скрипты, возможно я удалил не весь “мусор”, позднее разберёмся)

    Вообще можно было бы и удалить основную картинку и превьюшки, но я их пока оставлю, а потом уже решим нужно нам это или нет – удалить не вставить.

    4. Откроем файл ../catalog/view/theme/default/template/information/sitemap.tpl и удалим эту строку (44):

    Код:
    <li><a href="<?php echo $special; ?>"><?php echo $text_special; ?></a></li>
    удалим эти строки (48-50):

    Код:
    <li><a href="<?php echo $address; ?>"><?php echo $text_address; ?></a></li>
    <li><a href="<?php echo $history; ?>"><?php echo $text_history; ?></a></li>
    <li><a href="<?php echo $download; ?>"><?php echo $text_download; ?></a></li>
    удалим эти строки (50-51):

    Код:
    <li><a href="<?php echo $cart; ?>"><?php echo $text_cart; ?></a></li>
    <li><a href="<?php echo $checkout; ?>"><?php echo $text_checkout; ?></a></li>
    Ну всё, на сегодня пожалуй хватит, в следующих статьях продолжим.