{% assign market_preorder_count = product_variant.metafields.restockrocket_production.market_preorder_count.value | json %}

Example value of market_preroder_count =>
{ 
  "market_id_1": 1,
  "market_id_2": 5,
  "market_id_3": 3
}

{% assign market_preorder_max_count = product_variant.metafields.restockrocket_production.market_preorder_max_count.value | json %}

Example value of market_preorder_max_count =>
{ 
  "market_id_1": 10,
  "market_id_2": 15,
  "market_id_3": 10
}

{% assign variant = product.selected_or_first_available_variant %}
{% assign market_counts = variant.metafields.restockrocket_production.market_preorder_count.value | json %}
{% assign market_max_counts = variant.metafields.restockrocket_production.market_preorder_max_count.value | json %}
{% assign current_market = shop.market.id %}

{% if market_max_counts[current_market] %}
  {% assign current_count = market_counts[current_market] %}
  {% assign max_count = market_max_counts[current_market] %}
  {% assign spots_remaining = max_count | minus: current_count %}

  {% if spots_remaining > 0 %}
    <div class="preorder-availability">
      <span class="spots-left">{{ spots_remaining }} spots remaining in your market</span>
      {% if spots_remaining < 5 %}
        <span class="low-stock-warning">Almost sold out in your region!</span>
      {% endif %}
    </div>
  {% else %}
    <div class="preorder-full">
      Preorder limit reached for your market
    </div>
  {% endif %}
{% endif %}

{% assign market_shipping_text = product_variant.metafields.restockrocket_production.market_shipping_text.value | json %}

Example value of market_shipping_text =>
{
  "market_id_1": "Ships in 1 week",
  "market_id_2": "Ships in 2 weeks",
  "market_id_3": "Ships in 4 days"
}

{
  productVariant(id: "gid://shopify/ProductVariant/YOUR_VARIANT_ID") {
    metafields(
      namespace: "restockrocket_production",
      keys: ["market_preorder_count", "market_preorder_max_count", "market_shipping_text"]
    ) {
      edges {
        node {
          id
          key
          value
          type
        }
      }
    }
  }
}

{
  product(id: "gid://shopify/Product/YOUR_PRODUCT_ID") {
    variants(first: 10) {
      edges {
        node {
          id
          title
          metafields(
            namespace: "restockrocket_production",
            keys: ["market_preorder_count", "market_preorder_max_count", "market_shipping_text"]
          ) {
            edges {
              node {
                id
                key
                value
                type
                # Example response for market_preorder_count:
                # value: {"market_id_1": 45, "market_id_2": 20, "market_id_3": 15}
                # Example response for market_preorder_max_count:
                # value: {"market_id_1": 100, "market_id_2": 50, "market_id_3": 30}
                # Example response for market_shipping_text:
                # value: {"market_id_1": "Ships in 2 weeks", "market_id_2": "Ships in 3 weeks", "market_id_3": "Ships in 4 weeks"}
              }
            }
          }
        }
      }
    }
  }
}

{% assign selling_plan_ids = product_variant.metafields.restockrocket_production.selling_plan_ids.value | json %}

{% assign preorder_count = product_variant.metafields.restockrocket_production.preorder_count %}

{% assign preorder_max_count = product_variant.metafields.restockrocket_production.preorder_max_count %}

{% assign variant = product.selected_or_first_available_variant %}
{% assign preorder_count = variant.metafields.restockrocket_production.preorder_count.value | default: 0 %}
{% assign preorder_max = variant.metafields.restockrocket_production.preorder_max_count.value %}

{% if preorder_max %}
  {% assign spots_remaining = preorder_max | minus: preorder_count %}

  {% if spots_remaining > 0 %}
    <div class="preorder-availability">
      <span class="spots-left">{{ spots_remaining }} spots remaining</span>
      {% if spots_remaining < 5 %}
        <span class="low-stock-warning">Almost sold out!</span>
      {% endif %}
    </div>
  {% else %}
    <div class="preorder-full">
      Preorder limit reached
    </div>
  {% endif %}
{% endif %}

