Magento 2 Slick Slider – Slick Slider Function Not Working

ajaxmagento2magento2.2magento2.3slick

Slick slider function is not working after ajax response, This is the order of my code. Firstly I got a product collection response, Then I wrote a slick slider function. but slider function is not working.

This is dom element in phtml file in which ajax response appear

<div class="category-products clearfix products wrapper grid products-grid">
    <ol class="products list items product-items featured-collector featured-collector_<?php echo $categoryid; ?>">
    </ol>
</div>

This is my js code

require([
    'jquery'
    ], function($){
    jQuery.ajax({
        url: "/manufacturerpages/index/collection",
        type: "POST",
        data: "id= <?php echo $manpagedataarr['page_id']; ?>&categoryid=<?php echo $categoryid; ?>&carouselorder=<?php echo $manpagedataarr['carouselorder']; ?>&collection_type=<?php echo $manpagedataarr['collection_type']; ?>&product_ids=<?php echo $manpagedataarr['product_ids']; ?>&manufacturer=<?php echo $manpagedataarr['manufacturer']; ?>",
        success: function (res) {
            //console.log(res);
            var result = jQuery('.product-items', res).html();
            var undefined = false;
            if(typeof result === 'undefined'){
                result = res;
                undefined = true;
            }

            jQuery(".featured-collector_<?php echo $categoryid; ?>").html(result);
            jQuery(".landing-featured .ajax_loading").hide();
            jQuery( "form[data-role='tocart-form']" ).catalogAddToCart();
        }

    });
});

require([
    'jquery',
    'magiccart/slick',
        'alothemes'
    ], function($, slick){
    jQuery('.featured-collector_<?php echo $categoryid; ?>').slick({
        dots: false,
        infinite: true,
        slidesToShow: 6,
        slidesToScroll: 2,
        arrows: true,
        autoplay: false,
        draggable: true,
        speed: 300
    });
});

Best Answer

Actually one of possible reason why it may not properly working because you don't add the slick after ajax success response. You just need to replace this, with your js code

require([
    'jquery',
    'magiccart/slick',
    'alothemes'
    ], function($, slick){
    jQuery.ajax({
        url: "/manufacturerpages/index/collection",
        type: "POST",
        data: "id= <?php echo $manpagedataarr['page_id']; ?>&categoryid=<?php echo $categoryid; ?>&carouselorder=<?php echo $manpagedataarr['carouselorder']; ?>&collection_type=<?php echo $manpagedataarr['collection_type']; ?>&product_ids=<?php echo $manpagedataarr['product_ids']; ?>&manufacturer=<?php echo $manpagedataarr['manufacturer']; ?>",
        success: function (res) {
            //console.log(res);
            var result = jQuery('.product-items', res).html();
            var undefined = false;
            if(typeof result === 'undefined'){
                result = res;
                undefined = true;
            }

            jQuery(".featured-collector_<?php echo $categoryid; ?>").html(result);
            jQuery(".landing-featured .ajax_loading").hide();

            // ******This is your slick code***********
             jQuery('.featured-collector_<?php echo $categoryid; ?>').slick({
                    dots: false,
                    infinite: true,
                    slidesToShow: 6,
                    slidesToScroll: 2,
                    arrows: true,
                    autoplay: false,
                    draggable: true,
                    speed: 300
            });
            jQuery( "form[data-role='tocart-form']" ).catalogAddToCart();
        }

    });
});

I hope this will help

Related Solutions

Magento – slick slider error Uncaught TypeError: Cannot read property ‘add’ of null in magento2

That's due to calling init twice This works without error:

$(".slickslider").not('.slick-initialized').slick()

Magento 2.2.3 – How to Create Custom Form

Create layout XML

/app/code/Company/Module/view/frontend/layout/module_index_custom.xml

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <referenceContainer name="content">
        <block class="Company\Module\Block\Custom" name="customer_index_gallery" template="Vendor_Module::custom.phtml" cacheable="false"/>
    </referenceContainer>
</page>

/app/code/Company/Module/Block/Custom.php

<?php

namespace Vendor\Module\Block;

class Custom extends \Magento\Framework\View\Element\Template
{
    /**
     * Construct
     *
     * @param \Magento\Framework\View\Element\Template\Context $context
     * @param array $data
     */
    public function __construct(
        \Magento\Backend\Block\Template\Context $context,
        array $data = []
    )
    {
        parent::__construct($context, $data);
       }

    /**
     * Get form action URL for POST booking request
     *
     * @return string
     */
    public function getFormAction()
    {
        return '/companymodule/controller_name/custom';
        // here controller_name is index, action is booking
    }
}

/app/code/Company/Module/view/frontend/templates/custom.phtml

<form action="<?php echo $block->getFormAction() ?>" method="post">
    <input name="firstname" type="text">
    <input name="lastname" type="text">
    <input name="email" type="text">
    <input type="submit" value="informations">
</form>

/app/code/Company/Module/Controller/Index/Custom.php

<?php

namespace Company\Module\Controller\Index;

use Magento\Framework\Controller\ResultFactory;

class Custom extends \Magento\Framework\App\Action\Action
{
    /**
     * Booking action
     *
     * @return void
     */
    public function execute()
    {
        // 1. POST request : Get booking data
        $post = (array) $this->getRequest()->getPost();

        if (!empty($post)) {
            // Retrieve your form data
            $firstname   = $post['firstname'];
            $lastname    = $post['lastname'];
            $email       = $post['email'];
          
            // Doing-something with...

            // Display the succes form validation message
            $this->messageManager->addSuccessMessage('Booking done !');

            // Redirect to your form page (or anywhere you want...)
            $resultRedirect = $this->resultFactory->create(ResultFactory::TYPE_REDIRECT);
            $resultRedirect->setUrl('/companymodule/index/custom');

            return $resultRedirect;
        }
  
    }
}

Best Answer

Related Solutions

Magento – slick slider error Uncaught TypeError: Cannot read property ‘add’ of null in magento2

Magento 2.2.3 – How to Create Custom Form

Related Topic