New Image Banner section type (#397)

PlebeianApp · Feb 15, 2024 · 2daefea · 2daefea
1 parent c3ef16d
commit 2daefea
Show file tree

Hide file tree

Showing 6 changed files with 49 additions and 17 deletions.
diff --git a/web/frontoffice/package-lock.json b/web/frontoffice/package-lock.json
diff --git a/web/frontoffice/package.json b/web/frontoffice/package.json
@@ -8,7 +8,7 @@
     "@tailwindcss/typography": "^0.5.10",
     "@typescript-eslint/eslint-plugin": "^6.21.0",
     "autoprefixer": "^10.4.17",
-    "daisyui": "^4.6.2",
+    "daisyui": "^4.7.2",
     "eslint": "^8.56.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-prettier": "^5.1.3",

diff --git a/web/shared/src/lib/components/pagebuilder/BuilderSectionSetup.svelte b/web/shared/src/lib/components/pagebuilder/BuilderSectionSetup.svelte
@@ -12,6 +12,7 @@
 
     let sectionType;
     let maxProductsShown;
+    let imageBannerURL;
     let sectionTitle;
 
     let getLexicalContent;
@@ -89,6 +90,7 @@
         sectionTitle = page?.sections[sectionId]?.title ?? '';
         sectionType = page?.sections[sectionId]?.params?.sectionType ?? null;
         maxProductsShown = page?.sections[sectionId]?.params?.maxProductsShown ?? 0;
+        imageBannerURL = page?.sections[sectionId]?.params?.imageBannerURL ?? '';
 
         if (sectionType === 'text') {
             getTextConfigFromNostr()
@@ -110,6 +112,7 @@
             sectionTitle,
             sectionType,
             maxProductsShown,
+            imageBannerURL,
             lexicalContent,
             lastProductPassed
         });
@@ -165,6 +168,13 @@
                         </div>
                     {/if}
 
+                    {#if sectionType === 'image_banner'}
+                        <div class="mt-8">
+                            Image to show in the section:
+                            <input type="text" placeholder="Image URL to be used as banner" class="mt-2 input input-bordered input-sm w-full max-w-xs" bind:value={imageBannerURL} />
+                        </div>
+                    {/if}
+
                     {#if browser && sectionType === 'text' || (sectionType === 'products_with_slider' && lastProductPassed)}
                         <div class="mt-8">
                             {#key initialMinifiedLexicalContent}

diff --git a/web/shared/src/lib/components/pagebuilder/Sections.svelte b/web/shared/src/lib/components/pagebuilder/Sections.svelte
@@ -7,6 +7,7 @@
     import SectionsProducts from "$sharedLib/components/pagebuilder/SectionsProducts.svelte";
     import SectionsText from "$sharedLib/components/pagebuilder/SectionsText.svelte";
     import SectionsProductsSlider from "$sharedLib/components/pagebuilder/SectionsProductsSlider.svelte";
+    import SectionsImageBanner from "$sharedLib/components/pagebuilder/SectionsImageBanner.svelte";
     import BuilderSectionSetup from "$sharedLib/components/pagebuilder/BuilderSectionSetup.svelte";
     import Edit from "$sharedLib/components/icons/Edit.svelte";
 
@@ -39,16 +40,18 @@
     {#if content?.sections && Object.keys(content.sections).length > 0}
         <div class="pt-12">
             {#each orderedSections as [sectionId, section]}
-                {#if section?.params?.sectionType && (section?.values || section.params.sectionType === 'text')}
+                {#if section?.params?.sectionType && (section?.values || ['text', 'image_banner'].includes(section.params.sectionType))}
                     <div class="relative overflow-x-hidden">
-                        <h2 class="text-2xl font-bold text-center mb-2 md:mb-5">
-                            {section.title}
-                            {#if $isSuperAdmin}
-                                <button class="btn btn-square ml-2" on:click={() => setupSection(pageId, sectionId, null, true)}>
-                                    <span class="size-6"><Edit /></span>
-                                </button>
-                            {/if}
-                        </h2>
+                        {#if section.params.sectionType !== 'image_banner'}
+                            <h2 class="text-2xl font-bold text-center mb-2 md:mb-5">
+                                {section.title}
+                                {#if $isSuperAdmin}
+                                    <button class="btn btn-square ml-2" on:click={() => setupSection(pageId, sectionId, null, true)}>
+                                        <span class="size-6"><Edit /></span>
+                                    </button>
+                                {/if}
+                            </h2>
+                        {/if}
 
                         {#if section?.params?.sectionType === 'text'}
                             <SectionsText {pageId} {sectionId} />
@@ -58,6 +61,8 @@
                             <SectionsProducts {pageId} {sectionId} />
                         {:else if section?.params?.sectionType === 'products_with_slider'}
                             <SectionsProductsSlider {pageId} {sectionId} {setupSection} />
+                        {:else if section?.params?.sectionType === 'image_banner'}
+                            <SectionsImageBanner {section} />
                         {:else if section?.params?.sectionType === 'stall_products'}
                             ----- Stall Products
                         {/if}

diff --git a/web/shared/src/lib/components/pagebuilder/SectionsImageBanner.svelte b/web/shared/src/lib/components/pagebuilder/SectionsImageBanner.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+    export let section;
+</script>
+
+{#if section?.params?.imageBannerURL}
+    <img class="w-full h-auto" src="{section?.params?.imageBannerURL}" alt="Banner Section" />
+{/if}
diff --git a/web/shared/src/lib/pagebuilder.ts b/web/shared/src/lib/pagebuilder.ts
@@ -31,6 +31,12 @@ export const pageBuilderWidgetType = {
         'items': ['stalls'],
         'max_num_available': false
     },
+    image_banner: {
+        'title': 'Image Banner',
+        'description': 'This widget allows you to show an image banner in a section',
+        'items': false,
+        'max_num_available': false
+    },
     /*
     stall_products: {
         'title': 'Show all Products from several stalls',
@@ -378,6 +384,10 @@ export function saveSectionSetup(pageId, sectionId, setupParams) {
 
     section.params.sectionType = setupParams.sectionType;
 
+    if (setupParams.sectionType === 'image_banner') {
+        section.params.imageBannerURL = setupParams.imageBannerURL ?? '';
+    }
+
     if (setupParams.maxProductsShown && setupParams.maxProductsShown != 0) {
         section.params.maxProductsShown = setupParams.maxProductsShown;
     }