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();