Liquid、JavaScriptなどに関する質問
テーマ:Dawn
初回限定商品を販売します。
1ユーザーにつき初回1回限り、1個限定で販売したいと考えていますが、設定方法が見つからず悩んでいます。
①もし対応しているアプリがありましたら、教えてください。
②リキッド編集で可能であれば、詳細を教えていただけますと大変有難いです…。
(HTML,CSSは問題ないですがリキッドは初心者です)
※アプリについては自分でも調べたのですが、カートごとではなくユーザーごとに回数・数量限定できるものは見つけることができませんでした。複数アプリの組合せでもよいので、ご提案いただけると助かります。
※購入時にログイン必須設定にしています。また初回限定商品にはタグをつけています。
解決済! ベストソリューションを見る。
成功
はじめまして。
新垣と申します。
こちらの要望、技術的には少しハイレベルなお話になります。
*添付のコードは全てサンプルになり、追加調整が必要になります。
①要望に対応しているアプリは見聞きしたことがなく残念ですが、お力添えできません。
②LiquidおよびJSとShopify Flowを組み合わせることで可能かと思います。
以下、大まかですがステップになります。
Flowでの処理:顧客の限定商品購入有無を判別できるようにする。
コード編集での処理:"限定商品購入"タグのある顧客に"限定商品"商品の購入を不可にする
// 商品が'限定商品'タグを持ち、かつ顧客も'限定商品購入'タグも持つ場合
{% if product.tags contains '限定商品' and customer.tags contains '限定商品購入' %}
<script>
document.addEventListener('DOMContentLoaded', function() {
// 購入ボタンを無効化する
const addToCartButton = document.querySelector('[type="submit"]');
if (addToCartButton) {
addToCartButton.disabled = true;
addToCartButton.innerText = 'この商品は購入できません';
}
// カートに追加するフォームを無効化する
const addToCartForm = document.querySelector('form[action="/cart/add"]');
if (addToCartForm) {
addToCartForm.addEventListener('submit', function(event) {
event.preventDefault();
alert('この商品は既に購入済みのため、再度購入することはできません。');
});
}
});
</script>
{% endif %}
コード編集での処理:全顧客に対して"限定商品"は1個のみの購入に制限する
// カート内の限定商品の数量をカウント
{% assign limitedItemCount = 0 %}
{% for item in cart.items %}
{% if item.product.tags contains '限定商品' %}
{% assign limitedItemCount = limitedItemCount | plus: item.quantity %}
{% endif %}
{% endfor %}
<script>
document.addEventListener('DOMContentLoaded', function() {
const limitedItemsCount = {{ limitedItemCount }};
// 数量制限を超えている場合の処理
if (limitedItemsCount > 1) {
// チェックアウトボタンを無効化
const checkoutButton = document.querySelector('[name="checkout"]');
if (checkoutButton) {
checkoutButton.disabled = true;
}
// ユーザーに警告を表示
alert('限定商品は1個のみ購入可能です。カート内の数量を調整してください。');
}
});
</script>
以上です。
少々難しい話かもしれませんが、解決への一歩となれば幸いです。
御ストアの益々の発展を祈っております。
①のアプリは探せばあるかと思いますが②のリキッド編集で対応可能ですので、②の考え方を記載させていただきます。
今回ご提示させていただく方法は、ログインしていないと初回限定商品は購入できません。
ご参考まで
(キュー小坂)
丁寧に教えてくださり、ありがとうございました!
今の自分のレベルでは編集が難しいことが良くわかりました(笑)
流れだけでもとても参考になりました。
成功
はじめまして。
新垣と申します。
こちらの要望、技術的には少しハイレベルなお話になります。
*添付のコードは全てサンプルになり、追加調整が必要になります。
①要望に対応しているアプリは見聞きしたことがなく残念ですが、お力添えできません。
②LiquidおよびJSとShopify Flowを組み合わせることで可能かと思います。
以下、大まかですがステップになります。
Flowでの処理:顧客の限定商品購入有無を判別できるようにする。
コード編集での処理:"限定商品購入"タグのある顧客に"限定商品"商品の購入を不可にする
// 商品が'限定商品'タグを持ち、かつ顧客も'限定商品購入'タグも持つ場合
{% if product.tags contains '限定商品' and customer.tags contains '限定商品購入' %}
<script>
document.addEventListener('DOMContentLoaded', function() {
// 購入ボタンを無効化する
const addToCartButton = document.querySelector('[type="submit"]');
if (addToCartButton) {
addToCartButton.disabled = true;
addToCartButton.innerText = 'この商品は購入できません';
}
// カートに追加するフォームを無効化する
const addToCartForm = document.querySelector('form[action="/cart/add"]');
if (addToCartForm) {
addToCartForm.addEventListener('submit', function(event) {
event.preventDefault();
alert('この商品は既に購入済みのため、再度購入することはできません。');
});
}
});
</script>
{% endif %}
コード編集での処理:全顧客に対して"限定商品"は1個のみの購入に制限する
// カート内の限定商品の数量をカウント
{% assign limitedItemCount = 0 %}
{% for item in cart.items %}
{% if item.product.tags contains '限定商品' %}
{% assign limitedItemCount = limitedItemCount | plus: item.quantity %}
{% endif %}
{% endfor %}
<script>
document.addEventListener('DOMContentLoaded', function() {
const limitedItemsCount = {{ limitedItemCount }};
// 数量制限を超えている場合の処理
if (limitedItemsCount > 1) {
// チェックアウトボタンを無効化
const checkoutButton = document.querySelector('[name="checkout"]');
if (checkoutButton) {
checkoutButton.disabled = true;
}
// ユーザーに警告を表示
alert('限定商品は1個のみ購入可能です。カート内の数量を調整してください。');
}
});
</script>
以上です。
少々難しい話かもしれませんが、解決への一歩となれば幸いです。
御ストアの益々の発展を祈っております。
丁寧に教えてくださり、ありがとうございます!
コードまで記述くださり、心より感謝申し上げます。
Flowから勉強してみます。
Shopify アカデミーの学習パスと認定スキルバッジExpanding Your Shopify Business Internationallyを活用して、国際的にビジネ...
By Shopify Feb 7, 2025Shopify アカデミーの学習パスB2B on Shopify:立ち上げとカスタマイズで卸売販売に進出しましょう。これら3つの無料コースは、ShopifyストアでB2B機能...
By Shopify Jan 31, 2025サポートの選択肢が増えていく中、最適となる選択の判断が難しくなっているかと存じます。今回は問題の解決に最適となるサポートの選択方法を、紹介させて頂きます。 選択肢のご紹介...
By Mirai Oct 6, 2024