diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS
new file mode 100644
index 0000000..abcad51
--- /dev/null
+++ b/.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
diff --git a/README.md b/README.md
index a7192e1..ac4a7fe 100644
--- a/README.md
+++ b/README.md
@@ -45,15 +45,14 @@ In the below example, this component finds the closest parent with the class `sh
```html
-
-
+
-
+
```
@@ -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
diff --git a/package.json b/package.json
index 6391b97..f11ca86 100644
--- a/package.json
+++ b/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",
diff --git a/src/liquid-section-renderer.js b/src/liquid-section-renderer.js
index 16d10c3..d0fbae7 100644
--- a/src/liquid-section-renderer.js
+++ b/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,26 +145,26 @@ 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, 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];
@@ -172,7 +172,7 @@ class LiquidSectionRenderer extends HTMLElement {
// Validate updates structure
if (!this._isValidUpdates(updates)) {
- throw new Error('🚫 Invalid `updates` structure');
+ throw new Error('Invalid `updates` structure');
}
this._toggleLoading();