# Query to get metafields for a specific product variant
{
  productVariant(id: "gid://shopify/ProductVariant/YOUR_VARIANT_ID") {
    metafields(
      namespace: "restockrocket_production",
      first: 10
    ) {
      edges {
        node {
          id
          namespace
          key
          value
          type
        }
      }
    }
  }
}

# Query to get specific metafields for multiple variants of a product
{
  product(id: "gid://shopify/Product/YOUR_PRODUCT_ID") {
    variants(first: 10) {
      edges {
        node {
          id
          title
          metafields(
            namespace: "restockrocket_production",
            keys: ["preorder_count", "preorder_max_count", "shipping_text"]
          ) {
            edges {
              node {
                id
                key
                value
                type
              }
            }
          }
        }
      }
    }
  }
}

{% assign shipping_text = product_variant.metafields.restockrocket_production.shipping_text %}

# Query to get metafields for a specific product variant
{
  productVariant(id: "gid://shopify/ProductVariant/YOUR_VARIANT_ID") {
    metafields(
      namespace: "restockrocket_production",
      first: 10
    ) {
      edges {
        node {
          id
          namespace
          key
          value
          type
        }
      }
    }
  }
}

# Query to get specific metafields for multiple variants of a product
{
  product(id: "gid://shopify/Product/YOUR_PRODUCT_ID") {
    variants(first: 10) {
      edges {
        node {
          id
          title
          metafields(
            namespace: "restockrocket_production",
            keys: ["preorder_count", "preorder_max_count", "shipping_text"]
          ) {
            edges {
              node {
                id
                key
                value
                type
              }
            }
          }
        }
      }
    }
  }
}

{% assign target_variant = product.selected_or_first_available_variant %}
{% assign preorder_count = target_variant.metafields.restockrocket_production.preorder_count | default: 0 %}
{% assign preorder_max_count = target_variant.metafields.restockrocket_production.preorder_max_count %}

{% if preorder_max_count %}
  {% assign remaining = preorder_max_count | minus: preorder_count %}

  <div class="inventory-counter">
    <h4>Preorder Status</h4>
    <p><strong>{{ preorder_count }}</strong> preordered</p>
    <p><strong>{{ remaining }}</strong> remaining</p>
  </div>
{% endif %}

{% assign target_variant = product.selected_or_first_available_variant %}
{% assign variant_shipping = target_variant.metafields.restockrocket_production.shipping_text.value %}

<div class="variant-shipping">
  <h4>Shipping Information</h4>

  {% if variant_shipping %}
    {% for shipping_info in variant_shipping %}
      <div>
        <strong>{{ shipping_info[0] | upcase }}:</strong>
        <p>{{ shipping_info[1] }}</p>
      </div>
    {% endfor %}
  {% else %}
    <p>Standard shipping rates apply</p>
  {% endif %}
</div>

