0

I am trying to follow this answer but for me its not working perfectly

I created custom phtml & block which will show the product slick slider, till time is working perfectly, but after the use of ajax, its apending below the slider, not in slider

Here is my identifier.phtml

<div class="wrapper-custom">
  <div class="products wrapper <?= /* @noEscape */ $viewMode ?> products- 
     <?= /* @noEscape */ $viewMode ?>">
        <ol class="products list items product-items custom-items">
            <?php /** @var $_product \Magento\Catalog\Model\Product */ ?>
            <?php foreach ($_productCollection as $_product) :?>
                <li class="item product product-item">
                    <div class="product-item-info" data-container="product-<?= /* @noEscape */ $viewMode ?>">
                        <?php
                        $productImage = $block->getImage($_product, $imageDisplayArea);
                        if ($pos != null) {
                            $position = ' style="left:' . $productImage->getWidth() . 'px;'
                                . 'top:' . $productImage->getHeight() . 'px;"';
                        }
                        ?>
                        <?php // Product Image ?>
                        <a href="<?= $block->escapeUrl($_product->getProductUrl()) ?>"
                           class="product photo product-item-photo"
                           tabindex="-1">
                            <?= $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="<?= $block->escapeUrl($_product->getProductUrl()) ?>">
                                    <?= /* @noEscape */ $_helper->productAttribute($_product, $_product->getName(), 'name') ?>
                                </a>
                            </strong>
                            <?= $block->getReviewsSummaryHtml($_product, $templateType) ?>
                            <?= /* @noEscape */ $block->getProductPrice($_product) ?>
                            <?= $block->getProductDetailsHtml($_product) ?>

                            <div class="product-item-inner">
                                <div class="product actions product-item-actions"<?= strpos($pos, $viewMode . '-actions') ? $block->escapeHtmlAttr($position) : '' ?>>
                                    <div class="actions-primary"<?= strpos($pos, $viewMode . '-primary') ? $block->escapeHtmlAttr($position) : '' ?>>
                                        <?php if ($_product->isSaleable()) :?>
                                            <?php $postParams = $block->getAddToCartPostParams($_product); ?>
                                            <form data-role="tocart-form"
                                                  data-product-sku="<?= $block->escapeHtml($_product->getSku()) ?>"
                                                  action="<?= $block->escapeUrl($postParams['action']) ?>"
                                                  method="post">
                                                <input type="hidden"
                                                       name="product"
                                                       value="<?= /* @noEscape */ $postParams['data']['product'] ?>">
                                                <input type="hidden" name="<?= /* @noEscape */ Action::PARAM_NAME_URL_ENCODED ?>"
                                                       value="<?= /* @noEscape */ $postParams['data'][Action::PARAM_NAME_URL_ENCODED] ?>">
                                                <?= $block->getBlockHtml('formkey') ?>
                                                <button type="submit"
                                                        title="<?= $block->escapeHtmlAttr(__('Add to Cart')) ?>"
                                                        class="action tocart primary">
                                                    <span><?= $block->escapeHtml(__('Add to Cart')) ?></span>
                                                </button>
                                            </form>
                                        <?php else :?>
                                            <?php if ($_product->isAvailable()) :?>
                                                <div class="stock available"><span><?= $block->escapeHtml(__('In stock')) ?></span></div>
                                            <?php else :?>
                                                <div class="stock unavailable"><span><?= $block->escapeHtml(__('Out of stock')) ?></span></div>
                                            <?php endif; ?>
                                        <?php endif; ?>
                                    </div>
                                    <div data-role="add-to-links" class="actions-secondary"<?= strpos($pos, $viewMode . '-secondary') ? $block->escapeHtmlAttr($position) : '' ?>>
                                        <?php if ($addToBlock = $block->getChildBlock('addto')) :?>
                                            <?= $addToBlock->setProduct($_product)->getChildHtml() ?>
                                        <?php endif; ?>
                                    </div>
                                </div>
                                <?php if ($showDescription) :?>
                                    <div class="product description product-item-description">
                                        <?= /* @noEscape */ $_helper->productAttribute($_product, $_product->getShortDescription(), 'short_description') ?>
                                        <a href="<?= $block->escapeUrl($_product->getProductUrl()) ?>"
                                           title="<?= /* @noEscape */ $_productNameStripped ?>"
                                           class="action more"><?= $block->escapeHtml(__('Learn More')) ?></a>
                                    </div>
                                <?php endif; ?>
                            </div>
                        </div>
                    </div>
                </li>
                <?php endforeach; ?>
        </ol>
    </div>
    <?= $block->getToolbarHtml() ?>
    <script type="text/x-magento-init">
        {
            "#product_addtocart_form_custom": {
                "catalogAddToCart": {
                    "bindSubmit": true
                }
            }
        }
    </script>
