From b1ba9091eb807b5d30b89a7b402a4e76691eb86a Mon Sep 17 00:00:00 2001 From: Darcy Voutt Date: Tue, 8 Jul 2025 13:32:39 -0400 Subject: [PATCH 1/4] feat: infer current section when no section/destination attributes provided --- README.md | 7 +++---- package.json | 2 +- src/liquid-section-renderer.js | 24 ++++++++++++------------ 3 files changed, 16 insertions(+), 17 deletions(-) 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 f0f8a58..6391b97 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "liquid-section-renderer", - "version": "0.1.1", + "version": "0.1.2", "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..474699d 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.) @@ -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(); From 855e9ad83dafab504af6453dc33074682cb99c5c Mon Sep 17 00:00:00 2001 From: Darcy Voutt Date: Tue, 8 Jul 2025 14:12:20 -0400 Subject: [PATCH 2/4] move: historyMode higher to be alphabetical --- src/liquid-section-renderer.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/liquid-section-renderer.js b/src/liquid-section-renderer.js index 474699d..99ab46d 100644 --- a/src/liquid-section-renderer.js +++ b/src/liquid-section-renderer.js @@ -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; From 2e9ac4189d265af4b99f974f61af7a33a3805703 Mon Sep 17 00:00:00 2001 From: Darcy Voutt Date: Tue, 8 Jul 2025 14:36:02 -0400 Subject: [PATCH 3/4] fix: use single quotes in console warning message for consistency --- src/liquid-section-renderer.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/liquid-section-renderer.js b/src/liquid-section-renderer.js index 99ab46d..d0fbae7 100644 --- a/src/liquid-section-renderer.js +++ b/src/liquid-section-renderer.js @@ -152,7 +152,7 @@ class LiquidSectionRenderer extends HTMLElement { 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}".`); + 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.`); } From 0899f2e0322925d1e21aec879ec7f167ac29fae5 Mon Sep 17 00:00:00 2001 From: Darcy Voutt Date: Tue, 8 Jul 2025 18:54:54 -0400 Subject: [PATCH 4/4] add: CODEOWNERS update: version --- .github/CODEOWNERS | 5 +++++ package.json | 2 +- 2 files changed, 6 insertions(+), 1 deletion(-) create mode 100644 .github/CODEOWNERS 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/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",