{
  "shopify_selling_plan_group_id": "string",  // Unique identifier for the selling plan group in Shopify
  "shopify_selling_plan_id": "string",        // Unique identifier for the specific selling plan in Shopify
  "enabled": boolean,                         // Whether the selling plan is active
  "variant_ids": ["string"],                 // List of product variant IDs associated with this plan
  "name": "string",                          // Display name of the selling plan
  "preorder_button_text": "string",          // Text shown on the preorder button
  "preorder_button_description": "string",    // Description shown below the preorder button
  "preorder_button_description_background_color": "string",  // Background color of the description box
  "preorder_button_description_text_color": "string",        // Text color of the description
  "preorder_button_description_border_radius": "number",     // Border radius of the description box
  "preorder_button_description_show_quantity_limit": boolean,  // Whether to show quantity limits
  "preorder_button_description_quantity_limit_suffix": "string",  // Text after quantity limit
  "preorder_button_description_shipping_text_prefix": "string",   // Text before shipping info
  "delivery_exact_time": "string",           // Exact time of delivery
  "quantity_limit_text": "string",           // Text explaining quantity limitations
  "preorder_button_description_show_shipping": boolean,  // Whether to show shipping info
  "preorder_shipping_text": "string",        // Shipping information for preorder items
  "shipping_applies_to_all_products": boolean,  // Whether shipping settings are global
  "shipping_text": "string",                 // General shipping information
  "payment_type": "string",                  // Type of payment (full/partial)
  "billing_checkout_charge_type": "string",  // How the charge is calculated
  "billing_checkout_charge_amount": "number", // Fixed amount for checkout charge
  "billing_checkout_charge_percentage": "number",  // Percentage amount for checkout
  "pricing_type": "string",                  // Type of pricing adjustment
  "pricing_amount": "number",                // Fixed amount for pricing
  "pricing_percentage": "number",            // Percentage for pricing
  "discount_text": "string",                 // Text explaining discounts
  "billing_title": "string",                 // Title for billing information
  "billing_description": "string",           // Detailed billing information
  "enable_billing_widget": boolean,          // Whether to show billing widget
  "inventory_provider": "string",            // Provider handling inventory
  "preorder_badge_enabled": boolean,         // Whether to show preorder badge
  "preorder_badge_text": "string",           // Text shown on the badge
  "preorder_badge_text_color": "string",     // Color of badge text
  "preorder_badge_background_color": "string",  // Background color of badge
  "translations": {                          // Translations for multilingual support
    "locale_code": {
      "shipping_text": "string",
      "billing_title": "string",
      "billing_description": "string",
      "discount_text": "string",
      "preorder_badge_text": "string",
      "preorder_button_description": "string",
      "quantity_limit_text": "string",
      "preorder_shipping_text": "string",
      "preorder_button_text": "string"
    }
  }
}

{% assign current_variant_id = product.selected_or_first_available_variant.id %}
{% assign selling_plans = shop.metafields.restockrocket_production.selling_plans.value %}
  
{% for plan in selling_plans %}
  {% if plan.enabled %}
    {% assign variant_ids = plan.variant_ids %}
    {% if variant_ids contains current_variant_id %}
      {% comment %}
        This variant is part of the selling plan
        You can now access plan details:
      {% endcomment %}
  
      <div class="preorder-button" style="background-color: {{ plan.preorder_badge_background_color }}">
        <span style="color: {{ plan.preorder_badge_text_color }}">
          {{ plan.preorder_badge_text }}
        </span>
      </div>
  
      {% if plan.preorder_button_description_show_quantity_limit %}
        {% assign preorder_count = product.selected_or_first_available_variant.metafields.restockrocket_production.preorder_count | default: 0 %}
        {% assign preorder_max_count = product.selected_or_first_available_variant.metafields.restockrocket_production.preorder_max_count %}
  
        {% if preorder_max_count %}
          {% assign remaining = preorder_max_count | minus: preorder_count %}
          <div class="quantity-limit">
            {{ remaining }}{{ plan.preorder_button_description_quantity_limit_suffix }}
          </div>
        {% endif %}
      {% endif %}
    {% endif %}
  {% endif %}
{% endfor %}

{% assign current_variant_id = product.selected_or_first_available_variant.id %}
{% assign selling_plans = shop.metafields.restockrocket_production.selling_plans.value %}

