2 years ago

#301518

test-img

Vitaliy Prokopenko

Opencart 3.x products tabs help requaired

I want to make a module for displaying products by the type of tabs. The products are taken from the selected categories, it has limitions by showing products, you van enter images whidth and heigh, the tab is assigned the name of the category, categories selecting from admin panel -> extensions -> extensions -> product cateory tabs

sample view

Controller.php file contains

<?php class ControllerExtensionModuleCategoryProductTab extends Controller {
public function index($setting) {
    static $module = 0;
    
    $this->load->language('extension/module/category_product_tab');

    $data['lang'] = $this->language->get('code');
    
    $data['heading_titles'] = $setting['description_title'][$this->config->get('config_language_id')]['title'] ? $setting['description_title'][$this->config->get('config_language_id')]['title'] : '';
    
    $data['text_tax'] = $this->language->get('text_tax');
    $data['button_cart'] = $this->language->get('button_cart');
    $data['button_wishlist'] = $this->language->get('button_wishlist');
    $data['button_compare'] = $this->language->get('button_compare');

    $this->load->model('catalog/category');

    $this->load->model('catalog/product');

    $this->load->model('tool/image');

    $data['categories'] = array();

    if (!$setting['limit']) {
        $setting['limit'] = 4;
    }
    
    if ($setting['subcategory']) {
        $sub_category = true;
    } else {
        $sub_category = false;
    }
    
    if ($setting['sorted'] == 1) {
        $sorted = 'p.date_added';
    } elseif ($setting['sorted'] == 2) {
        $sorted = 'p.name';
    } elseif ($setting['sorted'] == 3) {
        $sorted = 'p.price';
    } elseif ($setting['sorted'] == 4) {
        $sorted = 'p.rating';
    } elseif ($setting['sorted'] == 5) {
        $sorted = 'p.model';
    } elseif ($setting['sorted'] == 6) {
        $sorted = 'best_product';
    } else {
        $sorted = 'p.name';
    }
    
    if (!empty($setting['category'])) {
        $categories = array_slice($setting['category'], 0);

        foreach ($categories as $category_id) {
            $category_info = $this->model_catalog_category->getCategory($category_id);

            if ($category_info) {
                
                $products = array();

                $filter_data = array(
                    'filter_category_id'    => $category_id,
                    'filter_sub_category'   => $sub_category,
                    'sort'                  => $sorted,
                    'order'                 => 'DESC',
                    'start'                 => 0,
                    'limit'                 => $setting['limit']
                );


                $results = $this->model_catalog_product->getProducts($filter_data);

                
                foreach ($results as $result) {
                    if($result){
                        if ($result['image']) {
                            $image = $this->model_tool_image->resize($result['image'], $setting['width'], $setting['height']);
                        } else {
                            $image = $this->model_tool_image->resize('placeholder.png', $setting['width'], $setting['height']);
                        }

                        if ($this->customer->isLogged() || !$this->config->get('config_customer_price')) {
                            $price = $this->currency->format($this->tax->calculate($result['price'], $result['tax_class_id'], $this->config->get('config_tax')), $this->session->data['currency']);
                        } else {
                            $price = false;
                        }

                        if ((float)$result['special']) {
                            $special = $this->currency->format($this->tax->calculate($result['special'], $result['tax_class_id'], $this->config->get('config_tax')), $this->session->data['currency']);
                        } else {
                            $special = false;
                        }

                        if ($this->config->get('config_tax')) {
                            $tax = $this->currency->format((float)$result['special'] ? $result['special'] : $result['price'], $this->session->data['currency']);
                        } else {
                            $tax = false;
                        }

                        if ($this->config->get('config_review_status')) {
                            $rating = $result['rating'];
                        } else {
                            $rating = false;
                        }

                        $products[] = array(
                            'product_id'  => $result['product_id'],
                            'thumb'       => $image,
                            'name'        => $result['name'],
                            'description' => utf8_substr(trim(strip_tags(html_entity_decode($result['description'], ENT_QUOTES, 'UTF-8'))), 0, $this->config->get('theme_' . $this->config->get('config_theme') . '_product_description_length')) . '..',
                            'price'       => $price,
                            'special'     => $special,
                            'tax'         => $tax,
                            'rating'      => $rating,
                            'href'        => $this->url->link('product/product', 'product_id=' . $result['product_id'])
                        );
                    }
                }
                $data['categories'][] = array(
                    'category_id' => $category_info['category_id'],
                    'products'    => $products,
                    'name'        => $category_info['name'],
                    'href'        => $this->url->link('product/category', 'path=' . $category_info['category_id'])
                );
            }
        }
    }
    
    $data['module'] = $module++;
    
    if ($data['categories']) {
        return $this->load->view('extension/module/category_product_tab', $data);
    }
}}

