{% comment %}  

AR-Powered Product Discovery Game  

Boosts conversions via interactive treasure hunt  

{% endcomment %}

{%- liquid

  assign collection = section.settings.collection

  assign max_discount = section.settings.max_discount

  assign game_duration = section.settings.duration | times: 60

-%}

<div class="ar-game-wrapper" data-aos="cyber-fade-in">

  <ar-hud 

    data-collection="{{ collection.handle }}" 

    data-duration="{{ game_duration }}"

    data-discount-cap="{{ max_discount }}"

    data-wallet-integration="{{ section.settings.web3_enable }}"

  >

    <div class="scanning-overlay"></div>

    <web3-connect 

      v-if="web3Enabled" 

      @wallet-connected="loadNFTItems"

    ></web3-connect>

  </ar-hud>

</div>

<script type="module">

import GameEngine from '{{ "ar-game-engine.js" | asset_url }}';

import CartSyncer from '{{ "cart-syncer.js" | asset_url }}';

class ARTreasureHunt extends HTMLElement {

  constructor() {

    super();

    this.game = new GameEngine({

      collection: "{{ collection.handle }}",

      discountRules: {

        base: 10,

        decay: 0.85,

        max: {{ max_discount }},

      cartSyncer: new CartSyncer()

    });

    if(this.dataset.walletIntegration === 'true') {

      import('{{ "web3-wallet.js" | asset_url }}').then(module => {

        this.Web3 = new module.default();

        this.initNFTIntegration();

      });

    }

  }

  initNFTIntegration() {

    this.Web3.onConnect(async (address) => {

      const ownedNFTs = await this.Web3.checkBaddieHubNFTs(address);

      this.game.activateNFTBonuses(ownedNFTs);

    });

  }

}

customElements.define('ar-treasure-hunt', ARTreasureHunt);

</script>

{% schema %}

{

  "name": "🕹️ AR Treasure Hunt",

  "class": "shopify-game-section",

  "settings": [

    {

      "type": "collection",

      "id": "collection",

      "label": "Game Collection",

      "info": "Select products to feature in AR game"

    },

    {

      "type": "range",

      "id": "max_discount",

      "min": 20,

      "max": 70,

      "step": 5,

      "unit": "%",

      "label": "Max Stackable Discount",

      "default": 50

    },

    {

      "type": "range",

      "id": "duration",

      "min": 5,

      "max": 30,

      "step": 5,

      "unit": "min",

      "label": "Game Duration",

      "default": 15

    },

    {

      "type": "checkbox",

      "id": "web3_enable",

      "label": "Enable Web3 Rewards",

      "info": "Connect wallet for NFT bonuses",

      "default": false

    }

  ],

  "presets": [

    {

      "name": "AR Product Hunt",

      "category": "Interactive Shopping"

    }

  ]

}

{% endschema %}

<style>

  .ar-game-wrapper {

    position: fixed;

    top: 0;

    left: 0;

    width: 100vw;

    height: 100vh;

    z-index: 9999;

    background: radial-gradient(

      circle at 50% 100%, 

      rgba(16,16,16,0.95) 20%, 

      rgba(255,36,227,0.15) 100%

    );

    backdrop-filter: blur(10px);

  }

  .scanning-overlay {

    animation: radar-scan 8s infinite linear;

    background: linear-gradient(

      transparent 60%,

      rgba(36, 255, 208, 0.15)

    );

  }

  @keyframes radar-scan {

    0% { transform: rotate(0deg); }

    100% { transform: rotate(360deg); }

  }

  ar-hud-item {

    --hue: calc({{ product.id }} % 360);

    background: hsl(var(--hue), 80%, 50%);

    border: 2px solid #fff;

    box-shadow: 0 0 20px hsl(var(--hue), 80%, 50%);

    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);

  }

  ar-hud-item:active {

    transform: scale(1.2) rotate(15deg);

  }

</style>

{% comment %} Filename: sections/gameified-store.liquid Advanced AR Treasure Hunt with Dynamic Internal Linking {% endcomment %} {% style %} :root { --neon-pink: #FF24E3; --cyber-teal: #24FFD0; --hud-yellow: #FFE924; --void-black: #0A0A0A; } .ar-hud { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 9999; background: radial-gradient(circle at 50% 50%, rgba(10,10,10,0.95) 40%, rgba(255,36,227,0.1) 100%); } .scanning-beam { position: absolute; height: 2px; width: 100%; background: linear-gradient(90deg, transparent 0%, var(--cyber-teal) 50%, transparent 100%); animation: scan 4s infinite; filter: drop-shadow(0 0 10px var(--cyber-teal)); } @keyframes scan { 0% { top: 0; opacity: 0; } 50% { opacity: 1; } 100% { top: 100%; opacity: 0; } } .hud-item { position: absolute; border: 2px solid var(--neon-pink); border-radius: 15px; padding: 1rem; background: rgba(10,10,10,0.9); transform: translate(-50%, -50%); cursor: crosshair; transition: all 0.3s ease; } .hud-item:hover { transform: translate(-50%, -50%) scale(1.1); box-shadow: 0 0 20px var(--neon-pink); } {% endstyle %}

{% schema %} { "name": "AR Store Game", "settings": [ { "type": "collection", "id": "featured_collection", "label": "Game Collection", "default": "cyber-luxe" } ], "presets": [ { "name": "AR Treasure Hunt", "category": "Custom Game" } ] } {% endschema %} {% comment %} In product-template.liquid {% endcomment %}

{% comment %} In theme.liquid header {% endcomment %} {% comment %} In theme.liquid {% endcomment %} {% comment %} Create new discount-automation.liquid snippet {% endcomment %} {% if customer %} {% assign max_discount = 70 %} {% else %} {% assign max_discount = 50 %} {% endif %}