Thể hiện sản phẩm của một category trên homepage

Thảo luận trong 'Catalog - Product' bắt đầu bởi thien_magento, 14 Tháng tám 2016.

  1. thien_magento

    thien_magento New Member

    Xin chào mọi người,
    Em đang tìm hiểu về magento 2 mà muốn thể hiện sản phẩm của 1 category trên homepage:
    Em đọc và tìm hiểu thì chỉ cần paste code vào homepage
    code:
    {{block type="catalog/product_list" column_count="4" category_id="4" template="catalog/product/list.phtml"}}
    Em làm như vậy mà trên trang chỉ thể hiện được 1 "dải màu xám" nhưng ko có sản phẩm như hình sau:

    magento 2.png
    Nhờ mời người chỉ giúp
    Last edited: 14 Tháng tám 2016
  2. hungdv.tb

    hungdv.tb New Member

    Cái này là magento 1 .... Magento 2 cú pháp thế này
    {{block class="Magento\Catalog\Block\Product\ListProduct" template="Magento_Catalog::product\list.phtml" category_id=" 4"}}
    Mình chưa làm thử nhưng đây là cách gọi 1 block bất kì trong cms. Thường thì sẽ không làm như thế này kể cả ở magento 1 như cách bạn làm ở trên. tại vì cái template này sẽ dùng chung với trang category nên sẽ chỉ sử dụng class "Magento\Catalog\Block\Product\ListProduct" thôi còn template bạn có thể tạo 1 cái template mới đặt tên gì cũng được đặt trong module của bạn. Lúc gọi thì dùng cú pháp template="Your_Module::path\template.phtml" cái biến category kia thì bạn thích truyền những biến nào vào cũng được.
    Khi vào file phtml sẽ dùng lệnh $this->getCategoryId() để lấy giá trị category_id. Cái này tùy biến theo kiểu ten_bien =>getTenBien()...
    Mình paste cho bạn 1 đoạn phtml để lấy nhé.
    Mã:
    <?php
    use Magento\Framework\App\Action\Action;
    $categoryId = $this->getCategoryId();
    $_productCollection = $block->getCategoryProducts($categoryId);
    $_helper = $this->helper('Magento\Catalog\Helper\Output');
    ?>
    <?php if (!$_productCollection->count()): ?>
        <div></div>
    <?php else: ?>
        <?php echo $block->getAdditionalHtml() ?>
    
        <?php
        $objectManager = \Magento\Framework\App\ObjectManager::getInstance();
        $currentCateg = $objectManager->get('Magento\Framework\Registry')->registry('current_category');//get current category
        $categoryHelper = $objectManager->get('Magento\Catalog\Helper\Category');
        ?>
    
    
        <?php
        if ($block->getMode() == 'grid') {
            $viewMode = 'grid';
            $image = 'category_page_grid';
            $showDescription = false;
            $templateType = \Magento\Catalog\Block\Product\ReviewRendererInterface::SHORT_VIEW;
        } else {
            $viewMode = 'list';
            $image = 'category_page_list';
            $showDescription = true;
            $templateType = \Magento\Catalog\Block\Product\ReviewRendererInterface::FULL_VIEW;
        }
        /**
         * Position for actions regarding image size changing in vde if needed
         */
        $pos = $block->getPositioned();
        ?>
        <div class="products wrapper <?php /* @escapeNotVerified */ echo $viewMode; ?> products-<?php /* @escapeNotVerified */ echo $viewMode; ?>">
            <?php $iterator = 1; ?>
            <div class="products list items product-items product-carosel" id="pro-owl-<?php echo $categoryId; ?>">
                <?php /** @var $_product \Magento\Catalog\Model\Product */ ?>
                <?php foreach ($_productCollection as $_product): ?>
                    <?php /* @escapeNotVerified */ echo($iterator++ == 1) ? '<div class="item product product-item">' : '</div><div class="item product product-item">' ?>
                    <div class="product-item-info" data-container="product-grid">
                        <?php
                        $productImage = $block->getImage($_product, $image);
                        if ($pos != null) {
                            $position = ' style="left:' . $productImage->getWidth() . 'px;'
                                . 'top:' . $productImage->getHeight() . 'px;"';
                        }
                        ?>
                        <?php // Product Image ?>
                        <a href="<?php /* @escapeNotVerified */ echo $_product->getProductUrl() ?>" class="product photo product-item-photo" tabindex="-1">
                            <?php echo $productImage->toHtml(); ?>
                        </a>
    
    
                        <div class="product details product-item-details">
                            <?php
                            $_productNameStripped = $block->stripTags($_product->getName(), null, true);
                            ?>
                            <strong class="product name product-item-name">
                                <a class="product-item-link"
                                   href="<?php /* @escapeNotVerified */ echo $_product->getProductUrl() ?>">
                                    <?php /* @escapeNotVerified */ echo $_helper->productAttribute($_product, $_product->getName(), 'name'); ?>
                                </a>
                            </strong>
                            <?php echo $block->getReviewsSummaryHtml($_product, $templateType); ?>
                            <?php /* @escapeNotVerified */ echo $block->getProductPrice($_product) ?>
                            <?php echo $block->getProductDetailsHtml($_product); ?>
                            <div class="product-options-wrapper" id="product-options-wrapper">
                                <?php if ($swatchoptionsBlock = $block->getChildBlock($_product->getTypeId() . '_feature_swatch_prototype'.$this->getCategoryId())): ?>
                                    <?php echo $swatchoptionsBlock->setProduct($_product)->toHtml(); ?>
                                <?php endif; ?>
                            </div>
    
                            <div class="product-item-inner">
                                <div class="product actions product-item-actions"<?php echo strpos($pos, $viewMode . '-actions') ? $position : ''; ?>>
                                    <div class="actions-primary"<?php echo strpos($pos, $viewMode . '-primary') ? $position : ''; ?>>
                                        <?php if ($_product->isSaleable()): ?>
                                            <?php $postParams = $block->getAddToCartPostParams($_product); ?>
                                            <form data-role="tocart-form" action="<?php /* @escapeNotVerified */ echo $postParams['action']; ?>" method="post">
                                                <input type="hidden" name="product" value="<?php /* @escapeNotVerified */ echo $postParams['data']['product']; ?>">
                                                <input type="hidden" name="<?php /* @escapeNotVerified */ echo Action::PARAM_NAME_URL_ENCODED; ?>" value="<?php /* @escapeNotVerified */ echo $postParams['data'][Action::PARAM_NAME_URL_ENCODED]; ?>">
                                                <?php echo $block->getBlockHtml('formkey')?>
                                               
                                                <button type="submit"
                                                        title="<?php echo $block->escapeHtml(__('Add to Bag')); ?>"
                                                        class="action tocart primary"
                                                        data-ptype="<?php echo $_product->getTypeId() == 'giftvoucher' ? 'giftvoucher' : '' ?>"
                                                        data-purl="<?php echo $_product->getProductUrl() ?>">
                                                    <span><?php /* @escapeNotVerified */ echo __('Add to Bag') ?></span>
                                                </button>
                                            </form>
                                        <?php else: ?>
                                            <?php if ($_product->getIsSalable()): ?>
                                                <div class="stock available"><span><?php /* @escapeNotVerified */ echo __('In stock') ?></span></div>
                                            <?php else: ?>
                                                <div class="stock unavailable"><span><?php /* @escapeNotVerified */ echo __('Out of stock') ?></span></div>
                                            <?php endif; ?>
                                        <?php endif; ?>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <?php echo($iterator == count($_productCollection)+1) ? '</div>' : '' ?>
                <?php endforeach; ?>
            </div>
        </div>
        <?php if (!$block->isRedirectToCartEnabled()) : ?>
            <script type="text/x-magento-init">
            {
                "[data-role=tocart-form], .form.map.checkout": {
                    "catalogAddToCart": {}
                }
            }
            </script>
        <?php endif; ?>
    <?php endif; ?>
    
    <script>
        require(
            [
                'jquery',
                'carousel'
            ],
            function ($) {
                $(document).ready(function () {
                    $('#pro-owl-<?php echo $categoryId; ?>').owlCarousel({
                        autoPlay: 3000, //Set AutoPlay to 3 seconds
    
                        items : 3,
                        itemsDesktop : [1199,3],
                        itemsDesktopSmall : [979,3],
                        paginationNumbers: false,
                        dots: false,
                        navigation: true,
                        navigationText: [
                            "<i class='fa fa-chevron-left'></i>",
                            "<i class='fa fa-chevron-right'></i>"
                        ]
                    });
    
                    /*setTimeout(function(){
                        $('.tab-content').css('display','none');
                    }, 2000);*/
    
                });
            }
        );
    </script>
    
    thien_magento thích bài này.
  3. thien_magento

    thien_magento New Member

    chào Bác,
    Lời đầu tiên cám ơn bác rất nhiều!
    Vừa nghỉ lễ thì gặp được câu trả lời của bác thì tuyệt cú mèo, em đã dùng lệnh bác gởi và đã call category ( theo ý) lên homepage.
    --> Em muốn kiểm soát "số sản phẩm call ra" 20 chẳng hạn và " chỉ 5 sản phẩm trên 1 hàng thôi"

    Em thì chỉ mới tập bước đầu tìm hiểu magento thôi nên chỉ mới biết dùng cái lệnh đấy thôi,
    Còn làm template đặt trong module thì em chưa thực biết nên chưa thể sử dụng được
    --> bác có sách hay hướng dẫn nào cụ thể từng bước thì chia sẻ giúp em với
    Mong bác hỗ trợ tiếp
  4. hungdv.tb

    hungdv.tb New Member

    {{block class="Magento\Catalog\Block\Product\ListProduct" template="Magento_Catalog::product\list.phtml" category_id=" 4" limit="10"}}
    Ở đây bạn có thể thêm option litmit="10".
    Ở trong file template bạn sẽ lấy được giá trị 10 bằng cách $limit = $this->getLimit();
    Sau đó trong cái $collection sau khi được lấy ra bạn thêm $collection->setPageSize($limit);
    Vậy là bạn sẽ giới hạn được số sản phẩm. Nếu bạn mới tìm hiểu chưa thông thạo nhiều để dễ nhất bạn copy file Magento_Catalog/template/product/list.phtml rồi đổi tên. Rồi trong
    {{block class="Magento\Catalog\Block\Product\ListProduct" template="Magento_Catalog::product\list.phtml" category_id=" 4" limit="10"}}
    Bạn gọi đến file đấy. Sau đó bạn chỉnh sửa sắp xếp thế nào thì tùy. Muốn nó thành slide hay cái gì cũng được. Bạn nên làm sáng tạo chút. Mình làm code thì ko cần thiết phải cứng nhắc. Cứ làm ra kết quả đúng là được mặc dù có thể bị đánh giá là nghiệp dư thiếu tối ưu. Nếu bạn tự mày mò ra cách của riêng mình sẽ hiểu rõ bản chất hơn. Sau này có kinh nghiệm rồi sẽ tốt hơn.

Chia sẻ trang này