CODEWITHSUNDEEP
javascriptjqueryshopifyliquidassign
user21
user21

Reputation: 1351

shopify click on different button will run different liquid code

If a user click on a button which has class name: '3-col', it will execute the following code: '{% assign products_per_row = "3" %}'.

and if a user click on a '4-col' button, it will execute the following code: '{% assign products_per_row = "4" %}'.

However the code below doesn't work.

I have researched all ways to do that, but I couldn't. Any advice is appreciated. Thanks!

<button class='3-col' onclick="prod3()"></button> 
<button class='4-col'onclick="prod4()" ></button> 
{% include 'product-loop' with settings.collection_sidebar %}


<script type="text/javascript">
 function prod3(){ 
            {% assign products_per_row = "3" %} 
        }
function prod4(){ 
            {% assign products_per_row = "4" %} 
        }

</script>

Upvotes: 1

Views: 7906

Answers (3)

rujal vasoya
rujal vasoya

Reputation: 11

function prod3(){
    $(".product-cell").addClass("col-md-3");
}
function prod4(){
    $(".product-cell").addClass("col-md-4");
}

Upvotes: 1

Nguyen Duy Phong
Nguyen Duy Phong

Reputation: 124

  • There's no way to do like yours.
  • But I give you relevant-mention:
    • Refer the link https://full-the-style.myharavan.com/collections/all; then click a filter-item on the left-bar, then right-bar must change some items following your choose.
    • On Chrome, you can press F12, check Network tab, click a filter-item on left-bar again; make sure that you can see request "/search?...view=grid_and_control"; => solve your problem by sending request to a specified search-page TEMPLATE.
  • On your case, try to do some following-steps:
    • Inside your Shopify admin/theme, create 2 search-pages TEMPLATES: "search.3col.liquid" & search.4col.liquid.
    • On each of buttons, You can make request to search-page with 2 views: "/search?view=3col" & "/search?view=4col"
    • Then you can make anything with HTML, CSS, and of course work with liquid-code on 2 search-pages above.

PS: The site above based on Haravan.com, it just likes Shopify.com (create your own store, customize theme with liquid code... )

Upvotes: 2

bknights
bknights

Reputation: 15402

This is the sort of thing I find curious about Shopify. There is no simple way to provide interaction between their templates and client side code.

In order to do this you need to do it all client side.

Lets say your products are in divs with class 'product-cell' then your code could be:

function prod3(){ 
        $(".product-cell").css('width', '33.3%');
    }
function prod4(){ 
         $(".product-cell").css('width', '25%');
    }

then make sure you are including jQuery as an asset in your theme and if this is something you want to make persistent include the use of localStorage or a cookie.

Upvotes: 2

Related Questions