Ich verwende derzeit den Shopify-Kauf-Button .
Zum größten Teil habe ich einfach den Einbettungscode kopiert und eingefügt und nicht viel geändert. Wenn Sie bis zu "toggle":{ nach unten scrollen, werden Sie feststellen, dass ich es so eingerichtet habe, dass iframe und sticky auf false gesetzt ist.
Wenn ein Produkt zu einem Warenkorb hinzugefügt wird, erscheint im Warenkorb eine Schaltfläche, über die der Einkaufswagen angezeigt wird. .shopify-buy-frame.shopify-buy-frame--toggle
Normalerweise erscheint es in der mittleren rechten Ecke des Bildschirms als fixiertes div , aber da meine Option sticky auf "false" gesetzt ist, wird sie am unteren Rand von body platziert.
Ich möchte in der Lage sein, einen übergeordneten Container zuzuweisen, mit dem diese Umschaltschaltfläche verbunden ist. Im Idealfall möchte ich sie in meinen Header einfügen und nicht unten im Textkörper meiner Seite generieren.
Beispiel:
%Vor%Bonuspunkte , wenn ich herausfinden kann, wie eine zweite Umschaltfläche für meinen mobilen Navigationsbereich erstellt wird.
Ich habe die Standardkomponenten und die Entwicklerbereich für die Umschaltoptionen und kann nicht scheinen finde es heraus.
Wenn jemand helfen könnte, würde es sehr geschätzt werden.
Mein Einbettungscode
%Vor% Sie können die Option events verwenden in toggle config, um die von Ihnen benötigten Ereignisse zu definieren. Verwenden Sie afterInit event, um den Knotenknoten an einer anderen Stelle nach der Initialisierung zu verschieben:
Ich nehme an, dass Sie nicht zwei toggle -Komponenten innerhalb einer einzigen Shopify-Einbettung erstellen können. Aber Sie können mit bestehenden Medienabfragen in JS arbeiten (zB enquire.js ), also wenn Ihre Medienabfrage übereinstimmt / unmatches, bewegen Sie die Umschaltfläche, wo immer Sie möchten, im DOM (dh im mobilen Navigationsbereich)
Tags und Links javascript jquery shopify