@o2vend/theme-cli 1.0.36 → 1.0.38

package/test-theme/layout/theme.liquid

@@ -12,16 +12,19 @@
   <!-- Favicon -->
   <link rel="icon" href="{{ shop.favicon }}">
   
-  <!-- Resource hints for fonts -->
+  <!-- Resource hints for fonts and CDN (intl-tel-input) -->
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link rel="preconnect" href="https://cdn.jsdelivr.net" crossorigin>
   
-  <!-- CSS -->
+  <!-- Critical CSS (required for above-the-fold) -->
   <link rel="stylesheet" href="/assets/theme.min.css">
   <link rel="stylesheet" href="/assets/components.min.css">
-  <link rel="stylesheet" href="/assets/delivery-zone.min.css">
-  <!-- intl-tel-input CSS -->
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/intl-tel-input@23.0.0/build/css/intlTelInput.min.css">
+  <!-- Non-critical CSS: load async to avoid blocking LCP (delivery zone modal, intl-tel-input used on checkout/account) -->
+  <link rel="stylesheet" href="/assets/delivery-zone.min.css" media="print" onload="this.media='all'">
+  <noscript><link rel="stylesheet" href="/assets/delivery-zone.min.css"></noscript>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/intl-tel-input@23.0.0/build/css/intlTelInput.min.css" media="print" onload="this.media='all'">
+  <noscript><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/intl-tel-input@23.0.0/build/css/intlTelInput.min.css"></noscript>
   
   <!-- Font Loading - Non-render-blocking -->
   <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&family=Playfair+Display:wght@400;600;700&display=swap" rel="stylesheet" media="print" onload="this.media='all'">
@@ -34,8 +37,44 @@
   {% if additional_head %}
     {{ additional_head }}
   {% endif %}
+
+  <style>
+    @media (max-width: 768px) {
+      body {
+        padding-bottom: calc(76px + env(safe-area-inset-bottom));
+      }
+
+      .main-content {
+        padding-bottom: calc(84px + env(safe-area-inset-bottom)) !important;
+      }
+    }
+
+    .wishlist-btn,
+    .action-btn.wishlist-btn {
+      color: #111827;
+      background: rgba(255, 255, 255, 0.92);
+    }
+
+    .wishlist-btn svg,
+    .action-btn.wishlist-btn svg {
+      fill: none;
+      stroke: currentColor;
+    }
+
+    .wishlist-btn.in-wishlist,
+    .action-btn.wishlist-btn.in-wishlist {
+      background: rgba(239, 68, 68, 0.95) !important;
+      color: #ffffff !important;
+    }
+
+    .wishlist-btn.in-wishlist svg,
+    .action-btn.wishlist-btn.in-wishlist svg {
+      fill: #ffffff;
+      stroke: #ffffff;
+    }
+  </style>
   
-  <!-- Plugin hooks for theme head -->
+  <!-- App hooks for theme head -->
   {% hook 'theme_head' %}
   
   {%- comment -%}
@@ -64,14 +103,14 @@
   data-shop-currency="{{ shop.currency | default: 'USD' }}"
   data-shop-currency-symbol="{{ shop.settings.currencySymbol | default: shop.currency | default: '$' }}"
   data-shop-locale="{{ shop.locale | default: shop.language | default: 'en-US' }}"
-  style="font-family: var(--font-primary); font-size: {{ settings.font_size_base | default: 16 }}px;"
+  style="font-family: var(--font-primary); font-size: {{ settings.font_size_base | default: 14 }}px;"
 >
   <script>
     window.__SHOP_CURRENCY__ = '{{ shop.currency | default: 'USD' }}';
     window.__SHOP_CURRENCY_SYMBOL__ = '{{ shop.settings.currencySymbol | default: shop.currency | default: '$' }}';
     window.__SHOP_LOCALE__ = '{{ shop.locale | default: shop.language | default: 'en-US' }}';
   </script>
-  <!-- Plugin hooks for body begin -->
+  <!-- app hooks for body begin -->
   {% hook 'theme_body_begin' %}
   <!-- Skip Links for Accessibility -->
   <a href="#main-content" class="skip-link">Skip to main content</a>