{% for plan in selling_plans %}
  {% if plan.enabled %}
    {% assign is_variant_in_plan = false %}
    {% for variant_id in plan.variant_ids %}
      {% if variant_id == current_variant_id %}
        {% assign is_variant_in_plan = true %}
        {% break %}
      {% endif %}
    {% endfor %}

    {% if is_variant_in_plan and plan.delivery_exact_time %}
      {% assign delivery_date = plan.delivery_exact_time | date: '%Y-%m-%d' | date: '%s' %}
      {% assign today_date = 'now' | date: '%Y-%m-%d' | date: '%s' %}
      {% assign seconds_diff = delivery_date | minus: today_date %}
      {% assign days_until_delivery = seconds_diff | divided_by: 86400 %}

      <div class="delivery-info">
        <h4>Delivery Information</h4>

        {% if days_until_delivery > 0 %}
          <p class="estimated-delivery">
            Estimated delivery: {{ plan.delivery_exact_time | date: '%B %d, %Y' }}
            <span class="days-left">({{ days_until_delivery }} days left)</span>
          </p>

          {% if plan.preorder_shipping_text %}
            {% assign formatted_date = plan.delivery_exact_time | date: '%B %d, %Y' %}
            {% capture date %}{{ formatted_date | escape }}{% endcapture %}
            <p class="shipping-note">
              {{ plan.preorder_shipping_text | url_escape | replace: "%7B%7B%20date%20%7D%7D", date | replace: "%20", " " }}
            </p>
          {% endif %}
        {% else %}
          <p class="delivery-soon">
            Delivery date approaching
          </p>
        {% endif %}
      </div>
    {% endif %}
  {% endif %}
{% endfor %}

# Query to get shop selling plans metafield
{
  shop {
    metafield(namespace: "restockrocket_production", key: "selling_plans") {
      id
      namespace
      key
      value
      type
    }
  }
}

# Query to get multiple shop metafields at once
{
  shop {
    metafields(
      namespace: "restockrocket_production",
      first: 10
    ) {
      edges {
        node {
          id
          namespace
          key
          value
          type
        }
      }
    }
  }
}

{% assign current_variant_id = product.selected_or_first_available_variant.id %}
{% assign selling_plans = shop.metafields.restockrocket_production.selling_plans.value %}

{% for plan in selling_plans %}
  {% if plan.enabled and plan.preorder_badge_enabled %}
    {% if plan.variant_ids contains current_variant_id %}
      <div class="preorder-badge"
           style="background: {{ plan.preorder_badge_background_color }}; color: {{ plan.preorder_badge_text_color }};">
        {{ plan.preorder_badge_text }}
      </div>
    {% endif %}
  {% endif %}
{% endfor %}

{% assign current_variant_id = product.selected_or_first_available_variant.id %}
{% assign selling_plans = shop.metafields.restockrocket_production.selling_plans.value %}
{% assign button_text = "Preorder Now" %}

{% for plan in selling_plans %}
  {% if plan.enabled and plan.variant_ids contains current_variant_id %}
    {% assign button_text = plan.preorder_button_text %}
    {% break %}
  {% endif %}
{% endfor %}

<button class="preorder-button">{{ button_text }}</button>

{% assign current_variant = product.selected_or_first_available_variant %}
{% assign selling_plans = shop.metafields.restockrocket_production.selling_plans.value %}

{% for plan in selling_plans %}
  {% if plan.enabled and plan.variant_ids contains current_variant.id and plan.preorder_button_description_show_quantity_limit %}
    {% assign preorder_count = current_variant.metafields.restockrocket_production.preorder_count | default: 0 %}
    {% assign preorder_max_count = current_variant.metafields.restockrocket_production.preorder_max_count %}

    {% if preorder_max_count %}
      {% assign remaining = preorder_max_count | minus: preorder_count %}
      <div class="quantity-info">
        <p>{{ remaining }}{{ plan.preorder_button_description_quantity_limit_suffix | default: ' left' }}</p>
      </div>
    {% endif %}
  {% endif %}
{% endfor %}

<div data-gb-custom-block data-tag="assign"></div>

<div data-gb-custom-block data-tag="assign"></div>

<div data-gb-custom-block data-tag="for">

  

<div data-gb-custom-block data-tag="if" data-expression='plan.enabled and plan.variant_ids contains current_variant_id and plan.delivery_exact_time'>
    <div class="delivery-info">
      <h4>Estimated Delivery</h4>
      <p>{{ plan.delivery_exact_time | date: '%B %d, %Y' }}</p>

      {% if plan.preorder_shipping_text %}
        <p>{{ plan.preorder_shipping_text | replace: '{{ date }}', plan.delivery_exact_time | date: '%B %d, %Y' }}</p>
      {% endif %}
    </div>
  </div>