<?php endif; ?>
<?php if($block->SliderEnable($id) == 0): ?>
    <script>
        require([
            'jquery',
            'slickSlider',
            'jquery/ui'
        ], function ($) {
            var jq = $.noConflict();
            jq(document).ready(function () {
                jq(".custom-items").not('.slick-initialized').slick({
                    dots: false,
                    infinite: true,
                    speed: 300,
                    arrows: true,
                    slidesToShow: 5,
                    slidesToScroll: 5,
                    responsive: [
                        {
                            breakpoint: 1280,
                            settings: {
                                slidesToShow: 3,
                                slidesToScroll: 3
                            }
                        },
                        {
                            breakpoint: 768,
                            settings: {
                                slidesToShow: 2,
                                slidesToScroll: 2
                            }
                        },
                        {
                            breakpoint: 600,
                            settings: {
                                slidesToShow: 1,
                                slidesToScroll: 1
                            }
                        }
                    ]
                });
            });
        });
    </script>
 <?php endif; ?>
<?php endif; ?>
</div>

my ajax script:

    <script type="text/javascript">
        require(['jquery',
        ], function ($) {
            $(document).ready(function () {
                var page = 2;
                $(document).on('click', '.slick-next', function (event) 
                    {
                    event.preventDefault();
                    // $('.custom-next').html("Loading...");
                    $.ajax({
                        url: "product/index/slider",
                        method: "POST",
                        data: {limit: 2,
                        page: page},
                        dataType: "json",
                        success: function (data)
                        {
                            // $('.slick-next').html("LOAD MORE");
                            if (data != '')
                            {
                                $('.wrapper-custom').append(data);
                            } else
                            {
                                $('.slick-next').html("No Data");
                            }
                        }
                    });
                });
            });
        });
    </script>

Slider Controller

      if ($this->getRequest()->isAjax())
    {
        $block = $resultPage->getLayout()
            ->createBlock('Vendor\ProductCarousel\Block\Configuration')
            ->setTemplate('Vendor_ProductCarousel::identifier.phtml')
            ->toHtml();

        $response->setData($block);
        return $response;
    }

and Configuration.php Block

public function setSlider($id)
{
    $page=($this->customerSession->getMyPage())? $this->customerSession->getMyPage() : 1;
    $pageSize=($this->customerSession->getMyLimit())? $this->customerSession->getMyLimit() : 6;

    $ProductCollection = $this->productCollectionFactory->create();
    $ProductFilterCollection = $ProductCollection->addAttributeToSelect('*')->setOrder($sort, 'asc')->setCurPage($page)->setPageSize($pageSize)->load();

    return $ProductFilterCollection;
}

I also created another phtml file to append whenever ajax calls, but its also not working.

Any reference, a suggestion would be appreciated!

  • Check report file in var/report folder. It will return error of your action. – Rohan Hapani Feb 10 at 13:18
  • @RohanHapani did not found any report – Sagar Parikh SGR Feb 11 at 4:26

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.