From 64b568cfaf152b948f7b2fd0339aeff6da07b7dd Mon Sep 17 00:00:00 2001 From: Daniel O'Kane Date: Mon, 4 Nov 2024 17:35:08 -0500 Subject: [PATCH 1/2] WIP on bugfix/PM-637-ca-pet-tags --- blocks/pet-tags/pet-tags.css | 22 +++++++++ blocks/pet-tags/pet-tags.js | 92 ++++++++++++++++++++++-------------- 2 files changed, 78 insertions(+), 36 deletions(-) diff --git a/blocks/pet-tags/pet-tags.css b/blocks/pet-tags/pet-tags.css index 9cc57bac..07e670ac 100644 --- a/blocks/pet-tags/pet-tags.css +++ b/blocks/pet-tags/pet-tags.css @@ -101,6 +101,28 @@ form[id^="pet-tags-"] .radio-wrapper>input[type="radio"]:checked+label img { border: 0.25rem solid var(--button-secondary-color); } +form[id^="pet-tags-"] .col1 a:any-link { + font-family: var(--body-font-family); + display: block; + box-sizing: border-box; + text-decoration: none; + border: 2px solid transparent; + padding: 0.875rem 1.625rem; + text-align: center; + font-size: 1rem; + font-style: normal; + font-weight: 600; + cursor: pointer; + color: var(--background-color); + background-color: var(--button-primary-color); + margin: 6px auto; + width: 80%; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + border-radius: 0.625rem; +} + @media screen and (width >=768px) { form[id^="pet-tags-"] .grid-wrapper-x4 { grid-template-columns: repeat(4, 1fr); diff --git a/blocks/pet-tags/pet-tags.js b/blocks/pet-tags/pet-tags.js index 92c9597b..bc958ab8 100644 --- a/blocks/pet-tags/pet-tags.js +++ b/blocks/pet-tags/pet-tags.js @@ -1,13 +1,7 @@ import { jsx } from '../../scripts/scripts.js'; -// link to the 24PetWatch website to buy pet tags -const buyNowLink = 'https://www.24petwatch.com/ca/lost-pet-protection/pet-tags/tag-quote'; // path to the images for pet tags const imagePath = '/images/tags/'; -// prices for pet tags -const pricePerTagMetal = 19.95; -const pricePerTagLifetimeSmall = 19.95; -const pricePerTagLifetimeLarge = 19.95; function updateTagImage() { // lifetime tags @@ -31,31 +25,67 @@ function updateTagImage() { } export default async function decorate(block) { + const blockMetadata = {}; + + // eslint-disable-next-line no-restricted-syntax + for (const row of block.children) { + let key = row.children[0].textContent; + + key = key.replace(/(?:^\w|[A-Z]|\b\w|\s+)/g, (match, index) => { + if (+match === 0) return ''; + return index === 0 ? match.toLowerCase() : match.toUpperCase(); + }); + + const value = row.children[1].innerHTML; + if (key) { + blockMetadata[key] = value; + } + } + + const { + primaryTagHeaderTitle, + primaryTagHeaderContent1Top, + primaryTagHeaderContent1Bottom, + primaryTagHeaderContent2Top, + primaryTagHeaderContent2Bottom, + primaryTagCTA, + primaryTagColumn2Title, + primaryTagColumn3Title, + primaryTagColumn4Title, + primaryTagColumn4Description, + secondaryTagHeaderTitle, + secondaryTagHeaderContent1Top, + secondaryTagHeaderContent1Bottom, + secondaryTagCTA, + secondaryTagColumn2Title, + secondaryTagColumn3Title, + secondaryTagColumn4Title, + secondaryTagColumn4Description, + } = blockMetadata; + block.innerHTML = jsx`
-

Lifetime Warranty ID Tags

+

${primaryTagHeaderTitle}

-

Small: $${pricePerTagLifetimeSmall}

-

(plus shipping)

+

${primaryTagHeaderContent1Top}

+

${primaryTagHeaderContent1Bottom}

-

Large: $${pricePerTagLifetimeLarge}

-

(plus shipping)

+

${primaryTagHeaderContent2Top}

+

${primaryTagHeaderContent2Bottom}