@@ -85,7 +124,7 @@
   
   <!-- Main content -->
   <main class="main-content" id="main-content" role="main">
-    <div class="container" style="max-width: {{ settings.container_width | default: 1400 }}px; padding: 0 {{ settings.container_padding | default: 24 }}px;">
+    <div class="container" style="max-width: {{ settings.container_width | default: 1200 }}px; padding: 0 {{ settings.container_padding | default: 16 }}px;">
       {%- comment -%}
         Use Shopify-compatible {{ content_for_layout }} for layout content,
         but keep support for our existing {{ content }} variable as a fallback.
@@ -105,21 +144,41 @@
   </footer>
   {% hook 'footer_after' %}
   
+  <!-- Image error fallback (replaces inline onerror for CSP/security) -->
+  <script>
+    document.addEventListener('DOMContentLoaded', () => {
+      document.querySelectorAll('img[data-img-fallback]').forEach((img) => {
+        img.addEventListener('error', () => {
+          img.style.display = 'none';
+          const action = img.getAttribute('data-img-fallback');
+          if (action === 'next' && img.nextElementSibling) {
+            img.nextElementSibling.style.display = img.getAttribute('data-img-fallback-display') || 'flex';
+          } else if (action === 'parent-next' && img.parentElement && img.parentElement.nextElementSibling) {
+            img.parentElement.nextElementSibling.style.display = 'flex';
+          } else if (action && action.startsWith('query:') && img.parentNode) {
+            const sel = action.slice(6);
+            const el = img.parentNode.querySelector(sel);
+            if (el) el.style.display = 'flex';
+          }
+        });
+      });
+    });
+  </script>
   <!-- JavaScript -->
   <script src="/assets/cart-manager.min.js" defer></script>
-  <script src="/assets/theme.min.js" defer></script>
+  <script src="/assets/theme.js" defer></script>
   <script src="/assets/cart-drawer.min.js" defer></script>
   <script src="/assets/delivery-zone.min.js" defer></script>
