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 w

Solution 1:

• 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... )

Solution 2:

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:

functionprod3(){ 
        $(".product-cell").css('width', '33.3%');
    }
functionprod4(){ 
         $(".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.

Solution 3:

functionprod3(){
    $(".product-cell").addClass("col-md-3");
}
functionprod4(){
    $(".product-cell").addClass("col-md-4");
}