traditional bone lifetime tag - - - + ${primaryTagCTA}
-
Choose from 2 prints:
+
${primaryTagColumn2Title}
@@ -74,7 +104,7 @@ export default async function decorate(block) {
-
Choose from 2 shapes:
+
${primaryTagColumn3Title}
@@ -93,13 +123,8 @@ export default async function decorate(block) {
-
Key features:
-
    -
  • Made of steel with a special coating for a porcelain look and feel
    • -
  • Lifetime warranty if the tag is damaged or unreadable (not if it's lost)
    • -
  • Long lasting and durable
    • -
  • Includes your pet's name and unique microchip number
    • -
+
${primaryTagColumn4Title}
+ ${primaryTagColumn4Description}
@@ -107,22 +132,20 @@ export default async function decorate(block) {
-

Standard Metal ID Tags

+

${secondaryTagHeaderTitle}

-

$${pricePerTagMetal}

-

(plus shipping)

+

${secondaryTagHeaderContent1Top}

+

${secondaryTagHeaderContent1Bottom}

teal heart metal tag - - - + ${secondaryTagCTA}
-
Choose from 3 colors:
+
${secondaryTagColumn2Title}
@@ -148,7 +171,7 @@ export default async function decorate(block) {
-
Choose from 2 shapes:
+
${secondaryTagColumn3Title}
@@ -167,11 +190,8 @@ export default async function decorate(block) {
-
Key features:
-
    -
  • Long lasting and durable
    • -
  • Includes your pet's name and unique microchip number
    • -
+
${secondaryTagColumn4Title}
+ ${secondaryTagColumn4Description}
From 4e5f04f26a31da2532a611ffe3c6de0974933acc Mon Sep 17 00:00:00 2001 From: hero-dokane <46008504+hero-dokane@users.noreply.github.com> Date: Thu, 7 Nov 2024 13:41:03 -0500 Subject: [PATCH 2/2] PM-694 Updates to address css/js 404s (#277) --- blocks/callout-get-a-quote/callout-get-a-quote.css | 1 - blocks/default-block/default-block.css | 1 + .../default-block.js} | 0 blocks/pumpkin-wellness-club/pumpkin-wellness-club.js | 0 templates/paid-blog-page/paid-blog-page.css | 5 ++--- 5 files changed, 3 insertions(+), 4 deletions(-) delete mode 100644 blocks/callout-get-a-quote/callout-get-a-quote.css create mode 100644 blocks/default-block/default-block.css rename blocks/{callout-get-a-quote/callout-get-a-quote.js => default-block/default-block.js} (100%) create mode 100644 blocks/pumpkin-wellness-club/pumpkin-wellness-club.js diff --git a/blocks/callout-get-a-quote/callout-get-a-quote.css b/blocks/callout-get-a-quote/callout-get-a-quote.css deleted file mode 100644 index f1ee43e5..00000000 --- a/blocks/callout-get-a-quote/callout-get-a-quote.css +++ /dev/null @@ -1 +0,0 @@ -/* eslint-disable no-empty-source */ diff --git a/blocks/default-block/default-block.css b/blocks/default-block/default-block.css new file mode 100644 index 00000000..5c9bd28b --- /dev/null +++ b/blocks/default-block/default-block.css @@ -0,0 +1 @@ +/* eslint-disable no-empty-source */ \ No newline at end of file diff --git a/blocks/callout-get-a-quote/callout-get-a-quote.js b/blocks/default-block/default-block.js similarity index 100% rename from blocks/callout-get-a-quote/callout-get-a-quote.js rename to blocks/default-block/default-block.js diff --git a/blocks/pumpkin-wellness-club/pumpkin-wellness-club.js b/blocks/pumpkin-wellness-club/pumpkin-wellness-club.js new file mode 100644 index 00000000..e69de29b diff --git a/templates/paid-blog-page/paid-blog-page.css b/templates/paid-blog-page/paid-blog-page.css index 51044c14..776cea24 100644 --- a/templates/paid-blog-page/paid-blog-page.css +++ b/templates/paid-blog-page/paid-blog-page.css @@ -98,7 +98,7 @@ font-size: 1.5rem; } -.callout-get-a-quote { +div[class*='callout-get-a-quote'] { padding: 1.5rem; background-color: #D6F7FA; border-radius: 8px; @@ -166,8 +166,7 @@ top: 120px; } - .callout-get-a-quote { - + div[class*='callout-get-a-quote'] { > div > div { display: flex; align-items: center;