</div>

window.addEventListener('stoq:loaded', (event) => {
  const { pageType, enabled, settings } = event.detail;
  if (pageType === 'product' && enabled) {
    console.log('Stoq loaded on product page', settings);
    // Handle product page customizations
  }
});

const addToCartBtn = document.getElementById('quick-add-btn');
addToCartBtn.addEventListener('click', () => {
  const productData = { id: 1111, variants: [{ id: 2222, available: false }] };
  const variantId = '41XX';
  const customerData = { 
    shopify_customer_id: 9999,
    email: '[email protected]',
    phone: '8123999123', // phone number
    country_code: '1', // country code
    country: 'us' // 2 letter ISO country code
  } // Optional
  window._RestockRocket.openModal(productData, variantId, customerData);

  // Alternative: Using Liquid objects directly in Javascript
  // window._RestockRocket.openModal({{ product | json }}, '{{ product.selected_or_first_available_variant.id }}');
});

const notifyMeBtn = document.getElementById('notify-me-btn');
notifyMeBtn.addEventListener('click', () => {
  // Default: Opens modal for the current product, it automatically gets the
  // product data and currently selected variant ID
  window._RestockRocket.openModal();
});

const addToCartBtn = document.getElementById('quick-add-btn');
addToCartBtn.addEventListener('click', () => {
  const productData = { id: 1111, variants: [{ id: 2222, available: false }] };
  const variantId = '41XX';
  const customerData = { 
    shopify_customer_id: 9999,
    email: '[email protected]',
    phone: '8123999123',
    country_code: '1',
    country: 'us'
  };
  
  // Basic usage
  window._RestockRocket.openInlineForm(
    productData,
    variantId,
    customerData,
    '#my-custom-container', // CSS selector where form will be inserted
    'afterend' // Where to insert relative to selector: 'beforebegin', 'afterbegin', 'beforeend', 'afterend'
  );

  // Alternative: Using Liquid objects directly
  // window._RestockRocket.openInlineForm(
  //   {{ product | json }},
  //   '{{ product.selected_or_first_available_variant.id }}',
  //   null,
  //   '#my-custom-container'
  // );
});

window._RestockRocket.removeInlineForm();

const variantSelector = document.getElementById('variant-selector');
variantSelector.addEventListener('change', (event) => {
  const selectedVariantId = event.target.value;
  window._RestockRocket.renderButtonForVariant(selectedVariantId);
});

const variantId = '41XX';
const sellingPlan = window._RestockRocket.getSellingPlan(variantId);

if (sellingPlan) {
  console.log('Preorder selling planDetails:', sellingPlan);
} else {
  console.log('No preorder set up for this variant');
}

{
  shopify_selling_plan_group_id: 123456789,
  shopify_selling_plan_id: 987654321,
  enabled: true,
  variant_ids: [11111, 22222, 33333, 44444],
  name: "Preorder Offer",
  billing_checkout_charge_amount: "100.0",
  billing_checkout_charge_percentage: "10.0",
  billing_checkout_charge_type: "percentage",
  billing_description: null,
  billing_title: "Full payment",
  discount_text: "Save {{ discount }}",
  enable_billing_widget: true,
  inventory_provider: "stoq",
  payment_type: "full",
  preorder_badge_background_color: "#000000",
  preorder_badge_enabled: true,
  preorder_badge_text: null,
  preorder_badge_text_color: "#FFFFFF",
  preorder_button_description: "Note: This is a preorder. Items will ship based on the estimated delivery date.",
  preorder_button_description_background_color: "#ffffff",
  preorder_button_description_border_radius: 20,
  preorder_button_description_quantity_limit_suffix: " units available for preorder",
  preorder_button_description_shipping_text_prefix: "Shipping: ",
  preorder_button_description_show_quantity_limit: true,
  preorder_button_description_show_shipping: true,
  preorder_button_description_text_color: "#000000",
  preorder_button_text: "Preorder Now",
  preorder_shipping_text: "Estimated shipping: {{ date }}",
  pricing_amount: null,
  pricing_percentage: null,
  pricing_type: "no_discount",
  quantity_limit_text: "{{ quantity }} stock left",
  shipping_applies_to_all_products: true,
  shipping_text: "Shipping date to be determined",
  translations: { /* language translations object */ }
}

