<!-- wp:paragraph -->
<p>you can get collection products with ajax call URL like this :<br>https://wokamall.com/collections/monitor-stand-riser?view=list_product&amp;constraint=limit=3+layout=carousel+grid=3+sectionId=1632465351a37e7d8d&amp;_=1634511860011</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>in ajax call will be :</p>
<!-- /wp:paragraph -->

<!-- wp:preformatted -->
<pre class="wp-block-preformatted">$.ajax({<br>    <strong>type</strong>: <strong>"get"</strong>,<br>    <strong>url</strong>: <strong>window</strong>.router + <strong>'/collections/' </strong>+ url,<br>    <strong>cache</strong>: <strong>false</strong>,<br>    <strong>data</strong>: {<br>        <strong>view</strong>: <strong>'list_product'</strong>,<br>        <strong>constraint</strong>: <strong>'limit=' </strong>+ limit + <strong>'+layout=' </strong>+ layout + <strong>'+grid=' </strong>+ grid + <strong>'+sectionId=' </strong>+ sectionId<br>    },<br>    beforeSend: <strong>function </strong>() {<br>        self.addClass(<strong>'ajax-loaded'</strong>);<br>    },<br>    success: <strong>function </strong>(data) {<br>        <strong>if </strong>(url != <strong>''</strong>) {<br>            self.find(<strong>'.products-grid'</strong>).html(data);<br>        }<br>        $(<strong>'[data-toggle="tooltip"]'</strong>).tooltip();<br>        ella.swapHoverVideo();<br>    },<br>    complete: <strong>function </strong>() {<br>        <strong>if </strong>(self.attr(<strong>'data-featured-products'</strong>) == <strong>undefined</strong>) {<br>            <strong>return</strong>;<br>        }<br>        <strong>if </strong>(layout == <strong>'carousel'</strong>) {<br>            <strong>var </strong>productGrid = self.find(<strong>'.products-grid'</strong>),<br>                gridItemWidth = productGrid.data(<strong>'row'</strong>),<br>                hasRightSidebar = $(<strong>'.halo-product-content .pro-page [data-has-right-sidebar]'</strong>);<br>            <strong>if </strong>(<strong>window</strong>.<strong>innerWidth </strong>&lt; 1200) {<br>                self.on(<strong>"afterChange"</strong>, <strong>function</strong>(event, slick) {<br>                    <strong>var </strong><em>isElementVisible </em>= <strong>function</strong>($el, threshold) {<br>                      <strong>var </strong>rect = $el[0].getBoundingClientRect();<br>                      <strong>var </strong>windowHeight = <strong>window</strong>.<strong>innerHeight </strong>|| <strong>document</strong>.<strong>documentElement</strong>.<strong>clientHeight</strong>;<br>                      threshold = threshold ? threshold : 0;<br><br>                      <strong>return </strong>(<br>                        rect.<strong>bottom </strong>&gt;= (0 - (threshold / 1.5)) &amp;&amp;<br>                        rect.<strong>right </strong>&gt;= 0 &amp;&amp;<br>                        rect.<strong>top </strong>&lt;= (windowHeight + threshold) &amp;&amp;<br>                        rect.<strong>left </strong>&lt;= (<strong>window</strong>.<strong>innerWidth </strong>|| <strong>document</strong>.<strong>documentElement</strong>.<strong>clientWidth</strong>)<br>                      );<br>                    };<br><br>                    $(<strong>'.product-item[data-product-id]'</strong>).each(<strong>function</strong>(i, el){<br>                      <strong>var </strong>self = $(<strong>this</strong>);<br>                      <strong>if</strong>(<em>isElementVisible</em>($(el), -100)) {<br>                        <strong>var </strong>$product = $(<strong>this</strong>);<br>                        <strong>if</strong>( !$product[0].hasAttribute(<strong>'data-json-product'</strong>) ) {<br>                          <strong>if</strong>( $product.hasClass(<strong>'json-loading'</strong>) )<br>                            <strong>return</strong>;<br>                          $product.addClass(<strong>'json-loading'</strong>);<br>                          <strong>var </strong>handle = $product.find(<strong>'.product-title'</strong>).attr(<strong>'href'</strong>);<br><br>                          <strong>var </strong>xhr = $.ajax({<br>                            <strong>type</strong>: <strong>'GET'</strong>,<br>                            <strong>url</strong>: handle,<br>                            <strong>data</strong>: {<br>                              <strong>view</strong>: <strong>'get_json'<br></strong><strong>                            </strong>},<br>                            <strong>cache</strong>: <strong>false</strong>,<br>                            <strong>dataType</strong>: <strong>'html'</strong>,<br>                            success: <strong>function </strong>(data) {<br>                              <strong>var </strong>json = <em>JSON</em>.<em>parse</em>(data);<br>                              $product.attr(<strong>'data-json-product'</strong>, <em>JSON</em>.<em>stringify</em>(json));<br>                            },<br>                            complete: <strong>function </strong>() {<br>                              $product.removeClass(<strong>'json-loading'</strong>);<br>                            }<br>                          });<br>                        }<br>                      }<br>                    });<br>                });<br>            }<br>            <strong>if</strong>(productGrid.not(<strong>'.slick-initialized'</strong>)) {<br>                productGrid.slick({<br>                    <strong>get </strong><em>slidesToShow</em>() {<br>                        <strong>if </strong>(hasRightSidebar.<strong>length</strong>) {<br>                            <strong>return this</strong>.slidesToShow = 5;<br>                        } <strong>else </strong>{<br>                            <strong>return this</strong>.slidesToShow = productGrid.data(<strong>'row'</strong>);<br>                        }<br>                    },<br><br>                    <strong>get </strong><em>vertical</em>() {<br>                        <strong>if</strong>(productGrid.hasClass(<strong>'verticle'</strong>)) {<br>                            <strong>return this</strong>.vertical = <strong>true</strong>;<br>                        }<strong>else </strong>{<br>                            <strong>return this</strong>.vertical = <strong>false</strong>;<br>                        }<br>                    },<br><br>                    <strong>get </strong><em>slidesToScroll</em>() {<br>                        <strong>if</strong>(productGrid.hasClass(<strong>'verticle'</strong>)) {<br>                            <strong>return this</strong>.slidesToScroll = 1;<br>                        }<strong>else </strong>{<br>                            <strong>return this</strong>.slidesToScroll = productGrid.data(<strong>'row'</strong>);<br>                        }<br>                    },<br><br>                    <strong>speed</strong>: 1000,<br>                    <strong>infinite</strong>: <strong>false</strong>,<br><br>                    <strong>get </strong><em>dots</em>() {<br>                        <strong>if</strong>((self.hasClass(<strong>'has-banner'</strong>)) || (<strong>window</strong>.layout_style == <strong>'layout_style_suppermarket'</strong>) || (<strong>window</strong>.layout_style == <strong>'layout_style_surfup'</strong>)){<br>                            <strong>return this</strong>.dots = <strong>true</strong>;<br>                        }<strong>else </strong>{<br>                            <strong>return this</strong>.dots = <strong>false</strong>;<br>                        };<br>                    },<br>                    <strong>get </strong><em>nextArrow</em>() {<br>                        <strong>if </strong>((<strong>window</strong>.layout_style == <strong>'layout_style_1170'</strong>) || (<strong>window</strong>.layout_style == <strong>'layout_style_flower'</strong>)) {<br>                            <strong>return this</strong>.nextArrow = <strong>'&lt;button type="button" class="slick-next"&gt;&lt;svg viewBox="0 0 50 50"&gt;&lt;path d="M 11.957031 13.988281 C 11.699219 14.003906 11.457031 14.117188 11.28125 14.308594 L 1.015625 25 L 11.28125 35.691406 C 11.527344 35.953125 11.894531 36.0625 12.242188 35.976563 C 12.589844 35.890625 12.867188 35.625 12.964844 35.28125 C 13.066406 34.933594 12.972656 34.5625 12.71875 34.308594 L 4.746094 26 L 48 26 C 48.359375 26.003906 48.695313 25.816406 48.878906 25.503906 C 49.058594 25.191406 49.058594 24.808594 48.878906 24.496094 C 48.695313 24.183594 48.359375 23.996094 48 24 L 4.746094 24 L 12.71875 15.691406 C 13.011719 15.398438 13.09375 14.957031 12.921875 14.582031 C 12.753906 14.203125 12.371094 13.96875 11.957031 13.988281 Z"&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/button&gt;'</strong>;<br>                        } <strong>else if </strong>((<strong>window</strong>.layout_style == <strong>'layout_style_fullwidth'</strong>) || (<strong>window</strong>.layout_style == <strong>'layout_style_suppermarket'</strong>) || (<strong>window</strong>.layout_style == <strong>'layout_style_surfup'</strong>)){<br>                            <strong>return this</strong>.nextArrow = <strong>'&lt;button type="button" class="slick-next"&gt;&lt;svg viewBox="0 0 478.448 478.448" class="icon icon-chevron-right" id="icon-chevron-right"&gt;&lt;g&gt;&lt;g&gt;&lt;polygon points="131.659,0 100.494,32.035 313.804,239.232 100.494,446.373 131.65,478.448 377.954,239.232"&gt;&lt;/polygon&gt;&lt;/g&gt;&lt;/g&gt;&lt;g&gt;&lt;/g&gt;&lt;g&gt;&lt;/g&gt;&lt;g&gt;&lt;/g&gt;&lt;g&gt;&lt;/g&gt;&lt;g&gt;&lt;/g&gt;&lt;g&gt;&lt;/g&gt;&lt;g&gt;&lt;/g&gt;&lt;g&gt;&lt;/g&gt;&lt;g&gt;&lt;/g&gt;&lt;g&gt;&lt;/g&gt;&lt;g&gt;&lt;/g&gt;&lt;g&gt;&lt;/g&gt;&lt;g&gt;&lt;/g&gt;&lt;g&gt;&lt;/g&gt;&lt;g&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;'</strong>;<br>                        }<br>                        <strong>else </strong>{<br>                            <strong>return this</strong>.nextArrow = <strong>'&lt;button type="button" class="slick-next"&gt;&lt;i class="fa fa-angle-right"&gt;&lt;/i&gt;&lt;/button&gt;'</strong>;<br>                        }<br>                    },<br>                    <strong>get </strong><em>prevArrow</em>() {<br>                        <strong>if </strong>((<strong>window</strong>.layout_style == <strong>'layout_style_1170'</strong>) || (<strong>window</strong>.layout_style == <strong>'layout_style_flower'</strong>)) {<br>                            <strong>return this</strong>.prevArrow = <strong>'&lt;button type="button" class="slick-prev"&gt;&lt;svg viewBox="0 0 50 50"&gt;&lt;path d="M 11.957031 13.988281 C 11.699219 14.003906 11.457031 14.117188 11.28125 14.308594 L 1.015625 25 L 11.28125 35.691406 C 11.527344 35.953125 11.894531 36.0625 12.242188 35.976563 C 12.589844 35.890625 12.867188 35.625 12.964844 35.28125 C 13.066406 34.933594 12.972656 34.5625 12.71875 34.308594 L 4.746094 26 L 48 26 C 48.359375 26.003906 48.695313 25.816406 48.878906 25.503906 C 49.058594 25.191406 49.058594 24.808594 48.878906 24.496094 C 48.695313 24.183594 48.359375 23.996094 48 24 L 4.746094 24 L 12.71875 15.691406 C 13.011719 15.398438 13.09375 14.957031 12.921875 14.582031 C 12.753906 14.203125 12.371094 13.96875 11.957031 13.988281 Z"&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/button&gt;'</strong>;<br>                        } <strong>else if </strong>((<strong>window</strong>.layout_style == <strong>'layout_style_fullwidth'</strong>) || (<strong>window</strong>.layout_style == <strong>'layout_style_suppermarket'</strong>) || (<strong>window</strong>.layout_style == <strong>'layout_style_surfup'</strong>)){<br>                            <strong>return this</strong>.prevArrow = <strong>'&lt;button type="button" class="slick-prev"&gt;&lt;svg viewBox="0 0 370.814 370.814" class="icon icon-chevron-left" id="icon-chevron-left"&gt;&lt;g&gt;&lt;g&gt;&lt;polygon points="292.92,24.848 268.781,0 77.895,185.401 268.781,370.814 292.92,345.961 127.638,185.401"&gt;&lt;/polygon&gt;&lt;/g&gt;&lt;/g&gt;&lt;g&gt;&lt;/g&gt;&lt;g&gt;&lt;/g&gt;&lt;g&gt;&lt;/g&gt;&lt;g&gt;&lt;/g&gt;&lt;g&gt;&lt;/g&gt;&lt;g&gt;&lt;/g&gt;&lt;g&gt;&lt;/g&gt;&lt;g&gt;&lt;/g&gt;&lt;g&gt;&lt;/g&gt;&lt;g&gt;&lt;/g&gt;&lt;g&gt;&lt;/g&gt;&lt;g&gt;&lt;/g&gt;&lt;g&gt;&lt;/g&gt;&lt;g&gt;&lt;/g&gt;&lt;g&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;'</strong>;<br>                        } <br>                        <strong>else </strong>{<br>                            <strong>return this</strong>.prevArrow = <strong>'&lt;button type="button" class="slick-prev"&gt;&lt;i class="fa fa-angle-left"&gt;&lt;/i&gt;&lt;/button&gt;'</strong>;<br>                        }<br>                    },<br>                    responsive: [<br>                        {<br>                            <strong>breakpoint</strong>: 1400,<br>                            settings: {<br>                                <strong>get </strong><em>slidesToShow</em>() {<br>                                    <strong>if</strong>(self.hasClass(<strong>'has-banner'</strong>)) {<br>                                        <strong>if</strong>(self.hasClass(<strong>'layout_style_4'</strong>)) {<br>                                            <strong>return this</strong>.slidesToShow = 2;<br>                                        } <strong>else </strong>{<br>                                            <strong>return this</strong>.slidesToShow = 3;<br>                                        }<br>                                    }<strong>else </strong>{<br>                                        <strong>if</strong>(gridItemWidth &gt; 5) {<br>                                            <strong>return this</strong>.slidesToShow = 5;<br>                                        }<br>                                        <strong>else </strong>{<br>                                            <strong>return this</strong>.slidesToShow = productGrid.data(<strong>'row'</strong>);<br>                                        }<br>                                    }<br>                                },<br>                                <strong>get </strong><em>slidesToScroll</em>() {<br>                                    <strong>if </strong>(self.hasClass(<strong>'has-banner'</strong>)) {<br>                                        <strong>return this</strong>.slidesToScroll = 3;<br>                                    }<strong>else </strong>{<br>                                        <strong>if</strong>(productGrid.hasClass(<strong>'verticle'</strong>)) {<br>                                            <strong>return this</strong>.slidesToScroll = 1;<br>                                        }<strong>else </strong>{<br>                                            <strong>if</strong>(gridItemWidth &gt;= 4) {<br>                                                <strong>return this</strong>.slidesToScroll = 4;<br>                                            }<strong>else if</strong>(gridItemWidth = 3) {<br>                                                <strong>return this</strong>.slidesToScroll = 3;<br>                                            }<strong>else </strong>{<br>                                                <strong>return this</strong>.slidesToScroll = 2;<br>                                            }<br>                                        }<br>                                    };<br>                                }<br>                            }<br>                        },<br>                        {<br>                            <strong>breakpoint</strong>: 1281,<br>                            <strong>dots</strong>: <strong>true</strong>,<br>                            <strong>arrows</strong>: <strong>false</strong>,<br>                            <strong>vertical</strong>: <strong>false</strong>,<br>                            settings: {<br>                                <strong>get </strong><em>slidesToShow</em>() {<br>                                    <strong>if</strong>(self.parents(<strong>'.featured-products'</strong>).hasClass(<strong>'layout_style_7'</strong>) &amp;&amp; self.hasClass(<strong>'col-md-12'</strong>)) {<br>                                        <strong>return this</strong>.slidesToShow = 2;<br>                                    }<strong>else </strong>{<br>                                        <strong>if</strong>(gridItemWidth &gt;= 4) {<br>                                            <strong>return this</strong>.slidesToScroll = 4;<br>                                        }<strong>else if</strong>(gridItemWidth = 3) {<br>                                            <strong>return this</strong>.slidesToScroll = 3<br>                                        }<strong>else </strong>{<br>                                            <strong>return this</strong>.slidesToScroll = 2<br>                                        }<br>                                    };<br>                                },<br>                                <strong>get </strong><em>slidesToScroll</em>() {<br>                                    <strong>if</strong>(self.parents(<strong>'.featured-products'</strong>).hasClass(<strong>'layout_style_7'</strong>) &amp;&amp; self.hasClass(<strong>'col-md-12'</strong>)) {<br>                                        <strong>return this</strong>.slidesToScroll = 2;<br>                                    }<strong>else </strong>{<br>                                        <strong>if</strong>(gridItemWidth &gt;= 4) {<br>                                            <strong>return this</strong>.slidesToScroll = 4;<br>                                        }<strong>else if</strong>(gridItemWidth = 3) {<br>                                            <strong>return this</strong>.slidesToScroll = 3<br>                                        }<strong>else </strong>{<br>                                            <strong>return this</strong>.slidesToScroll = 2<br>                                        }<br>                                    };<br>                                }<br>                            }<br>                        },<br>                        {<br>                            <strong>breakpoint</strong>: 1200,<br>                            settings: {<br>                                <strong>dots</strong>: <strong>true</strong>,<br>                                <strong>arrows</strong>: <strong>false</strong>,<br>                                <strong>vertical</strong>: <strong>false</strong>,<br>                                <strong>get </strong><em>slidesToShow</em>() {<br>                                    <strong>if</strong>(self.hasClass(<strong>'has-banner'</strong>)) {<br>                                        <strong>return this</strong>.slidesToShow = 2;<br>                                    }<strong>else </strong>{<br>                                        <strong>if</strong>(gridItemWidth &gt;= 4) {<br>                                            <strong>return this</strong>.slidesToShow = 4;<br>                                        }<strong>else if</strong>(gridItemWidth = 3) {<br>                                            <strong>return this</strong>.slidesToShow = 3<br>                                        }<strong>else </strong>{<br>                                            <strong>return this</strong>.slidesToShow = 2<br>                                        }<br>                                    }<br>                                },<br>                                <strong>get </strong><em>slidesToScroll</em>() {<br>                                    <strong>if </strong>(self.hasClass(<strong>'has-banner'</strong>)) {<br>                                        <strong>return this</strong>.slidesToScroll = 2;<br>                                    }<strong>else </strong>{<br>                                        <strong>if</strong>(gridItemWidth &gt;= 4) {<br>                                            <strong>return this</strong>.slidesToScroll = 4;<br>                                        }<strong>else if</strong>(gridItemWidth = 3) {<br>                                            <strong>return this</strong>.slidesToScroll = 3<br>                                        }<strong>else </strong>{<br>                                            <strong>return this</strong>.slidesToScroll = 2<br>                                        }<br>                                    };<br>                                }<br>                            }<br>                        },<br>                        {<br>                            <strong>breakpoint</strong>: 1025,<br>                            <strong>dots</strong>: <strong>true</strong>,<br>                            <strong>arrows</strong>: <strong>false</strong>,<br>                            <strong>vertical</strong>: <strong>false</strong>,<br>                            settings: {<br>                                <strong>get </strong><em>slidesToShow</em>() {<br>                                    <strong>if</strong>(self.parents(<strong>'.featured-products'</strong>).hasClass(<strong>'layout_style_7'</strong>) &amp;&amp; self.hasClass(<strong>'col-md-12'</strong>)) {<br>                                        <strong>return this</strong>.slidesToShow = 2;<br>                                    }<strong>else </strong>{<br>                                        <strong>if</strong>(gridItemWidth &gt;= 4) {<br>                                            <strong>return this</strong>.slidesToScroll = 4;<br>                                        }<strong>else if</strong>(gridItemWidth = 3) {<br>                                            <strong>return this</strong>.slidesToScroll = 3<br>                                        }<strong>else </strong>{<br>                                            <strong>return this</strong>.slidesToScroll = 2<br>                                        }<br>                                    };<br>                                },<br>                                <strong>get </strong><em>slidesToScroll</em>() {<br>                                    <strong>if</strong>(self.parents(<strong>'.featured-products'</strong>).hasClass(<strong>'layout_style_7'</strong>) &amp;&amp; self.hasClass(<strong>'col-md-12'</strong>)) {<br>                                        <strong>return this</strong>.slidesToScroll = 2;<br>                                    }<strong>else </strong>{<br>                                        <strong>if</strong>(gridItemWidth &gt;= 4) {<br>                                            <strong>return this</strong>.slidesToScroll = 4;<br>                                        }<strong>else if</strong>(gridItemWidth = 3) {<br>                                            <strong>return this</strong>.slidesToScroll = 3<br>                                        }<strong>else </strong>{<br>                                            <strong>return this</strong>.slidesToScroll = 2<br>                                        }<br>                                    };<br>                                }<br>                            }<br>                        },<br>                        {<br>                            <strong>breakpoint</strong>: 992,<br>                            settings: {<br>                                <strong>dots</strong>: <strong>true</strong>,<br>                                <strong>arrows</strong>: <strong>false</strong>,<br>                                <strong>vertical</strong>: <strong>false</strong>,<br>                                <strong>get </strong><em>slidesToShow</em>() {<br>                                    <strong>if</strong>(gridItemWidth &gt;= 3) {<br>                                        <strong>if</strong>(self.hasClass(<strong>'layout_style_5'</strong>) || self.hasClass(<strong>'layout_style_6'</strong>)) {<br>                                            <strong>return this</strong>.slidesToShow = 2;<br>                                        } <strong>else </strong>{<br>                                            <strong>return this</strong>.slidesToShow = 3;<br>                                        }<br>                                    }<strong>else </strong>{<br>                                        <strong>return this</strong>.slidesToShow = 2<br>                                    }<br>                                },<br>                                <strong>get </strong><em>slidesToScroll</em>() {<br>                                    <strong>if</strong>(gridItemWidth &gt;= 3) {<br>                                        <strong>if</strong>(self.hasClass(<strong>'layout_style_5'</strong>) || self.hasClass(<strong>'layout_style_6'</strong>)) {<br>                                            <strong>return this</strong>.slidesToScroll = 2;<br>                                        } <strong>else </strong>{<br>                                            <strong>return this</strong>.slidesToScroll = 3;<br>                                        }<br>                                    }<strong>else </strong>{<br>                                        <strong>return this</strong>.slidesToScroll = 2<br>                                    }<br>                                }<br>                            }<br>                        },<br>                        {<br>                            <strong>breakpoint</strong>: 768,<br>                            <strong>settings</strong>: {<br>                                <strong>slidesToShow</strong>: 2,<br>                                <strong>slidesToScroll</strong>: 2,<br>                                <strong>arrows</strong>: <strong>false</strong>,<br>                                <strong>vertical</strong>: <strong>false</strong>,<br>                                <strong>dots</strong>: <strong>true<br></strong><strong>                            </strong>}<br>                        }<br>                    ]<br>                });<br>            };<br>        }<br><br>        <strong>if </strong>(ella.checkNeedToConvertCurrency()) {<br>            <strong><em>Currency</em></strong>.convertAll(<strong>window</strong>.shop_currency, $(<strong>'#currencies .active'</strong>).attr(<strong>'data-currency'</strong>), <strong>'span.money'</strong>, <strong>'money_format'</strong>);<br>        };<br>        <strong>if </strong>($(<strong>'.shopify-product-reviews-badge'</strong>).<strong>length </strong>&amp;&amp; $(<strong>'.spr-badge'</strong>).<strong>length</strong>) {<br>            <strong>return </strong><strong>window</strong>.SPR.registerCallbacks(), <strong>window</strong>.SPR.initRatingHandler(), <strong>window</strong>.SPR.initDomEls(), <strong>window</strong>.SPR.loadProducts(), <strong>window</strong>.SPR.loadBadges();<br>        };<br>    }<br>});</pre>
<!-- /wp:preformatted -->