Skip to content

Commit 34f7c57

Browse files
skeptrunedevcdxker
skeptrunedev
authored and
cdxker
committed
feat(shopify): implement add question and pagination
1 parent 5729d66 commit 34f7c57

2 files changed

Lines changed: 123 additions & 28 deletions

File tree

‎clients/trieve-shopify-extension/extensions/global-search/blocks/inline_component.liquid‎

Lines changed: 11 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,16 @@
11
<link
22
rel="stylesheet"
33
href="https://cdn.trieve.ai/beta/search-component/index.css"
4-
/>
4+
>
55

6-
<div class="trieve-inline-root">
7-
</div>
6+
<div class="trieve-inline-root"></div>
87

98
<script type="module">
109
import {renderToDiv} from 'https://cdn.trieve.ai/beta/search-component/vanilla/index.js';
1110
import {addToCart, checkCartQuantity} from '{{'cart-manager.js' | asset_url}}';
1211
1312
const inlineRoot = document.querySelector(".trieve-inline-root");
14-
console.log("root", inlineRoot,"please", "{{ block.settings.product.title }}", "{{ block.settings.product.id }}");
13+
console.log("root", inlineRoot,"please", "metafields {{ app.metafields }}", "{{ block.settings.product.id }}", "{{ block.settings.product.metafields }}");
1514
1615
const toBool = (value) => value === 'true';
1716
const getValue = (value, defaultValue) => {
@@ -48,10 +47,8 @@
4847
return checkCartQuantity(parseInt(trackingId));
4948
},
5049
});
51-
5250
</script>
5351

54-
5552
{% comment %}
5653
see more about the schema section here. https://shopify.dev/docs/storefronts/themes/architecture/sections/section-schema#schema
5754
@@ -73,8 +70,8 @@
7370
"id": "default_search_mode",
7471
"label": "Default Search Mode",
7572
"options": [
76-
{"label": "Search", "value": "search"},
77-
{"label": "Chat", "value": "chat"}
73+
{ "label": "Search", "value": "search" },
74+
{ "label": "Chat", "value": "chat" }
7875
],
7976
"default": "chat"
8077
},
@@ -95,8 +92,8 @@
9592
"id": "theme",
9693
"label": "Theme",
9794
"options": [
98-
{"label": "Light", "value": "light"},
99-
{"label": "Dark", "value": "dark"}
95+
{ "label": "Light", "value": "light" },
96+
{ "label": "Dark", "value": "dark" }
10097
],
10198
"default": "light"
10299
},
@@ -129,8 +126,8 @@
129126
"id": "type",
130127
"label": "Modal Type",
131128
"options": [
132-
{"label": "Docs", "value": "docs"},
133-
{"label": "E-commerce", "value": "ecommerce"}
129+
{ "label": "Docs", "value": "docs" },
130+
{ "label": "E-commerce", "value": "ecommerce" }
134131
],
135132
"default": "docs"
136133
},
@@ -149,12 +146,12 @@
149146
{
150147
"type": "text",
151148
"id": "inline_header",
152-
"label": "Inline Header",
149+
"label": "Inline Header"
153150
},
154151
{
155152
"type": "number",
156153
"id": "z_index",
157-
"label": "Z-Index",
154+
"label": "Z-Index"
158155
}
159156
]
160157
}

‎clients/trieve-shopify-extension/extensions/issue-tracker-block/src/BlockExtension.tsx‎

Lines changed: 112 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ import {
1111
Box,
1212
Divider,
1313
BlockStack,
14+
TextField,
1415
} from "@shopify/ui-extensions-react/admin";
1516
import { SuggestedQueriesResponse, TrieveSDK } from "trieve-ts-sdk";
1617

@@ -181,6 +182,9 @@ function App() {
181182
);
182183
const [loading, setLoading] = useState(true);
183184
const [PDPQuestions, setPDPQuestions] = useState<TrievePDPQuestion[]>([]);
185+
const [indexBeingEdited, setIndexBeingEdited] = useState<number | null>(null);
186+
const [currentPage, setCurrentPage] = useState(1);
187+
const [totalPages, setTotalPages] = useState(1);
184188

185189
const productId = data.selected[0].id;
186190

@@ -194,7 +198,6 @@ function App() {
194198
return;
195199
}
196200

197-
// write a context that describes the product and the type of questions you want to generate
198201
let context = `Suggest short questions limited to 3-6 words which someone might have about the following product: \n\n`;
199202
if (curProductDetails.title) {
200203
context += `The product is titled "${curProductDetails.title}"`;
@@ -309,13 +312,19 @@ function App() {
309312
});
310313
}, [PDPQuestions, productDetails, loading]);
311314

