Shopify Klick auf verschiedenen Taste unterschiedliche Flüssigkeits Code ausführen

Question

Wenn ein Benutzer auf eine Schaltfläche klickt, die Klassennamen hat: ‚3-col‘, wird es den folgenden Code ausführen: ‚{% assign products_per_row =‚3‘%}‘ .

und wenn ein Benutzer auf Knopfdruck '4-col', wird es den folgenden Code ausführen: '{% assign products_per_row = "4" %}'.

jedoch unterhalb der Code nicht funktioniert.

Ich habe alle Möglichkeiten erforscht, das zu tun, aber ich kann es nicht. Jeder Rat wird geschätzt. Vielen Dank!

<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> 

Answer 1

• Es gibt keine Möglichkeit, wie Ihre zu tun.
• Aber ich gebe Ihnen relevante-Erwähnung:
  • Siehe den Link https://full-the-style.myharavan.com/collections/all; Klicken Sie dann auf ein Filterelement in der linken Leiste, dann muss die rechte Leiste einige Elemente nach Ihrer Auswahl ändern.
  • On Chrome können Sie F12, überprüfen Registerkarte Netzwerk, klicken Sie auf einen Filter-Element auf der linken Leiste erneut drücken; Stellen Sie sicher, dass Sie die Anfrage "/search?...view=grid_and_control" sehen können. =>lösen Sie Ihr Problem, indem Sie eine Anfrage an eine angegebene Suchseite SCHABLONE senden.
• Auf Ihrem Fall versuchen, einige folgenden Schritte zu tun:
  • In Ihrem Shopify admin/Thema, erstellen 2 Suchseiten VORLAGEN: "search.3col.liquid" & search.4col.liquid .
  • Auf jeder der Tasten können Sie Antrag stellen suchen-Seite mit 2 Ansichten: "/ search view = 3col" & "?/Search view = 4COL"
  • Dann können Sie etwas mit HTML machen, CSS, und natürlich mit flüssigem Code auf 2 obigen Suchseiten arbeiten.

PS: Die Seite oben basiert auf Haravan.com, es mag nur Shopify.com (Ihren eigenen Shop erstellen, Thema mit Flüssigkeit Code anpassen ...)

Answer 2

Dies ist die Art von Sache, die ich neugierig Shopify finden. Es gibt keine einfache Möglichkeit, eine Interaktion zwischen ihren Vorlagen und dem clientseitigen Code bereitzustellen.

Um dies Sie tun müssen, sie alle Client-Seite zu tun.

Können sagen, Ihre Produkte in divs mit Klasse sind ‚Produkt-cell‘ dann könnte Ihr Code sein:

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

dann stellen Sie sicher, dass Sie jQuery als Vermögenswert in Ihrem Thema sind inklusive und wenn dies etwas, das Sie Sie möchten dauerhaft die Verwendung von localStorage oder eines Cookies einschließen.

Answer 3

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