-  <!-- intl-tel-input JS -->
-  <script src="https://cdn.jsdelivr.net/npm/intl-tel-input@23.0.0/build/js/intlTelInput.min.js"></script>
-  <!-- utils.js is loaded dynamically by intl-tel-input when needed, no need to load it here -->
+  <!-- intl-tel-input JS (defer: not needed for initial paint; used on checkout/account/login) -->
+  <!-- Note: utils.js is loaded automatically by intlTelInput via utilsScript option, don't load separately -->
+  <script src="https://cdn.jsdelivr.net/npm/intl-tel-input@23.0.0/build/js/intlTelInput.min.js" defer></script>
   
   <!-- Async Section Loader -->
   <script src="/assets/async-sections.min.js" defer></script>
   <script>
     // Initialize async section loader if sections are defined
     if (window.asyncSections && window.AsyncSectionLoader) {
-      document.addEventListener('DOMContentLoaded', function() {
+      document.addEventListener('DOMContentLoaded', () => {
         AsyncSectionLoader.init(window.asyncSections);
       });
     }
@@ -132,6 +191,22 @@
 
   {% include 'snippets/cart-drawer' %}
   
+  {% if autoOpenCartDrawer %}
+  <script>
+    // Auto-open cart drawer for cart page preview
+    document.addEventListener('DOMContentLoaded', () => {
+      setTimeout(() => {
+        var drawer = document.getElementById('cart-drawer') || 
+                     (window.__previewContainer && window.__previewContainer.querySelector('#cart-drawer'));
+        if (drawer) {
+          drawer.classList.add('active');
+          drawer.setAttribute('aria-hidden', 'false');
+        }
+      }, 500);
+    });
+  </script>
+  {% endif %}
+  
   {% if deliveryZone.enabled %}
     {% include 'snippets/delivery-zone-modal' %}
   {% endif %}
@@ -151,7 +226,7 @@
       </svg>
       <span class="mobile-bottom-nav__label">Home</span>
     </a>
-    <a href="/collections" class="mobile-bottom-nav__item" data-nav-item="categories" aria-label="Categories">
+    <a href="/categories" class="mobile-bottom-nav__item" data-nav-item="categories" aria-label="Categories">
       <svg class="mobile-bottom-nav__icon" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
         <rect x="3" y="3" width="7" height="7"></rect>
         <rect x="14" y="3" width="7" height="7"></rect>
@@ -188,8 +263,7 @@
     </button>
   </nav>
   
-  <!-- Plugin hooks for body end -->
+  <!-- app hooks for body end -->
   {% hook 'theme_body_end' %}
 </body>
 </html>
-

package/test-theme/sections/content.liquid

@@ -1,57 +1,64 @@
-{% comment %}
-  Content Section
-  
-  This section renders widgets from the "content" section in order.
-  Widgets are rendered one below another, sorted by Position field.
-  Supports drag-and-drop ordering in visual editor.
-{% endcomment %}
-
-{% assign content_widgets = widgets.content %}
-{% if content_widgets and content_widgets.size > 0 %}
-  <section class="theme-section theme-section--content" data-section="content" data-section-id="{{ section.id }}">
-    {% for widget in content_widgets %}
-      <div class="theme-widget-wrapper" 
-           data-widget-id="{{ widget.id }}" 
-           data-widget-type="{{ widget.type }}"
-           data-widget-position="{{ widget.Position | default: widget.position | default: forloop.index }}">
-        {{ widget | render_widget }}
-      </div>
-    {% endfor %}
-  </section>
-  <style>
-    .theme-section--content .theme-widget-wrapper {
-      display: block;
-      margin-bottom: 2rem;
-    }
-    .theme-section--content .theme-widget-wrapper:last-child {
-      margin-bottom: 0;
-    }
-    .widget-error {
-      padding: 1rem;
-      background: #fee2e2;
-      border: 1px solid #fecaca;
-      border-radius: 0.5rem;
-      color: #991b1b;
-      font-size: 0.875rem;
-    }
-  </style>
-{% else %}
-  {% render 'sections/content-fallback' %}
-{% endif %}
-
-{% schema %}
-{
-  "name": "Content",
-  "settings": [
-    {
-      "type": "paragraph",
-      "content": "This section displays widgets from the 'content' section. Widgets are automatically ordered by their Position field and can be reordered in the visual editor."
-    }
-  ],
-  "presets": [
-    {
-      "name": "Content"
-    }
-  ]
-}
-{% endschema %}
+{% comment %}
+  Content Section
+  
+  This section renders widgets from the "content" section in order.
+  Widgets are rendered one below another, sorted by Position field.
+  Supports drag-and-drop ordering in visual editor.
+{% endcomment %}
+
+{% assign content_widgets = widgets.content %}
+{% if content_widgets and content_widgets.size > 0 %}
+  <section class="theme-section theme-section--content" data-section="content" data-section-id="{{ section.id }}">
+    {% for widget in content_widgets %}
+      <div class="theme-widget-wrapper" 
+           data-widget-id="{{ widget.id }}" 
+           data-widget-type="{{ widget.type }}"
+           data-widget-position="{{ widget.Position | default: widget.position | default: forloop.index }}">
+        {% if widget and widget.template_path %}
+          {% render widget.template_path, widget: widget, settings: settings, shop: shop %}
+        {% else %}
+          <div class="widget-error" data-widget-error>
+            <p>Widget template not found: {{ widget.template_path | default: 'unknown' }}</p>
+            <p>Widget type: {{ widget.type | default: 'unknown' }}</p>
+          </div>
+        {% endif %}
+      </div>
+    {% endfor %}
+  </section>
+  <style>
+    .theme-section--content .theme-widget-wrapper {
+      display: block;
+      margin-bottom: 2rem;
+    }
+    .theme-section--content .theme-widget-wrapper:last-child {
+      margin-bottom: 0;
+    }
+    .widget-error {
+      padding: 1rem;
+      background: #fee2e2;
+      border: 1px solid #fecaca;
+      border-radius: 0.5rem;
+      color: #991b1b;
+      font-size: 0.875rem;
+    }
+  </style>
+{% else %}
+  {% render 'sections/content-fallback' %}
+{% endif %}
+
+{% schema %}
+{
+  "name": "Content",
+  "settings": [
+    {
+      "type": "paragraph",
+      "content": "This section displays widgets from the 'content' section. Widgets are automatically ordered by their Position field and can be reordered in the visual editor."
+    }
+  ],
+  "presets": [
+    {
+      "name": "Content"
+    }
+  ]
+}
+{% endschema %}

package/test-theme/sections/footer-fallback.liquid

@@ -15,7 +15,7 @@
           <h4>Shop</h4>
           <ul>
             <li><a href="/products">All Products</a></li>
-            <li><a href="/collections">Collections</a></li>
+            <li><a href="/categories">Categories</a></li>
             <li><a href="/search">Search</a></li>
           </ul>
         </div>
@@ -101,12 +101,17 @@
       </div>
     {% endif %}
     <div class="site-footer__bottom">
-      {% assign footer_text_value = settings.footer_text | default: section.settings.footer_text %}
-      {% if footer_text_value and footer_text_value != '' %}
-        <p>{{ footer_text_value }}</p>
-      {% else %}
-        <p>© {{ 'now' | date: '%Y' }} {{ shop.name }}. All rights reserved.</p>
-      {% endif %}
+      <div class="site-footer__bottom-left">
+        {% assign footer_text_value = settings.footer_text | default: section.settings.footer_text %}
+        {% if footer_text_value and footer_text_value != '' %}
+          <p>{{ footer_text_value }}</p>
+        {% else %}
+          <p>© {{ 'now' | date: '%Y' }} {{ shop.name }}. All rights reserved.</p>
+        {% endif %}
+        <p class="footer-powered">
+          Powered by <a href="https://o2vend.com" class="footer-powered-link" target="_blank" rel="noopener noreferrer">O2VEND</a>
+        </p>
+      </div>
       <div class="site-footer__bottom-links">
         <a href="/pages/privacy">Privacy</a>
         <a href="/pages/terms">Terms</a>
@@ -304,10 +309,34 @@
     display: flex;
     flex-wrap: wrap;
     justify-content: space-between;
+    align-items: flex-start;
     gap: 1rem;
     font-size: 0.85rem;
     color: {{ settings.color_text_light }};
   }
+  .site-footer__bottom-left {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    flex: 1;
+    min-width: 0;
+  }
+  .site-footer__bottom .footer-powered {
+    margin: 0;
+    color: {{ settings.color_text_light }};
+    font-size: 0.85rem;
+    line-height: 1.5;
+    display: block;
+    visibility: visible;
+  }
+  .site-footer__bottom .footer-powered-link {
+    color: {{ settings.color_text_light }};
+    text-decoration: underline;
+    transition: color 0.2s ease;
+  }
+  .site-footer__bottom .footer-powered-link:hover {
+    color: {{ settings.color_primary }};
+  }
   .site-footer__bottom-links {
     display: inline-flex;
     gap: 1rem;
@@ -323,6 +352,27 @@
     .site-footer__fallback-inner {
       grid-template-columns: minmax(0, 1fr);
     }
+    .site-footer__bottom {
+      flex-direction: column;
+      align-items: center;
+      text-align: center;
+    }
+    .site-footer__bottom-left {
+      width: 100%;
+      align-items: center;
+      text-align: center;
+    }
+    .site-footer__bottom .footer-powered {
+      display: block !important;
+      visibility: visible !important;
+      text-align: center;
+      margin-top: 0.5rem;
+    }
+    .site-footer__bottom-links {
+      justify-content: center;
+      width: 100%;
+      margin-top: 0.5rem;
+    }
   }
 </style>
 

package/test-theme/sections/footer.liquid

@@ -27,7 +27,7 @@
 
 {%- comment -%} Debug: Log widget rendering information {%- endcomment -%}
 <script>
-  (function() {
+  (() => {
     console.log('[FooterSection] Footer section rendering');
     console.log('[FooterSection] Footer widgets count:', {{ footer_widgets.size | default: 0 }});
     console.log('[FooterSection] Footer menu widget found:', {{ footer_menu_widget | default: nil | json }});
@@ -67,7 +67,7 @@
            data-widget-id="{{ footer_menu_widget.id }}"
            data-widget-type="FooterMenu"
            data-footer-menu-wrapper="true">
-        {% render footer_menu_widget.template_path | default: 'widgets/footer-menu', widget: footer_menu_widget, settings: settings %}
+        {% render footer_menu_widget.template_path | default: 'widgets/footer-menu', widget: footer_menu_widget, settings: settings, shop: shop %}
       </div>
       <script>
         console.log('[FooterSection] FooterMenu widget rendered with ID: {{ footer_menu_widget.id }}');
@@ -77,7 +77,7 @@
       <div class="theme-widget-wrapper"
            data-widget-type="FooterMenu"
            data-footer-menu-wrapper="true">
-        {% render 'widgets/footer-menu', widget: nil, settings: settings %}
+        {% render 'widgets/footer-menu', widget: nil, settings: settings, shop: shop %}
       </div>
       <script>
         console.warn('[FooterSection] FooterMenu widget not found in widgets, but footer menu container is rendered to auto-fetch menus');
@@ -97,7 +97,7 @@
                data-widget-type="{{ widget.type }}"
                data-widget-position="{{ widget.Position | default: widget.position | default: forloop.index }}">
             {% if widget and widget.template_path %}
-              {% render widget.template_path, widget: widget, settings: settings %}
+              {% render widget.template_path, widget: widget, settings: settings, shop: shop %}
             {% else %}
               <div class="widget-error" data-widget-error>
                 <p>Widget template not found</p>
@@ -115,13 +115,18 @@
 <div class="theme-section theme-section--below-footer">
   <div class="below-footer-container">
     <div class="below-footer-content">
-      <p class="below-footer-text">
-        {% if section.settings.footer_text and section.settings.footer_text != '' %}
-          {{ section.settings.footer_text }}
-        {% else %}
-          © {{ 'now' | date: '%Y' }} {{ shop.domain }}. All rights reserved.
-        {% endif %}
-      </p>
+      <div class="below-footer-left">
+        <p class="below-footer-text">
+          {% if section.settings.footer_text and section.settings.footer_text != '' %}
+            {{ section.settings.footer_text }}
+          {% else %}
+            © {{ 'now' | date: '%Y' }} {{ shop.domain }}. All rights reserved.
+          {% endif %}
+        </p>
+        <p class="footer-powered">
+          Powered by <a href="https://o2vend.com" class="footer-powered-link" target="_blank" rel="noopener noreferrer">O2VEND</a>
+        </p>
+      </div>
       
       {% if section.settings.show_social_links %}
         <div class="below-footer-social">
@@ -183,8 +188,17 @@
   .below-footer-content {
     display: flex;
     justify-content: space-between;
-    align-items: center;
+    align-items: flex-start;
     gap: 2rem;
+    overflow: visible;
+  }
+  
+  .below-footer-left {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    flex: 1;
+    min-width: 0;
   }
   
   .below-footer-text {
@@ -192,6 +206,25 @@
     color: #9ca3af;
   }
   
+  .footer-powered {
+    margin: 0;
+    color: #9ca3af;
+    font-size: 0.875rem;
+    line-height: 1.5;
+    display: block;
+    visibility: visible;
+  }
+  
+  .footer-powered-link {
+    color: #9ca3af;
+    text-decoration: underline;
+    transition: color 0.2s ease;
+  }
+  
+  .footer-powered-link:hover {
+    color: #ffffff;
+  }
+  
   .below-footer-social {
     display: flex;
     gap: 1rem;
@@ -240,6 +273,24 @@
       flex-direction: column;
       text-align: center;
       gap: 1rem;
+      align-items: center;
+    }
+    
+    .below-footer-left {
+      align-items: center;
+      text-align: center;
+      width: 100%;
+    }
+    
+    .below-footer-text {
+      text-align: center;
+    }
+    
+    .footer-powered {
+      display: block !important;
+      visibility: visible !important;
+      text-align: center;
+      margin-top: 0.5rem;
     }
     
     .below-footer-social {