315+
useEffect(() => {
316+
if (PDPQuestions.length) {
317+
setTotalPages(Math.ceil(PDPQuestions.length / 3));
318+
}
319+
}, [PDPQuestions]);
320+
312321
return loading ? (
313322
<InlineStack blockAlignment="center" inlineAlignment="center">
314323
<ProgressIndicator size="large-100" />
315324
</InlineStack>
316325
) : (
317326
<AdminBlock title={i18n.translate("name")}>
318-
<BlockStack gap="base">
327+
<BlockStack gap="small small">
319328
<InlineStack blockAlignment="center" inlineAlignment="space-between">
320329
<Box inlineSize="40%">
321330
<Text fontWeight="bold">{i18n.translate("title")}</Text>
@@ -341,7 +350,22 @@ function App() {
341350
</Text>
342351
</InlineStack>
343352
</Button>
344-
<Button>
353+
<Button
354+
onClick={() => {
355+
setPDPQuestions((prevPDPQuestions) => [
356+
{
357+
id: "0",
358+
text: "",
359+
},
360+
...prevPDPQuestions.map((question, i) => ({
361+
...question,
362+
id: (i + 1).toString(),
363+
})),
364+
]);
365+
setIndexBeingEdited(0);
366+
setCurrentPage(1);
367+
}}
368+
>
345369
<InlineStack blockAlignment="center" gap="small small">
346370
<Icon name="PlusMinor" />
347371
<Text>Add Question</Text>
@@ -352,6 +376,10 @@ function App() {
352376
<Box inlineSize="100%">
353377
<>
354378
{PDPQuestions.map(({ id, text }, index) => {
379+
if (index < (currentPage - 1) * 3 || index >= currentPage * 3) {
380+
return null;
381+
}
382+
355383
return (
356384
<>
357385
{index > 0 && <Divider />}
@@ -363,20 +391,65 @@ function App() {
363391
gap="large"
364392
>
365393
<Box inlineSize="100%">
366-
<Text textOverflow="ellipsis">{text}</Text>
367-
</Box>
368-
<Box inlineSize="25%">
369-
<InlineStack inlineSize="100%" inlineAlignment="end">
370-
<Button
371-
onPress={() => {
394+
{index === indexBeingEdited ? (
395+
<TextField
396+
label=""
397+
value={text}
398+
onChange={(value) => {
372399
setPDPQuestions((prevPDPQuestions) =>
373-
prevPDPQuestions.filter((_, i) => i !== index),
400+
prevPDPQuestions.map((question, i) =>
401+
i === index
402+
? { ...question, text: value }
403+
: question,
404+
),
374405
);
375406
}}
376-
variant="tertiary"
377-
>
378-
<Icon name="DeleteMinor" />
379-
</Button>
407+
/>
408+
) : (
409+
<Text textOverflow="ellipsis">{text}</Text>
410+
)}
411+
</Box>
412+
<Box inlineSize="25%">
413+
<InlineStack
414+
inlineSize="100%"
415+
inlineAlignment="end"
416+
blockAlignment="center"
417+
>
418+
{index === indexBeingEdited ? (
419+
<>
420+
<Button
421+
onClick={() => {
422+
setIndexBeingEdited(null);
423+
}}
424+
variant="primary"
425+
>
426+
<Text>Finish</Text>
427+
</Button>
428+
</>
429+
) : (
430+
<>
431+
<Button
432+
onClick={() => {
433+
setIndexBeingEdited(index);
434+
}}
435+
variant="tertiary"
436+
>
437+
<Icon name="EditMinor" />
438+
</Button>
439+
<Button
440+
onClick={() => {
441+
setPDPQuestions((prevPDPQuestions) =>
442+
prevPDPQuestions.filter(
443+
(_, i) => i !== index,
444+
),
445+
);
446+
}}
447+
variant="tertiary"
448+
>
449+
<Icon name="DeleteMinor" />
450+
</Button>
451+
</>
452+
)}
380453
</InlineStack>
381454
</Box>
382455
</InlineStack>
@@ -386,6 +459,31 @@ function App() {
386459
})}
387460
</>
388461
</Box>
462+
<InlineStack
463+
paddingBlockStart="large"
464+
blockAlignment="center"
465+
inlineAlignment="center"
466+
>
467+
<Button
468+
onPress={() => setCurrentPage((prev) => prev - 1)}
469+
disabled={currentPage === 1}
470+
>
471+
<Icon name="ChevronLeftMinor" />
472+
</Button>
473+
<InlineStack
474+
inlineSize={25}
475+
blockAlignment="center"
476+
inlineAlignment="center"
477+
>
478+
<Text>{currentPage}</Text>
479+
</InlineStack>
480+
<Button
481+
onPress={() => setCurrentPage((prev) => prev + 1)}
482+
disabled={currentPage >= totalPages}
483+
>
484+
<Icon name="ChevronRightMinor" />
485+
</Button>
486+
</InlineStack>
389487
</BlockStack>
390488
</AdminBlock>
391489
);

0 commit comments

Comments
 (0)