<div data-gb-custom-block data-tag="for">
  <div class="product-item">
    <h2>{{ product.title }}</h2>
    <button class="quick-add-btn" 
      data-product-data="{{ product | json }}" 
      data-variant-id="{{ product.selected_or_first_available_variant.id }}"
    >
      Quick Add
    </button>
  </div>
</div>

<script>
  document.querySelectorAll('.quick-add-btn').forEach(button => {
    button.addEventListener('click', function() {
      const productData = this.getAttribute('data-product-data');
      const variantId = this.getAttribute('data-variant-id');
      
      window._RestockRocket.openModal(productData, variantId);
    });
  });
</script>

<div data-gb-custom-block data-tag="if">
  <button id="add-to-cart-button">Add to Cart</button>
  <div data-gb-custom-block data-tag="else"></div>
  <button id="notify-me-btn">Notify Me When Available</button>
</div>

<script>
  const notifyMeBtn = document.getElementById('notify-me-btn');
  
  <div data-gb-custom-block data-tag="if" data-0='false' data-1='false' data-2='false' data-3='false'>
    notifyMeBtn.addEventListener('click', function() {
      window._RestockRocket.openModal({{ product | json }}, '{{ product.selected_or_first_available_variant.id }}');
    });
  </div>
  
  // For themes with variant selectors
  document.addEventListener('variantChange', function(event) {
    const variant = event.detail.variant;
    window._RestockRocket.renderButtonForVariant(variant.id);
  });
</script>

<div id="product-form" data-product-id="{{ product.id }}">
  <select id="variant-selector">
    {% for variant in product.variants %}
      <option value="{{ variant.id }}" {% if variant == product.selected_or_first_available_variant %}selected="selected"{% endif %}>
        {{ variant.title }}
      </option>
    {% endfor %}
  </select>
  
  <button id="add-to-cart-btn" {% unless product.selected_or_first_available_variant.available %}style="display: none;"{% endunless %}>
    Add to Cart
  </button>
  
  <button id="notify-me-btn" {% if product.selected_or_first_available_variant.available %}style="display: none;"{% endif %}>
    Notify Me
  </button>
</div>

<script>
  const productForm = document.getElementById('product-form');
  const variantSelector = document.getElementById('variant-selector');
  const addToCartBtn = document.getElementById('add-to-cart-btn');
  const notifyMeBtn = document.getElementById('notify-me-btn');
  
  function updateButtons(variantId) {
    const selectedVariant = {{ product.variants | json }}
      .find(variant => variant.id.toString() === variantId);
    
    if (selectedVariant && selectedVariant.available) {
      addToCartBtn.style.display = 'block';
      notifyMeBtn.style.display = 'none';
    } else {
      addToCartBtn.style.display = 'none';
      notifyMeBtn.style.display = 'block';
    }
  }
  
  variantSelector.addEventListener('change', function() {
    const selectedVariantId = this.value;
    updateButtons(selectedVariantId);
    window._RestockRocket.renderButtonForVariant(selectedVariantId);
  });
  
  notifyMeBtn.addEventListener('click', function() {
    const productData = {{ product | json }};
    const variantId = variantSelector.value;
    window._RestockRocket.openModal(productData, variantId);
  });
  
  // Initial setup
  updateButtons(variantSelector.value);
</script>

window._RestockRocketConfig.marketId