すべてのコード調整は、theme.liquidファイルのheadタグに追加することができます。または、私たちのサポートに連絡することができます、私たちは喜んで問題やカスタマイズのリクエストであなたを支援します。
カスタマーサクセスチームは、私たちの管理システムの指定されたconfig.jsファイルにこれらの調整を追加する能力を持っているので、ストアへのアクセスは必要ありません。
カスタムカートボタンセレクタ
キャンディラックは、デフォルトでは、カートに追加するボタンがクリックされたときに正常にトリガするためのさまざまなセレクタをサポートしていますが、テーマが私たちのアプリが認識しないセレクタを使用していることが起こるかもしれません。
// window.CANDYRACK_CUSTOM_BUTTON_SELECTORS: string[]window.CANDYRACK_CUSTOM_BUTTON_SELECTORS = ['.atc-class-1','#atc-id']
条件に基づいてキャンディラックが表示されないようにする
カートに追加ボタンをクリックする前に入力する必要があるカスタムフィールドをストアが使用していて、バリデーションがそれらを捕捉しない場合、以下のメソッドの戻り値に基づいてポップアップが表示されないようにする方法があります。
// window.CANDYRACK_CAN_ATC: (button: HTMLElement) => booleanwindow.CANDYRACK_CAN_ATC = (_button) =>{ const input = document.querySelector('.custom-text-input') if(input.value.trim().length === 0) { return false } return true}バリアントが見つかりません
ポップアップをうまく開くためには、オファーを決定する親の正しいバリアントが必要です。この関数はデフォルトセレクタをオーバーライドせず、undefined を返した場合、デフォルトのケースが処理されます。
// window.CANDYRACK_VARIANT_SELECTOR_FUNCTION: (button: HTMLElement) => Promise<number>;window.CANDYRACK_VARIANT_SELECTOR_FUNCTION = (button) =>{ const selectedVariant = button.closest('.variant-select')?.value if(value) { return Number(value) }}マネーフォーマット
キャンディラックは最も一般的なマルチカレンシーアプリケーションをサポートしており、利用可能な API やテーマ設定に基づいてマネーをフォーマットします。
// window.CANDYRACK_CUSTOM_FORMAT_MONEY: (amount?: number, currency: string) => string;window.CANDYRACK_CUSTOM_FORMAT_MONEY = (amount, currency) =>{ return `${currency} ${amount}`}フォームバリデーションの削除
デフォルトでは、Candy Rack はform.checkValidity() をトリガーすることでフォームバリデーションを処理します。
// window.CANDYRACK_DISABLE_FORM_VALIDATION : booleanwindow.CANDYRACK_DISABLE_FORM_VALIDATION = true
カスタムイベント
Candy Rack はさまざまなカスタムイベントを提供しており、ドロワーカートを開くなどのサイドエフェクトを実行することができます。
// カートに入れるボタンがクリックされたときに発生しますdocument.addEventListener('addToCartButtonClicked', (e) =>{ // Some code}) // オファーが追加されたときに発生しますdocument.addEventListener('candyrack-offer-added', (e) =>{ // Some code})// オファーが削除された時にトリガーされるdocument.addEventListener('candyrack-offer-removed', (e) =>{ // Some code})// ポップアップが閉じられた時にトリガーされるdocument.addEventListener('candyrack-closed', (e) =>{ // Some code})ポップアップの視覚的なカスタマイズにも興味がある場合は、CSSでポップアップをカスタマイズする方法 の記事で詳しく説明しています。
質問は？このページの右下にあるチャットアイコンをクリックするか、[email protected] までメールでお問い合わせください。