Twig `

                {% if (categories) %} 
                    
                        {% if (heading_titles) %} 
                            <h4>{{ heading_titles }}</h4>
                        {% endif %} 

                        <ul class="nav nav-tabs" role="tablist">
                            {% set s = 0 %} 
                            {% for category in categories %} 
                                <li {% if (s == 0) %}class="nav-item" style="border: solid 1px; border-color: aliceblue;"{% endif %}><a href="#tab-category-{{ category['category_id'] }}" data-toggle="tab" class="nav-link">{{ category['name'] }}</a></li>
                                {% set s = s + 1 %}
                            {% endfor %} 
                        </ul>

                        <div class="tab-content">
                                {% set s = 0 %}
                                {% for category in categories %} 
                                    <div class="tab-pane fade show {% if (s == 0) %}active{% endif %}" id="tab-category-{{ category['category_id'] }}">
                                        {% for product in category['products'] %} 
                                        
                                            <div class="preview-products-box grid-4">
                                                <div class="preview-products">
                                                
                                                    <div class="preview-products__item --grid">
                                                         <div class="preview-products__item-header preview-header">
                                                            <a class="preview-products__item-image" href="{{ product['href'] }}"><img src="{{ product['thumb'] }}" alt="{{ product['name'] }}" title="{{ product['name'] }}" class="class="img-fluid" /></a>
                                                            <button class="wishlist_item2834 preview-products__item-wishlist" type="button" data-toggle="tooltip" title="{{ button_wishlist }}" onclick="wishlist.add('{{ product['product_id'] }}');"><i class="las la-heart"></i></button>
                                                            <button class="compare_item2834 preview-products__item-wishlist --compare" type="button" data-toggle="tooltip" title="{{ button_compare }}" onclick="compare.add('{{ product['product_id'] }}');"><i class="las la-copy"></i></button>
                                                                <div class="preview-products__item-labels">
                                                                    {% set notice = '!!!Dont touch this variable!!!' %}
                                                                </div>
                                                        </div>
                                                        <div class="preview-products__item-body preview-body">
                                                            <h4><a class="preview-products__item-name" href="{{ product['href'] }}">{{ product['name'] }}</a></h4>
                                                            <p class="preview-products__item-description preview-description">{{ product['description'] }}</p>
                                                        </div>
                                                            <div class="preview-products__item-footer preview-footer">  
                                                                    <!--{% if (product['rating']) %} 
                                                                    <div class="rating">
                                                                      {% set i = 1 %}{% for i in i..5 %} 
                                                                      {% if (product['rating'] < i) %} 
                                                                      <span class="fa fa-stack"><i class="fa fa-star-o fa-stack-2x"></i></span>
                                                                      {% else %} 
                                                                      <span class="fa fa-stack"><i class="fa fa-star fa-stack-2x"></i><i class="fa fa-star-o fa-stack-2x"></i></span>
                                                                      {% endif %} 
                                                                      {% endfor %} 
                                                                    </div>
                                                                    {% endif %} -->
                                                                     {% if product.price and not product.status %}
                                                                <div class="preview-products__item-price">
                                                                    {% if not product.special %}
                                                                    <div class="price">{{ product.price }}</div>
                                                                        {% else %}
                                                                    <div class="price-new">{{ product.special }}</div>
                                                                    <div class="price-old">{{ product.price }}</div>
                                                                        {% endif %}
                                                                </div>
                                    
                                                     
                                                                        <!--  {% if (product['tax']) %} 
                                                                          <span class="price-tax">{{ text_tax }} {{ product['tax'] }}</span>
                                                                          {% endif %} 
                                                                        </p>
                                                                        {% endif %} -->
                                                            </div>
                                                  
                                                                      <button data-toggle="tooltip" title="{{ button_cart }}" class="preview-products__item-buy" type="button" onclick="cart.add('{{ product.product_id }}', 1 , this);">  <svg class="cart" width="20" height="20" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                                        <path fill-rule="evenodd" clip-rule="evenodd" d="M1.82904 0.314051C1.41062 -0.104684 0.732233 -0.104684 0.313814 0.314051C-0.104605 0.732786 -0.104605 1.41169 0.313814 1.83042L4.37014 5.88981L7.10786 19.5888L5.89211 23.2388C4.72738 23.8271 3.92871 25.0346 3.92871 26.4286C3.92871 28.401 5.52769 30 7.50014 30C9.09929 30 10.453 28.949 10.9081 27.5H21.592C22.0471 28.949 23.4007 30 24.9999 30C26.9723 30 28.5713 28.401 28.5713 26.4286C28.5713 24.4561 26.9723 22.8571 24.9999 22.8571C23.4007 22.8571 22.0471 23.9082 21.592 25.3571H10.9081C10.5263 24.1417 9.51236 23.2063 8.25161 22.9363L8.98652 20.7299H24.349C26.103 20.7299 27.6446 19.5663 28.1264 17.8785L29.9025 11.6574C29.9696 11.4224 30.0009 11.1872 30 10.9569C29.9951 9.6794 29.0012 8.55425 27.649 8.47273L6.81725 7.19988L6.34414 4.83256L1.82904 0.314051ZM24.349 18.5855H9.09264L7.25183 9.37444L27.5202 10.6133C27.7482 10.6271 27.9049 10.8485 27.8421 11.0683L26.066 17.2893C25.847 18.0565 25.1463 18.5855 24.349 18.5855ZM7.50014 27.8571C8.28911 27.8571 8.92871 27.2175 8.92871 26.4286C8.92871 25.6396 8.28911 25 7.50014 25C6.71116 25 6.07157 25.6396 6.07157 26.4286C6.07157 27.2175 6.71116 27.8571 7.50014 27.8571ZM26.4285 26.4286C26.4285 27.2175 25.7889 27.8571 24.9999 27.8571C24.2109 27.8571 23.5713 27.2175 23.5713 26.4286C23.5713 25.6396 24.2109 25 24.9999 25C25.7889 25 26.4285 25.6396 26.4285 26.4286Z" fill="#212121"></path>
                                                                        </svg>
                                                                        <svg class="check" width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                                        <path d="M6.70898 15.9941C7.1748 15.9941 7.53516 15.8008 7.79004 15.4229L16.0518 2.55566C16.2363 2.26562 16.3154 2.01953 16.3154 1.78223C16.3154 1.1582 15.876 0.727539 15.2432 0.727539C14.8125 0.727539 14.5488 0.885742 14.2852 1.29883L6.66504 13.3838L2.75391 8.36523C2.49023 8.02246 2.21777 7.88184 1.83105 7.88184C1.19824 7.88184 0.741211 8.33008 0.741211 8.94531C0.741211 9.21777 0.837891 9.48145 1.06641 9.75391L5.61914 15.4316C5.92676 15.8184 6.25195 15.9941 6.70898 15.9941Z" fill="white"/>
                                                                        </svg>
                                                                        </button>
                                                     
                                                    </div>
                                                </div>
                                              
                                             {% endfor %} 
                                        
                                            </div>
                                                                            
                                    </div>
                        </div>
                                {% set s = s + 1 %} 
                            {% endfor %} 
</div>
                {% endif %}
` But I confused the module add class to next product

result

php

css

opencart-3

0 Answers

Your Answer

Accepted video resources