Used outside of Shopify section

.github/CODEOWNERS

@@ -0,0 +1,5 @@
+# These owners will be the default owners for everything in
+# the repo. Unless a later match takes precedence,
+# @darcyvoutt will be requested for review when someone
+# opens a pull request.
+*       @darcyvoutt

README.md

@@ -45,15 +45,14 @@ In the below example, this component finds the closest parent with the class `sh
 
 ```html
 <section id="shopify-section-template--12345678909876__main" class="shopify-section section">
-  <!-- Section content before -->
-
+  <!-- Section content before : copy from here -->
   <liquid-section-renderer>
     <button trigger>
       Click to replace Shopify section
     </button>
   </liquid-section-renderer>
 
-  <!-- Section content after -->
+  <!-- Section content after : copy to here -->
 </section>
 ```
 
@@ -283,7 +282,7 @@ The component dispatches the following events during the section rendering lifec
 
 The component includes built-in error handling for the following scenarios:
 
-- If neither `updates` array nor both `section` and `destination` attributes are provided, an error will be thrown
+- If neither `updates` array nor both `section` and `destination` attributes are provided, it will infer the current section it is within
 - If the provided `updates` array structure is invalid, an error will be thrown
 - If a section render request fails or times out, a `liquid-render-error` event will be dispatched
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "liquid-section-renderer",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "type": "module",
   "description": "A web component that simplifies using Shopify's Section Rendering API.",
   "main": "dist/liquid-section-renderer.js",

src/liquid-section-renderer.js

@@ -1,6 +1,6 @@
 /**
  * LiquidSectionRenderer - A web component for dynamically rendering Liquid sections
- * 
+ *
  * Features:
  * - Dynamic section rendering via AJAX
  * - Support for multiple trigger types (click, submit, input, etc.)
@@ -68,12 +68,12 @@ class LiquidSectionRenderer extends HTMLElement {
 
     // Parent Attributes
     this.debounceTime = parseInt(this.getAttribute('debounce'), 10) || 300;
+    this.historyMode = this.getAttribute('history-mode') || 'replace';
     this.id = this.getAttribute('id') || `${Math.random().toString(36).substring(2, 10)}`;
     this.intersectMargin = `${this.getAttribute('intersect-margin') || 0}px`;
     this.intersectThreshold = (parseFloat(this.getAttribute('intersect-threshold')) / 100) || 0.1;
     this.loadingSelector = this.getAttribute('loading-selector') || null;
     this.loadingClass = this.getAttribute('loading-class') || null;
-    this.historyMode = this.getAttribute('history-mode') || 'replace';
     this.scoped = (this.getAttribute('scoped') || 'true').toLowerCase() === 'true';
     this.timeout = parseInt(this.getAttribute('timeout'), 10) || 5000;
     this.updateTitle = this.getAttribute(this._attrs.updateTitle) || null;
@@ -145,34 +145,34 @@ class LiquidSectionRenderer extends HTMLElement {
 
       // Get section and destination from trigger element with single action
       if (!updates.length) {
+        const closestSection = this._getClosestSection(trigger);
         const updateMode = trigger.getAttribute(this._attrs.mode) || 'replace';
         const query = trigger.getAttribute(this._attrs.query) || null;
         let section = trigger.getAttribute(this._attrs.section) || null;
         let destination = trigger.getAttribute(this._attrs.destination) || null;
 
+        if ((!section || !destination) && !closestSection) {
+          console.warn(`If no 'section' or 'destination' attributes are set, <liquid-section-renderer> must be within a section with class '${this._shopifyAttrs.section}'.`);
+          throw new Error(`Instance "${this.id}" could not find closest parent Shopify section.`);
+        }
+
         // Set scope to false if section and destination is not set
-        if (!section && !destination) {
+        if ((!section && !destination) && closestSection) {
           this.scoped = false;
         }
 
-        // If section or destination is not set, get it from the closest section
-        if (!section) section = this._getClosestSection(trigger).section;
-        if (!destination) destination = this._getClosestSection(trigger).destination;
-
-        console.log('destination', destination);
-        console.log('section', section);
 
-        if (!section || !destination) {
-          throw new Error('Either `section` or `destination` attributes are required');
-        }
+        // If section or destination is not set, get it from the closest section
+        if (!section) section = closestSection.section;
+        if (!destination) destination = closestSection.destination;
 
         updates = [{ section, destination, updateMode, query }];
         sections = [section];
       }
 
       // Validate updates structure
       if (!this._isValidUpdates(updates)) {
-        throw new Error('🚫 Invalid `updates` structure');
+        throw new Error('Invalid `updates` structure');
       }
 
       this._toggleLoading();