「定期購買プランの標準選択機能」を利用すれば、該当の商品ページに遷移した場合、最初から定期購買が選択されている状態になります。

設定方法

定期購買アプリ管理画面「プラン設定」よりプランの編集画面を開き、定期購買プランの標準選択**「定期購買プランを標準で選択する」**にチェックを入れて保存します。 ※定期購買ウィジェット(パターン2)では、ご利用いただけませんので、ご注意ください。

subsc_plan_01.png

定期購買プランの標準選択機能 適用前イメージ

商品の詳細ページを開くと、通常購入（1回決済）が選択されます。

subsc_plan_02.png

定期購買プランの標準選択機能 適用後イメージ

商品の詳細ページを開くと、定期購買（定期決済）が選択されます。

subsc_plan_03.png

備考：Liquidを手動で修正する方法

商品詳細ページのLiquidへ下記Styleを追加いただく事でも実装可能です。

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/e7272a93-9dd6-4e75-a574-9f6517c2eede/_2021-07-12_17.58.42.png

<script type="text/javascript">
  // URLのクエリからvariantIdを取得する
  const getVariantIdFromUrl = () => {
    const queryStr = window.location.search.slice(1);
    if (!queryStr) return '';
    
    const variantQuery = queryStr.split('&').filter((query) => query.split('=')[0] === 'variant');
    if (variantQuery.length === 0) return '';
    
    return variantQuery[0].split('=')[1];
  };
  
  let previousVariantId = getVariantIdFromUrl();
  
  // 監視の対象
  const observedTarget = document.getElementsByClassName('huckleberry-subscription-widget-container')[0];
  let subscriptionShowCreate = false;
  
  const subscriptionObserver = new MutationObserver(records => {
    records.forEach((record) => {
      // variantIdが更新されたときに、定期購買ラベルが再生成されるので、フラグをfalseにする
      const currentVariantId = getVariantIdFromUrl();
      if (currentVariantId !== previousVariantId) {
        subscriptionShowCreate = false;
        previousVariantId = currentVariantId;
      }
      
      if (record.addedNodes.length === 0 || record.type !== 'childList' || subscriptionShowCreate) return;
      
      // 定期購買のみのパターンを回避
      const tanpatsuEl = document.getElementById('tanpatsu');
      const subscriptionEl = document.getElementById('subscription');
      if (!tanpatsuEl || !subscriptionEl) return;
      
      subscriptionShowCreate = true;
      
      // 定期購買ラベルをクリック
      const subscriptionLabel = document.querySelector('label[for="subscription"]');
      subscriptionLabel.click();
    });
  });
  
  // 監視の開始
  subscriptionObserver.observe(observedTarget, {
    childList: true,
  });
</script>

<aside> <img src="/icons/checklist_purple.svg" alt="/icons/checklist_purple.svg" width="40px" /> ヘルプページ